abstract：//层级选择器$(‘父级元素>子元素’)给定的父级元素下匹配所有子元素$(‘祖元素 空格 后代元素’ )给定祖元素下的所有后代元素$(‘a+b’)a元素后面的b元素，a和b同级$(‘a~b’)a元素后面的所有的元素b//顺序选择器1、顺序$(‘:first’)第一个元素 $(‘:last’)最后一个元素2、比较:从0开始$(‘:gt
//层级选择器
$(‘父级元素>子元素’)给定的父级元素下匹配所有子元素
$(‘祖元素 空格 后代元素’ )给定祖元素下的所有后代元素
$(‘a+b’)a元素后面的b元素，a和b同级
$(‘a~b’)a元素后面的所有的元素b
//顺序选择器
1、顺序
$(‘:first’)第一个元素 $(‘:last’)最后一个元素
2、比较:从0开始
$(‘:gt(x)’)大于x的元素
$(‘:lt(x)’)小于…
$(‘:eq(x)’)等于…
3、奇偶性
$(‘:odd’)奇数顺序 $(‘:even’)偶数顺序
4、非，匹配不是这个选择器的所有元素
$(‘:not(selector)’)
//内容选择器
$(‘div:contains(jun)’)匹配内容含jun的div
$(‘div:has(span)’)匹配含span选择器的div
$(‘div:empty’)匹配不含有任何内容的div
$(‘div:parent’)匹配含有子元素或文本的div
//属性选择器
$(‘input[type]’)匹配input中有type属性的元素
$(‘input[type=text]’)type=text的元素
$(‘input[type!=text]’)不等于的元素
$(‘input[type^=t]’)type属性开头是t的元素
$(‘input[type$=n]’)type属性结尾是n的元素
$(‘input[type*=o]’)type属性包含o的元素
$(‘input[id][name*=n]’)满足input中有id属性和name属性并且name属性中包含n的元素
//表单选择器
$(‘:enabled’)选择表单内所有激活的元素
$(‘:disabled’)选择表单内禁用的元素
$(‘:selected’)select所有被选中的元素
$(‘:checked’)input所有被选中的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery所有选择器</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
#d1,#d2,#d3{
width: 100px;
height: 100px;
margin-top: 10px;
background-color: cyan;
}
</style>
</head>
<body>
<div>
<h1>注册信息</h1>
<form action="" method="">
<p>
<label for="user">用户名：</label>
<input type="text" id="user" placeholder="请输入用户名"></input>
<P>
<label for="password">密码：</label>
<input type="password" id="password" placeholder="请输入密码"></input>
</P>
<P>
<label for="email">邮箱：</label>
<input type="email" id="email" placeholder="请输入邮箱"></input>
</P>
<P>
<input type="radio" id="radio" name="radio" value="男" checked=""></input><label for="radio">男</label>
<input type="radio" id="radio" name="radio" value="女"></input><label for="radio">女</label>
</P>
<p>
兴趣爱好：
<label><input type="checkbox" name="" checked=""></input>看书</label>
<label><input type="checkbox" name=""></input>玩游戏</label>
<label><input type="checkbox" name=""></input>唱歌</label>
<label><input type="checkbox" name="" checked=""></input>运动</label>
</p>
<p>
<label>星座：
<select>
<option selected="">巨蟹座</option>
<option>天蝎座</option>
<option>双子座</option>
<option>处女座</option>
<option>天秤座</option>
</select>
</label>
</p>
</form>
</div>
<div id="d1">早上好</div>
<div id="d2">中午好
<span>好饱</span>
</div>
<div id="d3"></div>
<script>
$(document).ready(function(){
//层级选择器
// $('select>option').css('background','pink')
// $('form input').css('background','pink')
// $('input+label').css('background','pink')
//$('label~input').css('background','pink')
//顺序选择器
// 1、顺序
// $('input:first').css('background','pink')
// $('label:last').css('background','pink')
// 2、比较
// $('option:gt(1)').css('background','pink')
// $('option:lt(1)').css('background','pink')
// $('option:eq(2)').css('background','pink')
// 3、奇偶性
// $('option:odd').css('background','pink')
// $('option:even').css('background','pink')
// 4、非
// $('form:not(select)').css('background','pink')
//内容选择器
// $('label:contains(密码)').css('background-color','pink')
// // $('div:has(span)').css('background-color','pink')
// $('div:empty').css('background-color','pink')
// $('div:parent').css('background-color','pink')
//属性选择器
// $('input[placeholder]').css('background-color','pink')
// $('input[placeholder=请输入密码]').css('background-color','pink')
// $('input[placeholder!=请输入密码]').css('background-color','pink')
// $('input[type^=t]').css('background-color','pink')
// $('input[type$=t]').css('background-color','pink')
// $('input[type*=t]').css('background-color','pink')
// $('input[id][type*=p]').css('background-color','pink')
//表单选择器
// $(':enabled').css('background-color','pink')
// $(':disabled').css('background-color','pink')
$(':checked').parent().css('color','pink')
//$(':selected').css('background-color','pink')
})
</script>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-01-22 09:14:33
Teacher's summary：完成的不错。这章课，学了不少，一些常用的要牢记。加油