JavaScript开发教程之JQuery选择器使用技巧。

什么是选择器：

　　当我们在写前台的页面时，会涉及到对Dom节元素的操作，包括元素的调用或者更改样式，这些操作的前提是我们要准确的找到该元素，在强大的JQuery库中，选择器机制在此给我们提供了极大的方便。相比传统JS的获取操作jQuery选择器代码更简单，检测机制也更完善。jQuery选择器继承了css的部分语法，用过css选择器的，对于jQuery选择器都会比较容易上手。

选择器的分类：

 

 

---

基本选择器:

ID选择器: $(“#myId”) 选择ID值等于myId的元素，id值不能重复在文档中，只能有一个id值是myId,所以得到的是唯一的元素。 标签选择器: $(“div”) 选择所的div标签元素,返回div元素节点的数组。 选择文档中所有使用myC1ass样式的元素。 c1ass选择器:$(“.myClass”) $(“*”): 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择:例如$(“#myId,div,.myclass”)

层次选择器:

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

表单元素选择器:

$(” :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” ) 选择所有的fi le input元表。 $(” :hidden” )选择所有类型为hidden的input元素或表单的隐藏域。

过滤选择器

基本过滤选择器:

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

内容过滤选择器:

$(“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结尾的元素。
子元素过虑选择器: $(“div span:first-child”) 返回所有的div元素的第一个子节点的数组。 $(“div span:last-child”) 返回所有的div元素的最后一个节点的数组。 $(“div button:only-child”)返回所有的div中只有唯一一个子节点的所有子节点的数组。

表单元素过滤选择器:

$(“:enabled”) 选择所有的可操作的表单元素。 $(” :disabled”) 选择所有的不可操作的表单元素。 $(“:checked”) 选择所有的被checked的表单元素。 $(“select option: selected”) 选择所有的select 的子元素中被selected的元素。