一丶基本选择器

id选择器

	 <div id="fancy">
    	<p>id="fancy"</p>
    	<p>选中</p>
    </div>
    <script type="text/javascript">
        $("#fancy").css("color", "red");
//使用方法 $( "#id" )
    </script>

类选择器

	 <div class="fancy">
    	<p>class="fancy"</p>
    	<p>选中</p>
    </div>
    <script type="text/javascript">
        $(".fancy").css("color", "red");
		//使用方法 $( ".class" )
    </script>

元素选择器

	 <div>
    	<p>选中</p>
		<a>未选中</a>
    </div>
    <script type="text/javascript">
        $("p").css("color", "red");
		//使用方法 $( "element" )
    </script>

运行结果

全选择器

	 <div>
		 <p id="well">id</p>
    	 <p class="fancy">class</p>
	 	 <a>wellfancy</a>
    </div>
    <script type="text/javascript">
        $("*").css("color", "red");
		//使用方法 $( "*" )
    </script>

运行结果

?层级选择器：

子选择器

	 <div>
    	<p>选中1</p>
		<p>选中2</p>
		<a>未选中</a>
		<dd>
			<p>hello</p>
		</dd>
    </div>

    <script type="text/javascript">
       $("div > p").css("color", "red");
		//使用方法 $("parent > child")
    </script>

运行结果

后代选择器

	 <div>
    	<p>选中1</p>
		<p>选中2</p>
		<a>未选中</a>
		<dd>
			<p>hello</p>
		</dd>
    </div>

    <script type="text/javascript">
       $("div  p").css("color", "red");
		//使用方法 $("ancestor  descendant")
    </script>

运行结果

二丶筛选选择器

基本筛选选择器

$(": first ")，匹配第一个元素

$(": last")，匹配最后一个元素

$(": eq(index)")，在匹配的集合中选择索引值为index的元素

$(": gt(index)")，在匹配的集合中选择大于索引值为index的元素?

$(": lt(index)")，在匹配的集合中选择小于索引值为index的元素

注意：jQuery合集都是从0开始索引的，即编号为0的元素是第一个元素?

	    <div class="well">
	        <div class="qq">
	            <p>编号为0</p>
	        </div>
	        <div class="qq">
	            <p>编号为1</p>
	        </div>
	        <div class="qq">
	            <p>编号为2</p>
	        </div>
	        <div class="qq">
				<p>编号为3</p>
	        </div>
	        <div class="qq">
	            <p>编号为4</p>
	        </div>
	        <div class="qq">
	            <p>编号为5</p>
	        </div>
	    </div>
	    <script type="text/javascript">
		//选择编号为2的元素
	    $(".qq:eq(2)").css("border", "3px groove red");
	    </script>
	    
	    <script type="text/javascript">
		//选择编号大于3的元素
	    $(".qq:gt(3)").css("border", "3px groove blue");
	    </script>
	    
	     <script type="text/javascript">
		 //选择编号小于2的元素
	    $(".qq:lt(2)").css("border", "3px groove black");
	    </script>

?运行结果

?内容筛选选择器

$(": contains(text)")，选择所有包含指定文本的元素

$(": has(selector)")，选择元素中至少包含指定选择器的元素

?注意：contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

<body>   
	    <div class="well">
	        <div class="qq">
	            <p>123</p>
	        </div>
	        <div class="qq">
	            <p>123</p>
	        </div>
	        <div class="qq">
	            <p>123</p>
	        </div>
	        <div class="qq">
				<p>456</p>
	        </div>
	        <div class="qq">
	            <span>456</span>
	        </div>
	        <div class="qq">
	            <p>456</p>
	        </div>
	    </div>
		
	    <script type="text/javascript">
	  $(".qq:contains('123')").css("border", "3px groove red");
	    </script>
		
		<script type="text/javascript">
		    $(".qq:has(span)").css("border", "3px groove blue");
		 </script>

</body>

?运行结果

属性筛选选择器

属性筛选选择器有很多，其中?[attr="value"]和[attr*="value"]是最常用到的

[attr="value"]，选择指定属性值等于给定字符串或以该文字串为前缀的元素

[attr*="value"]，选择指定属性具有包含一个给定的子字符串的元素

?子元素筛选选择器

$(" : first-child ")，选择所有父级元素下的第一个子元素

$(" : last-child ")，选择所有父级元素下的最后一个子元素

$(" : only-child ")，如果某个元素是其父元素的唯一子元素，那么他会被选中

$(" : nth-child ")，选择他们所有父元素的第n个子元素

$(" : nth-last-child ")，选择他们所有父元素的第n个子元素，但是从最后一个往前计数

    <div class="left last-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>第三个元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>第三个元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查找class="last-div"下的第二个a元素
       $('.last-div a:nth-child(2)').css("color", "blue");
    </script>

    <script type="text/javascript">
        //查找class="last-div"下的倒数第二个a元素
     $('.last-div a:nth-last-child(2)').css("color", "red");
    </script>

?运行结果

表单元素选择器

?$(" : input ")，选择所有input，textarea，select和button元素

?$(" : text")，匹配所有文本框

?$(" : password?")，匹配所有密码框

?$(" : radio")，匹配所有单选按钮

?$(" : checkbox")，匹配所有多选按钮

?$(" : submit")，匹配所有提交按钮

?$(" : image")，匹配所有图像域

?$(" : reset")，匹配所有重置按钮

?$(" : button")，匹配所有按钮

?$(" : file")，匹配所有文件域

    <div class="left first-div">
        <form>
            <input type="text" value="text"/>
            <input type="password" value="password"/>
            <input type="submit" />

        </form>
    </div>

    <script type="text/javascript">
        $(":input").css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
        //匹配所有input元素中类型为text的input元素
       $('input:text').css("background", "#A2CD5A");
    </script>

    <script type="text/javascript">
        //匹配所有input元素中类型为password的input元素
        $('input:password').css("background", "yellow");
    </script>

    <script type="text/javascript">
        //匹配所有input元素中的提交的按钮,修改背景颜色
        $('input:submit').css("background", "#C6E2FF");
    </script>

?运行结果