abstract：<!DOCTYPE html> <html> <head> <title>jquery選擇器</title> <script type="text/javascript" src="jquery-3.4.0.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>jquery選擇器</title>
<script type="text/javascript" src="jquery-3.4.0.min.js"></script>
<!-- css設(shè)置元素的屬性 -->
<style type="text/css">
.one,.two{height: 100px;width: 100px;background:red;}
span{color: #fff;}
</style>
<!-- 通過(guò)jquery去改元素屬性 -->
<script type="text/javascript">
$(document).ready(function(){
// <!-- 基本選擇器 -->
$(".one").css({"background":'skyblue','height':'200px','width':'200px'})
$("span").css("color","black")
$('.two,#src,b').css({'background':'pink','color':'#fff'})
// 層級(jí)選擇器
$('ul>li').css({'background':'blue','color':"#fff"})
$('ul li').css('background','red')
$('input+button').css({'width':'100px','height':'40px',
'background':'pink','border':'0','marginLeft':'30px'})
$('label~input').css({'background':'blue','width':'300px',
'height':'30px','marginLeft':'10px'})
// 順序選擇器
$('p:first').css('background','red')
$('p:last').css('background','green')
$('p:gt(0)').css('background','skyblue')
})
</script>
</head>
<body>
<!--《 基本選擇器 -->
<div class="one"><span>jquery的選擇器</span></div>
<div class="two"><span id="src">匹配多個(gè)選擇器</span><b style="font-size: 2em">123</b></div>
<!-- 層級(jí)選擇器 -->
<ul>
<li>晴天</li>
<li>
<div>
<ul>
<li>陰天</li>
</ul>
</div>
</li>
<li>下雨</li>
<li>臺(tái)風(fēng)</li>
</ul>
<label>天氣:</label>
<input type="text" name="">
<button>submit</button><br>
<label>預(yù)報(bào):</label> <input type="password" name="">
<!-- 順序選擇器 -->
<p>這個(gè)是第一段</p>
<p>這個(gè)是第二段</p>
<p>這個(gè)是第三段</p>
<p>這個(gè)是第四段</p>
<p>這個(gè)是第五段</p>
</body>
</html>jQuery選擇器
一、基本選擇器
$('#id名')根據(jù)給定的id來(lái)匹配到元素
例如：$('#box').css('background','red')
$('.class名')根據(jù)給定的class來(lái)匹配到元素
例如：$('.box').css('background','blue')
$('element')根據(jù)給定的標(biāo)簽名來(lái)匹配到元素
例如：$('span').css('font-size','30px')
$('*')匹配所有元素
例如： $('*').css('font-family','宋體')
$('#id,.class名,element')匹配到頁(yè)面中多個(gè)選擇器
例如： $('#box,.box,span').css('color','pink')
二、層級(jí)選擇器
$('ul>li').css('list-style','none') //匹配 ul下的所有l(wèi)i子層級(jí)，即父層級(jí)下所有的子層級(jí)
$('ul li').css('list-style','none')//匹配ul下所有的有l(wèi)i的層級(jí)，即祖先層級(jí)下所有的后代
$('input+button').css('height','50px')//匹配input同層級(jí)緊跟后面button元素
$('label~input').css('background','pink')//匹配label后面所有的input
三、順序選擇器
$('p:first').css('color','red') //匹配第一個(gè)P標(biāo)簽元素
$('p:last').css('color','blue') //匹配最后一個(gè) P標(biāo)簽元素
$('p:gt(1)').css('font-size','30px') //匹配從第三個(gè)開(kāi)始的所有P標(biāo)簽元素
即（$(':gt(x)')表示大于值x的元素）
$('p:lt(2)').css('color','red') //匹配第一個(gè)和第二個(gè)P標(biāo)簽元素
即（$(':lt(x)')表示小于值x的元素）
$('p:eq(1)').css('color','red') //匹配第二個(gè)P標(biāo)簽元素
即（$(':eq(x)')表示等于值x的元素）
$('p:odd').css('background','#ccc') //匹配奇數(shù)的P標(biāo)簽元素
即（$(':odd')奇數(shù)順序）
$('p:even').css('background','pink') //匹配偶數(shù)的P標(biāo)簽元素
即（$(':even')偶數(shù)順序）
$('p:not(#box)').css('background','red') //匹配不是#box的所有元素
即（$(':not(selector)')匹配不是selector的所有元素）
四、內(nèi)容選擇器
$('div:contains(jun)').css('background','blue') //在div選擇文本維jun的文本
即（$(':contains(text)') 匹配包含給定文本（text）的元素）
<div>jun</div>
$('div:has(span)').css('color','red') //匹配div里面有span的元素
即（$(':has(selector)')匹配包含特定選擇器元素的元素）
<div><span>PHP中文網(wǎng)</span></div>
$('div:empty').css('background','red') //匹配div不含有內(nèi)容元素
即（$(':empty')匹配不含有內(nèi)容的元素（即 不包含子元素或者文本的空元素））
<div></div>
<div>1</div>
<div><b></b></div>
$('div:parent').css('background','red') //與empty相反
即（$(':parent')匹配含有子元素或者文本的元素）
五、屬性選擇器
一、$('[屬性名]')匹配包含給定屬性的元素
栗子：$('input[type]').css('background','pink')
<input type="text"name="">
二、 $('[attribute=value]')匹配給定屬性是某個(gè)特定值的元素
栗子： $('input[type=button]').css('background','blue')
<input type="button" value="按鈕">
三、$('[attribute！=value]')匹配所有不含有指定值的屬性，或者說(shuō)是屬性不等于特定值的元素
栗子：$('input[type!=text]').css('background','red')
<input type="text" name="new" id="woman"><br>
<input type="password" name="new1" id="man"><br>
<input name="new"id="new"><br>
四、$('[attribute ^= value]')匹配給定屬性是以某些值開(kāi)始的元素
$('[attribute $= value]')匹配給定屬性是以某些值結(jié)尾的元素
$('[attribute *= value]')匹配給定屬性包含某些值的元素
栗子：$('input[type ^=t ]').css('background','red')
$('input[type $=n ]').css('background','red')
$('input[type *=o ]').css('background','blue')
<input type="text" name="new" id="woman"><br>
<input type="password" name="new1" id="man"><br>
<input type="button" value="按鈕">
五、$('attrSel[1] attrSel[1] attrSel[1]')復(fù)合選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用
栗子：$('input[id][name*=n]').css('background','red')
<input type="text" name="new" id="woman"><br>
<input type="password" name="new1" id="man"><br>
<input type="button" value="按鈕">
六、表單選擇器
一、$(':enabled')所有激活的input元素（可以使用的input元素）
栗子：$(document).ready(function(){
$(':enabled').css('background','pink')
})
二、$(':disabled')所有禁用的input元素（不可以使用的input元素）
栗子：$(document).ready(function(){
$(':disabled').css('background','red')
})
<form>
輸入框1<input type="text" name=""><br>
輸入框2<input type="text" name=""><br>
輸入框3<input type="text" name="" disabled><br>
輸入框4<input type="text" name=""><br>
</form>
三、$(':selected')所有被選取的元素，針對(duì)于select元素
栗子 ： $(':selected').css('color','blue')
<select>
<option>摩羯座</option>
<option selected>雙魚(yú)座</option>
<option>射手座</option>
<option>天蝎座</option>
</select>
四、$(':checked')所有被選中的input元素
栗子：$(document).ready(function(){
$(':checked').parent().css('color','red')
})
<form>
愛(ài)好：
<label><input type="checkbox" name="">看書(shū)</label>
<label><input type="checkbox" name="" checked>游泳</label>
<label><input type="checkbox" name="">游戲</label>
</form>
Correcting teacher：查無(wú)此人Correction time：2019-04-25 13:37:06
Teacher's summary：完成的不錯(cuò)。jq比js簡(jiǎn)單很多，多練習(xí)可以代替常規(guī)js。繼續(xù)加油。