jQuery选择器

一、基础选择器

1.ID选择器
例如：

$("#one").css("background-color","red");

2.class选择器
例如：

$(".two").css("color","green");

3.element选择器
例如：

$("p").css("border","1px solid purple");

4.*选择器
例如：

$("*").css("text-decoration","underline");

5.组合选择器
例如：

$("#one, .two, p span").css({"font-weight":"bold","color":"orange"});

二、层次选择器

1.后代选择器
例如：

$("div span").css("color","purple")

2.直系后代选择器
例如：

$("div>span").css("color","red").css("font-size","26px");

3. prev+next 下一个兄弟元素，等同于next()方法
   例如：

//$(".list1+li").css("background-color","pink")
				$(".list1").next("li").css("background-color","pink")

4.prev~sibling(元素后面的所有兄弟元素，等同于nextAll()方法)
例如：

//$(".list2~li").css("border","3px solid green").slideUp(1000);
				$(".list2").nextAll("li").css("border","3px solid green")

三、过滤选择器

1.基础过滤选择器
(1).first and last
例如：

//:first和:last(取第一个元素或最后一个元素)
                $("span:first").css({"color":"red","font-weight":"bold"});
                $("span:last").css({"color":"green","font-weight":"bold"});

(2). not取非元素
例如：

$("div:not(.wrap)").css("background", "orange") //取非......的元素
                    .siblings().css("background", "green")
                    .parent().css("border", "2px solid #ccc")

(3). odd和even取奇偶数
例如：

//:even  和:odd(取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数)
                    $("tr:even").css("background", "red");
                    $("tr:odd").css("background", "green");

(4). 取指定索引的元素
例如：

//:eq(x)(取指定索引的值)
                    $('tr:eq(2)').css('background','#ff0000')

(5). gt(x)到索引大于x或者小于x的元素
例如：

//:gt(x)和lt(x) 取大于x索引或者小于x索引的元素
                    $('ul li:gt(2)').css('color','red')
                    $('ul li:lt(2)').css('color','orange')

(6). header取H1~H6标题元素
例如：

//:header  取H1~H6标题元素
                    $(':header').css('background','yellow')

(7). animateIt
例如：

function animateIt(){
                    $("#mover").slideToggle("slow",animateIt)
                }
                animateIt()
                //:animated取动画元素
                $(":animated").css("background","pink")

(8). focus基本过滤选择器
例如：

//$("form input:focus").css("background","red")
                $("input").focus(function(){
                    $(this).css("background","red")
                })

2.内容过滤选择器
(1). contains取包含指定文本内容的元素
例如：

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

(2). empty(取不包含子元素或文本为空的元素）
例如：

//:empty(取不包含子元素或文本为空的元素)
            $("li:empty").html("没有内容").css("background","red")

(3). has(selector)(取选择器匹配的元素)
例如：

 $("*").css({"margin":"0","padding":"0"})
           //has(selector)(取选择器匹配的元素)
           $('div:has(span)').css('border','1px solid #f00')

(4).parent(取包含子元素或文本的元素)
例如：

//取包含子元素或文本的元素
           $('ol li:parent').css('border','1px solid #000')

3.可见性过滤选择器
注意：
jQuery 至 1.3.2之后的:hidden 选择器仅匹配 display:none 或的元素，而不匹配 visibility: hidden 或 opacity:0 的元素。这也
意味着 hidden 只匹配那些“隐藏的”并且不占空间的元素，像 visibility:hidden 或
opactity:0 的元素占据了空间，会被排除在外。

(1). hidden取不可见元素
例如：

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

(2). visible取可见元素
例如：

 $('div:visibility').css("background", "#eeadbb");
            //:visibility 只匹配显示的元素(css未设置display:none的元素)

4.属性过滤选择器
(1). 取拥有attribute属性的元素
例如：

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

(2). attribute=value和attribute!=value
例如：

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

(3). 属性以某些字符开头某些字符结尾或包含某些字符
例如：

 //识别大小写，输入字符串时可输入引号,[title^=jQuery]和[title^="jQuery"]是一样的
            $("a").css("text-decoration","none");
            $("a[title^=jQuery]").css("color","red");//开头
            $("a[title$=jQuery]").css("font-size","24px");//结尾
            $("a[title*=jQuery]").css("text-decoration","line-through");//包含

(4). 复合属性过滤选择器
例如：

//[selector][selector2]复合型属性选择器
			$('a[title^=jQuery][class=item]').hide()

5.子元素过滤选择器
(1). first-child和last-child
例如：

 //selector:first-child返回的是整个第一个子元素
             $('div.one :first-child').css("background","#bbffaa");
             $("div.one :last-child").css("background","orange");

(2).only-child仅包含一个元素
例如：

//当有一个元素有且仅有一个子元素时，：only-child才会生效
            $("p:only-child").css({"border":"1px solid #ff0000","width":"200px"})

(3). nth-child(x)第x个元素
例如：

//序数词，获取第x个子元素,第一个dom元素就是1而不是0，
            $("tr:nth-child(3)").css("background","red");
            })

(4). nth-child(even)和nth-child(odd)
例如：

 //当有一个元素有且仅有一个子元素时，：only-child才会生效
            $("tr:even").css("background","red")
            $("tr:odd").css("background","blue")

(5).nth-child(xn+y)公式表示方式
例如：

$("tr:nth-child(2n)").css("background","red")

6.表单过滤选择器
(1). enabled和disabled取可用或不可用元素
例如：

 //:enabled和:disabled的匹配范围包括input,select,textarea
            $(':enabled').css('border','2px solid red')
            $(':disabled').css('border','2px solid green')

(2). checked取选中的单选框或复选框元素
例如：

  //下面的代码更改边框或背景颜色仅在IE下有效果，chrome和firefox不会改变，但是alert都会弹出
            $(':checked').css('background','#ff0000').each(function(){
                alert($(this).val())
            })

(3). selected取下拉列表被选中的元素
例如：

 $("#sel").change(function(){
               //selected 取下拉列表中被选中的值
               //alert($(':selected').val())
               alert($(":selected").val())
           })

四、表单选择器

1. input取input textarea select button元素
   例如：

 //取input单行文本框，textarea多行文本框,select,button元素
            $(":input").css("background","red")

2. text（取单行文本框元素）和password（取密码框元素）
   例如：

$(':text').css('border', '1px solid #FF0000'); 
				$(':password').css('border', '1px solid #0000FF'); 
				// 等效代码 
				//$('input[type=text]').css('border', '1px solid #FF0000'); 
				//$('input[type=password]').css('border', '1px solid #0000FF'); 

3. radio（取单选框元素）
   例如：

//选择radio
				// $(":radio").each(function(){//遍历
				// 	alert($(this).val());
				// })
			
				$(":radio").click(function(){
					alert($(this).val());
				})

4. checkbox（取复选框元素）
   例如：

//01 弹出所有复选框的值
        // $(':checkbox').each(function() { 
        //     alert($(this).val()); 
        // }); 
        // 等效代码 
        // $('input[type=checkbox]').each(function() { 
        //     alert($(this).val()); 
        // }); 
       
		
		// 上面的代码，会将所有额checkbox的value输出出来。若你想选择选中项，
		// 有三种写法： 
		// $(':checkbox:checked').each(function() { 
		// 	alert($(this).val()); 
		// }); 
		 
		// $('input[type=checkbox][checked]').each(function() { 
		// 	alert($(this).val()); 
		// }); 
		 
		$(':checked').each(function() { 
			alert($(this).val()); 
		}); 

以上就是简单的jQ选择器