[聚合文章] jQuery--选择器

  1. 首页
  2. 聚合文章
  3. 文章详情
jQuery 2018-01-12 13 阅读
原文链接: http://www.jianshu.com/p/73b2949757bc

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元素的集合

• 集合内元素顺序和在页面上顺序一致

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 href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.163.com">网易</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[href="http://www.baidu.com"]').addClass('highlight'))
        //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>

④内容筛选器

: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 >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 >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 >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:选择正在执行动画的元素

<!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选择器的性能优化

• 尽量使用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>

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。