摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="jquery-3.3.1.min.js">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//基本选择器
// $('#id')根据给定的ID来匹配到元素
// $('.class名')根据给定的class来匹配元素
// $('element')根据给定的标签名来匹配到元素
// $('*')匹配所有的元素
// $('#id,.class名,element')匹配到页面中多个选择器
//层级选择器
//给定的父级元素下匹配所有的子元素：$('父级元素>子集元素')
//给定的祖先元素下匹配所有的后代元素：$('祖先元素 后代元素')
//匹配紧跟在prev元素后面的next元素：$('prev + next')(同级元素)
//匹配prev元素后面所有的siblings元素：$('prevsiblings')
//顺序选择器
// $(':first')第一个元素
// $(':last')最后一个元素
// 比较
// $(':gt(x)')表示大于值x的元素
// $(':lt(x)')表示小于值X的元素
// $(":eq(x)")表示等于值x的元素
// $(':odd')奇数顺序
// $(':eveb')偶数顺序
// $(':not(selector)')匹配不是sleector的所有元素
//内容选择器
// $(':contains(text)')匹配包含给定文本（text）的元素
// $(':has(selector)')p匹配包含特定选择器元素的元素
// $(':empty')匹配不含有内容的元素（即 不包含子元素或者文本的空元素）
// $(':parent')匹配含有子元素或者文本的元素
//属性选择器
//$('[属性名]')匹配包含给定属性元素
// $(document).ready(function(){
// // $('ul>li').css('list-style','none')
// // $('ul li').css('border','1px solid red')
// })
表单选择器
$(':enabled')所有激活的input元素（可以使用的input元素）
$(':disabled')所有禁用的input元素（不可以使用的input元素）
$(':selected')所有被选取的元素，针对于select元素
$(':checked')所有被选中的input元素
// $(document).ready(function(){
// //$(':enabled').css('background','pink');
// //$(':disabled').css('background','red');
// $(':selected').css('color','blue');
// })
</script>
<script type="text/javascript">
$(document).ready(function(){
//$("p:first").css('color','red');
//$("p:last").css('color','pink');
//$('p:gt(1)').css('font-size','40px');
//$('p:lt(2)').css('color','pink');
//$('p:eq(4)').css('color','blue');
// $('p:odd').css('background','#f1f1f1');
// $('p:even').css('background','pink');
// $('p:not(#box)').css('font-size','10px');
})
</script>
</head>
<body>
<div>
<p id="box">11</p>
<p>22</p>
<p>33</p>
<p>44</p>
<p>55</p>
<p>66</p>
<p>77</p>
</div>
<form>
<ul>
<li><input type="text" name="" disabled="disabled"></li>
<li><input type="text" name=""></li>
<li><input type="text" name=""></li>
<li><input type="text" name=""></li>
<li><input type="text" name=""></li>
<li><input type="text" name=""></li>
<li>
<select name="">
<option value="">1</option>
<option value="">2</option>
<option value="" selected>3</option>
<option value="">4</option>
</select>
</li>
<li>
爱好：
<input type="checkbox" name="">看书
<input type="checkbox" name="">游泳
<input type="checkbox" name="">打游戏。
</li>
</ul>
</form>
</body>
</html>
批改老师：灭绝师太批改时间：2019-01-21 13:10:38
老师总结：完成的不错！选择器是jQuery重要的知识点，要好好掌握哦
