jQuer选择器

jQuery 选择器是 jQuery 的根基，对事件处理、DOM 遍历都离不开 JQ 选择器
特点：
JQ 选择器继承了 CSS 选择器的优点,CSS 选择器是找到元素后加样式，JQ 选择器找到元素后加行为，JQ 选择器完全
支持 CSS1,CSS2,CSS3 的所有特性。

1、基础选择器

id选择器

$(function(){
    $("#id").css("background","red")
)

class选择器

$(function(){
    $(".id").css("background","red")
)

element选择器

$(function(){
    $("p").css("background","red")
)

*选择器

$(function(){
    $("*").css("background","red")
)

组合选择器

$(function(){
    $("p,ul li,ul li a").css("background","red")
)

2 层次选择器

后代选择器

$(function(){
    $("p a").css("background","red")
)

直系后代选择器

$(function(){
    $("p>a").css("background","red")
)

prev+next下一个兄弟元素

$(function(){
    $("div + p").css("background","red")
)

prev~ sibling 元素后面的所有兄弟元素

$(function(){
    $("div ~ p").css("background","red")
)

3 过滤选择器

3.1 基本过滤选择器

first 和 last （取第一个元素后最后一个元素）

$("span:first").css("color":"red");
$("span:last").css("color":"green");

not（ 取非元素）

$("div:not(.wrap)").css("background","orange")

even 和 odd (取偶数索引或奇数索引元素)

$("tr:even").css("background","red");
$("tr:odd").css("background","green");

eq(x)（取指定索引的元素）

 $("tr:eq(2)").css("background","red");

gt(x)和It(x)（取大于x索引或者小于x索引的元素）

$("ul li:gt(2)").css("color","red");
$("ul li:lt(2)").css("color","orange");

6 :header （取H1~H6标题元素）

$(":header").css("background","yellow");

animated(选取正在执行的动画元素)

$(":animated").css("background","pink")

3.2 内容过滤选择器

contains 取包含指定文本内容的元素

$("li:contains(jquery)").css("background","red")

empty (取不包含子元素或者文本为空的元素)

$("li:empty").html("没有内容").css("background","red")

has(selector) 取选择器匹配的元素

$('div:has(span)').css('border','1px solid #f00')

parent取包含子元素或文本的元素

$('ol li:parent').css("border","1px solid #000")

3.3 可见性过滤选择器

hidden 取不可见的元素

$('div:hidden').show(500)
//:hidden只匹配css属性设置为display:none;type="hidden"的元素
alert($("input:hidden").val())

visible 取可见元素

$('div:visible').css("background","#EEADBB")

3.4 属性过滤选择器

attribute](取拥有attribute属性的元素)

$("a[title]").css({"text-decoration":"none","color":"red"});

[attribute=value]和[attribute!=value]

$('a[class="item"]').css("color","red");
$('a[class!="item"]').css("color","blue");

属性以某些字符开头结尾或包含

$('a[title^=jQuery]').css("color","red");
$('a[title$=jQuery]').css("font-size","24px");
$('a[title*=jQuery]').css("text-decoration","line-through")

[selector1][selector2]复合型属性选择器

$('a[title^=jQuery][class=item]').hide();

3.5子元素过滤选择器

first-child和last-child（父级元素匹配第一个子元素和父级元素匹配最后一个子元素）

$('div.one :first-child').css("background", "#bbffaa");
$("div.one :last-child").css("background", "orange");

only-child只包括一个元素

$("p:only-child").css("border","1px solid #f00").css("width","200px")

nth-child(x)第x个元素

$("tr:nth-child(3)").css("background","red");

nth-child（even）和nth-child（odd）

//偶数行背景颜色
$("tr:nth-child(even)").css("background","red");
//奇数行背景颜色
$("tr:nth-child(odd)").css("background","blue");

nth-child（xn+y）公式表示方式

$("tr:nth-child(2n)").css("background","#0000ff");

3.6表单过滤选择器

enabled和disabled（取可用或不可用元素）

$(":enabled").css("border","2px solid red")
$(":disabled").css("border","2px solid green")

checked 单选复选框元素

$(':checked').css('background', '#ff0000').each(function() {
    alert($(this).val())
})

selected (取下拉列表被选中的元素)

$('#sel').change(function() {
    alert($(":selected").val())
})

4、表单选择器

input（取input textarea select button元素）

$(":input").css("background","red")

text（取单行文本框元素）和password（取密码框元素)

$(':text').css('border', '1px solid #FF0000'); 
$(':password').css('border', '1px solid #0000FF'); 

radio（取单选框元素）

$(":radio").click(function(){
    alert($(this).val());
})

checkbox（取复选框元素）

$(':checkbox').each(function() { 
   alert($(this).val()); 
})