jQuery常用选择器总结

Posted 2020-09-20

jQuery常用选择器总结：

　　我们都知道jQuery是javascript（JS）的框架，它的语法简单使用方便，被广大开发人员青睐。现在我就它常用的并且十分强大的选择器的方式，做一个总结。鉴于它的选择器方式众多，我就自己平时工作之中所遇到的常见的方式做一个总结。

　　一，元素查找方式：

1. 1. $("#myElement")    选择id为myElement的元素，因为id在使用中是唯一的，所以这样的选择也是指定的不变的。
   2. $("div")    选择所有的div标签元素，返回div数组。
   3. $(".myClass")    选择class名为myClass所有的css标签元素。
   4. $("*")    选择文档中的所有元素，也可以运用联合选择方式进行选择，例如：$("#myElement,div,.myClass")。

　　二，层叠选择器：

1. 1. $("form input")    选择所有inform元素下的input元素。
   2. $("#main > *")    选择id为main元素下的所有子元素。
   3. $("label + input")    选择所有label元素的下一个input元素节点。
   4. $("#pre ~ div")    同胞选择器，选择id为pre元素下的所有属于同一个父元素的div标签。

　　三，基本过滤选择器：

1. 1. $("tr:first")    选择tr元素的第一个节点。
   2. $("tr:last")    选择tr元素的最后一个节点。
   3. $("input:not(:checked) + span")   过滤掉checked选择器的所有的input元素。
   4. $("tr:even")   选择所有的tr元素的第0,2,4，.....个元素。
   5. $("tr:odd")   选择所有的tr元素的第1,3,5，......个元素。
   6. $("td:eq(2)")   选择所有的td元素中序号为二的那个td元素。
   7. $("tr:get(4)")   选择所有的td元素中序号大于4的那些td元素。
   8. $("tr:ll(4)")   选择所有的td元素中序号小于4的那些td元素。

　　四，表单过滤选择器：

1. 1. $(":input")   选择所有的表单输入元素，包括input,textarea,select,button。
   2. $(":text")   选择所有的text input元素。
   3. $(":input")   $(":password")    选择所有的password input元素。
   4. $(":radio")    选择所有的radio input元素。
   5. $(":checkbox")    选择所有的checkbox input元素。
   6. $(":submit")    选择所有的submit input元素。
   7. $(":image")    选择所有的image input元素。
   8. $(":reset")    选择所有的reset input元素。
   9. $(":button")    选择所有的button input元素。
   10. $(":file")    选择所有的file input元素。
   11. $(":hidden")    选择所有的类型为hidden的input元素或者表单隐藏域。
   12. $(":enabled")    选择所有的可操作的表单元素。
   13. $(":disabled")    选择所有的不可操作的表单元素。
   14. $(":checked")    选择所有的被checked的表单元素。
   15. $("select option:select")    选择所有的select的子元素中被select的元素。

　　jQuery的选择器中层叠过滤先择器是常用的并且复杂的选择器之一，在这里就没有大篇幅的去总结了，因为就上面的各种选择器方式，运用熟悉了，对开发来说都是足够了的。