选择器的总结_php.cn手记

abstract：jquery的选择器有基本选择器，顺序选择器，内容选择器，层级选择器，属性选择器，表单选择器等基本选择器通过元素标签名，元素Id，Class来查找DOM元素，例如$('li').css('list-style','none') $('#box').css('list-style','none') $(&

jquery的选择器有基本选择器，顺序选择器，内容选择器，层级选择器，属性选择器，表单选择器等

基本选择器通过元素标签名，元素Id，Class来查找DOM元素，例如

$('li').css('list-style','none')
$('#box').css('list-style','none')
$('.box').css('list-style','none')

顺序选择器有：

$('div:first').css('background','red') 第一个
$('div:last').css('background','red') 最后一个
$('div:gt(1)').css('background','red') 大于1
$('div:lt(1)').css('background','red') 小与1
$('div:eq(1)').css('background','red') 等于1
$('div:odd').css('background','red')  偶数
$('div:even').css('background','red')奇数
$('div:not（1）').css('background','red') 不等于1
等级

层级选择器

<script type="text/javascript">
	$(document).ready(function(){
		$('ul>li').css('list-style','none')//只能匹配一级的子元素 父子关系
		$('ul li').css('list-style','none')//可以匹配所有元素只要是后代就行
		$('label+input').css('height','50px')//只能匹配紧跟在label底下的input元素，中间不能有元素
		$('label~input').css('background','red')
		//匹配label后面的input元素
	})

内容选择器

<script type="text/javascript">
	$(document).ready(function(){
	$('div:contains(jion)').css('background','red')// 匹配含特定内容的元素
	$('div:has(span)').css('color','red')//包含特定选择器的元素$('span'）
	$('div:empty').css('background','pink')
	// 配不含内容的元素
	$('div:parent').css('background','blue')
	// 匹配含内容的元素
	})

属性选择器

<script type="text/javascript">
	$(document).ready(function(){
	$('input[type]').css('background','pink')
	// 匹配含有特定属性的元素
	 $('input[type=button]').css('background','blue')
	//匹配属性值为特定些值的元素
	 $('input[type!=button]').css('background','red')//匹配属性不含指定值或不是某些值的元素
	$('input[type^=t]').css('background','red')//匹配以某些值开始的元素
	 $('input[type$=n]').css('background','red')//匹配以某些值结尾的元素o
	 $('input[type*=n]').css('background','red')//匹配属性值以包含某些值的元素
	$('input[id] [name*=n]').css('background','red')
	//符合选择器 需要同时满足多个元素匹配属性值以包含某些值的元素
	})
 </script>

表单选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script type="text/javascript" src="jquery-3.3.1.min.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','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 >射手</option>
<option selected>天蝎</option>
<option >狮子</option>
</select> -->
爱好：
<label><input type="checkbox" >看书</label>
<label><input type="checkbox" checked>游戏</label>
<label><input type="checkbox" >游泳</label>
</form>
</body>
</html>

选择器的总结

Popular Entries