Community
Learn
Tools Library
AI Tools
Leisure
search
English

jQuery选择器篇实验内容

Original 2018-12-26 16:10:50 227
abstract：    jQuery共含有6类选择器，分别是基本选择器、层级选择器、顺序选择器、内容选择器、属性选择器和表单选择器这六类。由这些选择器，可以更方便的对html中的各类元素进行相关的操作。1.基本选择器语法及代码示例：//$('#id名')根据id名来匹配元素 $('#box1').css('background-col

    jQuery共含有6类选择器，分别是基本选择器、层级选择器、顺序选择器、内容选择器、属性选择器和表单选择器这六类。由这些选择器，可以更方便的对html中的各类元素进行相关的操作。

1.基本选择器

语法及代码示例：

//$('#id名')根据id名来匹配元素
$('#box1').css('background-color','pink')
//$('.class名')根据class名来匹配元素
$('.box2').css('background-color','yellow')
//$('element')根据给定的标签来匹配元素
$('span').css('color','green')
//$('*')匹配所有元素
$('*').css('font-family','宋体')
//$('#id名,.class名,element')匹配到页面多个选择器
$('#box1,.box2,span').css('color','pink')

完整HTML代码:

<!DOCTYPE html>
<html>
<head>
	<title>jQuery选择器</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
	div{width: 100px;height: 100px;background-color: #ccc;margin-top: 20px;}
	</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
	$('#box1').css('background-color','pink')
	$('.box2').css('background-color','yellow')
	$('span').css('color','green')
	$('*').css('font-family','黑体')
	$('#box1,.box2,span').css('color','blue')
})
</script>
<div id="box1">大家好</div>
<div class="box2">我是渣渣辉</div>
<span>php中文网</span>
</body>
</html>

2.层级选择器

语法及代码示例：

//给定父级元素下匹配所有的子元素:$('父级元素>子级元素')
$('ul>li').css('list-style','none')
//给定的祖先元素下匹配所有的后代元素:$(祖先元素 后代元素)
$('ul li').css('list-style','none')
//匹配紧跟在prev元素后面的next元素:$('prev+next')(同级的元素)
$('input + button').css('background-color','#8CC2FD')
//匹配prev元素后面所有的siblings元素:$('prev~siblings')
$('label ~ input').css('background-color','#A3F2C1')

完整HTML代码:

<!DOCTYPE html>
<html>
<head>
	<title>层级选择器</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
	</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
	$('ul  li').css('list-style','none')
	$('input + button').css('background-color','#8CC2FD')
	$('label ~ input').css('background-color','#A3F2C1')
})
</script>
	<ul>
		<li>17岁那年不要脸参加了挑战</li>
		<li>明星也有训练班</li>
		<li>短短一年太新鲜</li>
		<div>
			<li>记得四哥发哥都已见过面</li>
		</div>
		<li>后来荣升主角太突然</li>
		<li>廿十九岁颁奖的晚宴</li>
		<li>fans太疯癫</li>
		<li>来听我唱一段情歌一曲</li>
	</ul>
	<form>
	<label>姓名</label>
	<input type="" name="" value="千">
	<button style="margin-top:10px;">按钮</button>
	<input type="" name="">
	<input type="" name="">
	<input type="" name="">
	</form>
</body>
</html>

3.顺序选择器

语法及代码示例：

//1.顺序:
//第一个元素:$(':first')
$('p:first').css('color','red')
//最后一个元素:$(':last')
$('p:last').css('color','blue')
//2.比较
//表示大于值x的元素:$('p:gt(x)') (x的顺序从0开始)
$('p:gt(2)').css('font-size','20px')
//表示小于值x的元素:$('p:lt(x)')
$('p:lt(1)').css('font-weight','bold')
//表示等于值x的元素:$('p:eq(x)')
$('p:eq(2)').css('color','orange')
//3.奇偶数
//奇数顺序:$('p:odd')
$('p:odd').css('background',"#ccc")
//偶数顺序:$('p:even')
$('p:even').css('background',"#F9EFCC")
//4.非
//匹配不是selector的所有元素:$(':not(selector)')
$('p:not(#box)').css('background','pink')

完整HTML代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title>顺序选择器</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
	<script type="text/javascript">
	$(document).ready(function () {
		$('p:first').css('color','red')
		$('p:last').css('color','blue')
		$('p:gt(2)').css('font-size','20px')
		$('p:lt(1)').css('font-weight','bold')
		$('p:eq(2)').css('color','orange')
		$('p:odd').css('background',"#ccc")
		$('p:even').css('background',"#F9EFCC")
		$('p:not(#box)').css('background','pink')
	})


	</script>
	<p id="box">advisory</p>
	<p>explicit</p>
	<p>content</p>
	<p>America</p>
	<p>captain</p>
	<p>iron man</p>
</body>
</html>

4.内容选择器

语法及代码示例：

//匹配含给定文本(text)的元素:$(':contains(text)')
$('div:contains(邓二)').css('background','orange')
//匹配包含特定选择器的元素:$(':has(selector)')
$('div:has(span)').css('background','blue')
//匹配不含有内容的元素:$(':empty')(即不含子元素或者文本的空元素)
$('div:empty').css('background','pink')
//匹配含有子元素或者文本的元素:$(':parent')
$('div:parent').css('background','red')

完整HTML代码:

<!DOCTYPE html>
<html>
<head>
	<title>内容选择器</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
		div{width: 100px;height: 100px;background: #ccc;margin-top:5px }
	</style>
</head>
<body>
	<script type="text/javascript">
	$(document).ready(function(){
		$('div:contains(邓二)').css('background','orange')
		$('div:has(span)').css('background','blue')
	    $('div:empty').css('background','pink')
		$('div:parent').css('background','red')
	})
	</script>
	<div>王一</div>
	<div>邓二</div>
	<div></div>
	<div>陶三</div>
	<div>雷四</div>
	<div><span>宋五</span></div>
	<div><b></b></div>
</body>
</html>

5.属性选择器

语法及代码示例：

//匹配包含给定属性的元素:$('[属性名]')
$('input[type]').css('background','pink')
//匹配给定属性是某个特定值的元素:$('[attribute = value]')
$('input[type = button]').css('background','greenyellow')
//匹配所有不含有特定值的属性,或者说是不等于特定值的属性:
//$('[attribute!=value]')
$('input[type != text]').css('color','red')
//匹配给定属性是以某些值开始的元素:$('[attribute^= value]')
$('input[type ^= t]').css('background','green')
//匹配给定属性是以某些值结尾的元素:$('[attribute $= value]')
$('input[type $= d]').css('background','blue')
//匹配给定属性包含某些值的元素:$('[attribute *= value]')
$('input[type *= o]').css('background','yellow')
//符合选择器,需要同时满足多个条件时使用:
//$('attrSel[1]  attrSel[1] attrSel[1]')

其中用的最多的是复合选择器,需熟练掌握

完整HTML代码:

<!DOCTYPE html>
<html>
<head>
	<title>属性选择器</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
	// $('input[type]').css('background','pink')
	// $('input[type = button]').css('background','greenyellow')
	// $('input[type != text]').css('color','red')
	// $('input[type ^= t]').css('background','green')
	// $('input[type $= d]').css('background','blue')
	// $('input[type *= o]').css('background','yellow')
	$('input[id][name *= n]').css('background','red')
})
</script>
<form>
  <label>1&nbsp;</label><input type="text" name="new" value="aaa" id="woman"><br>
  <label>2&nbsp;</label><input type="password" name="new1" value="bbb" id="man"><br>
  <label>3&nbsp;</label><input type="button" name="" value="ccc" id="boy"><br>
  <label>4&nbsp;</label><input name="" value="zzz" id="girl"><br>
</form>
</body>
</html>

6.表单选择器

语法及代码示例：

//所有激活的input元素(可以使用input元素):$(':enabled')
 $(':enabled').css('background','pink')
 //所有禁用的input元素(不可以使用input元素):$(':disabled')
 $(':disabled').css('background','red')
 //所有被选取的元素,针对于select元素:$(':selected')
 $(':selected').css('color','red')
 //所有被选中的input元素:$(':checked')
 $(':checked').parent().css('color','blue')

完整HTML代码:

<!DOCTYPE html>
<html>
<head>
	<title>表单选择器</title>
	<script type="text/javascript" src="jquery-3.3.1.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','blue')
	})
	</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>


Correcting teacher：天蓬老师Correction time：2018-12-26 16:20:14
Teacher's summary：对于这些选择器, 想过如何用原生来实现过吗? 对于一些特殊选择器,nth-of-type等,这些用jQuery怎么做?

Release Notes

Popular Entries