jQuery 选择器和筛选

最新推荐文章于 2022-08-15 15:52:03 发布
最新推荐文章于 2022-08-15 15:52:03 发布
阅读量411 收藏 1
点赞数 1
分类专栏： jQuery 前端 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/UserPython/article/details/106951218
版权
本文详细介绍了jQuery中的选择器和筛选方法，包括基本选择器、ID选择器、多种选择器、后代、并集、交集和层级选择器。此外，还探讨了属性选择器、各种伪类选择器，如简单伪类、子元素伪类、可见性伪类和内容伪类。同时，文章详细阐述了筛选匹配表达式的元素、移除匹配元素、筛选子元素、父元素、祖先元素和兄弟元素的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

选择器

基本选择器

基本选择器描述
$(“元素名”)标签选择器
$("#id名")id选择器
$(".类名")类选择器
$(“选择器1，选择器2，…”)并集选择器
$( " * " )通用选择器，选择所有元素
  • 在CSS中使用的选择器，在jQuery中同样可以使用，而且不用做循环
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            // id选择器
            $("#div1").css("color", "blue");
            
            // 类选择器
            $(".div").css("color", "green");

            // 标签选择器
            $("div").css("color", "red");

            // 通用选择器
            $("*").css("color", "orange");
        })
    </script>
</head>
<body>
    <div id="div1">div1111</div>
    <div class="div">div2222</div>
    <div class="div">div3333</div>
    <div>div4444</div>
    <p>ppp11111</p>
    <span>span11111</span>
</body>
</html>

ID选择器实现原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        window.onload = function(){
            function $(str){
                // 获取从指定的下标开始到结束的字符串
                var ID = str.substring(1);
                var obj = document.getElementById(ID);
                obj.css = function(key, value){
                    // this.style.key = value; 不可以通过这种方式添加及赋值，这样key会是一个固定的对象属性名，且不是一个参数
                    this.style[key] = value;//该方式才是正确传参
                }
                return obj;
            }

            $("#div1").css("color", "blue");
            $("#div1").css("fontSize", "30px");
        }
    </script>
</head>
<body>
    <div id="div1">div1111</div>
</body>
</html>

多种选择器实现原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        window.onload = function(){
            function $(str){
                //获取第一个字符
                var fir = str.substring(0, 1); 
                //获取第二个及后面的字符
                var sec = str.substring(1);

                // 判断到底是哪种选择器
                if(fir == "#"){
                    var obj = [document.getElementById(sec)];//转为数组，和下面保持一致
                }else if(fir == "."){
                    var obj = document.getElementsByClassName(sec);//获取的是一个数组
                }else{
                    var obj = document.getElementsByTagName(str);//所有字符
                };

                obj.css = function(key, value){
                    for (var i = 0; i < obj.length; i++){
                        this[i].style[key] = value;
                    }
                }
                return obj;
            }

            $("#div1").css("color", "blue");
            $(".ddd").css("color", "red");
            $("p").css("color", "orange");
            $("*").css("color", "green");
        }
    </script>
</head>
<body>
    <div id="div1">div1111</div>
    <div class="ddd">div2222</div>
    <p>ppp3333</p>
    <span>span4444</span>
</body>
</html>

后代、并集、交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            // 1、后代选择器，所有指定的子元素
            $("#div1 p").css("color", "red");
            $("#div2 .ddd").css("color", "blue");

            // 2、并集选择器
            $("#div1 p, #div2 div").css("color", "green");
            $("#div1 .ddd, #div2 p").css("color", "orange");

            // 3、交集选择器
            $("#div1 p.ddd").css("fontSize", "30px");
        })
    </script>
</head>
<body>
    <div id="div1">
        <div class="ddd">dddd1111</div>
        <div class="ddd">dddd2222</div>
        <div class="ddd">dddd3333</div>
        <p class="ddd">pppppppppp44444</p>
        <p>pppppppppp55555</p>
    </div>
    <hr>
    <div id="div2">
        <div class="ddd">dddd6666</div>
        <div class="ddd">dddd7777</div>
        <div class="ddd">dddd8888</div>
        <p>ppppppppppp99999</p>
        <p>ppppppppppp00000</p>
    </div>
</body>
</html>

层级选择器

层级选择器就是通过元素之间的层级关系获取元素。常见的层级关系包括：父子、后代、兄弟、相邻

层级选择器描述
$(“M N”)后代选择器，选择M元素内部后代所有的N元素（包括子代后的N元素等）
$(“M>N”)子代选择器，选择M元素内部子代N元素（不包括子代后的N元素）
$(“M~N”)兄弟选择器，选择M元素后所有的同级N元素
$(“M+N”)相邻选择器，选择M元素相邻的下一个元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_层级选择器</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
        <h4>层级选择器</h4>
        <p>层级选择器，就是通过元素之间的层次关系来获取元素。常见的层次冠词包括：
            父子、后代、兄弟、相邻
        </p>
        <ul>
            <li id="li1">$("M N")
                <p>后代选择器，选择M元素内部后代N元素</p>
            </li>
            <li id="li2">$("M>N")
                <p>子代选择器，选择M元素内部子代N元素</p>
            </li>
            <li id="li3">$("M~N")
                <p>兄弟选择器，选择M元素后所有的同级N元素</p>
            </li>
            <li id="li4">$("M+N")
                <p>相邻选择器，选择M元素相邻的下一个N元素</p>
            </li>
        </ul>
    </div>
    <script>
        // $("div p").css("color", "red");
        // $("div>p").css("color", "orange");
        $("#li2~li").css("color", "blue");
        // $("#li2+li").css("color", "green");
    </script>
</body>
</html>

属性选择器

HTML元素通常包含很多属性，jQuery的属性选择器就是把各种属性作为选择器

属性选择器描述
$(“selector[attr]”)选择有指定属性的元素
$("selector[ attr= ’ value’ ] ")选择指定属性是某个特定值的元素
$(“selector[attr != ‘value’]”)选择指定的属性，但不是某个特定值的元素
$(“selector[attr *= ‘value’ ]”)选择指定的属性包含某些值的元素
$(“selector[ attr ^= ‘value’ ]”)选择指定的属性以某些值开始的元素
$(“selector[ attr $= ‘value’ ]”)选择指定的属性以某些值结尾的元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_属性选择器</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="attr">
        <h4>属性选择器</h4>
    <p class="intro">HTML元素通常包含很多属性，jQuery的属性选择器就是把各种属性作为选择器</p>
    <ul>
        <li class="sel-1">$("selector[attr]")：选择包含给定属性的元素</li>
        <li class="sel-1">$("selector[attr = 'value']")：选择给定属性是某个特定值的元素</li>
        <li class="_sel">$("selector[attr ！= 'value']")：选择所有含有指定的属性，但属性不等于特定值的元素</li>
        <li class="_sel">$("selector[attr *= 'value']")：选择给定的属性是以包含某些值的元素</li>
        <li class="_sel2">$("selector[attr ^= 'value']")：选择给定的属性是以某些值开始的元素</li>
        <li class="_sel2">$("selector[attr $= 'value']")：选择给定的属性是以某些值结尾的元素</li>
    </ul>
    </div>
    <script>
        //选择含有class属性的元素
        // $("[class]").css("color", "red");
        //$("[id]").css("color", "blue");
        //选择含有class属性的li元素
        // $("li[class]").css("color", "blue");

        //选择class属性值为intro的元素
        // $("[class = 'intro']").css("color", "green");
        // $(".intro").css("color", "green");//两者效果相同

        // $("div [class != intro]").css("color", "red");

        //选择class属性值是以包含sel的元素
        // $("div [class *= 'sel']").css("color", "red");

        //选择class属性值是以_开始的元素
        // $("[class ^= '_']").css("color", "red");

        //选择class属性值是以2结尾的元素
        $("[class $= '2']").css("color", "red");
    </script>
</body>
</html>

伪类选择器

伪类选择器也称作过滤选择器
jQuery伪类选择器都是以英文冒号：开头，可以在冒号前加上限定元素，和css中的伪类选择器用法相似，使得我们可以快速地选择我们想要获取的元素

简单伪类选择器

伪类选择器描述
:not(selector)选择除了某个选择器之外的所有元素
:first或first()选择某元素的第一个元素（非子元素）
:last或last()选择某元素的最后一个元素（非子元素）
:odd选择某元素的索引值为奇数的元素，从0开始
:even选择某元素的索引值为偶数的元素，从0开始
:eq(index)选择给定索引值的元素，索引值index是一个整数，从0开始
:lt(index)选择所有小于索引值的元素，索引值index是一个整数，从0开始
:gt(index)选择所有大于索引值的元素，索引值index是一个整数，从0开始
:header选择h1~h6的标题元素
:focus选取当前具有焦点的元素
:root选择页面的根元素
:animated选择所有正在执行动画效果的元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_简单伪类选择器</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
    <h2>伪类选择器</h2>
    <p>jQuery伪类选择器都是以英文冒号：开头，和css中的伪类选择器用法相似，使得我们可以快速地选择我们想要获取的元素</p>
    <hr>
    <h3>简单伪类选择器</h3>
    <ul>
        <li id="one">：not(selector)	选择除了某个选择器之外的所有元素</li>
        <li>：first或first()	选择某元素的第一个元素（非子元素）</li>
        <li>：last或last()	选择某元素的最后一个元素（非子元素）</li>
        <li>：odd	选择某元素的索引值为奇数的元素</li>
        <li>：even	选择某元素的索引值为偶数的元素</li>
        <li>：eq(index)	选择给定索引值的元素，索引值index是一个整数，从0开始</li>
        <li>：lt(index)	选择所有小于索引值的元素，索引值index是一个整数，从0开始</li>
        <li>：gt(index)	选择所有大于索引值的元素，索引值index是一个整数，从0开始</li>
        <li>：header	选择h1~h6的标题元素</li>
        <li>：focus	选取当前具有焦点的元素</li>
        <li>：root	选择页面的根元素</li>
        <li>：animated	选择所有正在执行动画效果的元素</li>
    </ul>
    <input type="text" value="测试">
    </div>
    <script>
        $(function(){
            // $("li:not(#one)").css("color", "red");
            // $("li:first").css("color", "red");
            // $("li:last").css("color", "blue");
            // $("li:odd").css("color", "red");
            // $("li:even").css("color", "blue");
            // $("li:eq(6)").css("color", "orange");
            // $("li:lt(6)").css("color", "blue");
            // $("li:gt(6)").css("color", "red");
            // $(":header").css("color", "red");
            // $("input").focus();
            // $(":focus").css("background-color", "red");
            // $(":root").css("color", "blue");
        })
    </script>
</body>
</html>

子元素伪类选择器

子元素伪类选择器描述
:first-child选择父元素的第一个子元素
:last-child选择父元素的最后一个子元素
:nth-child(n)选择父元素下的第n个元素或奇偶元素，n的值为“整数 | odd | even”
:only-child选择父元素中唯一的子元素（该父元素只有一个子元素）
:first-of-type选择同元素类型的第一个同级兄弟元素
:last-of-type选择同元素类型的最后一个同级兄弟元素
:nth-of-type选择同元素类型的第n个同级兄弟元素，n的值可以是“整数 | odd | even”
:only-of-type匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_子元素伪类选择器</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
        <div><h3>简单伪类选择器</h3></div>
        <ul>
            <li id="one">：not(selector)	选择除了某个选择器之外的所有元素</li>
            <li>：first或first()	选择某元素的第一个元素（非子元素）</li>
            <li>：last或last()	选择某元素的最后一个元素（非子元素）</li>
            <li>：odd	选择某元素的索引值为奇数的元素</li>
            <li>：even	选择某元素的索引值为偶数的元素</li>
            <li>：eq(index)	选择给定索引值的元素，索引值index是一个整数，从0开始</li>
            <li>：lt(index)	选择所有小于索引值的元素，索引值index是一个整数，从0开始</li>
            <li>：gt(index)	选择所有大于索引值的元素，索引值index是一个整数，从0开始</li>
            <li>：header	选择h1~h6的标题元素</li>
            <li>：focus	选取当前具有焦点的元素</li>
            <li>：root	选择页面的根元素</li>
            <li>：animated	选择所有正在执行动画效果的元素</li>
        </ul>

        <h3>子元素伪类选择器</h3>
        <ul>
            <li>：first-child	选择父元素的第一个子元素</li>
            <li>：last-child	选择父元素的最后一个子元素</li>
            <li>：nth-child(n)	选择父元素下的第n个元素或奇偶元素，n的值为“整数 | odd | even”</li>
            <li>：only-child	选择父元素中唯一的子元素（该父元素只有一个子元素）</li>
            <li>：first-of-type	选择同元素类型的第一个同级兄弟元素</li>
            <li>：last-of-type	选择同元素类型的最后一个同级兄弟元素</li>
            <li>：nth-of-type	选择同元素类型的第n个同级兄弟元素，n的值可以是“整数 | odd | even”</li>
            <li>：only-of-type	匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）</li>
        </ul>
    </div>
    <script>
        //区别：first-child可以选择多个
        // $("li:first").css("color", "red");
        // $("li:first-child").css("color", "blue");
        // $("ul:first-child").css("color", "blue");//无匹配，以为ur不是父元素的一个子元素

        // $("li:nth-child(odd)").css("color", "orange");

        // $("div :only-child").css("color", "red");

        // $("h3:first-of-type").css("color", "red");
    </script>
</body>
</html>

可见性伪类选择器

可见性伪类选择器描述
:hidden选取所有不可见元素（不仅包含样式为display：none所有元素，而且还包括属性type=“hidden”和样式为visibility：hidden的所有元素）
:visible选取所有可见元素

内容伪类选择器

内容伪类选择器就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位

内容伪类选择器描述
:contains(text)选择包含给定文本内容的元素
:has(selector)选择含有选择器所匹配元素的元素
:empty选择所有不包含子元素或者不包含文本的元素
:parent选择含有子元素或者文本的元素（跟：empty相反）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_可见性和伪类选择器</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        /* ul{display: none;} */
        /* ul{visibility: hidden;} */
    </style>
</head>
<body>
    <div>
        <h1>h1</h1>
        <p>p1 p标签表示段落</p>
        <p>p2 <span>我是span</span></p>
        <span>span1</span>
        <span>span2</span>
        <br>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3 <span>我在li标签里</span></li>
            <li>4</li>
            <li>5 <p>pppp</p></li>
            <li>6</li>
            <li>7</li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <input type="button" id="btn1" value="隐藏">
    <input type="button" id="btn2" value="显示">

    <script>
        $(function(){
            // 可见性伪类选择器

            //隐藏ul内容
            // $("ul").css("display", "none");
            // $("ul").css("visibility", "hidden");

            $("#btn1").click(function(){
                $("div :visible").css("display", "none");
            })
            $("#btn2").click(function(){
                $("ul:hidden").css("display", "block");
            })
        })

        //内容伪类选择器
        $(function(){
            $("p:contains(段落)").css("background", "red");

            $("p:has(span)").css("background", "blue");

            $("li:empty").css("background", "orange");
            $("li:parent").css("background", "green");
        })
    </script>
</body>
</html>

表单伪类选择器

表单伪类选择器描述
:input选择所有input元素
:button选择所有type=‘button’的input或button元素
:submit选择所有type=‘submit’的input元素
:reset选择所有type=‘reset’的input元素
:text选择所有单行文本框
:textarea选择所有多行文本框
:password选择所有密码文本框
:radio选择所有单选按钮
:checkbox选择所有复选框
:image选择所有图像域
:hidden选择所有隐藏域
:file选择所有文件域
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_表单伪类选择器</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
    <form action="">
        <p>用户名：<input type="text" name="username"></p>
        <p>密码：<input type="password" name="password"></p>
        <p>爱好：<br>
            <input type="radio" name="rad" value="A">新闻
            <input type="radio" name="rad" value="B">小说
            <input type="radio" name="rad" value="C">音乐
        </p>
        <p>上传文件: <input type="file"> </p>
        <p>
            <input type="reset" value="重置">
            <input type="submit" value="提交">
            <input type="button" value="input button">
            <button>button button</button>
        </p>
    </form>
    <script>
        // $(":input").css("background", "pink");
        // $(":button").css("background", "green");
        // $(":submit").css("background", "blue");
        $(":text").css("background", "#ccc");
        $(":password").css("background", "#a00");
        // $(":radio").hide(3000);
        // $(":radio").show(3000);
        $(":file").css("background", "orange");
    </script>
</body>
</html>

表单属性伪类选择器

表单属性伪类选择器描述
:enabled选择所有可用input元素
:disabled选择禁用的input元素
:selected选择所有被选中的option元素
:checkbox选择所有被选中的表单元素，一般用于radio和checkbox
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_表单伪类选择器</title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
    <form action="">
        <p>用户名：<input type="text" name="username"></p>
        <p>密码：<input type="password" name="password"></p>
        <p>爱好：<br>
            <input type="radio" name="rad" value="A">新闻
            <input type="radio" name="rad" value="B">小说
            <input type="radio" name="rad" value="C">音乐
        </p>
        <p>
            <input type="reset" value="重置" disabled>
            <input type="submit" value="提交">
            <input type="button" id="btn" value="隐藏单选框">
        </p>
        <select onchange="selVal()">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </form>
    <script>
        // $(":enabled").css("background", "red");
        // $(":disabled").css("background", "green");
        $("#btn").click(function(){
            $(":checked").hide();
        })
        function selVal(){
            var str = $(":selected").val();
            alert(str);
        }
    </script>
</body>
</html>

筛选方法

筛选匹配表达式的元素

filter()：筛选出与指定表达式匹配的元素集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_属性选择器</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#box div").filter("#pink1, .pink2").css("color", "red");
        })
    </script>
</head>
<body>
    <div id="box">
        <div>筛选表达式匹配的元素1</div>
        <div id="pink1">筛选表达式匹配的元素2</div>
        <div class="pink2">筛选表达式匹配的元素3</div>
        <div>筛选表达式匹配的元素4</div>
        <div>筛选表达式匹配的元素5</div>
    </div>
</body>
</html>

移除匹配表达式的元素

not()：移除与指定表达式匹配的元素集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_属性选择器</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#box div").not("#pink1, .pink2").css("color", "red");
        })
    </script>
</head>
<body>
    <div id="box">
        <div>筛选表达式匹配的元素1</div>
        <div id="pink1">筛选表达式匹配的元素2</div>
        <div class="pink2">筛选表达式匹配的元素3</div>
        <div>筛选表达式匹配的元素4</div>
        <div>筛选表达式匹配的元素5</div>
    </div>
</body>
</html>

筛选子元素及后代元素

children()：筛选出匹配表达式的子元素，只考虑子元素而不考虑其他后代元素

find()：筛选出匹配表达式的后代元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_属性选择器</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            // 只匹配子元素
            $("#box").children("#pink1, .pink2").css("color", "red");
            // 匹配所有后代元素
            $("#box").find(".pink2").css("color", "blue");
        })
    </script>
</head>
<body>
    <div id="box">
        <div>筛选表达式匹配的元素1</div>
        <div id="pink1">筛选表达式匹配的元素2</div>
        <div class="pink2">筛选表达式匹配的元素3</div>
        <div>筛选表达式匹配的元素4</div>
        <div>
            <span class="pink2">筛选表达式匹配的元素5</span>
        </div>
    </div>
</body>
</html>

筛选父元素及祖先元素

parent()：筛选出匹配表达式的父元素，只考虑父元素而不考虑祖先元素

parents()：筛选出匹配表达式的祖先元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_属性选择器</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            // 筛选出匹配表达式的父元素，只考虑父元素而不考虑祖先元素
            // $("div.ddd").parent().find("span").css("color", "red").css("border", "1px solid red");
            // $("span").parent(".div1").children("#ppp").css("color", "red");
            
			//筛选出匹配表达式的祖先元素
            // $("span").parents().css("border", "1px solid red").css("margin", "5px");
            $("span").parents("#box").find("[class=aaa]").css("border", "1px solid red").css("margin", "5px");
        })
    </script>
</head>
<body>
    <div id="box">
        <div class="div1">
            <p id="ppp">筛选表达式匹配的元素1</p>
            <span class="aaa">筛选表达式匹配的元素2</span>
            <p>
                <span class="bbb">筛选表达式匹配的元素3</span>
            </p>
        </div>
        <div class="div2">
            <p>筛选表达式匹配的元素4</p>
            <span class="ccc">筛选表达式匹配的元素5</span>
            <div class="ddd">筛选表达式匹配的元素6</div>
        </div>
    </div>
</body>
</html>

筛选兄弟元素

siblings()：筛选出匹配表达式的所有兄弟元素

prevAll()：筛选出前面所有匹配表达式的兄弟元素

prev()：筛选出紧邻的前一个匹配表达式的兄弟元素

nextAll()：筛选出后面所有匹配表达式的兄弟元素

next()：筛选出紧邻的后一个匹配表达式的兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器_属性选择器</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            // 筛选出匹配表达式的所有兄弟元素
            // $(".aaa").siblings().css("border", "1px solid red");
            // $(".aaa").siblings("div").css("border", "1px solid red");


            // 筛选出前面所有匹配表达式的兄弟元素
            // $(".aaa").prevAll().css("border", "1px solid red");
            // $(".aaa").prevAll("div").css("border", "1px solid red");

            // 筛选出紧邻的前一个匹配表达式的兄弟元素
            // $(".aaa").prev().css("border", "1px solid red");

            // 筛选出后面所有匹配表达式的兄弟元素
            // $(".aaa").nextAll().css("border", "1px solid red");
            // $(".aaa").nextAll("div").css("border", "1px solid red");

            // 筛选出紧邻的后一个匹配表达式的兄弟元素
            $(".aaa").next().css("border", "1px solid red");


        })
    </script>
</head>
<body>
    <div id="box">
        <div class="div1">
            <div>div嘿嘿嘿嘿</div>
            <p id="ppp">筛选表达式匹配的元素1</p>
            <span class="aaa">筛选表达式匹配的元素2</span>
            <p>
                <span class="bbb">筛选表达式匹配的元素3</span>
            </p>
            <div>div哈哈哈哈</div>
        </div>
    </div>
</body>
</html>
模拟select成ul li展示
Dandan的前端开发---专注于div css js jquery
12-26 3432
jQuery(function($){     var selDOM = function(obj){     for(var i=0;i       var items = jQuery(obj[i]);       for(var k=0;k       (function(){         var arrDOM = [""], item = jQuery(items[k]);
jQuery 选择器和筛选器
weixin_34218579的博客
10-13 192
1. jQuery 1. 选择器 $("") 1. 基本选择器 1. ID --> $("#d1") 2. 标签名 --> $("p") 3. class名 --> $(".C1") 4. 通用的 --> $("*") 5. 组合 --> $(".c1,div,a") 2. 层级选择器 ...
jQuery选择器【学习】
weixin_30814329的博客
08-01 174
$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名...
了解jQuery ，jQuery 选择器和筛选器总结
weixin_46236141的博客
04-28 398
在说选择器和筛选器之前，首先我们来了解一下什么是jQuery： jQuery 的简介 什么是jQuery jQuery是 一个前端的方法库 也就是别人将JavaScript程序,定义成了各种函数方法,我们直接写直接用,就可以实现各种功能 jQuery的网站 官网 : https://jquery.com/ 中文网站 : http://jquery.cuishifeng.cn/ jquery的三大优...
jQuery的选择器和筛选器
jjjndk1314的博客
03-25 2万+
jQuery基本选择器： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &am
jQuery入门二之选择器与筛选器
小钿钿不忘初心的博客
03-09 174
二.选择器 1.概念 jQuery通过选择器获取的标签对象，都是伪数组的形式 eg: $('#box') = document.getElementById('#box'); 2.转化 JavaScript语法获取的标签对象,不能使用jQuery语法操作,jQuery语法获取的标签对象,也不能使用JavaScript语法操作,必须要相互转化。 JavaScrip标签对象转化为jQuery标签对象...
jQuery选择器之属性筛选选择器用法详解
12-02
在这么多属性选择器中[attr=”value”]和[attr*=”value”]是最实用的 [attr=”value”]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type=”text”],input[type=”checkbox”]等 [attr*=”...
jQuery基本筛选选择器实例代码
10-20
在jQuery中，选择器是用于选取DOM元素的重要工具，而基本筛选选择器是jQuery选择器的一种类型，用于从匹配的元素集中进一步细化选择。下面我们将详细探讨jQuery的基本筛选选择器，并通过实例代码来理解它们的工作...
基于jQuery选择器之表单对象属性筛选选择器的实例
10-19
本文将详细讲解基于jQuery选择器在表单对象属性筛选方面的应用实例。利用jQuery选择器，开发者可以轻松地根据表单元素的属性状态进行元素的选择和操作。 1. 表单对象属性筛选选择器概述 在HTML表单中，输入元素如...
jquery选择器简述
11-24
使用jQuery选择器，开发者可以轻松地根据元素的属性、内容、位置等多种条件进行筛选，大大提升了JavaScript在DOM操作上的便利性和性能。同时，jQuery的链式操作和插件机制使得基于选择器的操作更加流畅，减少了代码...
Jquery “选择”和“筛选”概念的区分
黄彪博客
12-04 1893
选择：从DOM树中找到自己需要的对象 筛选：经过选择之后对象任然不满足自己的需要就要进一步的筛选，它是jquery中的定义的函数或者是方法，也就是进一步的选择
jQuery选择器
m0_57002951的博客
04-30 1403
【1】选择器本身只是一个有特定语法规则的字符串，没有实质用处 【2】它的基本语法规则使用就是CSS的选择器语法，并对基进行了扩展 【3】只有调用 $（） ,并将选择器作为参数传入才能起作用 【4】$(selector)作用： 根据选择器规则在整个文档中查找所有匹配的标签数组，并封装成jQuery
jQuery 快速入门---选择器（二）
wangjunlei666的博客
05-15 588
jquery选择器 选择器是jQuery学习的重中之重，也就是对jQuery核心函数的使用 ● 选择器本身只是一个有特定语法规则的字符串，没有实质用处 ● 它的基本语法规则使用的就是 CSS 的选择器语法，并对基进行了扩展 ● 只有调用$()，并将选择器作为参数传入才能起作用 ● $(selector)作用：根据选择器规则在整个文档中查找所有匹配的标签的数组（伪数组），并封装成jQuery对象 基本选择器 ID选择器 : #id,根据给定的ID匹配一个元素 标签选择器: element,根据给定的元素名匹配
2.js样式操作，选择器，筛选，设置类
qq_33651064的博客
04-19 679
1.jQuery选择器 用$(' ');选取。 2.隐式迭代 对伪数组里的每一个Dom对象依次执行函数。 <script> // 1. 获取四个div元素 console.log($("div")); // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style $("di...
jQuery的选择器
weixin_44106237的博客
08-15 3660
jQuery的四种选择器，基本选择器，层级选择器，过滤选择器，筛选选择器（方法）
jquery学习笔记（一） 选择器
YxinMiracle's Studio.
09-26 258
jQuery引入 下载链接：[jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。 jquery对象和dom对象 jquery找到的标签对象称为 -- jquery对象 原生js找到的标签对象称为 -- dom对象 dom对象只能使用dom对象的方法,不能使用jquery对象的方法 jquery对象也是,它不能使用dom对象的方法 dom对象和jquery对象互相转换:
jQuery四大选择器，以及例子来充分理解
热门推荐
wang__junhappy的博客
05-14 2万+
1. jQuery选择器的优势：(1) 代码更简单(2) 支持CSS1到CSS3选择器(3) 完善的处理机制2. jQuery选择器的分类（1） 基本选择器      基本选择器是jQuery中使用最多的选择器，它又元素Id、class、元素名、多个元素符组成。      （2） 层次选择器       层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。...
JQuery中的选择器、常用属性和方法
随心的博客
09-26 719
JQuery JavaScript库:这些JavaScript库封装了很多预定义的对象及实用函数，能帮助开发人员快速、轻松的实现高难度的富客户端页面，并能兼容大部分浏览器 jQuery是创建于2006年1月的开源项目，主要包括核心库、UI和插件三部分，其优点有： 轻量级 　jQuery非常轻巧，核心库大小不到100K。 强大的选择器 　选择器是进行JavaScript编程的基础，而jQuery提供了功能全面、强大、灵活的选择器供开发者使用。 出色的DOM封装 　jQuery封装了大量的DOM操作，使原本复杂
掌握jQuery选择器制作商品价格筛选功能
jQuery选择器用于选取HTML元素，基于元素的id、类、类型、属性等条件进行选择。它相当于CSS选择器的超集，除了能够处理常见的CSS选择器外，还添加了许多方便的功能。例如，可以使用类选择器（.class）、id选择器（#...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值