04jQuery筛选jquery对象02

Posted shink

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了04jQuery筛选jquery对象02相关的知识,希望对你有一定的参考价值。

day23

通过关系查找jQuery对象的方法
  next([selector]) 向后取同辈元素
  nextAll([selector])
  nextUntil([selector])
  prev([selector]) 向前取同辈元素
  prevAll([selector])
  prevUntil([selector])
  siblings([selector]) 取同辈元素的所有集合(不包含本身)

筛选和遍历jQuery对象
添加元素
  add(selector)
过滤元素
  not(selector)
  filter(selector)
也可以用函数
  not(funtion(){})
  filter(funtion(){})
  has(selector)保留带有特定后代的元素
获取子集
  slice(0start,end)
转换元素
  map(callback)
  map(function(index,domElents){return ;})
遍历元素
  each(iterator)
  each(function(index,domElents){return ;})

jQuery对象的其他操作
  is(selector)
  end()回到破坏性操作前(任何对jQuery对象进行改变的操作)
  addBack([selector])

案例:

通过关系查找jQuery对象的方法.html

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <p id="info">jQueryjQueryjQueryjQueryjQueryjQueryjQuery</p>
                <ur>
                    <li class="item-1">item1</li>
                    <li class="item-2">item2</li>
                    <li class="item-3">item3</li>
                    <li class="item-4">item4</li>
                    <li class="item-5">item5</li>
                    <li class="item-6">item6</li>
                    <li class="item-7">item7</li>
                    <li class="item-8">item8</li>
                </ur>
            </div>
        </div>
    </div>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            /*console.log($(‘#box3‘));
            console.log($("#box2").children());
            console.log($(‘#box2‘).contents());
            console.log($(‘#box2‘).find(‘#box3‘));
            console.log($(‘#box2‘).parent());
            console.log($(‘#box2‘).parents());
            console.log($(‘#box3‘).parentsUntil(‘#box1‘));
            console.log($(‘#box3‘).closest(‘div‘));*/
            
            console.log($(.item-1).next(li));
            console.log($(.item-1).nextAll());
            console.log($(.item-1).nextUntil(.item-4));

            console.log($(.item-4).prev(li));
            console.log($(.item-4).prevAll());
            console.log($(.item-4).prevUntil(.item-1));

            console.log($(.item-4).siblings());
        })
    </script>
</body>
</html>
View Code

 

筛选和遍历jQuery对象.html:

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <p id="info">jQueryjQueryjQueryjQueryjQueryjQueryjQuery</p>
                <ur>
                    <li class="item-1">item1</li>
                    <li class="item-2">item2</li>
                    <li class="item-3">item3</li>
                    <li class="item-4">item4</li>
                    <li class="item-5">item5</li>
                    <li class="item-6">item6
                        <ul>q</ul>
                    </li>
                    <li class="item-7">item7</li>
                    <li class="item-8">item8</li>
                </ur>
            </div>
        </div>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //添加
            console.log($(.item-1, .item-2));
            console.log($(.item-1).add(.item-2));
            //过滤
            console.log($(li).not(.item-4));
            console.log($(li).filter(.item-4));
            console.log($(li).has(ul));
            //获取子集
            console.log($(li).slice(3,6));//index下标
            //转换元素
            console.log($(li).map(function (index,domElemts) {
                this.title = this.innerText;
            }))
            //遍历元素
            console.log($(div).each(function (index,domElemts) {
                this.title = this.id;
            }))
        })
    </script>
</body>
</html>
View Code

 

jQuery对象的其他操作.html:

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <p id="info">jQueryjQueryjQueryjQueryjQueryjQueryjQuery</p>
                <ur>
                    <li class="item-1">item1</li>
                    <li class="item-2">item2</li>
                    <li class="item-3">item3</li>
                    <li class="item-4">item4</li>
                    <li class="item-5">item5</li>
                    <li class="item-6">item6
                        <ul>q</ul>
                    </li>
                    <li class="item-7">item7</li>
                    <li class="item-8">item8</li>
                </ur>
            </div>
        </div>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            
            console.log($(#box3).children().is(p));

            console.log($(#box3).find(.item-4).css(color,red)
                .end().find(.item-5).css(color,red)
                );

            console.log($(li).slice(1,3).next().css(color,orange).addBack().css(color,blue));

        })
    </script>
</body>
</html>
View Code

 






























以上是关于04jQuery筛选jquery对象02的主要内容,如果未能解决你的问题,请参考以下文章

04jQuery筛选jquery对象01

jQuery编程

02jQuery对象初识筛选器2

jQuery 02

JQuery02

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段