JQuery选择器

四种基本选择器

选择器名	选择器用法及含义
$("*")	匹配所有元素 (集合元素)
$("#test")	选取id为test的元素  返回单个元素
$("p")	选取所有的<p>元素  返回一个集合
$(".test")	选取所有class为test的元素  返回一个集合

层次选择器 

选择器格式	选择器含义
$("ancestor descendant") 选取ancestor元素里的所有后代元素	例：$("div span") 返回div里所有<span>元素  $(".container p")返回class为container的所有p元素。
$("parent>child") 选取parent元素下的child子元素	$("div>span")选取<div>元素下的元素名是<span>的子元素。              $("#main> *")选择id值为main的所有子元素。
$("prev+next")选取紧接在prev元素后的next元素	$(".one+div")选取class为one的下一个<div>同辈元素。              $("label + input")选择所有label元素的下一个input元素。
$("prev~siblings")选取prev元素之后的所有siblings元素	$("#two~div")选取id为two的元素后面的所有<div>同辈元素。              $("#prev~#div1 ")选择id为prev的元素后面所有id为div1的div同辈元素。

注意：$("div span")和$("div>span")是有区别的
             $("div span")会选取div里所有的<span>元素。
             而$("div>span")只会选取<div>直属的<span>子元素。

关于同辈元素之间：

$("div span")和$("div>span")是有区别的
$("div span")会选取div里所有的<span>元素。
而$("div>span")只会选取<div>直属的<span>子元素。

选择方法:

1. next() 等价于$(“prev + next”):他下一个兄弟元素
2. nextAll() 等价于$(“prev～siblings”)：他后面的所有兄弟
3. siblings() 类似$(“prev～siblings”)，但无关前后，选择所有同辈节点
4. .children() 获取匹配元素的所有子元素
5. parent()  获取匹配元素的父元素
6. .parents() 获取匹配元素的所有父元素

内容过滤选择器

        <script type="text/javascript">
		$(function(){
			//选择 含有文本 'di' 的 div 元素
			$("#btn1").click(function(){
				$("div:contains('di')").css("background","#0050D0");
			});
			//选择不包含子元素(或者文本元素) 的 div 空元素
			$("#btn2").click(function(){
				$("div:empty").css("background","#0050D0");
			});
			
			//选择含有子元素(或者文本元素)的div元素
			$("#btn3").click(function(){
				$("div:parent").css("background","#0050D0");
			});
		})
			
		</script>

可视化过滤选择器 

<script type="text/javascript">
			$(function(){
				//选取所有可见的  div 元素
				$("#btn1").click(function(){
					$("div:visible").css("background","#0050D0");
				});
				
				//选择所有不可见的 input 元素
				$("#btn2").click(function(){
					//val():获取input的value属性的值
					alert($("input:hidden").val());
				});
			})
			
		</script>

属性过滤选择器

 

选择器用法	选择器含义
$("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结尾的元素

子元素过滤选择器

         <!--
         	子元素过滤选择器： 
        $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 
 
        $("div span:first-child") 返回所有的div元素的第一个子节点的数组 
        $("div span:last-child")  返回所有的div元素的最后一个节点的数组 
        $("div button:only-child")返回所有的div中只有唯一一个子节点的所有子节点的数组 
         -->
        		<script type="text/javascript">
			$(function(){
				//选取每个class为one的div父元素下的第2个子元素
				$("#btn1").click(function(){
					//注意：选取子元素，需要在选择器前面加个空格
					$("div.one :nth-child(2)").css("background","#0050D0");
				});
				
				//选取每个class为one的div父元素下的第一个子元素.
				$("#btn2").click(function(){
					$("div.one :first-child").css("background","#0050D0");
				});
				
				$("#btn3").click(function(){
					$("div.one :last-child").css("background","#0050D0");
				});
				$("#btn4").click(function(){
					$("div.one :only-child").css("background","#0050D0");
				});
			})
		</script>

表单选择器

为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器。利用表单选择器，能够极其方便地获取到表单的某个或某些类型的元素。表单选择器：

 

名称和用法	含义
:input    $(":input")	所有 <input> 元素
:text    $("input:text")	所有 type="text" 的 <input> 元素
:password    $(":password")	所有 type="password" 的 <input> 元素
:radio    $(":radio")	所有 type="radio" 的 <input> 元素
:checkbox    $(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit    $(":submit")	所有 type="submit" 的 <input> 元素
:reset    $(":reset")	所有 type="reset" 的 <input> 元素
:button    $(":button")	所有 type="button" 的 <input> 元素
:image    $(":image")	所有 type="image" 的 <input> 元素
:file    $(":file")	所有 type="file" 的 <input> 元素