jQuery--選擇器

jQuery--選擇器

一、JavaScript中選擇元素

? document.getElementById()
? document.getElementsByName()
? document.getElementsByTagName()
? document.getElementsByClassName()
? document.querySelector()
? document.querySelectorAll()

<head>
    <meta charset="UTF-8">
    <title>jsSelector</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        #box2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="box1"></div>
<div id="box2"></div>
<div class="box">.box</div>
<div class="box">.box</div>
<input type="text" name="username">


<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
//        var element1 = document.getElementById('box1');
//        var element2 = document.getElementById('box2');
//        var element3 = document.getElementsByClassName('box');
//        var element4 = document.getElementsByName('username');
//        var element5 = document.getElementsByTagName('div');
//
//        console.log(element1);
//        console.log(element2);
//        console.log(element3);
//        console.log(element4);
//        console.log(element5);


        var element6 = document.querySelector('.box');
        var element7 = document.querySelectorAll('.box');
        console.log(element6);
        console.log(element7);
    });
</script>
</body>

二、CSS中選擇元素

CSS 選擇器

①基本選擇器

基本選擇器.jpg

②屬性選擇器

屬性選擇器.jpg

③偽類選擇器

偽類選擇器.jpg

④偽元素選擇器

偽元素選擇器.jpg

⑤偽元素

偽元素.jpg
<head>
    <meta charset="UTF-8">
    <title>example</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        #box2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="box1"></div>
<div id="box2"></div>


<script src="../../../vendor/jquery-1.12.4.js"></script>

</body>

三、jQuery選擇器

? 兼容CSS3選擇器標準
? 對選擇器語法有更多擴充
? 返回0、1或多個jQuery元素的集合
? 集合內(nèi)元素順序和在頁面上順序一致

1.基本選擇器
①ID選擇器
②類選擇器
③元素選擇器
④后代選擇器
⑤屬性選擇器

<head>
    <meta charset="UTF-8">
    <title>jQuerySelector</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="box1"></div>
<div id="box2"></div>
<div class="box">.box</div>
<div class="box">.box</div>
<input type="text" name="username">


<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
        var element1 = $('#box1');
        var element2 = $('#box1, #box2');
        var element3 = $('.box');
        var element4 = $('[name="username"]');
        var element5 = $('div');
        var element6 = $(document.getElementById('box1'));

        console.log(element1);
        console.log(element2);
        console.log(element3);
        console.log(element4);
        console.log(element5);
        console.log(element6);
    });
</script>
</body>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>basicSelector</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>

<h1>h1. 標題</h1>
<h2>h2. 標題</h2>

<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, quae?</p>

<ul class="list">
    <li>list1</li>
    <li>list2</li>
    <ul>
        <li>list2-1</li>
        <li>list2-2</li>
        <li>list2-3</li>
    </ul>
    <li>list3</li>
</ul>

<a  target="_blank">百度</a>
<a >網(wǎng)易</a>
<a href="#">本地</a>

<p data-id="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugit illum libero, minus odio quas
    repellat
    repellendus similique unde voluptatem.</p>

<p data-id="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugit illum libero, minus odio quas
    repellat
    repellendus similique unde voluptatem.</p>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
        //console.log($('#p1').addClass('highlight'))
        //console.log($('.list').addClass('highlight'))
        //console.log($('.list > li').addClass('highlight'))
        //console.log($('a[))
        //console.log($('a[href*="www"]').addClass('highlight'))
        //console.log($('a[href^="http"]').addClass('highlight'))
        //console.log($('a[href$="com"]').addClass('highlight'))
        //console.log($('a[href][target]').addClass('highlight'))
        //console.log($('a[href!="http://www.baidu.com"]').addClass('highlight'))  //jQuery獨有

        console.log($('p[data-id="1"]').addClass('highlight'));
    });
</script>
</body>
</html>

2.篩選器/過濾器
①位置篩選器
:first
:last
:even
:odd
:eq(n)
:gt(n)
:lt(n)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>positionFilter</title>
    <style>
    .highlight {
        background-color: yellow;
    }
    </style>
</head>

<body>
    <ul>
        <li>list-01</li>
        <li>list-02</li>
        <li>list-03</li>
        <li>list-04</li>
        <li>list-05</li>
        <li>list-06</li>
        <li>list-07</li>
        <li>list-08</li>
        <li>list-09</li>
        <li>list-10</li>
    </ul>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        //        console.log($('li:first').addClass('highlight'))
        //        console.log($('li:last').addClass('highlight'))
        //        console.log($('li:even').addClass('highlight'))
        //        console.log($('li:odd').addClass('highlight'))
        //        console.log($('li:eq(2)').addClass('highlight'))
        //        console.log($('li:gt(2)').addClass('highlight'))
        console.log($('li:lt(2)').addClass('highlight'));
    });
    </script>
</body>

</html>

②子元素篩選器
:first-child
:last-child
:first-of-type
:last-of-type
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:only-child
:only-of-type

<head>
    <meta charset="UTF-8">
    <title>childFilter</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>list-01</li>
    <li>list-02</li>
    <li>list-03</li>
    <li>list-04</li>
    <li>list-05</li>
    <li>list-06</li>
    <li>list-07</li>
    <li>list-08</li>
    <li>list-09</li>
    <li>list-10</li>
</ul>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
//                console.log($('li:first-child').addClass('highlight'))
//                console.log($('li:last-child').addClass('highlight'))
//                console.log($('li:first-of-type').addClass('highlight'))
//                console.log($('li:last-of-type').addClass('highlight'))
//                console.log($('li:nth-child(2)').addClass('highlight'))
//                console.log($('li:nth-child(2n)').addClass('highlight'))
        //        console.log($('li:nth-child(odd)').addClass('highlight'))
                console.log($('li:nth-child(even)').addClass('highlight'));
    });
</script>
</body>

③表單篩選器
:checked
:disabled
:enabled
:focus
:button
:checkbox
:file
:image
:input
:password
:radio
:reset
:selected
:submit
:text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formFilter</title>
    <style>
        .highlight {
            padding: 10px;
            border: 1px solid yellow;
            background-color: lightyellow;
        }
    </style>
</head>
<body>

<form>
    <p><input value="input without type"></p>
    <p><input type="text" value="input type text" autofocus></p>
    <p><input type="text" value="input type text disabled" disabled></p>
    <p><input type="password" value="input type password"></p>
    <p><input type="checkbox"> input type checkbox</p>
    <p><input type="checkbox" checked> input type checkbox checked</p>
    <p><input type="radio"> input type radio</p>
    <p><input type="radio" checked> input type radio checked</p>
    <p><input type="file"></p>
    <p><input type="image" src="login.png"></p>
    <p><select></select></p>
    <p><select>
        <option value=""> -- 請選擇 --</option>
        <option value="1">option 1</option>
        <option value="2" selected>option 2</option>
        <option value="3">option 3</option>
        <option value="4">option 4</option>
    </select></p>
    <p><textarea cols="30" rows="10"></textarea></p>
    <p><input type="submit" value="input type submit"></p>
    <p><input type="reset" value="input type reset"></p>
    <p><input type="button" value="input type button"></p>
    <p>
        <button>BUTTON</button>
    </p>
</form>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
        //        console.log($(':checked').parent().addClass('highlight'))
        //                console.log($(':disabled').parent().addClass('highlight'))
        //                console.log($(':enabled').parent().addClass('highlight'))
        //                setTimeout(function () {
        //                    console.log($(':focus').parent().addClass('highlight'));
        //                }, 1000);
        //                        console.log($(':button').parent().addClass('highlight'))
        //                        console.log($(':checkbox').parent().addClass('highlight'))
        //                        console.log($(':file').parent().addClass('highlight'))
        //                        console.log($(':image').parent().addClass('highlight'))
        //                        console.log($(':input').parent().addClass('highlight'))
        //                        console.log($(':password').parent().addClass('highlight'))
        //                        console.log($(':radio').parent().addClass('highlight'))
        //                        console.log($(':reset').parent().addClass('highlight'))
        //                        console.log($(':selected').parent().addClass('highlight'))
//        console.log($(':submit').parent().addClass('highlight'))
                console.log($(':text').parent().addClass('highlight'));
    });
</script>
</body>
</html>

④內(nèi)容篩選器
:empty
:contains(text)
:has(selector)
:parent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>contentFilter</title>
    <style>
        .highlight {
            padding: 10px;
            border: 1px solid yellow;
            background-color: lightyellow;
        }
    </style>
</head>
<body>

<p></p>
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, earum.</p>
<p>123 <span>456</span></p>
<input type="text" value="input">

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
//                console.log($(':empty').addClass('highlight'));
//                console.log($('p:contains("Lorem")').addClass('highlight'));
                console.log($('p:has(span)').addClass('highlight'));
//        console.log($('p:parent').addClass('highlight'));
    });
</script>
</body>
</html>

⑤其他篩選器
:lang(language)
:not(selector)
:root
:target
:hidden
:visible
:header
:animated

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>otherFilter</title>
    <style>
    .highlight {
        background-color: yellow;
    }
    </style>
</head>

<body>
    <p id="foo" lang="en-US">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, eius.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quo.</p>
    <input type="text">
    <input type="hidden">
    <p style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, excepturi molestiae odio officiis optio praesentium recusandae similique soluta vel velit? Enim et iste neque quaerat quis quisquam quo rem vel.
    </p>
    <p style="visibility: hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, excepturi molestiae odio officiis optio praesentium recusandae similique soluta vel velit? Enim et iste neque quaerat quis quisquam quo rem vel.
    </p>
    <p style="opacity: 0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, excepturi molestiae odio officiis optio praesentium recusandae similique soluta vel velit? Enim et iste neque quaerat quis quisquam quo rem vel.
    </p>
    <h1>h1. 標題</h1>
    <h2>h2. 標題</h2>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        //                console.log($(':lang(en)').addClass('highlight'))
        //                console.log($('p:not(#foo)').addClass('highlight'))
        //                console.log($(':root').addClass('highlight'))
        //                console.log($('p:target').addClass('highlight'))
        //        setTimeout(function () {
        //            // 在Chrome、Firefox等瀏覽器中,獲取url hash會延遲一會兒,所以直接在document ready中獲取會獲取不到
        //            console.log($(':target').addClass('highlight'))
        //        }, 1000)

        //                console.log($(' :hidden').addClass('highlight'))
        //                console.log($(' :visible').addClass('highlight'))
        console.log($(' :header').addClass('highlight'));
    });
    </script>
</body>

</html>

:animated:選擇正在執(zhí)行動畫的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animated</title>
    <style>
        div.box {
            background: yellow;
            border: 1px solid #aaa;
            width: 80px;
            height: 80px;
            margin: 0 5px;
            float: left;
        }

        div.colored {
            background: green;
        }
    </style>
</head>
<body>

<button id="run">Run</button>

<div class="box"></div>
<div id="mover" class="box"></div>
<div class="box"></div>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {

        $("#run").click(function () {
            $("div:animated").toggleClass("colored");
        });

        function animateIt() {
            $("#mover").slideToggle("slow", animateIt);
        }

        animateIt();
    });
</script>
</body>
</html>
1.jpg
2.jpg

⑥自定義選擇器

四、jQuery選擇器的性能優(yōu)化

? 盡量使用CSS中有的選擇器
? 避免過度約束
? 盡量以ID開頭
? 讓選擇器的右邊有更多特征
? 避免使用全局選擇器
? 緩存選擇器結果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>selectorOptimization</title>
</head>

<body>
    <div>
        <ul id="list" class="list">
            <li>list-01</li>
            <li class="item2">list-02</li>
            <li>list-03</li>
            <li class="item4">list-04</li>
            <li>list-05</li>
            <li>list-06</li>
            <li>list-07</li>
            <li>list-08</li>
            <li>list-09</li>
            <li>list-10</li>
        </ul>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    function logTime(cb) {
        console.time('logTime');
        if (typeof cb === 'function') {
            for (var i = 0; i < 10000; i++) {
                cb();
            }
        }
        console.timeEnd('logTime');
    }

    $(function() {

        //        logTime(function () {
        //            $("ul li:even");// slow
        //        })
        //        logTime(function () {
        //            $("ul li:nth-child(odd)");// better
        //        })
        //        logTime(function () {
        //            document.querySelectorAll("ul li:nth-child(odd)"); // best
        //        })
        //        logTime(function () {
        //            $(document.querySelectorAll("ul li:nth-child(odd)")); // better
        //        })

        //------------------

        //        logTime(function () {
        //            $('div ul li.item2');// slow
        //        })
        //        logTime(function () {
        //            $('li.item2');// better
        //        })

        //------------------

        //        logTime(function () {
        //            $('.list li.item2'); // slow
        //        })
        //
        //        logTime(function () {
        //            $('#list li.item2'); // better
        //        })

        //------------------

        //        logTime(function () {
        //            $('ul.list .item2'); // slow
        //        })
        //
        //        logTime(function () {
        //            $('.list li.item2'); // better
        //        })

        //------------------

        //        logTime(function () {
        //            $('ul'); // slow
        //        })
        //
        //        logTime(function () {
        //            $('.list'); // better
        //        })

        //------------------

        logTime(function() { // slow
            $('#list .item2');
            $('#list .item4');
        });

        logTime(function() { // better
            var ul = $('#list');
            ul.find('.item2');
            ul.find('.item4');
        });

    });
    </script>
</body>

</html>
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容