jquery选择器总结和小案例

abstract：第一节基本选择器$('div') 匹配所有div元素$('#content') 匹配id属性值为content的元素$('.className') 匹配class属性值为className的元素$('*') 匹配body体内所有元素包括body元素第二节层级选择器$(&#

第一节基本选择器

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

$('#content') 匹配id属性值为content的元素

$('.className') 匹配class属性值为className的元素

$('*') 匹配body体内所有元素包括body元素

第二节层级选择器

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

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

$('div + p') 匹配紧挨着div元素的p兄弟元素

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

第三节顺序选择器

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

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

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

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

$('li:odd') 匹配索引值为奇数的li元素

$('li:even') 匹配索引值为偶数的li元素

第四节内容选择器

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

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

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

$('div:empty') 匹配没有包含内容的div元素

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

第五节属性选择器

$('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结尾的input元素

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

多重属性选择器

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

第六节表单选择器

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

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

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

$(':checked') 匹配所有被选中的复选框元素，也包括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');//设置索引值为偶数li元素的字体大小为30像素
			$('input[name$=1][id]').css('background-color','purple')//选取name属性值以1结尾同时带有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里面的比较重要的知识模块，要掌握牢靠……

jquery选择器总结和小案例

Popular Entries