abstract：jQuery選擇器的測(cè)試案例和總結(jié)一、基本選擇器語(yǔ)法：$('#id名')根據(jù)id匹配元素$('.class名')根據(jù)class匹配元素$('element')根據(jù)標(biāo)簽名匹配元素$('*')匹配所有元素$('#id名,.class名,element')匹配到頁(yè)面中多個(gè)元素測(cè)試案例：<!DOCTYPE ht
jQuery選擇器的測(cè)試案例和總結(jié)
一、基本選擇器語(yǔ)法：
$('#id名')根據(jù)id匹配元素
$('.class名')根據(jù)class匹配元素
$('element')根據(jù)標(biāo)簽名匹配元素
$('*')匹配所有元素
$('#id名,.class名,element')匹配到頁(yè)面中多個(gè)元素
測(cè)試案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器案例測(cè)試</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCCCCC;
margin-top: 10px;
border-radius: 50%;
}
</style>
<script src="static/js/jquery-3.4.1.js"></script>
</head>
<body>
<div id="box"></div>
<div class="box1"></div>
<div></div>
<p id="text">你好</p>
<p class="text1">php中文網(wǎng)</p>
<p>VIP課程</p>
<script>
$(document).ready(function () {
// $('#id名')根據(jù)id匹配元素
$('#box').css('background','red')
// $('.class名')根據(jù)class匹配元素
$('.box1').css('background','yellow')
// $('element')根據(jù)標(biāo)簽名匹配元素
$('div').css('border-radius','50%')
//$('*')匹配所有元素
$('*').css('color','orange')
// $('#id名,.class名,element')匹配到頁(yè)面中多個(gè)元素
$('#box,.text1,p').css('background','blue')
})
</script>
</body>
</html>運(yùn)行截圖：
二、層級(jí)選擇器（想相當(dāng)于父類和子類的元素關(guān)系）
給定的父級(jí)元素下匹配所有的子元素：$('父級(jí)元素 > 子級(jí)元素')
給定的祖先元素下匹配所有的后代元素：$('祖先元素 后代元素')
匹配緊跟在prev元素后面的next元素(同級(jí)元素)：$('prev + next')
匹配prev元素后面所有的siblings元素:$('prev ~ siblings')
測(cè)試案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器案例測(cè)試</title>
<style>
</style>
<script src="static/js/jquery-3.4.1.js"></script>
</head>
<body>
<ul>
<li>列表項(xiàng)01</li>
<li>列表項(xiàng)02</li>
<li>列表項(xiàng)03</li>
<div>
<li>特殊列表項(xiàng)</li>
</div>
<li>列表項(xiàng)04</li>
<li>列表項(xiàng)05</li>
</ul>
<p>你好</p>
<p>php中文網(wǎng)</p>
<script>
$(document).ready(function () {
// 給定的父級(jí)元素下匹配所有的子元素：$('父級(jí)元素 > 子級(jí)元素')
$('ul > li').css('list-style','none')
// 給定的祖先元素下匹配所有的后代元素：$('祖先元素 后代元素')
$('ul li').css('background','lightgreen')
// 匹配緊跟在prev元素后面的next元素(同級(jí)元素)：$('prev + next')
$('ul + p').css('color','red')
// 匹配prev元素后面所有的siblings元素:$('prev ~ siblings')
$('ul ~ p').css('font-size','30px')
})
</script>
</body>
</html>運(yùn)行截圖：
三、順序選擇器
1、順序
$(':first')第一個(gè)元素
$(':last')最后一個(gè)元素
2、比較（x的順序是從0開(kāi)始）
$(':gt(x)')表示大于值x的元素
$(':lt(x)')表示小于值x的元素
$(':eq(x)')表示等于值x的元素
3、奇偶數(shù)(從0開(kāi)始)
$(':odd')奇數(shù)順序
$(':even')偶數(shù)順序
4、非
$(':not(selector)')匹配不是selector的所有元素
測(cè)試案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器案例測(cè)試</title>
<style>
div {
height: 100px;
width: 100px;
background-color: #CCCCCC;
margin-top: 10px;
}
</style>
<script src="static/js/jquery-3.4.1.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="box">5</div>
<div>6</div>
<script>
$(document).ready(function () {
//順序選擇器
//1、順序
//$(':first')第一個(gè)元素
$('div:first').css('background','red')
//$(':last')最后一個(gè)元素
$('div:last').css('background','yellow')
//2、比較（x的順序是從0開(kāi)始）
//$(':gt(x)')表示大于值x的元素
$('div:gt(3)').css('font-size','30px')
//$(':lt(x)')表示小于值x的元素
$('div:lt(3)').css('text-align','center')
//$(':eq(x)')表示等于值x的元素
$('div:eq(3)').css('border-radius','50%')
//3、奇偶數(shù)(從0開(kāi)始)
// $(':odd')奇數(shù)順序
$('div:odd').css('color','orange')
// $(':even')偶數(shù)順序
$('div:even').css('background','orange')
//4、非
// $(':not(selector)')匹配不是selector的所有元素
$('div:not(.box)').css('box-shadow','5px 5px 5px red')
})
</script>
</body>
</html>運(yùn)行截圖：
四、內(nèi)容選擇器
1、$(':contains(text)')匹配包含給定文本（text）的元素
2、$(':has(selector)')匹配包含特定選擇器元素的元素
3、$(':empty')匹配不含有內(nèi)容的元素（即不包含子元素或者文本的空元素）
4、$(':parent')匹配含有子元素或者文本的元素
測(cè)試案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器案例測(cè)試</title>
<style>
div {
height: 50px;
width: 100px;
background-color: #CCCCCC;
margin-top: 10px;
}
</style>
<script src="static/js/jquery-3.4.1.js"></script>
</head>
<body>
<div>html</div>
<div>css</div>
<div>JavaScript</div>
<div><span>jQuery</span></div>
<div class="box">JSON</div>
<div>AJAX</div>
<div></div>
<div><p></p></div>
<script>
$(document).ready(function () {
// 內(nèi)容選擇器
//1、$(':contains(text)')匹配包含給定文本（text）的元素
$('div:contains(css)').css('background','red')
//2、$(':has(selector)')匹配包含特定選擇器元素的元素
$('div:has(span)').css('background','yellow')
//3、$(':empty')匹配不含有內(nèi)容的元素（即不包含子元素或者文本的空元素）
$('div:empty').css('background','blue')
//4、$(':parent')匹配含有子元素或者文本的元素
$('div:parent').css('box-shadow','5px 5px 5px pink')
})
</script>
</body>
</html>運(yùn)行截圖
五、屬性選擇器
1、$('元素名[屬性名]')匹配包含給定屬性的元素
2、$('元素名[屬性名 = value]')匹配給定屬性是某個(gè)特定值的元素
3、$('元素名[屬性名 != value]')匹配所有不含有指定值的屬性，或者說(shuō)是不等于特定值的元素
4、$('元素名[屬性名 ^= value]')匹配給定的屬性是以某些值開(kāi)始的元素
5、$('元素名[屬性名 $= value]')匹配給定屬性是以某些值結(jié)尾的元素
6、$('元素名[屬性名 *= value]')匹配給定的屬性包含某些值的元素
7、$('元素名[屬性名][屬性名=value][屬性名！=value]')復(fù)合選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用
測(cè)試案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器案例測(cè)試</title>
<style>
</style>
<script src="static/js/jquery-3.4.1.js"></script>
</head>
<body>
<form action="">
<label for="name">姓名：</label>
<input type="text" name="" id="name"><br>
<label for="age">年齡：</label>
<input type="number" name="" id="age"><br>
<label for="address">地址：</label>
<input type="text" name="" id="address"><br>
<input type="button" value="提交"><br>
</form>
<script>
$(document).ready(function () {
//屬性選擇器
//1、$('元素名[屬性名]')匹配包含給定屬性的元素
$('input[value]').css('background','orange')
//2、$('元素名[屬性名 = value]')匹配給定屬性是某個(gè)特定值的元素
$('input[id = name]').css('background','pink')
//3、$('元素名[屬性名 != value]')匹配所有不含有指定值的屬性，或者說(shuō)是不等于特定值的元素
$('input[type != text]').css('height','60px')
//4、$('元素名[屬性名 ^= value]')匹配給定的屬性是以某些值開(kāi)始的元素
$('input[type ^= t]').css('width','100px')
//5、$('元素名[屬性名 $= value]')匹配給定屬性是以某些值結(jié)尾的元素
$('input[id $= s]').css('background','red')
//6、$('元素名[屬性名 *= value]')匹配給定的屬性包含某些值的元素
$('input[id *= a]').css('background','yellow')
//7、$('元素名[屬性名][屬性名=value][屬性名！=value]')復(fù)合選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用
$('input[id][type != text]').css('background','red')
})
</script>
</body>
</html>運(yùn)行截圖：
六、 表單選擇器
1、$(':enabled')所有激活的input元素（可以使用的input元素）
2、$(':disabled')所有禁用的input元素
3、$(':selected')所有被選取的元素，針對(duì)于select元素
4、$(':checked')所有被選中的input元素
測(cè)試案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器案例測(cè)試</title>
<style>
</style>
<script src="static/js/jquery-3.4.1.js"></script>
</head>
<body>
<form action="">
輸入框1<input type=""><br>
輸入框2<input type=""><br>
輸入框3<input type="" disabled><br>
<select name="" id="">
<option value="">雙子座</option>
<option value="" selected>水平座</option>
<option value="">金牛座</option>
<option value="">天蝎座</option>
</select>
</form>
<script>
$(document).ready(function () {
// 表單選擇器
//1、$(':enabled')所有激活的input元素（可以使用的input元素）
$(':enabled').css('height','50px')
//2、$(':disabled')所有禁用的input元素
$(':disabled').css('width','100px')
//3、$(':selected')所有被選取的元素，針對(duì)于select元素
$(':selected').css('background','red')
//4、$(':checked')所有被選中的input元素
$(':checked').css('color','white')
})
</script>
</body>
</html>運(yùn)行截圖：
Correcting teacher：天蓬老師Correction time：2019-07-02 09:34:33
Teacher's summary：jQuery中的表單選擇器, 是按它自己規(guī)則進(jìn)行的封裝, 也CSS3標(biāo)準(zhǔn)并不一致, 建議用屬性選擇器替代