摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery選擇器</title> <script type="text/javascript"src="jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery選擇器</title>
<script type="text/javascript"src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 100px;height: 100px; background: #ccc;margin-top: 20px;}
</style>
</head>
<body>
<div id="box">大家好</div>
<div class="box"> 我是我</div>
<span>php中文網(wǎng)</span>
<ul>
<li>1</li>
<li>1</li>
<div>
<li>2
<div>
<li>3</li>
</div>
</li>
</div>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<form>
<label>姓名</label>
<input type="" name="">
<button>按鈕</button>
<input type="" name="">
<input type="" name="">
</form>
<p id="box">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<div >jack</div>
<div>jun</div>
<div>jack cheng</div>
<div>jion</div>
<div><span>PHP中文網(wǎng)</span></div>
<div></div>
<div><b></b></div>
<form>
<label>1</label> <input type="text" name="new" id="woman"><br>
<label>2</label> <input type="password" name="new1" id="man"><br>
<label>3</label> <input name="new"id="new"><br>
<label>4</label> <input type="button" value="按鈕" =""><br>
</form>
<script type="text/javascript">
基本選擇器
語法
$('#id名')根據(jù)給定的id來匹配到元素
$('.class名')根據(jù)給定的class來匹配到元素
$('element')根據(jù)給定的標(biāo)簽名來匹配到元素
$('*')匹配所有元素
$('#id,.class名,element')匹配到頁面中多個選擇器
$(document).ready(function(){
$('#box').css('background','red')
$('.box').css('background','blue')
$('span').css('font-size','30px')
$('*').css('font-family','宋體')
$('#box,.box,span').css('color','pink')
})
層級選擇器（相當(dāng)于父類和子類的元素關(guān)系）
給定的父級元素下匹配所有的子元素：$('父級元素 > 子級元素')
給定的祖先元素下匹配所有的后代元素：$('祖先元素 后代元素')
匹配緊跟在prev元素后面的next元素：$('prev + next')(同級的元素)
匹配prev元素后面所有的siblings元素：$('prev ~ siblings')
$(document).ready(function(){
// $('ul>li').css('list-style','none')
$('ul li').css('list-style','none')
$('input+button').css('height','50px')
$('label~input').css('background','pink')
})
順序選擇器
1、順序
$(':first') 第一個元素
$(':last') 最后一個元素
2、比較(x的順序是從0開始)
$(':gt(x)')表示大于值x的元素
$(':lt(x)')表示小于值x的元素
$(':eq(x)')表示等于值x的元素
3、奇偶數(shù)
$(':odd')奇數(shù)順序
$(':even')偶數(shù)順序
4、非
$(':not(selector)')匹配不是selector的所有元素
$(document).ready(function(){
$('p:first').css('color','red')
$('p:last').css('color','blue')
$('p:gt(1)').css('font-size','30px')
$('p:lt(2)').css('color','red')
$('p:eq(1)').css('color','red')
$('p:odd').css('background','#ccc')
$('p:even').css('background','pink')
$('p:not(#box)').css('background','red')
})
內(nèi)容選擇器
語法：
$(':contains(text)') 匹配包含給定文本（text）的元素
$(':has(selector)')匹配包含特定選擇器元素的元素
$(':empty')匹配不含有內(nèi)容的元素（即 不包含子元素或者文本的空元素）
$(':parent')匹配含有子元素或者文本的元素
$(document).ready(function(){
$('div:contains(jun)').css('background','blue')
$('div:has(span)').css('color','red')
$('div:empty').css('background','red')
$('div:parent').css('background','red')
})
屬性選擇器
語法：
$('[屬性名]')匹配包含給定屬性的元素
$('[attribute=value]')匹配給定屬性是某個特定值的元素
$('[attribute！=value]')匹配所有不含有指定值的屬性，或者說是屬性不等于特定值的元素
$('[attribute ^= value]')匹配給定屬性是以某些值開始的元素
$('[attribute $= value]')匹配給定屬性是以某些值結(jié)尾的元素
$('[attribute *= value]')匹配給定屬性包含某些值的元素
$('attrSel[1] attrSel[1] attrSel[1]')復(fù)合選擇器，需要同時滿足多個條件時使用
$(document).ready(function(){
$('input[type]').css('background','pink')
$('input[type=button]').css('background','blue')
$('input[type!=text]').css('background','red')
$('input[type ^=t ]').css('background','red')
$('input[type $=n ]').css('background','red')
$('input[type *=o ]').css('background','blue')
$('input[id][name*=n]').css('background','red')
})
表單選擇器
語法：
$(':enabled')所有激活的input元素（可以使用的input元素）
$(':disabled')所有禁用的input元素（不可以使用的input元素）
$(':selected')所有被選取的元素，針對于select元素
$(':checked')所有被選中的input元素
$(document).ready(function(){
$(':enabled').css('background','pink')
$(':disabled').css('background','red')
$(':selected').css('color','blue')
$(':checked').parent().css('color','red')
})
</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>
批改老師：天蓬老師批改時間：2019-01-27 08:54:09
老師總結(jié)：選擇器, 總結(jié)的 不錯, 特別 是表單選擇器是一個難點, 得通過大量的練習(xí)才可以掌握