摘要：<!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')选取所有偶数(单数)<tr>元素
// $('span:even').css('background','red');
// 9. $('span:odd') 选取所有奇数(双数)<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') 选取无子(元素)节点的所有元素
//$(':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结尾的元素
// $('[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>抱着学习的心态</span>
<span>抱着学习的心态</span>
<span>抱着学习的心态</span>
<span>抱着学习的心态</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>
批改老师：韦小宝批改时间：2019-02-12 09:26:24
老师总结：写的很不错 jQuery中的选择器实际上和css的或者js的就有那么点相似！一定要牢牢掌握哦！
