摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery選擇器-練習(xí)作業(yè)</title><script type="text/javascript" src="jquery-3.3.1.min.js&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery選擇器-練習(xí)作業(yè)</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
#box1-1,.box1-2{width: 100px;height: 50px;background-color: pink;margin:5px;}
</style>
</head>
<body>
<script type="text/javascript">
// 文檔就緒函數(shù)，當(dāng)頁(yè)面完全加載完成后才啟用js代碼
// $(selector).action() 解析：申明變量關(guān)鍵字(選擇器).操作方法()
$(document).ready(function(){
//1.基本選擇器
// $("#id") 匹配id值
// $(".class") 匹配class值
// $("element") 匹配標(biāo)簽名
// $("*") 匹配所有元素
// $("#id,.class,element") 匹配多個(gè)選擇器
$('#box1-1').css('background','red')
$('.box1-2').css('background','blue')
$('span').css('background','red')
$('*').css('font-family','宋體')
$('#box1,.box2,span').css('color','pink')
//2.層級(jí)選擇器
$('ul>li').css('color','pink')//匹配ul下的一級(jí)所有l(wèi)i，祖先元素>子級(jí)元素
$('ul li').css('color','red')//匹配ul下的所有級(jí)的li，祖先元素 后代元素
$('label+input').css('height','50px')//匹配緊跟著前一個(gè)元素的后一個(gè)元素
$('label~input').css('background','pink')//匹配前一個(gè)標(biāo)簽后的所有符合條件的標(biāo)簽
//3.順序選擇器
$('p:first').css('color','pink')//選擇第一個(gè)p標(biāo)簽
$('p:last').css('color','pink')//選擇最后一個(gè)p標(biāo)簽
//2.比較選擇器,gt大于，lt小于，eq等于，從0開(kāi)始
$('p:gt(1)').css('color','red')//從第1+1=2個(gè)元素開(kāi)始改變css樣式
//3.奇偶數(shù)選擇器 odd奇數(shù)，even偶數(shù) 從0開(kāi)始
$('p:odd').css('font-size','24px')
$('p:even').css('font-size','14px')
//4.非，匹配不是selector的所有元素
$('p:not(#box)').css('color','blue')
//4.內(nèi)容選擇器
$('div:contains(jack)').css('background','red') //匹配包含特定文本的
$('div:has(span)').css('background','blue') //匹配包含特定選擇器元素的元素
$('div:empty').css('background','grey') //匹配不含有內(nèi)容的元素
$('div:parent').css('background','green') //匹配含有元素或文本的元素
//5.屬性選擇器
$('input[type]').css('background','pink')//匹配包含給定屬性的元素
$('input[type=password]').css('background','red')//匹配屬性是特定值
$('input[type!=password]').css('background','blue')//匹配屬性不是特定值
$('input[type ^=te ]').css('background','green')//匹配屬性以特定字符開(kāi)始的
$('input[type $=xt]').css('background','grey')//匹配屬性以特定字符結(jié)尾的
$('input[type *=xt]').css('background','yellow')//匹配屬性包含特定字符
$('input[id][name *=n]').css('background','black')//符合選擇器
//6.表單選擇器
// $(':enabled').css('background','pink')//所有激活的input元素
// $(':disabled').css('background','red')//所有禁用的input元素
// $(':selected').css('background','pink')//所有被選取的元素，針對(duì)select元素
$(':checked').parent().css('color','blue')//所有被選中的input元素，加入parent()表示找到上一層元素加入css效果
})
$(document).ready()
</script>
<h1>1.jQuery基本選擇器</h1>
<div id="box1-1">1.這是box1-1</div>
<div>1.這是box1-2</div>
<span>1.大家好，這是一個(gè)span</span>
<hr>
<h1>2.jQuery層級(jí)選擇器</h1>
<ul>
<li>1</li>
<li>1</li>
<div>
<li>2</li>
</div>
<li>1</li>
</ul>
<form action="">
<label for="">Name</label>
<input type="text">
<button>Button</button>
<input type="" name="">
</form>
<hr>
<h1>3.jQuery順序選擇器</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p id="box">6</p>
<hr>
<h1>4.jQuery內(nèi)容選擇器</h1>
<div>jack</div>
<div><span>wang</span></div>
<div>zheng</div>
<div>hu</div>
<div></div>
<div><b></b></div>
<hr>
<h1>5.jQuery屬性選擇器</h1>
<input type="text" value="1" id='1' name='n'>
<input value="2">
<input type="text" value="3">
<input type="password" value="ppppp">
<hr>
<h1>6.jQuery表單選擇器</h1>
<form>
<input type="text" value="111">
<input type="text" value="111">
<input type="text" disabled="disabled" value="111">
<input type="text" value="111">
<select>
<option value="1">1</option>
<option selected>22222</option>
</select>
<hr>
<label><input type="checkbox" checked>看</label>
<label><input type="checkbox">聽(tīng)</label>
<label><input type="checkbox">說(shuō)</label>
</form>
<hr>
<h1>以上任意選擇器的效果展示需要注釋掉其它選擇器的jQuery代碼即可</h1>
</body>
</html>
批改老師：韋小寶批改時(shí)間：2019-02-23 13:49:54
老師總結(jié)：選擇器的重要性相信我不講你也很清楚 選擇器也是很基礎(chǔ)很重要的一個(gè)知識(shí)點(diǎn)