jQuery选择器。 5.21 《深夜还在编码的你》

(之所以字体弄那么大是因为省眼，程序员不容易，程序员的眼睛更不容易，请保护我们的眼睛)

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。

熟练地使用选择器，不但能简化代码，而且能够事半功倍。

jQuery选择器可通过CSS选择器、条件过滤两种方式获取元素。

可以通过CSS选择器语法规则获取元素的jQuery选择器包括基本选择器、层次选择器和属性选择器；

可以通过条件过滤选取元素的jQuery选择器包括基本过滤选择器和可见性过滤选择器。

jQuery 的选择器是很强大的，在这里我总结一下常用的元素查找方法

一、基本选择器
1. id选择器（指定id元素）
将id="one"的元素背景色设置为黑色。（id选择器返单个元素）

 $(document).ready(function () {
         $('#one').css('background', '#000');
  });

2. class选择器（遍历css类元素）
将class="cube"的元素背景色设为黑色

 $(document).ready(function () {
         $('.cube').css('background', '#000');
 });

3. element选择器（遍历html元素）
将p元素的文字大小设置为12px

 $(document).ready(function () {
         $('p').css('font-size', '12px');
 });

4. * 选择器（遍历所有元素）

 $(document).ready(function () {
         // 遍历form下的所有元素，将字体颜色设置为红色
         $('form *').css('color', '#FF0000');
 });

5. 并列选择器

 $(document).ready(function () {
         // 将p元素和div元素的margin设为0
         $('p, div').css('margin', '');
 });

 $(document).ready(function(){
  $('#.nihao').hover(
  function(){
   $(this).addClass("")
  },function(){
   $(this).removeClass("")
  });
 });

基本过滤选择器

1. :first和:last（取第一个元素或最后一个元素）

 $(document).ready(function () {
             $('span:first').css('color', '#FF0000');
             $('span:last').css('color', '#FF0000');
         });//下面的代码，G1（first元素）和G3（last元素）会变色

 <span>G1</span>
 <span>G2</span>
 <span>G3</span>

2. :not（取非元素）

 $(document).ready(function () {
             $('div:not(.wrap)').css('color', '#FF0000');
         });//下面的代码，G1会变色

 <div>G1</div>
 <div class="wrap">G2</div>
 //但是，请注意下面的代码：

 <div>
     G1
     <div class="wrap">G2</div>
 </div>

当G1所在div和G2所在div是父子关系时，G1和G2都会变色。

3. :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）

 $(document).ready(function () {
             $('tr:even').css('background', '#EEE'); // 偶数行颜色
             $('tr:odd').css('background', '#DADADA'); // 奇数行颜色
         });A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA

 <table width="" cellpadding="" cellspacing="">
     <tbody>
         <tr><td>A</td></tr>
         <tr><td>B</td></tr>
         <tr><td>C</td></tr>
         <tr><td>D</td></tr>
     </tbody>
 </table>

 $("#myELement")   //  选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
 $("div")         //   选择所有的div标签元素，返回div元素数组
 $(".myClass")    //   选择使用myClass类的css的所有元素
 $("*")          //    选择文档中的所有的元素，可以运用多种的选择方式进行合选择：例如$("#myELement,div,.myclass") 

One(层次选择器):

 $("form input")          // 选择所有的form元素中的input元素
 $("#main > *")          //   选择id值为main的所有的子元素
 $("label + input")     //   选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元  // 素
 $("#prev ~ div")       //   同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 

1. parent > child（直系子元素）

 $(document).ready(function () {
         // 选取div下的第一代span元素，将字体颜色设为红色
         $('div > span').css('color', '#FF0000');
     });下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。

 <div>
         <span></span>
         <p>
             <span></span>
         </p>
 </div>

2. prev + next（下一个兄弟元素，等同于next()方法）

 $(document).ready(function () {
     // 选取class为item的下一个div兄弟元素
     $('.item + div').css('color', '#FF0000');
     // 等价代码
     //$('.item').next('div').css('color', '#FF0000');
 });下面的代码，只有123和789会变色
 <p class="item"></p>
 <div></div>
 <div></div>
 <span class="item"></span>
 <div></div>

3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

 $(document).ready(function () {
     // 选取class为inside之后的所有div兄弟元素
     $('.inside ~ div').css('color', '#FF0000');
     // 等价代码
     //$('.inside').nextAll('div').css('color', '#FF0000');
 });下面的代码，G2和G4会变色

 <div class="inside">G1</div>
 <div>G2</div>
 <span>G3</span>
 <div>G4</div>

Two(属性选择器):

 $("div[id]")                  // 选择所有含有id属性的div元素
 $("input[name='newsletter']")  //  选择所有的name属性等于'newsletter'的input元素
 $("input[name!='newsletter']")// 选择所有的name属性不等于'newsletter'的input元素
 $("input[name^='news']")     //    选择所有的name属性以'news'开头的input元素
 $("input[name$='news']")     //    选择所有的name属性以'news'结尾的input元素
 $("input[name*='man']")       //选择所有的name属性包含'news'的input元素 

[attribute]（取拥有attribute属性的元素）

下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线

 <script type="text/javascript">
         $(document).ready(function() {
             $('a[title]').css('text-decoration', 'none');
        });
     </script>
     <ul>
         <li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
         <li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
         <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
         <li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
         <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
         <li><a href="#" class="item">其他</a></li>
     </ul>——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）

 分别为class="item"和class!=item的a标签指定文字颜色

 .main_shipin a:hover img{filter:Alpha(Opacity=);opacity:0.7;}

Three(基本过滤选择器):

 $("tr:first")            //   选择所有tr元素的第一个
 $("tr:last")            //    选择所有tr元素的最后一个
 $("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(可见性过滤选择器):

 $("div:hidden")      // 选择所有的被hidden的div元素
 $("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仍然是不可见的。

 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
     <title></title>
     <style type="text/css">
         div
         {
             margin: 10px;
             width: 200px;
             height: 40px;
             border: 1px solid #FF0000;
             display:block;
         }
         .hid-
         {
             display: none;
         }
         .hid-
         {
             visibility: hidden;
         }
     </style>
     <script type="text/javascript" src="js/jquery.min.js"></script>
     <script type="text/javascript">
         $(document).ready(function() {
             $('div:hidden').show();
             alert($('input:hidden').val());
         });
     </script>
 </head>
 <body>
     <div class="hid-1">display: none</div>
     <div class="hid-2">visibility: hidden</div>
     <input type="hidden" value="hello"/>
 </body>
 </html>

——3.2 :visible（取可见的元素）

下面的代码，最后一个div会有背景色

 <script type="text/javascript">
     $(document).ready(function() {
         $('div:visible').css('background', '#EEADBB');
     });
 </script>
 <div class="hid-1">display: none</div>
 <div class="hid-2">visibility: hidden</div>
 <input type="hidden" value="hello"/>
 <div>
     jQuery选择器
 </div>

Five(内容过滤选择器):

 $("div:contains('John')") //选择所有div中含有John文本的元素
 $("td:empty")        //   选择所有的为空（也不包括文本节点）的td元素的数组
 $("div:has(p)")    //    选择所有含有p标签的div元素
 $("td:parent")       //   选择所有的以td为父节点的元素数组 

1. :contains(text)（取包含text文本的元素）

 $(document).ready(function () {
             // dd元素中包含"jQuery"文本的会变色
             $('dd:contains("jQuery")').css('color', '#FF0000');
         });下面的代码，第一个dd会变色

 <dl>
     <dt>技术</dt>
     <dd>jQuery, .NET, CLR</dd>
     <dt>SEO</dt>
     <dd>关键字排名</dd>
     <dt>其他</dt>
     <dd></dd>
 </dl>

2. :empty（取不包含子元素或文本为空的元素）

 $(document).ready(function () {
             $('dd:empty').html('没有内容');
 });

上面第三个dd会显示"没有内容"文本

3. :has(selector)（取选择器匹配的元素）

 $(document).ready(function () {
             // 为包含span元素的div添加边框
             $('div:has(span)').css('border', '1px solid #000');
         });即使span不是div的直系子元素，也会生效

 <div>
     <h2>
         A
         <span>B</span>
     </h2>
 </div>

4. :parent（取包含子元素或文本的元素）

 $(document).ready(function () {
             $('ol li:parent').css('border', '1px solid #000');
         });下面的代码，A和D所在的li会有边框

 <ol>
     <li></li>
     <li>A</li>
     <li></li>
     <li>D</li>
 </ol>

Six(子元素过滤选择器):

 $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
 $("div span:first-child")       //   返回所有的div元素的第一个子节点的数组
 $("div span:last-child")        //   返回所有的div元素的最后一个节点的数组
 $("div button:only-child")      // 返回所有的div中只有唯一一个子节点的所有子节点的数组 

Seven(表单元素选择器):

 $(":input")              //    选择所有的表单输入元素，包括input, textarea, select 和 button
 $(":text")               //      选择所有的text input元素
 $(":password")       //    选择所有的password input元素
 $(":radio")                //   选择所有的radio input元素
 $(":checkbox")        //    选择所有的checkbox input元素
 $(":submit")            //   选择所有的submit input元素
 $(":image")            //     选择所有的image input元素
 $(":reset")             //      选择所有的reset input元素
 $(":button")           //     选择所有的button input元素
 $(":file")                //     选择所有的file input元素
 $(":hidden")         //      选择所有类型为hidden的input元素或表单的隐藏域 

Eight(表单元素过滤选择器):

 1 $(":enabled")            // 选择所有的可操作的表单元素
 2 $(":disabled")          //  选择所有的不可操作的表单元素
 3 $(":checked")        //    选择所有的被checked的表单元素
 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 代码:
 <form>
 <label>Name:</label>
 <input name="name" />
 <fieldset>
       <label>Newsletter:</label>
       <input name="newsletter" />
 </fieldset>
 </form>
 <input name="none" />
 //jQuery 代码:
 $("form input")
 //结果:
 [ <input name="name" />, <input name="newsletter" /> ]

 //2. $("A>B") 查找A元素下面的直接子节点
 //例：匹配表单中所有的子级input元素。
 //HTML 代码:
 <form>
 <label>Name:</label>
 <input name="name" />
 <fieldset>
       <label>Newsletter:</label>
       <input name="newsletter" />
 </fieldset>
 </form>
 <input name="none" />
 //jQuery 代码:
 $("form > input")
 //结果:
 [ <input name="name" /> ] 

--

 //3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
 //例子：匹配所有跟在 label 后面的 input 元素
 //HTML 代码:
 <form>
 <label>Name:</label>
 <input name="name" />
 <fieldset>
       <label>Newsletter:</label>
       <input name="newsletter" />
 </fieldset>
 </form>
 <input name="none" />
 //jQuery 代码:
 $("label + input")
 //结果:
 [ <input name="name" />, <input name="newsletter" /> ] 

--

 //4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点
 //例子：找到所有与表单同辈的 input 元素
 //HTML 代码:
 <form>
 <label>Name:</label>
 <input name="name" />
 <fieldset>
       <label>Newsletter:</label>
       <input name="newsletter" />
 </fieldset>
 </form>
 <input name="none" />
 //jQuery 代码:
 $("form ~ input")
 //结果:
 [ <input name="none" /> ] 

编写选择器时要注意特殊符号和空格。

以上是我所总结   谢谢你的观看！

生活其实和代码是一样的  总有不顺的时候  在那时转换一下你的思维  或许 你可以改变那不顺。

                                                                                          爱自己 爱生活  爱代码  爱音乐 爱文字 爱交友 

©北京你好！

            作者：微冷的风

            出处：http://www.cnblogs.com/smbk/
 
            本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。