jQuery选择器

最近复习了一下jQuery.在此，小编和大家分享一些有关于，jQuery相关选择器的知识。
首先，先跟大家说一下js对象和jQuery对象方法不通用。

选择器分类
1.基本选择器
2. 层级选择器
3. 属性选择器
4. 过滤选择器
5. 表单过滤选择器

基本选择器

1.标签选择器（元素选择器）
语法：$(“html标签名”)
作用：获得所有匹配标签名称的元素
例：使div标签的背景色变为粉红色。

$(function(){
  $("div").css("background-color","pink");
});

2.id选择器
语法：$("#id的属性值")
作用：获得与指定id属性值匹配的元素
例：获取id为one的按钮的点击事件，并弹出hello

$(function(){
  $("#one").click(function(){
  alert("hello");
  });
});

3.类选择器
语法：$(".class属性值")
作用：获得与指定的class属性值匹配的元素。
例：改变class为two的所有元素的背景色为粉红色

$(function(){
  $(".two").css("background-color","pink");
});

4.并集选择器
语法：$(“选择器1，选择器2”)；
作用：获取多个选择器中的所有元素
例：改变所有span元素和id为two的元素的背景色为粉红色

$(function(){
  $("span,#two").css("background-color","pink");
});

层级选择器

1.后代选择器
语法：$(“A B”)；
作用：选择A元素内部的所有B元素
例：改变body元素内所有div元素的背景色为粉红色

$(function(){
 $("body div").css("background-color","pink");
});

2.子选择器
语法：$(“A>B”)；
作用：选择A元素内部的所有B子元素
例：改变body元素内子div元素的背景色为红色

$(function(){
 $("body>div").css("background-color","pink");
});

 后代选择器和子选择器的区别：

子选择器只能选择元素的子代
后代选择器可以选择子代、孙代、曾孙代

属性选择器

1.属性名称选择器
语法：$(“A[属性名]”)
作用：包含指定属性的选择器
例：使含有title属性的div元素背景色为粉红色

$(function(){
 $("div[title]").css("background-color","pink");
});

2.属性选择器
语法：$(“A[属性名=‘值’]”)
作用：包含指定属性等于指定值的选择器
例：选择属性值title值以te开始，div背景色为红色

$(function(){
 $("div[title^='te']").css("background-color","pink");
});

例：选择属性值title值以est结尾，div背景色为红色

$(function(){
 $("div[title$='est']").css("background-color","pink");
});

例：选择属性包含es，div背景色为红色

$(function(){
 $("div[title*='es']").css("background-color","pink");
});

3.复合属性选择器
语法：$(“A[属性名][ ]…”)
作用：包含多个属性条件的选择器
例：选取属性id的div元素，然后在结界中选取属性title值含有"es"的div元素

$(function(){
 $("div[id][title='es']").css("background-color","pink");
});

过滤选择器

1.首元素选择器
语法：:first
作用:获得选择元素中的第一个元素
例：改变第一个div元素的背景色为粉红色

$(function(){
$("div:first]").css("background-color","pink");
});

2.尾元素选择器
语法：:last
作用:获得选择元素中的最后一个元素
例：改变最后一个div元素的背景色为粉红色

$(function(){
$("div:last]").css("background-color","pink");
});

3.非元素选择器
语法：not(selector)
作用:不包括指定内容的元素
例：改变class不为 one 的所有 div 元素的背景色为 粉红色

$(function(){
$("div:not(.one)").css("backgroundColor","pink");
});

4.偶数选择器
语法：:even
作用:选择索引值为偶数的元素，从0开始计数
例：改变索引值为偶数的 div 元素的背景色为 粉红色

$(function(){
$("div:even").css("backgroundColor","pink");
});

5.奇数选择器
语法：:odd
作用:选择索引值为奇数的元素，从0开始计数
例：改变索引值为奇数的 div 元素的背景色为 粉红色

$(function(){
$("div:odd").css("backgroundColor","pink");
});

6.等于索引选择器（索引从0开始）
语法：：eq(index)
作用:指定索引元素
例：改变索引值为等于 3 的 div 元素的背景色为粉红色

$(function(){
$("div:eq(3)").css("backgroundColor","pink");
});

7.大于索引选择器
语法：:ge(index)
作用:大于指定索引元素
例：改变索引值为等于 3 的 div 元素的背景色为粉红色

$(function(){
$("div:gt(3)").css("backgroundColor","pink");
});

8.小于索引选择器
语法：lt(index)
作用:小于指定索引元素
例：改变索引值为小于 3 的 div 元素的背景色为粉红色

$(function(){
$("div:lt(3)").css("backgroundColor","pink");
});

9.标题选择器
语法： ：header
作用: 获得标题元素（h1~h6），固定写法
例：改变所有的标题元素的背景色为粉红色

$(function(){
$(":header").css("backgroundColor","pink");
});

表单过滤选择器

1.可用元素选择器
语法：:enable 获得可用元素
作用:获得可用元素
例：利用 jQuery 对象的 val() 方法改变表单内可用 input 元素的值

$(function(){
 $("input[type='text']:enabled").val("hello");
});

2.不可用元素选择器
语法：:disabled
作用:获得不可用元素
例：利用 jQuery 对象的 val() 方法改变表单内不可用 input 元素的值

$(function(){
$("input[type='text']:disabled").val("hello");
});

3.选中选择器
语法：:checked
作用:获得单选复选框中的元素
例：利用 jQuery 对象的 length 属性获取复选框选中的个数

$(function(){
alert($("input[type='checkbox']:checked").length);
});

4.选中选择器
语法：:selected
作用: 获得下拉框选中的元素
例：利用 jQuery 对象的 length 属性获取下拉框选中的个数

$(function(){
alert($("#job > option:selected").length);
});