zoukankan      html  css  js  c++  java
  • juqery基本选择器和层级选择器

    1、基本选择器,主要通过标签名称,样式,id等选择标签,如下代码是简单的使用

    (1)根据标签或者样式筛选

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    <div class="div1">111</div>
    <p>ppp</p>
    <p>div2的兄弟</p>
    <div id="div2">222
        <div class="div3">333
            <div class="div4">444</div>
            <p>world2</p>
        </div>
        <p>world</p>
    
    </div>
    <p>div2的兄弟</p>
    <p>div2的兄弟</p>
    <p>div2的兄弟</p>
    <p>div2的兄弟</p>
    <p>div2的兄弟</p>
    
    <ul>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
    
    </ul>
    
    <script src="jquery-3.1.1.js"></script>
    <script>
    //    $('p').css('color','red');//选择标签
    //    $('#div2').text('666');//选择id
    //    $('.div1').css('background','yellow');//根据class选择
    //    $('body *' ).text('YYYY')//表示后代选择器,选择body后面的标签,然后将里面的文本改为YYYY
    //$('#div2 p').css('color','green')//也是后代选择器id为div下面的所有p标签的文本都被修改了颜色,如果$('#div2> p'),则是下一级的p标签被改,不是下面所有
    //$('#div2+p').css('color','green');//下面开始找兄弟标签,只寻找一个
    //$('#div2~p').css('color','green');//从下面开始找,找出所有兄弟标签
    $('li:first');
    //找出所有li标签,选出第一个,even表示偶数;odd表示基数;eg()括号后面可以选择特定第几个
    //gt(),gt是great than的缩写,表示大于,也有lt()
    
    
    </script>
    
    </body>
    </html>
    

      (2)根据内容筛选

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div>jay</div>
    <div>Rouge</div>
    <div>Mary</div>
    <div>Dark</div>
    <input name="abc">
    <input name="edf" checked="checked">
    <script src="jquery-3.1.1.js"></script>
    <script>
        $('input:not(:checked)');//选择有属性checked属性的标签
        $("div:contains('Dark')");//根据这个内容选择出标签
        //$('td:empty')是否为空
        //    $('div:has(p)').addClass('test')//寻找出div标签里面有p标签的div,然后添加一个class为test的属性
        //$('div[id='abc']')查找所有包含id属性为abc的div标签,value也可以不写,直接写成$('[id='abc']')
    
    </script>
    
    </body>
    </html>
    

      2、筛选器

    (1)简单的根据索引筛选

    <body>
    <input type="checkbox">
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    
    
    
    
    <script src="jquery-3.1.1.js"></script>
    <script>
    //    $('li:eq(1)').css('color','red');
    //    $('li').eq(2).css('fontSize','30');
    //obj:选择器,index:索引
        function Func(obj,index) {
            obj.eq(index)
        }
    
    Func($('li'),2)//根据传进的参数,选择标签
    
    </script>
    </body>
    

      (2)parent,parents,parentsUntil

    $('.div7').parent().css('color','red');//找到一个父级标签
    $('.div7').parents();//找到.div7的所有祖先标签
    $('.div7').parentsUntil('.outer').css('color','red');//寻找父级标签直到样式为outer的父级标签,不包括样式为outer的父级标签
    $('.div7').siblings()//找到所有兄弟标签,里面也可以放参数,例如siblings('div1'),找到全局里面所有div兄弟标签
    

      

      其他的next,prve都是差不多的模式

      

  • 相关阅读:
    Python 在线基础课程
    单链表实现两个集合的交并补
    矩阵奇异值分解SVD
    动态规划0-1背包问题
    Java数字反转
    简单SqL语句
    HTML和CSS
    while和for循环
    C#读取和写入配置文件
    C# 添加系统计划任务方案
  • 原文地址:https://www.cnblogs.com/xiaobeibei26/p/6633505.html
Copyright © 2011-2022 走看看