摘要：jquery的選擇器有基本選擇器，順序選擇器，內(nèi)容選擇器，層級(jí)選擇器，屬性選擇器，表單選擇器等基本選擇器通過(guò)元素標(biāo)簽名，元素Id，Class來(lái)查找DOM元素，例如$('li').css('list-style','none') $('#box').css('list-style','none') $(&
jquery的選擇器有基本選擇器，順序選擇器，內(nèi)容選擇器，層級(jí)選擇器，屬性選擇器，表單選擇器等
基本選擇器通過(guò)元素標(biāo)簽名，元素Id，Class來(lái)查找DOM元素，例如
$('li').css('list-style','none')
$('#box').css('list-style','none')
$('.box').css('list-style','none')順序選擇器有：
$('div:first').css('background','red') 第一個(gè)
$('div:last').css('background','red') 最后一個(gè)
$('div:gt(1)').css('background','red') 大于1
$('div:lt(1)').css('background','red') 小與1
$('div:eq(1)').css('background','red') 等于1
$('div:odd').css('background','red') 偶數(shù)
$('div:even').css('background','red')奇數(shù)
$('div:not（1）').css('background','red') 不等于1
等級(jí)層級(jí)選擇器
<script type="text/javascript">
$(document).ready(function(){
$('ul>li').css('list-style','none')//只能匹配一級(jí)的子元素 父子關(guān)系
$('ul li').css('list-style','none')//可以匹配所有元素只要是后代就行
$('label+input').css('height','50px')//只能匹配緊跟在label底下的input元素，中間不能有元素
$('label~input').css('background','red')
//匹配label后面的input元素
})內(nèi)容選擇器
<script type="text/javascript">
$(document).ready(function(){
$('div:contains(jion)').css('background','red')// 匹配含特定內(nèi)容的元素
$('div:has(span)').css('color','red')//包含特定選擇器的元素$('span'）
$('div:empty').css('background','pink')
// 配不含內(nèi)容的元素
$('div:parent').css('background','blue')
// 匹配含內(nèi)容的元素
})屬性選擇器
<script type="text/javascript">
$(document).ready(function(){
$('input[type]').css('background','pink')
// 匹配含有特定屬性的元素
$('input[type=button]').css('background','blue')
//匹配屬性值為特定些值的元素
$('input[type!=button]').css('background','red')//匹配屬性不含指定值或不是某些值的元素
$('input[type^=t]').css('background','red')//匹配以某些值開始的元素
$('input[type$=n]').css('background','red')//匹配以某些值結(jié)尾的元素o
$('input[type*=n]').css('background','red')//匹配屬性值以包含某些值的元素
$('input[id] [name*=n]').css('background','red')
//符合選擇器 需要同時(shí)滿足多個(gè)元素匹配屬性值以包含某些值的元素
})
</script>表單選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單選擇器</title>
<script type="text/javascript" src="jquery-3.3.1.min.js">
</script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(':enabled').css('background','pink')// 匹配激活的元素
$(':disabled').css('background','red')// 匹配未激活的元素
$(':selected').css('color','red')// 匹配被默認(rèn)選擇的元素
$(':checked').parent().css('color','red')// 匹配被默認(rèn)選擇的元素
})
</script>
<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>
<!-- <select >
<option >雙魚</option>
<option >射手</option>
<option selected>天蝎</option>
<option >獅子</option>
</select> -->
愛好：
<label><input type="checkbox" >看書</label>
<label><input type="checkbox" checked>游戲</label>
<label><input type="checkbox" >游泳</label>
</form>
</body>
</html>