摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="main">
<label for="name">姓名</label>
<input type="text" name="name" id="name" placeholder="请输入姓名"><br/>
<label for="password">密码</label>
<input type="password" name="password" id="password" placeholder="请输入密码"><br/>
<label for="name">手机</label>
<input type="number" name="tel" id="tel" placeholder="请输入手机号" disabled><br/>
<label for="sex">性别</label>
<input type="radio" name="sex" id="male" checked="true">男
<input type="radio" name="sex" id="female">女<br/>
<label for="hobbies">兴趣</label>
<input type="checkbox" name="hobbies">阅读
<input type="checkbox" name="hobbies" checked>运动
<input type="checkbox" name="hobbies">电影
<input type="checkbox" name="hobbies">音乐
<input type="checkbox" name="hobbies">游戏
<input type="checkbox" name="hobbies">美食<br/>
<select name="grade" id="sl1">
<option value="1">一年级</option>
<option value="2" selected>二年级</option>
<option value="3">三年级</option>
<option value="4">四年级</option>
<option value="5">五年级</option>
<option value="6">六年级</option>
</select><br/>
<ul>
<li>1</li>
<li name="a1" id="li1">2
<i>21</i>
<i >22</i>
<i >23</i>
<i>24</i>
</li>
<li name="a1" id="li2">3</li>
<i>4</i>
<li>5</li>
<i>6</i>
<li name="a1" ></li>
</ul>
<button class="bt1" type="button">提交</button>
</div>
<script>
$(document).ready(function(){
//------基本选择器-------
//id选择器
$('#name').css('background-color','pink')
//类选择器
$('.bt1').css('width','80px')
//标签/元素选择器
$('label').css('font-weight','bold')
//选择全部元素
$('*').css('font-size','18px')
//组选择器
//$('input,#sl1').css('font-weight','bold')
//------层级选择器--------
//指定父级元素下的所有特定子元素
//$('ul>li').css('background-color','pink')
//指定祖先元素下的所有特定后代元素
//$('ul i').css('background-color','pink')
//同级下一个特定元素
//$('#li1+li').css('background-color','pink')
//后面的所有特定元素
//$('#li1~li').css('background-color','pink')
//$('#li1~i').css('background-color','pink')
//------顺序选择器--------
//$('li:first').css('background-color','pink')//第一个指定元素
//$('li:last').css('background-color','pink')//最后一个指定元素
//$('li:gt(1)').css('background-color','pink')//序号大于x的指定元素，从0开始计
//$('li:lt(1)').css('background-color','pink')//序号小于x的指定元素，从0开始计
//$('li:eq(1)').css('background-color','pink')//序号等于x的指定元素，从0开始计
//$('li:odd').css('background-color','pink')//序号为单数的指定元素，从0开始计
//$('li:even').css('background-color','pink')//序号为偶数的指定元素，从0开始计
//$('li:not(#li1)').css('background-color','pink')//非。。的指定元素
//------内容选择器--------
//$('li:contains(1)').css('background-color','pink')//文本中含特定字符的指定元素
//$('li:has(i)').css('background-color','pink')//含特定选择器的指定元素
//$('li:empty').css('background-color','pink')//空的指定元素
//$('li:parent').css('background-color','pink')//非空的指定元素
//------属性选择器--------
//$('input[id]').css('background-color','blue')//含特定属性的指定元素
//$('input[id=name]').css('background-color','blue')//属性为特定值的指定元素
//$('input[id!=name]').css('background-color','blue')//属性不为特定值的指定元素
//$('input[id^=n]').css('background-color','blue')//属性以特定值开始的指定元素
//$('input[id$=d]').css('background-color','blue')//属性以特定值结尾的指定元素
//$('input[type*=t]').css('background-color','blue')//属性包含特定值的指定元素
//$('li[name][id*=li]').css('background-color','blue')//复合选择器,属性满足多个条件
//------表单选择器--------
// $('input:enabled').css('background-color','yellow')//有效的指定元素
// $('input:disabled').css('background-color','gray')//失效的指定元素
//$(':selected').parent().css('color','yellow')//被选中的select元素
$(':checked').parent.css('color','yellow')//被选中的checkbox元素
//最后一条存疑，没有套标签的情况下如何设置文本的颜色？？？？
})
</script>
</body>
</html>
批改老师：韦小宝批改时间：2019-02-11 09:12:20
老师总结：jQuery中的选择器是很重要的一部分 不仅仅jQuery中有，css中也有 选择器一定要牢牢掌握！
