摘要： jQuery共含有6類選擇器，分別是基本選擇器、層級選擇器、順序選擇器、內(nèi)容選擇器、屬性選擇器和表單選擇器這六類。由這些選擇器，可以更方便的對html中的各類元素進(jìn)行相關(guān)的操作。1.基本選擇器語法及代碼示例：//$('#id名')根據(jù)id名來匹配元素 $('#box1').css('background-col
jQuery共含有6類選擇器，分別是基本選擇器、層級選擇器、順序選擇器、內(nèi)容選擇器、屬性選擇器和表單選擇器這六類。由這些選擇器，可以更方便的對html中的各類元素進(jìn)行相關(guān)的操作。
1.基本選擇器
語法及代碼示例：
//$('#id名')根據(jù)id名來匹配元素
$('#box1').css('background-color','pink')
//$('.class名')根據(jù)class名來匹配元素
$('.box2').css('background-color','yellow')
//$('element')根據(jù)給定的標(biāo)簽來匹配元素
$('span').css('color','green')
//$('*')匹配所有元素
$('*').css('font-family','宋體')
//$('#id名,.class名,element')匹配到頁面多個(gè)選擇器
$('#box1,.box2,span').css('color','pink')完整HTML代碼:
<!DOCTYPE html>
<html>
<head>
<title>jQuery選擇器</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;background-color: #ccc;margin-top: 20px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('#box1').css('background-color','pink')
$('.box2').css('background-color','yellow')
$('span').css('color','green')
$('*').css('font-family','黑體')
$('#box1,.box2,span').css('color','blue')
})
</script>
<div id="box1">大家好</div>
<div class="box2">我是渣渣輝</div>
<span>php中文網(wǎng)</span>
</body>
</html>2.層級選擇器
語法及代碼示例：
//給定父級元素下匹配所有的子元素:$('父級元素>子級元素')
$('ul>li').css('list-style','none')
//給定的祖先元素下匹配所有的后代元素:$(祖先元素 后代元素)
$('ul li').css('list-style','none')
//匹配緊跟在prev元素后面的next元素:$('prev+next')(同級的元素)
$('input + button').css('background-color','#8CC2FD')
//匹配prev元素后面所有的siblings元素:$('prev~siblings')
$('label ~ input').css('background-color','#A3F2C1')完整HTML代碼:
<!DOCTYPE html>
<html>
<head>
<title>層級選擇器</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('ul li').css('list-style','none')
$('input + button').css('background-color','#8CC2FD')
$('label ~ input').css('background-color','#A3F2C1')
})
</script>
<ul>
<li>17歲那年不要臉參加了挑戰(zhàn)</li>
<li>明星也有訓(xùn)練班</li>
<li>短短一年太新鮮</li>
<div>
<li>記得四哥發(fā)哥都已見過面</li>
</div>
<li>后來榮升主角太突然</li>
<li>廿十九歲頒獎(jiǎng)的晚宴</li>
<li>fans太瘋癲</li>
<li>來聽我唱一段情歌一曲</li>
</ul>
<form>
<label>姓名</label>
<input type="" name="" value="千">
<button style="margin-top:10px;">按鈕</button>
<input type="" name="">
<input type="" name="">
<input type="" name="">
</form>
</body>
</html>3.順序選擇器
語法及代碼示例：
//1.順序:
//第一個(gè)元素:$(':first')
$('p:first').css('color','red')
//最后一個(gè)元素:$(':last')
$('p:last').css('color','blue')
//2.比較
//表示大于值x的元素:$('p:gt(x)') (x的順序從0開始)
$('p:gt(2)').css('font-size','20px')
//表示小于值x的元素:$('p:lt(x)')
$('p:lt(1)').css('font-weight','bold')
//表示等于值x的元素:$('p:eq(x)')
$('p:eq(2)').css('color','orange')
//3.奇偶數(shù)
//奇數(shù)順序:$('p:odd')
$('p:odd').css('background',"#ccc")
//偶數(shù)順序:$('p:even')
$('p:even').css('background',"#F9EFCC")
//4.非
//匹配不是selector的所有元素:$(':not(selector)')
$('p:not(#box)').css('background','pink')完整HTML代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>順序選擇器</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('p:first').css('color','red')
$('p:last').css('color','blue')
$('p:gt(2)').css('font-size','20px')
$('p:lt(1)').css('font-weight','bold')
$('p:eq(2)').css('color','orange')
$('p:odd').css('background',"#ccc")
$('p:even').css('background',"#F9EFCC")
$('p:not(#box)').css('background','pink')
})
</script>
<p id="box">advisory</p>
<p>explicit</p>
<p>content</p>
<p>America</p>
<p>captain</p>
<p>iron man</p>
</body>
</html>4.內(nèi)容選擇器
語法及代碼示例：
//匹配含給定文本(text)的元素:$(':contains(text)')
$('div:contains(鄧二)').css('background','orange')
//匹配包含特定選擇器的元素:$(':has(selector)')
$('div:has(span)').css('background','blue')
//匹配不含有內(nèi)容的元素:$(':empty')(即不含子元素或者文本的空元素)
$('div:empty').css('background','pink')
//匹配含有子元素或者文本的元素:$(':parent')
$('div:parent').css('background','red')完整HTML代碼:
<!DOCTYPE html>
<html>
<head>
<title>內(nèi)容選擇器</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;background: #ccc;margin-top:5px }
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('div:contains(鄧二)').css('background','orange')
$('div:has(span)').css('background','blue')
$('div:empty').css('background','pink')
$('div:parent').css('background','red')
})
</script>
<div>王一</div>
<div>鄧二</div>
<div></div>
<div>陶三</div>
<div>雷四</div>
<div><span>宋五</span></div>
<div><b></b></div>
</body>
</html>5.屬性選擇器
語法及代碼示例：
//匹配包含給定屬性的元素:$('[屬性名]')
$('input[type]').css('background','pink')
//匹配給定屬性是某個(gè)特定值的元素:$('[attribute = value]')
$('input[type = button]').css('background','greenyellow')
//匹配所有不含有特定值的屬性,或者說是不等于特定值的屬性:
//$('[attribute!=value]')
$('input[type != text]').css('color','red')
//匹配給定屬性是以某些值開始的元素:$('[attribute^= value]')
$('input[type ^= t]').css('background','green')
//匹配給定屬性是以某些值結(jié)尾的元素:$('[attribute $= value]')
$('input[type $= d]').css('background','blue')
//匹配給定屬性包含某些值的元素:$('[attribute *= value]')
$('input[type *= o]').css('background','yellow')
//符合選擇器,需要同時(shí)滿足多個(gè)條件時(shí)使用:
//$('attrSel[1] attrSel[1] attrSel[1]')其中用的最多的是復(fù)合選擇器,需熟練掌握
完整HTML代碼:
<!DOCTYPE html>
<html>
<head>
<title>屬性選擇器</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
// $('input[type]').css('background','pink')
// $('input[type = button]').css('background','greenyellow')
// $('input[type != text]').css('color','red')
// $('input[type ^= t]').css('background','green')
// $('input[type $= d]').css('background','blue')
// $('input[type *= o]').css('background','yellow')
$('input[id][name *= n]').css('background','red')
})
</script>
<form>
<label>1 </label><input type="text" name="new" value="aaa" id="woman"><br>
<label>2 </label><input type="password" name="new1" value="bbb" id="man"><br>
<label>3 </label><input type="button" name="" value="ccc" id="boy"><br>
<label>4 </label><input name="" value="zzz" id="girl"><br>
</form>
</body>
</html>6.表單選擇器
語法及代碼示例：
//所有激活的input元素(可以使用input元素):$(':enabled')
$(':enabled').css('background','pink')
//所有禁用的input元素(不可以使用input元素):$(':disabled')
$(':disabled').css('background','red')
//所有被選取的元素,針對于select元素:$(':selected')
$(':selected').css('color','red')
//所有被選中的input元素:$(':checked')
$(':checked').parent().css('color','blue')完整HTML代碼:
<!DOCTYPE html>
<html>
<head>
<title>表單選擇器</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
// $(':enabled').css('background','pink')
// $(':disabled').css('background','red')
// $(':selected').css('color','red')
$(':checked').parent().css('color','blue')
})
</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 selected>雙子座</option>
<option>雙魚座</option>
<option>射手座</option>
</select> -->
<br>
愛好 :
<label><input type="checkbox" name="">看書</label>
<label><input type="checkbox" name="" checked>打球</label>
<label><input type="checkbox" name="">游戲</label>
</form>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2018-12-26 16:20:14
老師總結(jié)：對于這些選擇器, 想過如何用原生來實(shí)現(xiàn)過嗎? 對于一些特殊選擇器,nth-of-type等,這些用jQuery怎么做?