jQuery的选择器

最新推荐文章于 2024-11-12 06:39:32 发布

花江夏树

最新推荐文章于 2024-11-12 06:39:32 发布

阅读量202

点赞数

本文链接：https://blog.youkuaiyun.com/onepunchmen00/article/details/78858063

版权

$(）.ready 和 window.onload

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

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

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

选择器

js选择器

querySelcetor 和querySelectorAll

css选择器

基本选择器

属性选择器

伪类选择器

伪元素选择器

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

关于类数组对象

jquery选择器

*********

first 和first-chilid选择器的差异

:first 获取第一个元素。

:first-child 选择器选取属于其父元素的第一个子元素的所有元素。

first() 返回被选元素的首个元素。

测试代码如下：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>ul_1 item 1</li>
<li>ul_1 item 2</li>
<li>ul_1 item 3</li>
<li>ul_1 item 4</li>
<li>ul_1 item 5</li>
</ul>
<ul>
<li>ul_2 item 1</li>
<li>ul_2 item 2</li>
<li>ul_2 item 3</li>
<li>ul_2 item 4</li>
<li>ul_2 item 5</li>
</ul>
</body>
</html>

先测试 :first，代码如下

[html] view plain copy

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li:first").css("background-color","yellow");
})
</script>

效果如下;

只有第一个被选中,

测试:first-child，代码如下

[html] view plain copy

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li:first-child").css("background-color","yellow");
})
</script>

效果如下：

这里发现，:first选中的是第一个ul元素的第一个li子元素，然后添加样式，不论这个元素在本页面有多少个，它只找第一个

而:first-child选择的是所有ul下面的第一个子元素是li的元素，有两个ul父元素，ul_1,ul_2他们都拥有各自的子元素li。

最后是first()它和:first 类似，获取的第一个ul元素的第一个li子元素，不管有多少个本元素

子元素选择器

表单选择器

内容选择器

其他

:root 选择器选取文档的根元素。

:hidden 选择器选取隐藏的元素。

以下几种情况的元素是隐藏元素：

设置为 display:none
带有 type="hidden" 的表单元素
width 和 height 设置为 0
隐藏的父元素（这也会隐藏子元素）

注释：该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用。

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

        div.colored {
            background: green;
        }
    </style>
    <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
</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>



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

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

<script>
    //$(':lang(en)').addClass('highlight');
   // $('p:not("#foo")').addClass('highlight');
   // $(':root').addClass('highlight'); //:root 选择器选取文档的根元素。
   // $('p:target').addClass('highlight');  ???
    //$('p:hidden').css('display','block').addClass('highlight');

   // $('p:visible').addClass('highlight')
   // $(':header').addClass('highlight');

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


    function animate() {
    $('#mover').slideToggle('slow', animate);
    }
   animate();

</script>
</body>
</html>

优化

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>