博客列表 >6个常用的选择器——2018年4月4日18时24分

6个常用的选择器——2018年4月4日18时24分

白猫警长的博客
白猫警长的博客原创
2018年04月04日 18:23:53388浏览

选择器远不止这6个,当然常用的也不止这6个,学好选择器将会给后期开发提高许多便利。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>6种常用的选择器</title>
	<style>
		.pos{
			width: 400px;
			height: 100%;
			padding: 10px;
			margin:auto;
			border: 1px solid;
		}
	</style>
</head>
<body>
	<div class="pos">
		<h1></h1>
		<p>有一个人叫真咯嗦,娶了个老婆叫要你管,生了个儿子叫麻烦。</p>
		<p>有一天麻烦不见了!夫妻俩就去报案。</p>
		<p>警察问爸爸:请问这位男士你叫啥名字?</p>
		<p>爸爸说:真咯嗦。警察很生气,然后 他又问妈妈叫啥名字。</p>
		<p>妈妈说:要你管。警察非常生气的说:你们要干什么?</p>
		<p>夫妻俩说:找麻烦。</p>
	</div>
</body>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	//获取列表中第3个元素,并发生变化
	$('p:eq(2)').css({'background-color':'red','color':'#fff','padding':'5px'})
	// 获取列表中第1个P元素
	$('p:first').css({'background-color':'lightblue','padding':'5px'})
	
	$('p').get(5).style.background = 'red'

	// 在无内容的标签中插入文本内容,并设置文本剧中显示 
	$(':empty').text('《奇葩名字》').css('text-align','center')

	// 获取p元素最后一个,设置字体为加粗
	$('p:last').css('font-weight','bold')

	// 获取p元素中的第4行到最后一行,字体颜色改为蓝色
	$('p:nth-child(4)~*').css('color','blue')
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行后效果图:

1.png


以上每一条都写上了注释,每个选择器都可以设置样式。与CSS样式很相似,但还是有那点区别的,毕竟jQuery有他们自己的一套语法。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议