jQuery的选择器

来源：互联网发布：淘宝自己的店铺怎么看编辑：程序博客网时间：2024/06/02 18:35

$(）.ready 和 window.onload

有的页面，实际上dom结构已经加载完毕了，但是它还在等待加载一些内容，比如图片、iframe框架页面等等，而onload事件，必须等待这些内容都加载完毕之后，才能触发；

ready方法只会判断dom元素是否加载完毕，而不会等待图片、框架等内容的加载，这样响应就会快很多；

ready方法和onload不要一起使用，要不可能会发生ready无效的情况；

选择器

js选择器

querySelcetor 和querySelectorAll

css选择器

基本选择器

属性选择器

伪类选择器

伪元素选择器

before和after一般还是写成单冒号了对老浏览器的照顾其他的老浏览器不支持就使用双冒号；

关于类数组对象

jquery选择器

子元素选择器

表单选择器

内容选择器

其他

优化

jquery选择器和queryselectorall差不多

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>positionFilter</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() {//尽量使用css的选择器        //        logTime(function () {        //            $("ul li:even");// slow        //        })        //        logTime(function () {        //            $("ul li:nth-child(odd)");// better        //        })        //        logTime(function () {        //            document.querySelectorAll("ul li:nth-child(odd)"); // best  但是选择出来的不是jquery对象        //        })        //        logTime(function () {        //            $(document.querySelectorAll("ul li:nth-child(odd)")); // better 但是速度和之前jquery一样 所以不常用        //        })        //------------------//避免过多约束        //        logTime(function () {        //            $('div ul li.item2');// slow        //        })        //        logTime(function () {        //            $('li.item2');// better        //        })        //------------------//尽量以id开头        //        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>

阅读全文

0 0