jQuery 選擇器和篩選

原創 OliGit 2020-06-26 23:42

選擇器

基本選擇器

基本選擇器 描述
$(“元素名”) 標籤選擇器
$("#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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

web前端小白經常出現“四”個錯誤，關乎你是否能成爲一個優秀的前端工程師

錯誤一轉件所謂“應該能行”的代碼 錯誤：無論是JavaScript，還是在服務器上運行的代碼，開發人員都需要測試並確認它是否可以正常工作，而不是在部署了之後，就認爲它應該就能從一而終地運行。 影響：不經過適當錯誤檢查的網站就是對最終用戶耍

原創 2023-10-10 11:11:44

Web前端開發常用到的和升職加薪的技能點分別是哪些？

隨着互聯網的高速發展以及技術的不斷革新，Web前端工程師需要掌握的技術也有所變更。很多人想知道當前常用的Web前端技術有哪些?如何快速掌握這些技術?接 常用的Web前端技術有哪些? Web前端是爲了協調前端設計與後端開發之間工作的崗位，是

原創 2023-10-10 09:55:05

現在入行web前端開發晚了？數據代表一切

前端程序員是大家都公認的高薪崗位，那他們的工資到底有沒有傳說中那麼高呢？我們來看看職友集的數據。 數據來源：職友集 就北上廣深杭的前端薪資來看，平均薪資均達到一萬以上。 通常來講： 工作1~2年後會成爲前端高級軟件工程師，年薪可以

原創 2023-10-10 09:54:58

layui使用serializeJson報Uncaught TypeError: $(...).serializeJson is not a function錯

layui使用serializeJson報Uncaught TypeError: $(...).serializeJson is not a function錯 報錯原因是沒有layui自帶的jquery中沒有對應這個方法。 二種解決辦法：

原創 2023-02-08 23:50:08

個人Scrum敏捷開發轉型中的技術實踐

Scrum無處不在，說起Scrum敏捷開發框架，也許大家並不陌生，表面理解它其實並不複雜，但是真正用得好的公司並不多，我自己曾經的工作環境也依然沒有體驗過敏捷開發非常成熟的實踐過程，但是我依然推薦這種開發方式，不論是對於企業發展還是生活中

原創 2022-04-30 12:48:30

springboot集成socketio實現一對一實時聊天

看到別人的系統或者app都有聊天功能，大家有沒有想過自己的系統也集成進去呢？現在來揭曉！ 第一步：pom.xml添加socketio依賴 <dependency> <groupId>com.corundumstudio.so

原創 2022-04-30 11:11:09

js組合圖片（在圖上畫二維碼）

總的有兩個依賴， jquery和jquery.qrcode 。實現原理其實就是圖層的堆疊。做二維碼推廣的時候要用到此方法 <body> <div class="" id="qrcode" style="display: none;

原創 2022-04-30 10:42:12

Iframe不同層級方法調用和元素獲取

jquery 獲取元素 父取子 $("#iframeId").contents().find("#elementId") 子取父 $("#elementId",window.parent.document) 方法、變量調用 父調

原創 2022-04-30 06:30:08

六年來技術變遷的心得體會

1 技術發展的一些體會 從2016年開始, 筆者走上了"程序猿"這條路, 至今已經有6年了. 這6年來, 從項目開發所使用的前後端技術不斷變遷, 我深切體會到這一行技術發展的日新月異, 何其迅速. 本文不談具體的技術細節, 只談一談入行這6

原創 2022-04-30 06:03:09

在沒有jQuery的情況下查找最近的元素 - Finding closest element without jQuery

問題： I am trying to find the closest element with a specific tag name without jquery.我試圖在沒有 jquery 的情況下找到具有特定標籤名稱的最近元素。

fyin1314 2021-12-29 09:18:03

How to post an array of complex objects with JSON, jQuery to ASP.NET MVC Controller?

問題： My current code looks like the following. 我當前的代碼如下所示。 How can I pass my array to the controller and what kind of p

javail 2021-12-29 09:15:00

如何從 JavaScript 讀取腳本標籤中的 JSON？ - How can I read a JSON in the script-tag from JavaScript?

問題： I have a dynamically generated page where I want to use a static JavaScript and pass it a JSON string as a paramete

javail 2021-12-29 09:15:00

event.preventDefault() vs. return false (no jQuery)

問題： I wondered if event.preventDefault() and return false were the same.我想知道event.preventDefault()和return false是否相同。 I

javail 2021-12-28 21:15:02

如何使用JQuery獲取GET和POST變量？ - how to get GET and POST variables with JQuery?

問題： How do I simply get GET and POST values with JQuery? 如何使用JQuery簡單地獲取GET和POST值？ What I want to do is something li

技術盛宴 2021-12-28 09:22:52

如何在 Vue 組件中格式化貨幣？ - How do I format currencies in a Vue component?

問題： My Vue component is like this :我的 Vue 組件是這樣的： <template> <div> <div class="panel-group"v-for="item in l

javail 2021-12-27 21:14:59