jQuery过滤

最新推荐文章于 2024-01-24 12:02:02 发布

　　初夏 ﻬ

最新推荐文章于 2024-01-24 12:02:02 发布

阅读量256

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_44329870/article/details/114677118

版权

jQuery过滤

jQuery常用过滤方法：

方法	作用
eq()	根据索引选择元素
first()	获取集合里面的第一个
last()	获取集合里面的最后一个
hasClass()	检测是否具有某个类
is()	检测是否存在某一样
has()	匹配具有某个被检测元素的元素
filter()	匹配出满足条件的元素
map()	将一个类数组转化为新的数组(类似映射)
not()	匹配除过被检测元素之外的元素
slice()	截取(类似原生js的slice)
children()	返回当前元素所有子集
closest()	输出含有被检测元素的元素
find()	查找含有被检测元素的子集元素
next([expr])	下一个含有被检测元素的元素
nextAll([expr])	后面所有含有被检测元素的元素
prev([expr])	上一个含有被检测元素的元素
prevAll([expr])	后面所有含有被检测元素的元素
nextUntil()	获取元素的下一个元素到被检测元素的上一个元素之间的所有元素
siblings([expr])	获取同胞兄弟元素
parent([expr])	获取直接父容器
parents([expr])	获取所有父容器
offsetParent()	获取所有父容器中有定位的元素
add()	添加元素到jquery对象
addBack()	获取栈中的元素

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            position: absolute;
        }
    </style>
</head>
<body>
    <button class="btn first" id="btninfo">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn list">按钮</button>
    <button class="btn previer ">按钮</button>
    <button class="btn info last">按钮</button>
    <ul class="menu">
        <li class="info">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <h3 class="h3">标题</h3>
        <li>5</li>
        <li>6</li>
        <span>审判</span>
    </ul>
    <dl>
        <dt id="term-1">term 1</dt>
        <dd>definition 1-a</dd>
        <dd>definition 1-b</dd>
        <dd>definition 1-c</dd>
        <dd>definition 1-d</dd>

        <dt id="term-2">term 2</dt>
        <dd>definition 2-a</dd>
        <dd>definition 2-b</dd>
        <dd>definition 2-c</dd>

        <dt id="term-3">term 3</dt>
        <dd>definition 3-a</dd>
        <dd>definition 3-b</dd>
    </dl>
    <script src="./js/jquery-1.9.1.js"></script>
    <script>
        /*eq：根据索引选择元素
         *参数为正数时：索引0、1、2...分别对应第1、2、3...个；
         *参数为负数时：索引-1、-2、-3...分别对应倒数第1、2、3...个。
         * */
        console.log($('.btn').eq(-2));

        /*first()：获取集合里面的第一个
         *last()：获取集合里面的最后一个
         */
        console.log($('.btn').first());
        console.log($('.btn').last());

        /*hasClass(class)：检测是否具有某个类
         *输出结果；true/false
         * */
        console.log($('.btn').hasClass('btn'));

        /*is:检测是否存在某一样
         *输出结果：true/false
         *被检测的对象可以为：选择器、ele（dom元素）、function
         * */
        console.log($('.btn').is(function (index) {
            console.log(index, $(this));//$(this)：当前jQuery对象，这句输出索引以及后面对应的jquery对象
            return index == 5;//一共有六个按钮,当索引为0-5都输出true,当索引为6以及更大的数都输出false
        }));

        /*has：匹配具有某个被检测元素的元素
         *被检测的元素可以为：expr（选择器字符串）、ele、dom
         * */
        console.log($('ul').has($('h3')));//匹配里面具有h3标签的ul

        /*filter():匹配出满足条件的元素
         *被检测元素可以为：expr、obj、ele、fn
         * */
        console.log($('.btn').filter('.list'));

        /*map：将一个类数组转化为新的数组，类似映射
         *$(this)：指当前的jquery对象
         *this：指当前原生js的dom对象
         * */
        var arr = $('.btn').map(function () {
            console.log($(this), this);
            return this;
            return $(this).text();
        });
        console.log(arr);


        /*not:匹配除过被检测元素之外的元素
         *被检测元素可以为:expr、ele、fn
         * */
        console.log($('.btn').not($('.list')[0]));//[0]表示jquery对象转化为原生js对象

        /*slice:截取,类似原生js的slice
         * */
        console.log($('.btn').slice(0, 2));//0号位截取到2号位，取小不取大

        /*children()：返回当前元素所有子集
         *expr：可以当做过滤
         * */
        console.log($('ul').children('h3'));

        /*closest：输出含有被检测元素的元素*/
        console.log($('.btn').closest('.list'));

        /*
         *find ：查找含有被检测元素的子集元素
         *被检测元素可以为：expr、ele、obj
         * */
        console.log($('ul').find('h3'));

        /*时匹配元素的同级：
         *next([expr])：下一个含有被检测元素的元素
         *nextAll([expr])：后面所有含有被检测元素的元素
         *prev([expr])：上一个含有被检测元素的元素
         *prevAll([expr])：后面所有含有被检测元素的元素
         * */
        console.log($('.list').next('.previer'));
        console.log($('.list').nextAll('button'));
        console.log($('.list').prev());
        console.log($('.list').prevAll());

        /*nextUntil：获取元素的下一个元素到被检测元素的上一个元素之间的所有元素*/
        console.log($('.first').nextUntil('.list'));//匹配.first之后到.list之前的同胞元素
        $('#term-2').nextUntil('dt').css('background-color', 'red');//匹配#term-2之后到dt之前的元素，并把背景色设置为红色
        var term3 = document.getElementById("term-3");
        console.log($("#term-1").nextUntil(term3, "dd"));//匹配#term-1到#term-3之间所有的dd元素
        console.log($('#btninfo').nextUntil('.info', '.list'));//匹配#btninfo之后到.info之前含有.list的元素

        /*siblings([expr])：获取同胞兄弟元素*/
        console.log($('.h3').siblings());
        console.log($('.h3').siblings('span'));//获取包含span的同胞兄弟元素

        /*parent([expr])：获取直接父容器
         *parents([expr])：获取所有父容器
         *offsetParent(): 获取所有父容器中有定位的元素,默认是html，比如如果给body加定位，也可以是body
         * */
        console.log($('.h3').parent());
        console.log($('.h3').parents('body'));
        console.log($('.h3').offsetParent());

        /*add：添加元素到jquery对象*/
        console.log($('.h3').add('<span>123</span>'));

        /*addBack：获取栈中的元素（测试后发现可以往前拿两组结果）*/
        console.log($('.btn').eq(0).nextAll('.info').siblings('.list').addBack());
        console.log($('.btn').eq(0).addBack());
        console.log($('.btn').eq(0).siblings('.info').prevAll('.list').siblings('.menu').addBack());
    </script>
</body>
</html>

　　初夏 ﻬ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery过滤

jQuery过滤jQuery常用过滤方法：方法作用eq()根据索引选择元素first()获取集合里面的第一个last()获取集合里面的最后一个hasClass()检测是否具有某个类is()检测是否存在某一样has()匹配具有某个被检测元素的元素filter()匹配出满足条件的元素map()将一个类数组转化为新的数组(类似映射)not()匹配除过被检测元素之外的元素slice()截取(类似原生js的slice)
复制链接

扫一扫