jQuery选择器总结

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法           


                      


           $(           "#myELement"           )    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素           


           $(           "div"           )           选择所有的div标签元素,返回div元素数组           


           $(           ".myClass"           )      选择使用myClass类的css的所有元素           


           $(           "*"           )             选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$(           "#myELement,div,.myclass"           )           


                      


           层叠选择器:           


           $(           "form input"           )         选择所有的form元素中的input元素           


           $(           "#main > *"           )          选择id值为main的所有的子元素           


           $(           "label + input"           )     选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素           


           $(           "#prev ~ div"           )       同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签           


                      


           基本过滤选择器:           


           $(           "tr:first"           )               选择所有tr元素的第一个           


           $(           "tr:last"           )                选择所有tr元素的最后一个           


           $(           "input:not(:checked) + span"           )             


                      


           过滤掉: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"           )           


           内容过滤选择器:           


                      


           $(           "div:contains('John')"           ) 选择所有div中含有John文本的元素           


           $(           "td:empty"           )           选择所有的为空(也不包括文本节点)的td元素的数组           


           $(           "div:has(p)"           )        选择所有含有p标签的div元素           


           $(           "td:parent"           )          选择所有的以td为父节点的元素数组           


           可视化过滤选择器:           


                      


           $(           "div:hidden"           )        选择所有的被hidden的div元素           


           $(           "div:visible"           )        选择所有的可视化的div元素           


           属性过滤选择器:           


                      


           $(           "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元素           


                      


           $(           "input[id][name$='man']"           )    可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素           


                      


           子元素过滤选择器:           


                      


           $(           "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中只有唯一一个子节点的所有子节点的数组           


                      


           表单元素选择器:           


                      


           $(           ":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元素或表单的隐藏域           


                      


           表单元素过滤选择器:           


                      


           $(           ":enabled"           )             选择所有的可操作的表单元素           


           $(           ":disabled"           )            选择所有的不可操作的表单元素           


           $(           ":checked"           )            选择所有的被checked的表单元素           


           $(           "select option:selected"           ) 选择所有的select 的子元素中被selected的元素           


                      


                      


                      


           选取一个 name 为”S_03_22″的input text框的上一个td的text值          


           $(”input[@ name =S_03_22]“).parent().prev().text()           


                      


           名字以”S_”开始,并且不是以”_R”结尾的          


           $(”input[@ name ^=           'S_'           ]“).not(”[@ name $=           '_R'           ]“)           


                      


           一个名为 radio_01的radio所选的值          


           $(”input[@ name =radio_01][@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"            /> ]