HTML示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--HTML区域--> <h1>第一个标题</h1> <img src="57eb.jpg"> <div class="nav-2014"> <div class="w"> <div class="w-spacer"></div> <div class="categorys"> <div class="dt">家用电器分类</div> <div class="dp">家用电器价格</div> <img src="rB3.jpg"> </div> <span class="hr">11</span> <div class="navitems-2014 chr1 chr2"> <div id="treasure"></div> <span class="clr clr1"></span> <span class="chr"></span> 男:<input type="checkbox" value="nan"> 女:<input type="checkbox" value="nv"> <input type="text" value="2"> <input type="text" value="3"> </div> <ul> <li>第一行</li> <li>第二行</li> <li>第三行</li> <li>第四行</li> </ul> </div> </div> <h2>第二个标题</h2> <p>第一段</p> <p>第二段</p> </body> </html>
属性:
attr(n|k,v|p|f):设置或返回被选属性的值
name:返回所有所选属性的值
key,value:以键值对的方式设置所有所选属性的值
properties:以多个键值对的方式同时设置多个所选属性的值
key,func:以函数返回的方式设置属性名,属性值
<script src="jquery-3.1.0.js"></script> <script> // name:返回查找的属性的所有值 $("img").attr('src') // key,value:设置查找的所有属性的值 $("img").attr('src','kong.jpg') // properties:同时设置多个属性的值 $("img").attr({'src':'test.jpg','alt':'Test_img'}) // 使用函数的方法设置属性的值 $("img").attr("filepath",function(){return this.src}) </script>
removeAttr(name):删除所选的属性名
<script src="jquery-3.1.0.js"></script> <script> $("img").removeAttr("src") </script>
prop(n|k,v|p|f):获取匹配的元素集中的第一个属性值
name:获取匹配的元素集中第一个属性值
k,v:以键值对的方式设置所有属性的值
properties:以多个键值对的方式设置所有属性的值
<script src="jquery-3.1.0.js"></script> <script> // name:选中返回true,未选中返回false $("input[type=checkbox]").prop("checked")
// properties 禁用所有 $("input[type=checkbox]").prop({"disabled":true})
// k,v 取消禁用 $("input[type=checkbox]").prop("disabled",false)
// 选中所有 $("input[type=checkbox]").prop("checked",true)
// 取消所有 $("input[type=checkbox]").prop("checked",fasle)
</script>
removePrope(name) 删除由prope方法设置的属性集,别的方法设置的属性集它删除不了
<script src="jquery-3.1.0.js"></script> <script> var $para = $("p"); $para.prop("luggageCode",1234); $para.append("The secret luggage code is: ",String($para.prop("luggageCode")), ". ") $para.removeProp("luggageCode") $para.append("now secret luggage code is: ",String($para.prop("luggageCode")), ". ") </script>
class类
addClass(class|fn):为每个匹配的元素添加指定的类名,多个类名以空格隔开
<script src="jquery-3.1.0.js"></script> <script> // addClass: $("p").addClass("selected select2") $("ul li:last").addClass(function(){ return 'item-'+$(this).index() }) </script>
removeClass(class|fn):从所匹配的元素中删除所有或指定的类
<script src="jquery-3.1.0.js"></script> <script> // 从匹配的元素中删除指定的类 $("span").removeClass("clr") // 从匹配的元素中删除所有的类 $("span").removeClass() // 删除最后一个元素上与前一个重复的类 $("li:last").removeClass(function(){ return $(this).prev().attr('class') }) </script>
HTML:代码/文本/值
html(val|fn):取得第一个匹配元素的html内容
<script src="jquery-3.1.0.js"></script> <script> // 取得第一个匹配元素的html内容 $("p").html() // 设置所有p元素的html内容 $("p").html("hellow <b>world</b>!") </script>
text(val|fn):取得所有匹配元素的内容,结果是由所有匹配元素内容组合起来的文本,对html和xml都有效。
<script src="jquery-3.1.0.js"></script> <script> // 取得所有元素的文本内容 $("p").text() // 设置所有p元素的文本内容 $("p").text("Hellow World..") </script>
val(val|fn|arr):获得匹配元素的当前值,当为slelect或多选框时,传入数组数据
<script src="jquery-3.1.0.js"></script> <script> // 取得了第一个input的当前值 $("input").val() // 设置所有input元素的当前值为hello $("input").val("hello") </script>