目录
  1. 1. 筛选模块
    1. 1.1. 过滤
    2. 1.2. 查找
JQ查找与过滤

筛选模块

  • 过滤

    • 在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
    • first()
    • last()
    • eq(index)
    • filter(selector): 对当前元素提要求
    • not(selector): 对当前元素提要求, 并取反
    • has(selector): 对子孙元素提要求
  • 查找

    • 查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
    • children(selector): 子元素
    • find(selector): 后代元素
    • preAll(selector): 前的所有兄弟
    • siblings(selector): 所有兄弟
    • parent(): 父元素
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>筛选_过滤</title>
    </head>

    <body>
    <ul>
    <li>AAAAA</li>
    <li title="hello" class="box2">BBBBB</li>
    <li class="box">CCCCC</li>
    <li title="hello">DDDDDD</li>
    <li title="two"><span>BBBBB</span></li>
    </ul>
    <li>eeeee</li>
    <li>EEEEE</li>
    <br>


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

    var $lis = $('ul>li')
    //1. ul下li标签第一个
    // $lis.first().css('background', 'red')
    // $lis[0].style.background = 'red'

    //2. ul下li标签的最后一个
    // $lis.last().css('background', 'red')

    //3. ul下li标签的第二个
    // $lis.eq(1).css('background', 'red')

    //4. ul下li标签中title属性为hello的
    // $lis.filter('[title=hello]').css('background', 'red')

    //5. ul下li标签中title属性不为hello的
    // $lis.not('[title=hello]').css('background', 'red')
    // $lis.filter('[title!=hello]').filter('[title]').css('background', 'red')

    //6. ul下li标签中有span子标签的
    $lis.has('span').css('background', 'red')
    </script>
    </body>
    </html>
文章作者: Jachie Xie
文章链接: https://xjc5772.github.io/2020-05/21/%E5%AD%A6%E4%B9%A0/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/JQ/JQ%E7%AD%9B%E9%80%89%E4%B8%8E%E8%BF%87%E6%BB%A4/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 XJC&Blog
打赏
  • 微信
  • 支付宝

评论