1 元素选择器
之前不熟悉的是如：
$("input.cls1");
这种用法
2 属性选择器
包含name属性的input元素，
如 $("input[name]");
name属性以xx结尾的input元素
$("input[name$=xx]");
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> 8 <script type="text/javascript"> 9 //选择器总结 10 //jquery中选择器编写均可以以元素名为开头 后跟id,class或则属性选择器来组成。 11 //$("input[name$='3']") input为元素名,[]中包含属性name,name的值以3结尾 12 //$("input#none5") 不能有空格 13 //$("input.cls1") 不能有空格 14 //$("input:first") 15 //$("input[class][name^='none']") 复合选择器，返回含有class属性且name属性的值以none值开头 16 //$("input.cls1[name^='none']") 返回class为.cls1且name属性的值以none值开头 17 18 19 //form所有后代input元素 20 var Init1 = function () { 21 $("form input").each(function () { 22 alert($(this).attr("name")); 23 }) 24 }; 25 //form所有input子元素 26 var Init2 = function () { 27 $("form > input").each(function () { 28 alert($(this).attr("name")); 29 }) 30 }; 31 //紧接form后的所有input同辈元素 32 var Init3 = function () { 33 $("form ~ input").each(function () { 34 alert($(this).attr("name")); 35 }) 36 37 //$("input[name='none2'] ~ input").each(function () { 38 // alert($(this).attr("name")); 39 //}) 40 }; 41 //紧接form的第一个input同辈元素 42 var Init4 = function () { 43 $("form + input").each(function () { 44 alert($(this).attr("name")); 45 }) 46 }; 47 //返回属性name包含none的所有input元素 48 var Init5 = function () { 49 $("input[name*='none']").each(function () { 50 alert($(this).attr("name")); 51 }) 52 } 53 //返回class为cls1的所有input元素 54 var Init6 = function () { 55 //alert($("input.cls1").attr("name")); 56 $("input.cls1").each(function () { 57 alert($(this).attr("name")); 58 }) 59 } 60 //返回id为none5的所有input元素 61 var Init7 = function () { 62 //alert($("input.cls1").attr("name")); 63 $("input#none5").each(function () { 64 alert($(this).attr("name")); 65 }) 66 } 67 //返回第一个input元素 68 var Init8 = function () { 69 $("input:first").each(function () { 70 alert($(this).attr("name")); 71 }) 72 } 73 74 var log = function(para){ 75 console.log(para); 76 } 77 78 //返回第一个input元素 79 var Init9 = function () { 80 //$("input[class][name^='none']").each(function () { 81 // alert($(this).attr("name")); 82 //}) 83 // alert('xxxxxxxxxxxxxx'); 84 $("input.cls1[name^='none']").each(function () { 85 alert($(this).attr("name")); 86 }); 87 88 var len = $("input.cls1").length; 89 console.log('input.cls1 的len:'+len); 90 //基本选择器 id选择器，实际上也可以加上元素名称，与$("input.cls1")这种形式做对比 91 var len2 = $("input#cls1").length; 92 console.log('input#cls1 的len2:'+len2); 93 //基本选择器 class选择， 94 //var len3 = $("button.cls1").length; 95 //console.log('button.cls1 的len3:'+len3); 96 97 // 属性选择器 查找所有含有 id 属性的 div 元素 98 var divid = $("div[id]"); 99 log('divid:'+divid); 100 divid.css('background','pink').attr('display','block').html('div[id]的元素一共有'+divid.length+"个"); 101 102 // 属性选择器 匹配给定的属性是以某些值开始的元素 103 var divid2 = $("div[id^=test2]"); 104 log('div[id^=test2]的个数:'+divid2.length); 105 106 // 属性选择器 匹配给定的属性是以某些值结尾的元素 107 var divid3 = $("div[id$=test2]"); 108 log('div[id$=test2]的个数:'+divid3.length); 109 110 // 属性选择器 复合属性选择器，需要同时满足多个条件时使用。 111 // 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 input 112 var lenA = $('input[id][name$=man]').length; 113 var lenB = $("input[id][name$='man']").length; 114 //以上这两种写法都可以，推荐使用第二种 115 log('lenA:'+lenA); 116 log('lenB:'+lenB); 117 } 118 $(Init9); 119 </script> 120 </head> 121 <body> 122 <input name="none2" /> 123 <form> 124 <label>Name:</label> 125 <input name="name" /> 126 <fieldset> 127 <label>Newsletter:</label> 128 <input name="newsletter" /> 129 </fieldset> 130 </form> 131 <input class="cls1" name="none" /> 132 <input class="cls1" name="none5" /> 133 <input type="button" class="cls1" name="none5" value="xxx"/> 134 <input class="cls1" name="none44" id="cls1" /> 135 <input id="none6" class="cls1" name="none6" /> 136 <input name="none3" /> 137 <br> 138 属性选择器 139 <div> 140 <p>Hello!</p> 141 </div> 142 <div id="test2">test....</div> 143 <div id="test2ABC">test....</div> 144 <div id="BCDtest2">test....</div> 145 <div id="test3xx">test....</div> 146 147 属性选择器之 复合属性选择器 148 <input id="man-news" name="man-news" /> 149 <input name="milkman" /> 150 <input id="letterman" name="new-letterman" /> 151 <input name="newmilk" /> 152 </body> 153 </html>
