abstrak：<!DOCTYPE html><html><head> <title>jq選擇器筆記</title> <script src="http://code.jquery.com/jquery-3.1.1.js"></script> <style type="text/css"
<!DOCTYPE html>
<html>
<head>
<title>jq選擇器筆記</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<style type="text/css">
.intro{width: 200px;height: 200px; background: #ccc;}
.demo{width: 100px;height: 100px; background: #ccc;}
</style>
<script>
$(document).ready(function(){
// 1. $('*') 選取所有元素, '*'表示全部文檔中的元素
// $('*').css({'margin':'0','padding':'0'});
// 2. $('#name') 選取id='name'的元素 例如:<div id='name'></div>
// $('#name').css('background','blue');
// 3. $('.intro') 選取所有class='intro'的元素 例如:<div class='intro'></div>
// $('.intro').css('background','green');
// 4. $('p') 選取所有<p>元素
// $('p').css('color','red');
// 5. $('.intro, .demo') 選取 所有class='intro' 和 class='demo' 的元素
// $('.intro, .demo').css('background','skyblue');
// 6. $('p:first') 選取第一個<p>元素
// $('p:first').css('color','skyblue');
// 7. $('p:last') 選取最后一個<p>元素
// $('p:last').css('color','blue');
// 8. $('span:even')選取所有偶數(shù)(單數(shù))<tr>元素
// $('span:even').css('background','red');
// 9. $('span:odd') 選取所有奇數(shù)(雙數(shù))<tr>元素
// $('span:odd').css('background','yellow');
// 10. $('p:eq(3)') 選取第四個<p>元素 (index從0開始)
// $('p:eq(3)').css('background','red');
// 11. $('p:gt(1)') 選取index大于3的<p>元素
// $('p:gt(1)').css('background','blue');
// 12. $('p:lt(3)') 選取index小于3的<p>元素
// $('p:lt(3)').css('background','green');
// 13. $('input:not()') 選取為空的input元素
// $('input:not()').css('height','40px');
// 14. $(':contains('good')') 選取指定字符串的所有元素
// $(":contains('good')").css('color','red');
// 15. $(':empty') 選取無子(元素)節(jié)點的所有元素
//$(':empty').css('background','blue');
// 16. $('[href]') 所有帶有 href 屬性的元素
// $('[href]').css('background','blue');
// 17. $('[href="#"]') 所有 href 屬性的值等于"#"的元素
// $('[href="#"]').css('color','#ccc');
// 18 $('[href!="#"]') 所有 href 屬性的值不等于"#"的元素
// $('[href!="#"]').css('color','green');
// 19 $('[href$=".com"]') 所有 href 屬性的值以.com結(jié)尾的元素
// $('[href$=".com"]').css('color','#aaa');
// 20 $('[href*="tao"]') 匹配 href 含有"tao"字符的元素
// $('[href*="bao"]').css('color','red');
});
</script>
</head>
<body>
<div id="name" class="intro"></div>
<div class="demo"></div>
<hr>
<p>我們都是追夢人</p>
<p>我們都是追夢人</p>
<p>我們都是追夢人</p>
<p>我們都是追夢人</p>
<input type="" name="" value="">
<hr>
<span>抱著學(xué)習(xí)的心態(tài)</span>
<span>抱著學(xué)習(xí)的心態(tài)</span>
<span>抱著學(xué)習(xí)的心態(tài)</span>
<span>抱著學(xué)習(xí)的心態(tài)</span>
<hr>
<p>good</p>
<b>good</b>
<i>good</i>
<hr>
<a href="http://www.taobao.com">淘寶</a>
<a href="#">京東</a>
<a href="#">百度</a>
</body>
</html>
Guru membetulkan：韋小寶Masa pembetulan：2019-02-12 09:26:24
Rumusan guru：寫的很不錯 jQuery中的選擇器實際上和css的或者js的就有那么點相似！一定要牢牢掌握哦！