abstract：第一節(jié) 基本選擇器$('div') 匹配所有div元素$('#content') 匹配id屬性值為content的元素$('.className') 匹配class屬性值為className的元素$('*') 匹配body體內(nèi)所有元素包括body元素第二節(jié) 層級選擇器$(&#

第一節(jié) 基本選擇器

$('div') 匹配所有div元素

$('#content') 匹配id屬性值為content的元素

$('.className') 匹配class屬性值為className的元素

$('*') 匹配body體內(nèi)所有元素包括body元素

第二節(jié) 層級選擇器

$('div>span') 匹配作為div下的子元素的所有span元素

$('div span') 匹配div下的所有span元素

$('div + p') 匹配緊挨著div元素的p兄弟元素

$('div ~ p') 匹配div后面的所有兄弟元素p

第三節(jié) 順序選擇器

$('li:first') 匹配第一個li元素

$('li:last') 匹配最后一個li元素

$('li:gt(1)') 匹配索引值大于1的li元素

$('li:lt(1)') 匹配索引值小于1的li元素

$('li:odd') 匹配索引值為奇數(shù)的li元素

$('li:even') 匹配索引值為偶數(shù)的li元素

第四節(jié) 內(nèi)容選擇器

$('div:contains(text)') 匹配包含文本的div元素

$('div:has(span)') 匹配包含span元素的div元素

$('div:not(span)') 匹配不包含span元素的div元素

$('div:empty') 匹配沒有包含內(nèi)容的div元素

$('div:parent') 匹配包含子元素或者文本的div元素

第五節(jié) 屬性選擇器

$('input[type]') 匹配有type屬性的input元素

$('input[type=text]') 匹配type屬性值等于text的input元素

$('input[name!=username]') 匹配name屬性值不等于usernamet的input元素

$('input[name^=user]') 匹配name屬性值是以user開頭的input元素

$('input[name$=user]') 匹配name屬性值是以user結(jié)尾的input元素

$('input[name~=s]') 匹配name屬性值是含有文本s的input元素

多重屬性選擇器

$('input[name][value][value!=""]') 匹配既有name屬性又有value屬性且value屬性不等于空的input元素

第六節(jié) 表單選擇器

$(':enabled') 匹配所有可用的表單元素

$(':disabled') 匹配所有被禁用的表單元素

$(':selected') 匹配select下拉框被選中的元素

$(':checked') 匹配所有被選中的復(fù)選框元素，也包括select下拉框被選擇的option

案例

<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
	<input type="text" name="new1" id="a" value="1"><br>
	<input type="text" name="new2" id="b" value="2"><br>
	<input type="text" name="new3" id="c" value="3"><br>
	<input type="text" name="new4" value=""><br>

	<select>
		<option value="">天枰座</option>
		<option value="" selected="">天蝎座</option>
		<option value="">雙子座</option>
	</select>
	<br>
	<label><input type="checkbox">讀書</label><br>
	<label><input type="checkbox" name="" checked>游戲</label><br>
	<label><input type="checkbox" name="">dota</label><br>

<script type="text/javascript">
		$(document).ready(function(){
			$('li:first').css('background-color','orange')//選取第一個li元素
			$('li:last').css('background-color','orange')//選取最后一個li元素
			$('li:even').css('font-size','30px');//設(shè)置索引值為偶數(shù)li元素的字體大小為30像素
			$('input[name$=1][id]').css('background-color','purple')//選取name屬性值以1結(jié)尾同時帶有id屬性的input元素
			//$('input:checked').parent().css('color','red')
			$('input[value=""]').css('background-color','orange')//選取value屬性為空的input元素
			$(":checked").parent().css('color','blue')//選取所有表單元素中被選中元素
		});
	</script>

Correcting teacher：滅絕師太Correction time：2018-11-13 12:17:20
Teacher's summary：選擇器是jquery里面的比較重要的知識模塊，要掌握牢靠……