版权声明:转载请注明出处 https://blog.csdn.net/SOALIN228/article/details/84311760
如何使用 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');
});