首页 > Web开发 > 详细

JQuery-选择器整理

时间：2014-05-14 14:37:43      阅读：468      评论：0      收藏：0      [点我收藏+]

一、基本选择器

 1）ID选择器

 2）标签选择器

 3 )  类选择器

 4 ) 通配符选择器

二、层级选择器

 1 ) 包含选择器

 2 ) 子选择器  

 3 ) 相邻选择器

 4 ) 兄弟选择器

三、简单的伪类选择器

1 ) 特定位置选择器

2 ) 指定范围选择器 

3 ) 排除选择器

四、与内容相关的伪类选择器

1 ) 匹配包含文本选择器

2)  匹配包含元素选择器

3 )  匹配包含判断选择器

4 ) 解析内容过滤实现原理

五、与元素显示状态相关的伪类选择器

六、匹配子元素的伪类选择器

七、与表单对象相关的伪类选择器

-------------------------------------------------------------------------------------------

一、基本选择器
1、ID选择器，语法：jQuery("#id")
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

   $("#div1").css("background","red");

 })

</script>

<title>上机练习</title>

</head>

<body>

<div id="div1">测试盒子</div>

</body>

</html>


2、标签选择器，语法： jQuery("element")
 注意：不需要附加前缀（#）
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

   $("div").css("color","red");

 })

</script>

<title>无标题文档</title>

</head>

<body> 

<div>div1</div>

<div>div2</div>

<div>div3</div>

</body>

</html>


3、类选择器，语法：jQuery(".className") 
 className为字符串，表示标签的class属性值，前缀符号“.”表示该选择器为类选择器。返回值为包含匹配className元素的jQuery对象。
 
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

   $(".red").css("color","red");

 })

</script>

<title>无标题文档</title>

</head>

<body>

<div class="red">div1</div>

<div>div2</div>

<div class="red">div3</div>

</body>

</html>







4、通配符选择器，语法：jQuery("*")


  参数“*”为字符串，表示将匹配指定范围内所有的标签元素。


<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

   $("body *").css("color","red");

 })

</script>

<title>无标题文档</title>

</head>

<body>

<div>DIV</div>

<span>SPAN</span>

<p>P</p>

</body>

</html>










二、层级选择器


1、包含选择器，语法：jQuery("ancestor descendant")


   其中,ancestor表示包含选择器，descendant表示被包含选择器。


   jQuery能够在ancestor选择器所匹配的元素中，过滤出匹配ancestor选择器的所有包含元素。


eg：


<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

  $("form input").css({"border":"solid 1px red","background":"blue"});

 })

</script>

<title>无标题文档</title>

</head>


<body>

〈form>

 <fieldset>

  <label>包含的子文本框

     〈input/>

  </label>

  <fieldset>

  <label>包含的孙子文本框

     〈input />

  </label>

  </fieldset>

</fieldset>

</form>

<label>非包含的文本框

     〈input />

  </label>

</body>

</html>





2、子选择器，语法：jQuery("parent>child")


     其中，parent表示父选择器，child表示被包含的子选择器，“>”为子选择器的标识符。jQuery能够在parent选择器所匹配的元素中，过滤出所有匹配child选择器的子元素。


eg:


<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

  $("div > img").css("border","solid 5px red");

 })

</script>

<title>无标题文档</title>

</head>

<body>

<div>

 <span><img src="images/bg.jpg" /></span>

 <img src="images/bg.jpg" />

</div>

<img src="images/bg.jpg" />

</body>

</html>





3、相邻选择器，语法：jQuery("prev+next")


其中，prev表示相邻的前一个选择器，next表示相邻的后一个选择器，


"+"为相邻选择器的标识符。jQuery能够在prev选择器所匹配的元素后，过滤出所有匹配next选择器的紧邻同级元素。


eg：


<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

  $("div + img").css("border","solid 5px red");

 })

</script>

<title>无标题文档</title>

</head>


<body>

<div>

 <span><img src="images/bg.jpg" /></span>

 <img src="images/bg.jpg" />

</div>

<img src="images/bg.jpg" />

<img src="images/bg.jpg" />

</body>

</html>





4、兄弟选择器,语法： jQuery("pre ~ siblings")


 其中，prev表示相邻的前一个选择器，siblings表示相邻的同级选择器，


“~”为兄弟选择器的标识符。jQuery能够在prev选择器所匹配的元素后，过滤出所有匹配siblings选择器的同级元素/


eg：


<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

  $("div ~ img").css("border","solid 5px red");

 })

</script>

<title>无标题文档</title>

</head>


<body>

<div>

 <span><img src="images/bg.jpg" /></span>

 <img src="images/bg.jpg" />

</div>

<img src="images/bg.jpg" />

<img src="images/bg.jpg" />

</body>

</html>





5、层级选择器综合应用







三、简单的伪类选择器


简单的伪类选择器也称为定位过滤器，因为他们主要根据编号和排位筛选特定位置上的元素，或者过滤掉特定元素


1、特定位置选择器


主要包括  :first 、 :last和:qe(index)3 种。:first能够在匹配的集合中选择第1个元素，相反:last能够在匹配的集合中选择最后一个元素，而


:eq(index)能够根据index索引值确定指定位置的元素。具体用户如下：


jQuery("selector:first") 


jQuery("selector:last") 


jQuery("selector:eq(index)") ,index从0开始计数


eg:


<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

  $("tr:first").css({"background":"blue","color":"white"});

  $("tr:qe(1)").css("background","#F1F5FB");

  $("tr:last").css("background","#ff9");

 })

</script>

<title>无标题文档</title>

</head>


<body>

<table>

 <tr><th>选择器</th><th>说明</th></tr>

 <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>

 <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>

</table>

</body>

</html>  





2、指定范围选择器


 主要包括 :even 、:odd 、 :gt(index)和:lt(index) 四种


:even 匹配集合中选择所有偶数行元素


:odd  匹配集合中选择所有级奇数行元素


:gt(index) 匹配集合中选择大于给定索引值的元素


:lt(index)  匹配集合中选择小于给定索引值的元素


eg:


<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

  $("tr:even").css("background","#F1F5FB");

  $("tr:odd").css("background","#ff9");

  $("tr:first").css({"background":"blue","color":"white"});

 })

</script>

<title>无标题文档</title>

</head>


<body>

<table>

 <tr><th>选择器</th><th>说明</th></tr>

 <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>

 <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>

  <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>

 <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>

  <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>

 <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>

</table>

</body>

</html>





3、排除选择器


语法：jQuery("selector1:not(selector2)");参数selector1、selector2和not为字符串，其中，selector1和selector2表示任意形式的选择器，“：”为伪类选择器的标识符，not表示排除函数标识符。


eg:


<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

  $("tr:even").css("background","#F1F5FB");

  $("tr:odd").css("background","#ff9");

  $("tr:first").css({"background":"blue","color":"white"});

  $("tr:not(tr:lt(3))").css({"background":"white","color":"black"});

 })

</script>

<title>无标题文档</title>

</head>


<body>

<table>

 <tr><th>选择器</th><th>说明</th></tr>

 <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>

 <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>

  <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>

 <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>

  <tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>

 <tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>

</table>

</body>

</html>





四、与内容相关的伪类选择器


：contains  -〉匹配包含给定文本的元素。例如，$("div:contains(‘图片‘)")匹配所有包含“图片”的div元素


：empty -〉匹配所有不包含子元素或者文本的空元素。


：has -〉匹配含有选择器所匹配的元素的元素。例如。$("div:has(p)") 匹配所有包含p元素的div元素


1、匹配包含文本选择器


    语法：jQuery("selector:contains(text)")


<script src="jQuery/jquery-1.6.4.js" type="text/javascript" ></script>

<script type="text/javascript">

 $(

  function(){

    $("dd:contains(‘乔布斯‘)").css("text-decoration","underline");

  }

 )

</script>

<title>无标题文档</title>

</head>


<body>

<h2>纪念乔布斯的评论</h2>

<dl>

 <dt>李德0202：</dt>

  <dd>司法官神风怪盗法国分公司公司发的，国防生大哥，国防生的故事法国，国防生大哥</dd>

  <dt>啊大法师反对法：</dt>

  <dd>乔布斯走了，反对反对，放大发射点法，啊大法师法的放大三发，史蒂夫.乔布斯！1955-2011 永远铭记在我们心里！乔布斯，一路走好！</dd>

  <dt>啊大法发射点发生的发</dt>

  <dd>歌功颂德丰功硕德发个三的发个</dd>

</dl>

</body>

</html>





2、匹配包含元素选择器


语法: jQuery("selector1:has(selector2)");


3、匹配包含判断选择器


语法：jQuery("selector:empty");


          jQuery("selector:parent");


:empty匹配元素中包含空内容的元素


:parent匹配元素中包含非空内容的元素


4、解析内容过滤实现原理







五、与元素显示状态相关的伪类选择器


:hidden 匹配所有不可见元素，或者type为hidden的元素


:visible 匹配所有的可见元素







六、匹配子元素的伪类选择器


:nth-child   匹配其父元素下的第N个子或奇偶元素 


:first-child  匹配第一个子元素。:first只匹配一个元素，而:first-child选择器将为每个父元素匹配一个子元素


:last-child  匹配最后一个子元素。:last只匹配一个元素，而:last-child选择器将为每个父元素匹配一个子元素


:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配；如果父元素中含有其他元素，那将不会被匹配







七、与表单对象相关的伪类选择器


:input 匹配所有input , textarea,select和button元素


:text    匹配所以的单行文本框


:password  匹配所有密码框


:radio 匹配所有单选框


:checkbox 匹配所有复选框


:submit 匹配所有提交按钮


:image 匹配所有图像域


:reset 匹配所有重置按钮


:button 匹配所有按钮


:file 匹配所有文件


:hidden 匹配所有不可见元素


JQuery-选择器整理,布布扣,bubuko.com
JQuery-选择器整理
原文：http://blog.csdn.net/love_jk/article/details/25750959

                

                
                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                            

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            
                            

                        

                    

                

                
            

        

        

            

    



            
            


    

        

            分享档案

        

            更多>
        

        

        

    

    

        
                
                    2021年09月23日
                    (328)

            
                
                    2021年09月24日
                    (313)

            
                
                    2021年09月17日
                    (191)

            
                
                    2021年09月15日
                    (369)

            
                
                    2021年09月16日
                    (411)

            
                
                    2021年09月13日
                    (439)

            
                
                    2021年09月11日
                    (398)

            
                
                    2021年09月12日
                    (393)

            
                
                    2021年09月10日
                    (160)

            
                
                    2021年09月08日
                    (222)

            
    




            


    

        
最新文章

        

            更多>

        

        

    

    

        
    




            


    

        
教程昨日排行

        

            更多>

        

        

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            汇智网  
            PHP教程  
            插件网  
					
			
        

    





    

        

            

                关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
            

            

                © 2014 bubuko.com 版权所有
            

            

                打开技术之扣，分享程序人生！