jQuery选择器。 5.21 《深夜还在编码的你》
Posted 微冷的風丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery选择器。 5.21 《深夜还在编码的你》相关的知识，希望对你有一定的参考价值。
(之所以字体弄那么大是因为省眼，程序员不容易，程序员的眼睛更不容易，请保护我们的眼睛)
选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。
熟练地使用选择器，不但能简化代码，而且能够事半功倍。
jQuery选择器可通过CSS选择器、条件过滤两种方式获取元素。
可以通过CSS选择器语法规则获取元素的jQuery选择器包括基本选择器、层次选择器和属性选择器；
可以通过条件过滤选取元素的jQuery选择器包括基本过滤选择器和可见性过滤选择器。
jQuery 的选择器是很强大的，在这里我总结一下常用的元素查找方法
一、基本选择器
1. id选择器（指定id元素）
将id="one"的元素背景色设置为黑色。（id选择器返单个元素）
1 $(document).ready(function () { 2 $(\'#one\').css(\'background\', \'#000\'); 3 });
2. class选择器（遍历css类元素）
将class="cube"的元素背景色设为黑色
1 $(document).ready(function () { 2 $(\'.cube\').css(\'background\', \'#000\'); 3 });
3. element选择器（遍历html元素）
将p元素的文字大小设置为12px
1 $(document).ready(function () { 2 $(\'p\').css(\'font-size\', \'12px\'); 3 });
4. * 选择器（遍历所有元素）
1 $(document).ready(function () { 2 // 遍历form下的所有元素，将字体颜色设置为红色 3 $(\'form *\').css(\'color\', \'#FF0000\'); 4 });
5. 并列选择器
1 $(document).ready(function () { 2 // 将p元素和div元素的margin设为0 3 $(\'p, div\').css(\'margin\', \'0\'); 4 }); 5 6 7 $(document).ready(function(){ 8 $(\'#.nihao\').hover( 9 function(){ 10 $(this).addClass("") 11 },function(){ 12 $(this).removeClass("") 13 }); 14 });
基本过滤选择器
1. :first和:last（取第一个元素或最后一个元素）
1 $(document).ready(function () { 2 $(\'span:first\').css(\'color\', \'#FF0000\'); 3 $(\'span:last\').css(\'color\', \'#FF0000\'); 4 });//下面的代码，G1（first元素）和G3（last元素）会变色 5 6 <span>G1</span> 7 <span>G2</span> 8 <span>G3</span>
2. :not（取非元素）
1 $(document).ready(function () { 2 $(\'div:not(.wrap)\').css(\'color\', \'#FF0000\'); 3 });//下面的代码，G1会变色 4 5 <div>G1</div> 6 <div class="wrap">G2</div> 7 //但是，请注意下面的代码： 8 9 <div> 10 G1 11 <div class="wrap">G2</div> 12 </div>
当G1所在div和G2所在div是父子关系时，G1和G2都会变色。
3. :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）
1 $(document).ready(function () { 2 $(\'tr:even\').css(\'background\', \'#EEE\'); // 偶数行颜色 3 $(\'tr:odd\').css(\'background\', \'#DADADA\'); // 奇数行颜色 4 });A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA 5 6 7 8 <table width="200" cellpadding="0" cellspacing="0"> 9 <tbody> 10 <tr><td>A</td></tr> 11 <tr><td>B</td></tr> 12 <tr><td>C</td></tr> 13 <tr><td>D</td></tr> 14 </tbody> 15 </table>
1 $("#myELement") // 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 2 $("div") // 选择所有的div标签元素，返回div元素数组 3 $(".myClass") // 选择使用myClass类的css的所有元素 4 $("*") // 选择文档中的所有的元素，可以运用多种的选择方式进行合选择：例如$("#myELement,div,.myclass")
One(层次选择器):
1 $("form input") // 选择所有的form元素中的input元素 2 $("#main > *") // 选择id值为main的所有的子元素 3 $("label + input") // 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元 // 素 4 $("#prev ~ div") // 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
1. parent > child（直系子元素）
1 $(document).ready(function () { 2 // 选取div下的第一代span元素，将字体颜色设为红色 3 $(\'div > span\').css(\'color\', \'#FF0000\'); 4 });下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。 5 6 <div> 7 <span>123</span> 8 <p> 9 <span>456</span> 10 </p> 11 </div>
2. prev + next（下一个兄弟元素，等同于next()方法）
1 $(document).ready(function () { 2 // 选取class为item的下一个div兄弟元素 3 $(\'.item + div\').css(\'color\', \'#FF0000\'); 4 // 等价代码 5 //$(\'.item\').next(\'div\').css(\'color\', \'#FF0000\'); 6 });下面的代码，只有123和789会变色 7 <p class="item"></p> 8 <div>123</div> 9 <div>456</div> 10 <span class="item"></span> 11 <div>789</div>
3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）
1 $(document).ready(function () { 2 // 选取class为inside之后的所有div兄弟元素 3 $(\'.inside ~ div\').css(\'color\', \'#FF0000\'); 4 // 等价代码 5 //$(\'.inside\').nextAll(\'div\').css(\'color\', \'#FF0000\'); 6 });下面的代码，G2和G4会变色 7 8 <div class="inside">G1</div> 9 <div>G2</div> 10 <span>G3</span> 11 <div>G4</div>
Two(属性选择器):
1 $("div[id]") // 选择所有含有id属性的div元素 2 $("input[name=\'newsletter\']") // 选择所有的name属性等于\'newsletter\'的input元素 4 $("input[name!=\'newsletter\']")// 选择所有的name属性不等于\'newsletter\'的input元素 6 $("input[name^=\'news\']") // 选择所有的name属性以\'news\'开头的input元素 7 $("input[name$=\'news\']") // 选择所有的name属性以\'news\'结尾的input元素 8 $("input[name*=\'man\']") //选择所有的name属性包含\'news\'的input元素
[attribute]（取拥有attribute属性的元素）
下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线
1 <script type="text/javascript"> 2 $(document).ready(function() { 3 $(\'a[title]\').css(\'text-decoration\', \'none\'); 4 }); 5 </script> 6 <ul> 7 <li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li> 8 <li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li> 9 <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li> 10 <li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li> 11 <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li> 12 <li><a href="#" class="item">其他</a></li> 13 </ul>——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素） 14 15 分别为class="item"和class!=item的a标签指定文字颜色 16 17 18 .main_shipin a:hover img{filter:Alpha(Opacity=70);opacity:0.7;}
Three(基本过滤选择器):
1 $("tr:first") // 选择所有tr元素的第一个 2 $("tr:last") // 选择所有tr元素的最后一个 3 $("input:not(:checked) + span") //过滤掉：checked的选择器的所有的input元素
过滤掉：checked的选择器的所有的input元素
$("tr:even") // 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）
$("tr:odd") // 选择所有的tr元素的第1，3，5... ...个元素
$("td:eq(2)") // 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") // 选择td元素中序号大于4的所有td元素
$("td:ll(4)") // 选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
Four(可见性过滤选择器):
1 $("div:hidden") // 选择所有的被hidden的div元素 2 $("div:visible") // 选择所有的可视化的div元素
:hidden（取不可见的元素）
jQuery至1.3.2之后的:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。
下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。
1 <html xmlns="http://www.w3.org/1999/xhtml" > 2 <head runat="server"> 3 <title></title> 4 <style type="text/css"> 5 div 6 { 7 margin: 10px; 8 width: 200px; 9 height: 40px; 10 border: 1px solid #FF0000; 11 display:block; 12 } 13 .hid-1 14 { 15 display: none; 16 } 17 .hid-2 18 { 19 visibility: hidden; 20 } 21 </style> 22 <script type="text/javascript" src="js/jquery.min.js"></script> 23 <script type="text/javascript"> 24 $(document).ready(function() { 25 $(\'div:hidden\').show(500); 26 alert($(\'input:hidden\').val()); 27 }); 28 </script> 29 </head> 30 <body> 31 <div class="hid-1">display: none</div> 32 <div class="hid-2">visibility: hidden</div> 33 <input type="hidden" value="hello"/> 34 </body> 35 </html>
——3.2 :visible（取可见的元素）
下面的代码，最后一个div会有背景色
1 <script type="text/javascript"> 2 $(document).ready(function() { 3 $(\'div:visible\').css(\'background\', \'#EEADBB\'); 4 }); 5 </script> 6 <div class="hid-1">display: none</div> 7 <div class="hid-2">visibility: hidden</div> 8 <input type="hidden" value="hello"/> 9 <div> 10 jQuery选择器 11 </div>
Five(内容过滤选择器):
1 $("div:contains(\'John\')") //选择所有div中含有John文本的元素 2 $("td:empty") // 选择所有的为空（也不包括文本节点）的td元素的数组 3 $("div:has(p)") // 选择所有含有p标签的div元素 4 $("td:parent") // 选择所有的以td为父节点的元素数组
1. :contains(text)（取包含text文本的元素）
1 $(document).ready(function () { 2 // dd元素中包含"jQuery"文本的会变色 3 $(\'dd:contains("jQuery")\').css(\'color\', \'#FF0000\'); 4 });下面的代码，第一个dd会变色 5 6 <dl> 7 <dt>技术</dt> 8 <dd>jQuery, .NET, CLR</dd> 9 <dt>SEO</dt> 10 <dd>关键字排名</dd> 11 <dt>其他</dt> 12 <dd></dd> 13 </dl>
2. :empty（取不包含子元素或文本为空的元素）
1 $(document).ready(function () { 2 $(\'dd:empty\').html(\'没有内容\'); 3 });
上面第三个dd会显示"没有内容"文本
3. :has(selector)（取选择器匹配的元素）
1 $(document).ready(function () { 2 // 为包含span元素的div添加边框 3 $(\'div:has(span)\').css(\'border\', \'1px solid #000\'); 4 });即使span不是div的直系子元素，也会生效 5 6 <div> 7 <h2> 8 A 9 <span>B</span> 10 </h2> 11 </div>
4. :parent（取包含子元素或文本的元素）
1 $(document).ready(function () { 2 $(\'ol li:parent\').css(\'border\', \'1px solid #000\'); 3 });下面的代码，A和D所在的li会有边框 4 5 <ol> 6 <li></li> 7 <li>A</li> 8 <li></li> 9 <li>D</li> 10 </ol>
Six(子元素过滤选择器):
1 $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 3 $("div span:first-child") // 返回所有的div元素的第一个子节点的数组 4 $("div span:last-child") // 返回所有的div元素的最后一个节点的数组 5 $("div button:only-child") // 返回所有的div中只有唯一一个子节点的所有子节点的数组
Seven(表单元素选择器):
1 $(":input") // 选择所有的表单输入元素，包括input, textarea, select 和 button 3 $(":text") // 选择所有的text input元素 4 $(":password") // 选择所有的password input元素 5 $(":radio") // 选择所有的radio input元素 6 $(":checkbox") // 选择所有的checkbox input元素 7 $(":submit") // 选择所有的submit input元素 8 $(":image") // 选择所有的image input元素 9 $(":reset") // 选择所有的reset input元素 10 $(":button") // 选择所有的button input元素 11 $(":file") // 选择所有的file input元素 12 $(":hidden") // 选择所有类型为hidden的input元素或表单的隐藏域
Eight(表单元素过滤选择器):
1 1 $(":enabled") // 选择所有的可操作的表单元素 2 2 $(":disabled") // 选择所有的不可操作的表单元素 3 3 $(":checked") // 选择所有的被checked的表单元素 4 4 $("select option:selected")// 选择所有的select 的子元素中被selected的元素
—————————————————————————————华丽的分割线——————————————————————————————————
//选取一个Name 为”S_2222″的input text框的上一个td的text值 $(”input[@ name =S_2222]“).parent().prev().text() //名字以”S_”开始，并且不是以”_R”结尾的 $(”input[@ name ^=\'S_\']“).not(”[@ name $=\'_R\']“) //一个名为 radio_1294的radio所选的值 $(”input[@ name =radio_1294][@checked]“).val();
$("A B") 查找A元素下面的所有子节点，包括非直接子节点
$("A>B") 查找A元素下面的直接子节点$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点//1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点 //例：找到表单中所有的 input 元素 //HTML 代码: 5 <form> 6 <label>Name:</label> 7 <input name="name" /> 8 <fieldset> 9 <label>Newsletter:</label> 10 <input name="newsletter" /> 11 </fieldset> 12 </form> 13 <input name="none" /> //jQuery 代码: 15 $("form input") //结果: 18 [ <input name="name" />, <input name="newsletter" /> ]
1 //2. $("A>B") 查找A元素下面的直接子节点 2 //例：匹配表单中所有的子级input元素。 3 //HTML 代码: 4 <form> 5 <label>Name:</label> 6 <input name="name" /> 7 <fieldset> 8 <label>Newsletter:</label> 9 <input name="newsletter" /> 10 </fieldset> 11 </form> 12 <input name="none" /> 13 //jQuery 代码: 14 $("form > input") 15 //结果: 16 [ <input name="name" /> ]
--
1 //3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点 2 //例子：匹配所有跟在 label 后面的 input 元素 3 //HTML 代码: 4 <form> 5 <label>Name:</label> 6 <input name="name" /> 7 <fieldset> 8 <label>Newsletter:</label> 9 <input name="newsletter" /> 10 </fieldset> 11 </form> 12 <input name="none" /> 13 //jQuery 代码: 14 $("label + input") 15 //结果: 16 [ <input name="name" />, <input name="newsletter" /> ]
--
1 //4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 2 //例子：找到所有与表单同辈的 input 元素 3 //HTML 代码: 4 <form> 5 <label>Name:</label> 6 <input name="name" /> 7 <fieldset> 8 <label>Newsletter:</label> 9 <input name="newsletter" /> 10 </fieldset> 11 </form> 12 <input name="none" /> 13 //jQuery 代码: 14 $("form ~ input") 15 //结果: 16 [ <input name="none" /> ]
编写选择器时要注意特殊符号和空格。
以上是我所总结 谢谢你的观看！
生活其实和代码是一样的 总有不顺的时候 在那时转换一下你的思维 或许 你可以改变那不顺。
以上是关于jQuery选择器。 5.21 《深夜还在编码的你》的主要内容，如果未能解决你的问题，请参考以下文章