04jQuery筛选jquery对象02

Posted 2020-10-26 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的主要内容，如果未能解决你的问题，请参考以下文章

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