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 456</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:选择在实践动画的元素

<!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>

相关文章

网站地图xml地图