jquery之元素选择，查找，过滤

一、jquery操作符号：jquery()，简写为$();

二、基本查找：

       1、根据给定的ID匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠转义   

              例如：html码：<div id="myDiv">hello world</div> 

                         jquery码：$("#myDiv");  

                        结果：[ <div id="myDiv">id="myDiv"</div> ]

               注意： 查找含有特殊字符的元素   html码：<span id="foo:bar"></span> <span id="foo[bar]"></span> <span id="foo.bar"></span> 

                                                                           jquery码：#foo\:bar        #foo\[bar\]         #foo\.bar

       2、根据给定的class 类匹配元素。html码：<div class="myClass">div class="myClass"</div>       

                                                                    jquery码：   $(".myClass");     

                                                                    结果： [ <div class="myClass">div class="myClass"</div>]

       3、根据给定的元素名匹配所有元素：html码：<div>DIV1</div><div>DIV2</div>  

                                                                         jquery码：$("div");     

                                                                         结 果： [ <div>DIV1</div>, <div>DIV2</div> ]

       4、多个复合匹配：html码：<div>div</div><p class="myClass">p class="myClass"</p><span>span</span><p class="notMyClass">p class="notMyClass"</p>

                                          jquery码：$("div,span,p.myClass")

                                         结果： [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

       5、匹配所有元素： $("*")

三、然后说一下，first和first-child的用法

        first：$("tr:first")，返回查找到的第一个tr元素， 只匹配一个元素，可以$("tr > td").filter(":first")

        first-child：$("ul li:first-child")，将为每个父元素匹配第一个子元素，并且必须形成父子关系，如果：$("tr > td").(":first-child")、$("tr > td").filter(":first-child")都是错误的

四、找父元素、子元素、同辈前元素、同辈后元素以及同时查找同辈前和同辈后的方式：

        1、找父元素：parent([expr])：取得一个包含着所有匹配元素的唯一父元素的元素集合。expr为可选的表达式

                                 例如：查找匹配元素P元素的父元素中每个类名为selected的父元素。

                                  html码：<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

                                 jquery码： $("p").parent(".selected")

                                  结果： [ <div class="selected"><p>Hello Again</p></div> ]

                                 此外还有：parents([expr])：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。

                                                     parentsUntil([expr])：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

                                 注意：查找父元素的方法和表达式:parent的区别：

                                             :parent  匹配含有子元素或者文本的元素，并没有去找父元素，不能实现查找父元素的功能

                                             例如：

                                            html码： <table>
                                                                       <tr><td>Value 1</td><td></td></tr>
                                                                       <tr><td>Value 2</td><td></td></tr>
                                                            </table>

                                            jquery码：$("td:parent")

                                            结果：[ <td>Value 1</td>, <td>Value 1</td> ]

       2、找子元素：children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。只考虑子元素而不考虑所有后代元素。

                                例如：

                                          html码：<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

                                          jquery码：$("div").children(".selected")

                                          结果：[ <p class="selected">Hello Again</p> ]

                               同时也可以通过表达式实现：有:first-child、:last-child、:only-child、:nth-child([even/odd/index])

                               如果使用上面的表达式，则必须同时查找属于父子关系的元素，不能先查到父元素，再查到子元素集合，然后再用此表达式筛选

                               例如：$("tr > td").(":first-child")、$("tr > td").filter(":first-child")都是错误的，因为$("tr > td")这个过程已经找到了子元素集

                                           正确方式为：

                                           html码：<ul>

                                                                   <li>John</li>
                                                                   <li>Karl</li>
                                                                   <li>Brandon</li>
                                                           </ul>
                                                           <ul>
                                                                     <li>Glen</li>
                                                                     <li>Tane</li>
                                                                     <li>Ralph</li>
                                                           </ul>

                                           jquery码：$("ul li:first-child")

                                           结果：[ <li>John</li>, <li>Glen</li> ]

                          由于children()方法只是处理子元素，而不能获得后代元素，获得后代元素可通过find([expr])方法实现

                                        find([expr]):搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

                                          html码：<p><span>Hello</span>, how are you?</p>

                                          jquery码：$("p").find("span")

                                          结果：[ <span>Hello</span> ]                   

         3、查找同辈前元素：prev([expr]) 取得一个包含匹配的元素紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

                            例如：

                                  html码：<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

                                 jquery码：$("p").prev()

                                  结果： [ <div><span>Hello Again</span></div> ]

                           此外还有：prevAll([expr])、prevUtil([expr])

         4、查找同辈后元素：next([expr]) 取得一个包含匹配的元素紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

                            例如：

                                  html码：<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

                                 jquery码：$("p").next()

                                  结果： [ <p>Hello Again</p>, <div><span>And Again</span></div> ]

                           此外还有：nextAll([expr])、nextUtil([expr])

            5、同时查找同辈前和同辈后元素：所有同辈元素

                  siblings([expr])：取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。可以用可选的表达式进行筛选。

                                  html码：<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

                                 jquery码：$("div").siblings()

                                  结果： [ <p>Hello</p>, <p>And Again</p> ]

六、通过表达式对文本进行筛选：有:empty、:contains(text)

                       例如：1、通过制定文本查找

                                           html码：<div>John Resig</div>
                                                          <div>George Martin</div>
                                                          <div>Malcom John Sinclair</div>
                                                          <div>J. Ohn

                                           jquery码：$("div:contains('John')")

                                           结果：[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

                                   2、查找空文本

                                           html码：<table>
                                                                      <tr><td>Value 1</td><td></td></tr>
                                                                      <tr><td>Value 2</td><td></td></tr>
                                                          </table> 

                                          jquery码：$("td:empty")

                                           结果：[ <td></td>, <td></td> ]

七、通过属性查找：

               [atribute] 匹配包含给定属性的元素  $("div[id]")

               [atribute!=value]   匹配给定的属性是某个特定值的元素  $("input[name='newsletter']").attr("checked", true);

               [atribute!=value]   匹配所有含有指定的属性，但属性不等于特定值的元素。$("input[name!='newsletter']").attr("checked", true);

              [atribute^=value]   匹配给定的属性是以某些值开始的元素  $("input[name^='news']")

              [atribute$=value]   匹配给定的属性是以某些值结尾的元素  $("input[name$='letter']")

              [atribute*=value]   匹配给定的属性是以包含某些值的元素   $("input[name*='man']")

八、通过表单的type属性值查找以及表单对象属性值查找表单元素

             例如通过type属性值有:input、:submit、:file等

                     通过表单属性值有:enabled、:disabled、:checked、:selected   

九、一些别的表达式：

                       有:even   匹配所有索引值为偶数的元素，从 0 开始计数

                           :odd   匹配所有索引值为奇数的元素，从 0 开始计数

                           :eq(index)   匹配一个给定索引值的元素

                           :gt(index)  匹配所有大于给定索引值的元素

                           :lt(index)  匹配所有小于给定索引值的元素