jQuery之元素筛选

过滤

说明:

  jQuery对象中的元素对象数组中过滤出一部分元素来,并封装成新的jQuery对象返回。

方法:

  first()

  last()

  eq(index|-index)

  filter(selector):对当前元素提要求

  not(selector):对当前元素提要求并取反

  has(selector):对子孙元素提要求

示例:

<!DOCTYPE html>
<html lang="en">
<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 type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    /*
     * 需求:
     * 1.ul下li标签第一个
     * 2.ul下li标签的最后一个
     * 3.ul下li标签的第二个
     * 4.ul下li标签中title属性为hello的
     * 5.ul下li标签中title属性不为hello的
     * 6.ul下li标签中有span子标签的
     */
    $(function (){
        var $lis = $(ul>li);
        //1.ul下li标签第一个
        $lis.first().css(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][title!=hello]).css(background, red);
        //6.ul下li标签中有span子标签的
        $lis.has(span).css(background, red);
    });
</script>
</body>
</html>

查找

说明:

  在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签,并封装成新的jQuery对象返回。

方法:

  children():子元素

  find():后代元素

  parent():父元素

  prevall():前的所有兄弟

  nextall():后的所有兄弟

  siblings():所有兄弟

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选_查找孩子-父母-兄弟标签</title>
</head>
<body>

<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<div>
    <ul>
        <span>span文本1</span>
        <li>AAAAA</li>
        <li title="hello" class="box2">BBBBB</li>
        <li class="box" id=‘cc‘>CCCCC</li>
        <li title="hello">DDDDDD</li>
        <li title="two"><span>span文本2</span></li>
        <span>span文本3</span>
    </ul>
    <span>span文本444</span><br>
    <li>eeeee</li>
    <li>EEEEE</li>
    <br>
</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    /*
     * 需求:
     * 1.ul标签的第2个span子标签
     * 2.ul标签的第2个span后代标签
     * 3.ul标签的父标签
     * 4.id为cc的li标签的前面的所有li标签
     * 5.id为cc的li标签的所有兄弟li标签
     */
    $(function (){
        var $ul = $(ul);
        //1.ul标签的第2个span子标签
        $ul.children(span:eq(1)).css(background, red);
        //2.ul标签的第2个span后代标签
        $ul.find(span:eq(1)).css(background, red);
        //3.ul标签的父标签
        $ul.parent().css(background, red);
        //4.id为cc的li标签的前面的所有li标签
        $ul.children(#cc).prevAll(li).css(background, red);
        //5.id为cc的li标签的所有兄弟li标签
        $ul.children(#cc).siblings(li).css(background, red);
    });
</script>
</body>
</html>

jQuery之元素筛选

上一篇:《大型网站技术架构演进与性能优化》——第二章:无线化:无线时代下的架构演进


下一篇:WEB基础——接收后台文件方法