• Jquery选择元素小结(转载)


     $(document).ready(function(){
    //    //取匹配元素的第一个子元素
    //    $("ul li:first-child").each(function(){
    //     $("span").append("匹配元素内容"+$(this).text()+"<br/>");
    //    });

    //    //取匹配元素的最后一个子元素
    //    $("ul li:last-child").each(function(){
    //     $("span").append("匹配元素内容"+$(this).text()+"<br/>");
    //    });

    //              //取匹配元素的第二个子元素,索引从1开始
    //    $("ul li:nth-child(2)").each(function(){
    //     $("span").append("匹配元素内容"+$(this).text()+"<br/>");
    //    });

    //    //取匹配元素的偶数个子元素,索引从1开始,取2,4,6
    //    $("ul li:nth-child(even)").each(function(){
    //     $("span").append("匹配元素内容"+$(this).text()+"<br/>");
    //    });
        
    //    //取匹配元素的奇数个子元素,索引从1开始,取1,3,5
    //    $("ul li:nth-child(odd)").each(function(){
    //     $("span").append("匹配元素内容"+$(this).text()+"<br/>");
    //    });
        
    //    //取匹配元素的第3的整数倍个子元素,索引从1开始,取3,6
    //    $("ul li:nth-child(3n)").each(function(){
    //     $("span").append("匹配元素内容"+$(this).text()+"<br/>");
    //    });
    //    
    //    //取匹配元素的第3的整数倍+1个子元素,索引从1开始,取0,4,7
    //    $("ul li:nth-child(3n+1)").each(function(){
    //     $("span").append("匹配元素内容"+$(this).text()+"<br/>");
    //    });
        
    //    //取匹配元素的第3的整数倍-1个子元素,索引从1开始,取2,5
    //    $("ul li:nth-child(3n-1)").each(function(){
    //     $("span").append("匹配元素内容"+$(this).text()+"<br/>");
    //    });
        
        //匹配只有一个子元素
        $("span").append("匹配元素内容"+$("ul li:only-child").text()+"<br/>");
       })
           
              </script>
     </head>
     <body>
      <span></span>
        <ul>
            <li>
                John
            </li>
            <li>
                Karl
            </li>
            <li>
                Brandon
            </li>
      <li>
                miaojingwei
            </li>
      <li>
                KJ
            </li>
        </ul>
        <ul>
            <li>
                Glen
            </li>
            <li>
                Tane
            </li>
            <li>
                Ralph
            </li>
        </ul>
     <ul>
            <li>
                  独生子
            </li>
        </ul>
     </body>
    </html>
    转自:http://kb.cnblogs.com/a/1564363/

    属性
    1、[attribute]
    匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。
    返回值 Array<Element>
    参数
    attribute (String) : 属性名
    示例:


    $(document).ready(function() {
        
    var eleArr = $("div[id]"); //查找所有含有 id 属性的 div 元素
        for (var i = 0; i < eleArr.length; i++) {
            
    var ele = eleArr[i];
             alert(ele.innerHTML);
         }
    });

    2、[attribute=value]
    匹配给定的属性是某个特定值的元素
    返回值 Array<Element>
    参数
    attribute (String) : 属性名
    value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
    示例:


    $(document).ready(function() {
        
    var eleArr = $("input[name='newsletter']"); //查找所有 name 属性是 newsletter 的 input 元素
        for (var i = 0; i < eleArr.length; i++) {
            
    var ele = eleArr[i];
             alert(ele.value);
         }
    });

    文档片段:

    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />

    3、[attribute!=value]
    匹配所有不含有指定的属性,或者属性不等于特定值的元素。
    此选择器等价于:not([attr=value])
    要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
    返回值 Array<Element>
    参数
    attribute (String) : 属性名
    value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
    示例:


    $(document).ready(function() {
        
    var eleArr = $("input[name!='newsletter']"); //查找所有 name 属性不是 newsletter 的 input 元素
        for (var i = 0; i < eleArr.length; i++) {
            
    var ele = eleArr[i];
             alert(ele.value);
         }
    });

    4、[attribute^=value]
    匹配给定的属性是以某些值开始的元素
    返回值 Array<Element>
    参数
    attribute (String) : 属性名
    value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
    示例:


    $(document).ready(function() {
        
    var eleArr = $("input[name^='newsletter']"); //查找所有 name 以 'news' 开始的 input 元素
        for (var i = 0; i < eleArr.length; i++) {
            
    var ele = eleArr[i];
             alert(ele.value);
         }
    });

    5、[attribute$=value]
    匹配给定的属性是以某些值结尾的元素
    返回值 Array<Element>
    参数
    attribute (String) : 属性名
    value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
    示例:


    $(document).ready(function() {
        
    var eleArr = $("input[name$='letter']"); //查找所有 name 以 'letter' 结尾的 input 元素
        for (var i = 0; i < eleArr.length; i++) {
            
    var ele = eleArr[i];
             alert(ele.value);
         }
    });

    6、[attribute*=value]
    匹配给定的属性是以包含某些值的元素
    返回值 Array<Element>
    参数
    attribute (String) : 属性名
    value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
    示例:


    $(document).ready(function() {
        
    var eleArr = $("input[name*='let']"); //查找所有 name 包含 'letter' 的 input 元素
        for (var i = 0; i < eleArr.length; i++) {
            
    var ele = eleArr[i];
             alert(ele.value);
         }
    });

    7、[selector1][selector2][selectorN]
    复合属性选择器,需要同时满足多个条件时使用。
    返回值 Array<Element>
    参数
    selector1 (Selector) : 属性选择器
    selector2 (Selector) : 另一个属性选择器,用以进一步缩小范围
    selectorN (Selector) : 任意多个属性选择器
    示例:


    $(document).ready(function() {
        
    var eleArr = $("input[id][name$='vil']"); //找到所有含有 id 属性,并且它的 name 属性是以 vil 结尾的
        for (var i = 0; i < eleArr.length; i++) {
            
    var ele = eleArr[i];
             alert(ele.value);
         }
    });

    七、子元素
    1、:nth-child(index/even/odd/equation)
    匹配其父元素下的第N个子或奇偶元素
    对比:':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!
    使用方式:
    :nth-child(even)
    :nth-child(odd)
    :nth-child(3n)
    :nth-child(2)
    :nth-child(3n+1)
    :nth-child(3n+2)
    返回值 Array<Element>
    参数
    index (Number) : 要匹配元素的序号,从1开始
    示例:


    $(document).ready(function() {
        
    var eleArr = $("ul li:nth-child(2)"); //在每个 ul 查找第 2 个li
        for (var i = 0; i < eleArr.length; i++) {
            
    var ele = eleArr[i];
             alert(ele.innerHTML);
         }
    });

    文档片段:

    <ul>
      
    <li>John</li>
      
    <li>Karl</li>
      
    <li>Brandon</li>
    </ul>
    <ul>
      
    <li>Glen</li>
      
    <li>Tane</li>
      
    <li>Ralph</li>
    </ul>

    2、:first-child
    匹配第一个子元素
    ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
    返回值 Array<Element>
    示例:


    $(document).ready(function() {
        
    var eleArr = $("ul li:first-child"); //在每个 ul 查找第 1 个li
        for (var i = 0; i < eleArr.length; i++) {
            
    var ele = eleArr[i];
             alert(ele.innerHTML);
         }
    });

    3、:last-child
    匹配最后一个子元素
    ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
    返回值 Array<Element>
    示例:


    $(document).ready(function() {
        
    var eleArr = $("ul li:last-child"); //在每个 ul 中查找最后一个 li  
        for (var i = 0; i < eleArr.length; i++) {
            
    var ele = eleArr[i];
             alert(ele.innerHTML);
         }
    });

    4、:only-child
    如果某个元素是父元素中唯一的子元素,那将会被匹配
    如果父元素中含有其他元素,那将不会被匹配。
    返回值 Array<Element>
    示例:


    $(document).ready(function() {
    var eleArr = $("ul li:only-child"); //在 ul 中查找是唯一子元素的 li
        for (var i = 0; i < eleArr.length; i++) {
            
    var ele = eleArr[i];
             alert(ele.innerHTML);
         }

    转自:http://hi.baidu.com/%D0%A1%C2%EC%D2%CF_google/blog/item/9a41e87e9fd4330429388ac4.html

  • 相关阅读:
    Node 基本配置
    python GIL锁
    大数据 Zookeeper 集群
    大数据 Hadoop HA
    python 内置方法使用
    Linux Curl使用
    Linux 文件解压缩
    大数据 Hadoop 常见端口
    大数据 Hadoop 集群安装
    css结构设计思想
  • 原文地址:https://www.cnblogs.com/johnwonder/p/1764998.html
Copyright © 2020-2023  润新知