您的位置:68399皇家赌场 > 服务器租用 > 在jQuery中 常用的选取器介绍

在jQuery中 常用的选取器介绍

发布时间:2019-08-03 00:23编辑:服务器租用浏览(60)

    档案的次序接纳器:

    jQuery选用器。 5.21 《晚上还在编码的您》,jquery采纳器

    (之所以字体弄那么大是因为省眼,程序猿不易于,程序员的双眼更不易于,请爱慕我们的眼睛)

    采纳器是jQuery的根底,在jQuery中,对事件管理、遍历DOM和Ajax操作都依附于选取器。

    熟谙地使用选用器,不但能简化代码,並且能够一举两得。

    jQuery选拔器可透过CSS选取器、条件过滤两种格局得到成分。

    能够透过CSS采用器语法则则赢得成分的jQuery选取器包蕴基本选用器、档期的顺序选择器和个性选取器;

    能够透过规范过滤选取成分的jQuery选拔器包涵基本过滤采用器和可知性过滤选取器。

    jQuery 的选拔器是很大块大的,在此间小编计算一下常用的要素查找方法

     

    一、基本采取器

    1. id选择器(指定id元素)
      将id="one"的因素背景象设置为白色。(id选用器返单个元素)

     

    1 $(document).ready(function () {
    2         $('#one').css('background', '#000');
    3  });
    

     

     

    1. class选择器(遍历css类元素)
      将class="cube"的要素背景象设为月光蓝

      1 $(document).ready(function () { 2 $('.cube').css('background', '#000'); 3 });

     

     

    1. element选择器(遍历html元素)
      将p成分的文字大小设置为12px

      1 $(document).ready(function () { 2 $('p').css('font-size', '12px'); 3 });

     

     

    1. * 选拔器(遍历全部因素)

      1 $(document).ready(function () { 2 // 遍历form下的装有因素,将字体颜色设置为革命 3 $('form *').css('color', '#FF0000'); 4 });

     

     

    1. 并称选取器

      1 $(document).ready(function () { 2 // 将p元素和div元素的margin设为0 3 $('p, div').css('margin', '0'); 4 }); 5 6 7 $(document).ready(function(){ 8 $('#.nihao').hover( 9 function(){ 10 $(this).addClass("") 11 },function(){ 12 $(this).removeClass("") 13 }); 14 });

     

     

     基本过滤选取器

    1. :first和:last(取第三个要素或最终一个要素)

      1 $(document).ready(function () { 2 $('span:first').css('color', '#FF0000'); 3 $('span:last').css('color', '#FF0000'); 4 });//下边的代码,G1(first元素)和G3(last成分)会变色 5 6 G1 7 G2 8 G3

     

    1. :not(取非元素)

      1 $(document).ready(function () { 2 $('div:not(.wrap)').css('color', '#FF0000'); 3 });//下边包车型客车代码,G1会变色 4 5

      G1
      6
      G2
      7 //不过,请细心上面包车型大巴代码: 8 9
      10 G1 11
      G2
      12

     

    当G1所在div和G2所在div是父亲和儿子关系时,G1和G2都会变色。

    3. :even和:odd(取偶数索引或奇数索引成分,索引从0起先,even代表偶数,odd表示奇数)

     1 $(document).ready(function () {
     2             $('tr:even').css('background', '#EEE'); // 偶数行颜色
     3             $('tr:odd').css('background', '#DADADA'); // 奇数行颜色
     4         });A、C行颜色#EEE(第一行的索引为0),B、D行颜色#DADADA
     5 
     6  
     7 
     8 <table width="200" cellpadding="0" cellspacing="0">
     9     <tbody>
    10         <tr><td>A</td></tr>
    11         <tr><td>B</td></tr>
    12         <tr><td>C</td></tr>
    13         <tr><td>D</td></tr>
    14     </tbody>
    15 </table>
    

     

    1 $("#myELement")   //  选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 
    2 $("div")         //   选择所有的div标签元素,返回div元素数组 
    3 $(".myClass")    //   选择使用myClass类的css的所有元素 
    4 $("*")          //    选择文档中的所有的元素,可以运用多种的选择方式进行合选择:例如$("#myELement,div,.myclass") 
    

    One(档案的次序选取器):

     

    1 $("form input")          // 选择所有的form元素中的input元素 
    2 $("#main > *")          //   选择id值为main的所有的子元素 
    3 $("label   input")     //   选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元  // 素 
    4 $("#prev ~ div")       //   同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 
    

     

    1. parent > child(直系子成分)

      1 $(document).ready(function () { 2 // 选用div下的第一代span成分,将字体颜色设为银色 3 $('div > span').css('color', '#FF0000'); 4 });上面包车型大巴代码,唯有首先个span会变色,第二个span不属于div的一代子成分,颜色保持不改变。 5 6

      7 123 8

      9 456 10

      11

     

    1. prev next(下叁个弟兄成分,等同于next()方法)

      1 $(document).ready(function () { 2 // 选用class为item的下三个div兄弟成分 3 $('.item div').css('color', '#FF0000'); 4 // 等价代码 5 //$('.item').next('div').css('color', '#FF0000'); 6 });下边包车型客车代码,独有123和789会变色 7

      8
      123
      9
      456
      10 11
      789

     

    1. prev ~ siblings(prev成分的具备兄弟成分,等同于nextAll()方法)

      1 $(document).ready(function () { 2 // 采取class为inside之后的有所div兄弟元素 3 $('.inside ~ div').css('color', '#FF0000'); 4 // 等价代码 5 //$('.inside').nextAll('div').css('color', '#FF0000'); 6 });下面包车型地铁代码,G2和G4会变色 7 8

      G1
      9
      G2
      10 G3 11
      G4

     

    Two(属性选用器):

     

    1 $("div[id]")                  // 选择所有含有id属性的div元素 
    2 $("input[name='newsletter']")  //  选择所有的name属性等于'newsletter'的input元素 
    4 $("input[name!='newsletter']")// 选择所有的name属性不等于'newsletter'的input元素 
    6 $("input[name^='news']")     //    选择所有的name属性以'news'开头的input元素 
    7 $("input[name$='news']")     //    选择所有的name属性以'news'结尾的input元素 
    8 $("input[name*='man']")       //选择所有的name属性包含'news'的input元素 
    

     

     [attribute](取具备attribute属性的因素)

    上边包车型大巴代码,最终二个a标签没有title属性,所以它依旧会久咳划线

     1 <script type="text/javascript">
     2         $(document).ready(function() {
     3             $('a[title]').css('text-decoration', 'none');
     4        });
     5     </script>       
     6     <ul>
     7         <li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
     8         <li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
     9         <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
    10         <li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
    11         <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
    12         <li><a href="#" class="item">其他</a></li>
    13     </ul>——4.2 [attribute = value]和[attribute != value](取attribute属性值等于value或不等于value的元素)
    14 
    15 分别为class="item"和class!=item的a标签指定文字颜色
    16 
    17 
    18 .main_shipin a:hover img{filter:Alpha(Opacity=70);opacity:0.7;}
    

     

     

     

    Three(基本过滤选拔器):

    1 $("tr:first")            //   选择所有tr元素的第一个 
    2 $("tr:last")            //    选择所有tr元素的最后一个 
    3 $("input:not(:checked)   span")  //过滤掉:checked的选择器的所有的input元素 
    

    过滤掉:checked的选用器的具有的input成分

    $("tr:even")          //     选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) 
    
    $("tr:odd")             //   选择所有的tr元素的第1,3,5... ...个元素 
    $("td:eq(2)")         //    选择所有的td元素中序号为2的那个td元素 
    $("td:gt(4)")         //    选择td元素中序号大于4的所有td元素 
    $("td:ll(4)")           //   选择td元素中序号小于4的所有的td元素 
    $(":header") 
    $("div:animated") 
    

     

    Four(可知性过滤接纳器):

    1 $("div:hidden")      // 选择所有的被hidden的div元素 
    2 $("div:visible")      //  选择所有的可视化的div元素 
    

     

     :hidden(取不可知的要素)

    jQuery至1.3.2随后的:hidden采取器仅相称display:none或<input type="hidden" />的要素,而不匹配visibility: hidden或opacity:0的成分。那也象征hidden只异常这么些“掩饰的”而且不占空间的要素,像visibility:hidden或opactity:0的要素私吞了空中,会被消除在外。

    下边包车型客车代码,先弹出"hello"对话框,然后hid-1会突显,hid-2还是是不可知的。

     1 <html xmlns="http://www.w3.org/1999/xhtml" >
     2 <head runat="server">
     3     <title></title>
     4     <style type="text/css">
     5         div
     6         {
     7             margin: 10px;
     8             width: 200px;
     9             height: 40px;
    10             border: 1px solid #FF0000;
    11             display:block;
    12         }
    13         .hid-1
    14         {
    15             display: none;
    16         }
    17         .hid-2
    18         {
    19             visibility: hidden;
    20         }
    21     </style>
    22     <script type="text/javascript" src="js/jquery.min.js"></script>
    23     <script type="text/javascript">
    24         $(document).ready(function() {
    25             $('div:hidden').show(500);
    26             alert($('input:hidden').val());
    27         });
    28     </script>
    29 </head>
    30 <body>
    31     <div class="hid-1">display: none</div>
    32     <div class="hid-2">visibility: hidden</div>
    33     <input type="hidden" value="hello"/>
    34 </body>
    35 </html>
    

     

    ——3.2 :visible(取可知的元素)

    下边包车型大巴代码,最终三个div会有背景色

     1 <script type="text/javascript">
     2     $(document).ready(function() {
     3         $('div:visible').css('background', '#EEADBB');
     4     });
     5 </script>
     6 <div class="hid-1">display: none</div>
     7 <div class="hid-2">visibility: hidden</div>
     8 <input type="hidden" value="hello"/>
     9 <div>
    10     jQuery选择器
    11 </div>
    

     

    Five(内容过滤采纳器):

    1 $("div:contains('John')") //选择所有div中含有John文本的元素 
    2 $("td:empty")        //   选择所有的为空(也不包括文本节点)的td元素的数组 
    3 $("div:has(p)")    //    选择所有含有p标签的div元素 
    4 $("td:parent")       //   选择所有的以td为父节点的元素数组 
    

     

     1. :contains(text)(取包括text文本的因素)

     1 $(document).ready(function () {
     2             // dd元素中包含"jQuery"文本的会变色
     3             $('dd:contains("jQuery")').css('color', '#FF0000');
     4         });下面的代码,第一个dd会变色
     5 
     6 <dl>
     7     <dt>技术</dt>
     8     <dd>jQuery, .NET, CLR</dd>
     9     <dt>SEO</dt>
    10     <dd>关键字排名</dd>
    11     <dt>其他</dt>
    12     <dd></dd>
    13 </dl>
    

     

    1. :empty(取不分包子成分或文本为空的因素)

      1 $(document).ready(function () { 2 $('dd:empty').html('未有内容'); 3 });

     

    地点第多少个dd会显示"未有内容"文本

    1. :has(selector)(取选取器相称的成分)

      1 $(document).ready(function () { 2 // 为涵盖span成分的div增添边框 3 $('div:has(span)').css('border', '1px solid #000'); 4 });固然span不是div的直系子成分,也会生效 5 6

      7

      8 A 9 B 10

      11

     

    1. :parent(取满含子成分或文本的因素)

      1 $(document).ready(function () { 2 $('ol li:parent').css('border', '1px solid #000'); 3 });上面包车型客车代码,A和D所在的li会有边框 4 5

        6
      1. 7
      2. A
      3. 8
      4. 9
      5. D
      6. 10

     

    Six(子成分过滤选择器):

    1 $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n   1)") 
    3 $("div span:first-child")       //   返回所有的div元素的第一个子节点的数组 
    4 $("div span:last-child")        //   返回所有的div元素的最后一个节点的数组 
    5 $("div button:only-child")      // 返回所有的div中只有唯一一个子节点的所有子节点的数组 
    

     

    Seven(表单成分选用器):

     1 $(":input")              //    选择所有的表单输入元素,包括input, textarea, select 和 button 
     3 $(":text")               //      选择所有的text input元素 
     4 $(":password")       //    选择所有的password input元素 
     5 $(":radio")                //   选择所有的radio input元素 
     6 $(":checkbox")        //    选择所有的checkbox input元素 
     7 $(":submit")            //   选择所有的submit input元素 
     8 $(":image")            //     选择所有的image input元素 
     9 $(":reset")             //      选择所有的reset input元素 
    10 $(":button")           //     选择所有的button input元素 
    11 $(":file")                //     选择所有的file input元素 
    12 $(":hidden")         //      选择所有类型为hidden的input元素或表单的隐藏域 
    

     

    Eight(表单成分过滤选拔器):

    1 1 $(":enabled")            // 选择所有的可操作的表单元素 
    2 2 $(":disabled")          //  选择所有的不可操作的表单元素 
    3 3 $(":checked")        //    选择所有的被checked的表单元素 
    4 4 $("select option:selected")// 选择所有的select 的子元素中被selected的元素 
    

    —————————————————————————————华丽的分水岭——————————————————————————————————

    //选取一个Name 为”S_2222″的input text框的上一个td的text值
    $(”input[@ name =S_2222]“).parent().prev().text() 
    
    //名字以”S_”开始,并且不是以”_R”结尾的
    $(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 
    
    //一个名为 radio_1294的radio所选的值
    $(”input[@ name =radio_1294][@checked]“).val(); 
    

    $(``"A B"``) 查找A元素下面的所有子节点,包括非直接子节点

    $(``"A>B"``) 查找A元素下面的直接子节点 $(``"A B"``) 查找A元素后面的兄弟节点,包括非直接子节点 $(``"A~B"``) 查找A元素后面的兄弟节点,不包括非直接子节点

     //1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点  
    //例:找到表单中所有的 input 元素 
    //HTML 代码: 
     5 <form>
     6 <label>Name:</label>
     7 <input name="name" />
     8 <fieldset>
     9       <label>Newsletter:</label>
    10       <input name="newsletter" />
    11 </fieldset>
    12 </form>
    13 <input name="none" /> 
     //jQuery 代码: 
    15 $("form input") 
     //结果: 
    18 [ <input name="name" />, <input name="newsletter" /> ]
    
     1 //2. $("A>B") 查找A元素下面的直接子节点 
     2 //例:匹配表单中所有的子级input元素。 
     3 //HTML 代码: 
     4 <form>
     5 <label>Name:</label>
     6 <input name="name" />
     7 <fieldset>
     8       <label>Newsletter:</label>
     9       <input name="newsletter" />
    10 </fieldset>
    11 </form>
    12 <input name="none" /> 
    13 //jQuery 代码: 
    14 $("form > input") 
    15 //结果: 
    16 [ <input name="name" /> ] 
    

     1 //3. $("A B") 查找A元素后面的兄弟节点,包括非直接子节点 
     2 //例子:匹配所有跟在 label 后面的 input 元素 
     3 //HTML 代码: 
     4 <form>
     5 <label>Name:</label>
     6 <input name="name" />
     7 <fieldset>
     8       <label>Newsletter:</label>
     9       <input name="newsletter" />
    10 </fieldset>
    11 </form>
    12 <input name="none" /> 
    13 //jQuery 代码: 
    14 $("label   input") 
    15 //结果: 
    16 [ <input name="name" />, <input name="newsletter" /> ] 
    

    --

     1 //4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 
     2 //例子:找到所有与表单同辈的 input 元素 
     3 //HTML 代码: 
     4 <form>
     5 <label>Name:</label>
     6 <input name="name" />
     7 <fieldset>
     8       <label>Newsletter:</label>
     9       <input name="newsletter" />
    10 </fieldset>
    11 </form>
    12 <input name="none" /> 
    13 //jQuery 代码: 
    14 $("form ~ input") 
    15 //结果: 
    16 [ <input name="none" /> ] 
    

     

    编纂选取器时要小心特殊符号和空格。

     

    以上是自身所总括   感谢您的观望!

     

    生存实在和代码是一致的  总有不顺的时候  在当年调换一下你的考虑  或者你能够更动那不顺。

                                                                                              **爱自己 爱生活  爱代码  爱音乐 爱文字 爱交友 **

     

    www.68399.com 1©上海你好!

          
    
                作者:微冷的风
    
                出处:http://www.cnblogs.com/smbk/ 
    
                本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
    

    5.21 《中午还在编码的你》,jquery选取器 (之所以字体弄那么大是因为省眼,程序猿不易于, 程序猿的眼睛更不轻易,请珍视...

    (之所以字体弄那么大是因为省眼,技术员不便于,程序员的眸子更不便于,请珍爱我们的双眼)

    $('div p');//选拔div下的具有的p元素

    选取器是jQuery的根底,在jQuery中,对事件管理、遍历DOM和Ajax操作都信赖于采用器。

    $('div>p').css('border','1px solid red');//只选拔div下的直白子成分

    熟知地使用采纳器,不但能简化代码,并且能够一矢双穿。

    //相邻的成分

    jQuery采取器可由此CSS选取器、条件过滤二种方法赢得成分。

    $('div www.68399.com,~ p).css('border','1px solid red');与$('div').nextAll('p')等价;//表示div后面的

    能够由此CSS选用器语法则则获得成分的jQuery选用器包蕴大旨采用器、等级次序采用器和质量选取器;

    怀有p兄弟成分

    能够经过标准过滤选用成分的jQuery选拔器包罗核心过滤选取器和可知性过滤选择器。

    $('div ~ *').css('border','1px solid red');//表示div前边的装有兄弟元素

    jQuery 的采取器是很强劲的,在那边自身总计一下常用的因素查找方法

    $('div p').css('border','1px solid red');与$('div').next('p')等价//这种写法表示div后

     

    只找紧挨着的率先个小伙子成分,况且该因素是p。 

    一、基本选拔器

    赢得兄弟元素的方法:

    1. id选择器(指定id元素)
      将id="one"的因素背景象设置为紫铜色。(id选拔器返单个成分)

        next(); //当前成分之后的紧邻着的率先个汉子元素(下四个)

     

    nextAll();//当前因素之后的全体兄弟成分

    1 $(document).ready(function () {
    2         $('#one').css('background', '#000');
    3  });
    

    prev();//当前成分在此以前的紧邻着的男士儿成分(上贰个)

     

    prevAll();//当前成分在此之前的有着兄弟成分

     

    siblings();//当前因素的具有兄弟成分  

    1. class选择器(遍历css类元素)
      将class="cube"的因素背景观设为黑古铜色

      1 $(document).ready(function () { 2 $('.cube').css('background', '#000'); 3 });

    大旨过滤选用器:

     

     $('p:first')与$('p').first()是等价的。获取具备p成分中的第3个P元素

     

     $('p:last')与$('p').last()

    1. element选择器(遍历html元素)
      将p成分的文字大小设置为12px

      1 $(document).ready(function () { 2 $('p').css('font-size', '12px'); 3 });

     $('p:eq(2)')在享有的p成分中找到索引为2的要素

     

     $('p:even')选取全体奇数的p标签

     

     $('p:odd')选拔全体偶数的p标签

    1. * 选用器(遍历全部因素)

      1 $(document).ready(function () { 2 // 遍历form下的具备因素,将字体颜色设置为革命 3 $('form *').css('color', '#FF0000'); 4 });

     $('p:not(.tst)').css();采纳全数的不应用.tst这种体制的p成分not前边写贰个选用器名称

     

     $('p:gt(1)')选择全部索引值大于1的p成分

     

     $('p:lt(3)')选拔全部索引值小于3的p成分。

    1. 并列选拔器

      1 $(document).ready(function () { 2 // 将p元素和div元素的margin设为0 3 $('p, div').css('margin', '0'); 4 }); 5 6 7 $(document).ready(function(){ 8 $('#.nihao').hover( 9 function(){ 10 $(this).addClass("") 11 },function(){ 12 $(this).removeClass("") 13 }); 14 });

     $(':header')选择页面上有着的h1-h6的要素。(假诺这么写的话,中间相对不能有空格。)

     

    品质过滤接纳器:

     

        $("div[id]")选取有id属性的<div>

     基本过滤选用器

    $("div[title=test]")选用title属性为“test”的<div>,jQuery中尚无对getElementsByName       

    1. :first和:last(取第一个成分或最终叁个成分)

      1 $(document).ready(function () { 2 $('span:first').css('color', '#FF0000'); 3 $('span:last').css('color', '#FF0000'); 4 });//上面包车型客车代码,G1(first成分)和G3(last成分)会变色 5 6 G1 7 G2 8 G3

        实行打包,用$("input[name=abc]")

     

        $("div[title!=test]")选择title属性不为“test”的<div>

    1. :not(取非元素)

      1 $(document).ready(function () { 2 $('div:not(.wrap)').css('color', '#FF0000'); 3 });//下边的代码,G1会变色 4 5

      G1
      6
      G2
      7 //不过,请小心上面包车型大巴代码: 8 9
      10 G1 11
      G2
      12

          还足以采用起来【name^=值】、甘休【 name$=值】、富含【 name*=值】等,条件还 

     

          能够复合。【[属性1=a][属性2=b]…】(*)

    当G1所在div和G2所在div是老爹和儿子关系时,G1和G2都会变色。

          表单对象属性选拔器(过滤器):

    3. :even和:odd(取偶数索引或奇数索引成分,索引从0先河,even表示偶数,odd代表奇数)

        $("#form1 :enabled")选拔id为form1的表单内有所启用的要素

     1 $(document).ready(function () {
     2             $('tr:even').css('background', '#EEE'); // 偶数行颜色
     3             $('tr:odd').css('background', '#DADADA'); // 奇数行颜色
     4         });A、C行颜色#EEE(第一行的索引为0),B、D行颜色#DADADA
     5 
     6  
     7 
     8 <table width="200" cellpadding="0" cellspacing="0">
     9     <tbody>
    10         <tr><td>A</td></tr>
    11         <tr><td>B</td></tr>
    12         <tr><td>C</td></tr>
    13         <tr><td>D</td></tr>
    14     </tbody>
    15 </table>
    

        $("#form1 :disabled")选用id为form1的表单内具备禁止使用的要素

     

        $(“input:checked”)采取全体入选的成分(Radio、Check博克斯),那一个在那之中不能够加空格.

    1 $("#myELement")   //  选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 
    2 $("div")         //   选择所有的div标签元素,返回div元素数组 
    3 $(".myClass")    //   选择使用myClass类的css的所有元素 
    4 $("*")          //    选择文档中的所有的元素,可以运用多种的选择方式进行合选择:例如$("#myELement,div,.myclass") 
    

        $("select :selected")选拔全体入选的选项因素(下拉列表)

    One(等级次序选拔器):

    表单滤选取器:

     

        $('#form1:enabled');//这几个代表能够启用的且id为form1的竹签

    1 $("form input")          // 选择所有的form元素中的input元素 
    2 $("#main > *")          //   选择id值为main的所有的子元素 
    3 $("label   input")     //   选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元  // 素 
    4 $("#prev ~ div")       //   同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 
    

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:在jQuery中 常用的选取器介绍

    关键词: 68399皇家赌场

上一篇:js达成图片轮换效果代码

下一篇:没有了