????：<!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">手機(jī)</label>
<input type="number" name="tel" id="tel" placeholder="請輸入手機(jī)號" 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>運(yùn)動
<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')
//標(biāo)簽/元素選擇器
$('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')
//同級下一個(gè)特定元素
//$('#li1+li').css('background-color','pink')
//后面的所有特定元素
//$('#li1~li').css('background-color','pink')
//$('#li1~i').css('background-color','pink')
//------順序選擇器--------
//$('li:first').css('background-color','pink')//第一個(gè)指定元素
//$('li:last').css('background-color','pink')//最后一個(gè)指定元素
//$('li:gt(1)').css('background-color','pink')//序號大于x的指定元素，從0開始計(jì)
//$('li:lt(1)').css('background-color','pink')//序號小于x的指定元素，從0開始計(jì)
//$('li:eq(1)').css('background-color','pink')//序號等于x的指定元素，從0開始計(jì)
//$('li:odd').css('background-color','pink')//序號為單數(shù)的指定元素，從0開始計(jì)
//$('li:even').css('background-color','pink')//序號為偶數(shù)的指定元素，從0開始計(jì)
//$('li:not(#li1)').css('background-color','pink')//非。。的指定元素
//------內(nèi)容選擇器--------
//$('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')//屬性以特定值結(jié)尾的指定元素
//$('input[type*=t]').css('background-color','blue')//屬性包含特定值的指定元素
//$('li[name][id*=li]').css('background-color','blue')//復(fù)合選擇器,屬性滿足多個(gè)條件
//------表單選擇器--------
// $('input:enabled').css('background-color','yellow')//有效的指定元素
// $('input:disabled').css('background-color','gray')//失效的指定元素
//$(':selected').parent().css('color','yellow')//被選中的select元素
$(':checked').parent.css('color','yellow')//被選中的checkbox元素
//最后一條存疑，沒有套標(biāo)簽的情況下如何設(shè)置文本的顏色？？？？
})
</script>
</body>
</html>
?? ???：韋小寶?? ??：2019-02-11 09:12:20
???? ??：jQuery中的選擇器是很重要的一部分 不僅僅jQuery中有，css中也有 選擇器一定要牢牢掌握！