jQuery选择的艺术

最新推荐文章于 2023-02-01 11:58:35 发布

SOALIN

最新推荐文章于 2023-02-01 11:58:35 发布

阅读量145

点赞数

分类专栏：前端文章标签：前端 jquery jq 选择

本文链接：https://blog.csdn.net/SOALIN228/article/details/84311760

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

如何使用 jQuery

下载jQuery
<script src="jquery-3.1.0.js"></script>
使用CDN
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>

jQuery 之ready

在网站加载大图片时window.onload要等图片加完后才执行，而 $(document).ready在DOM加载完毕后就可以执行
在jQuery中ready可以省略

jQuery 选择器

jQuery 元素选择器
$(‘p’)选取<p>元素
$(‘p.intro’)选取所有class="intro"的<p>元素
$(‘p#demo’)选取所有id="demo"的<p>元素
jQuery 属性选择器
$(’[href]’)选取所有带有 href 属性的元素
$(’[href=‘#’]’)选取所有 href 值等于 ‘#’ 的元素
$(’[href=!‘#’]’)选取所有 href 值不等于 ‘#’ 的元素
jQuery CSS选择器
$(‘p’).css(“background-color”, “blue”);

代码

demo1

<!DOCTYPE html>
<html lang="en">
<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="jquery-3.1.0.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>
</html>

demo2

<!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">p1</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">111</p>

<p data-id="2">222</p>

<script src="jquery-3.1.0.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>

jQuery 选择器性能优化

function logTime(cb) {
   console.time('logTime');
   if (typeof cb === 'function') {
       for (var i = 0; i < 10000; i++) {
           cb();
       }
   }
   console.timeEnd('logTime');
}

尽量使用css中有的选择器

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

避免过度约束

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');
});

SOALIN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择的艺术

如何使用jQuery下载jQuery &amp;amp;amp;amp;amp;lt;script src=&amp;amp;amp;amp;quot;jquery-3.1.0.js&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;gt;使用CDN
复制链接

扫一扫