Jquery（二）——Jquery选择器

最新推荐文章于 2020-10-05 11:49:43 发布

程序员的时光

最新推荐文章于 2020-10-05 11:49:43 发布

阅读量301

点赞数

分类专栏： ● 富客户端技术 ------【jQuery】文章标签： Jquery选择器

本文链接：https://blog.csdn.net/qq_37084904/article/details/99192767

版权

● 富客户端技术同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

------【jQuery】

6 篇文章 0 订阅

订阅专栏

目录

1. Jquery选择器介绍；

2. 基本选择器；

2.1 id选择器；

2.2 类别选择器；

2.3 便标签元素选择器；

3. 属性选择器；

3.1 元素包含某个属性；

3.2 属性等于某个值；

3.3 以某个属性结尾的；

4. 其他选择器；

4.1 连接选择器；

4.2 首尾选择器；

1. Jquery选择器介绍；

我们能通过Jquery选择器能从网页文档中找到我们需要的DOM节点；

2. 基本选择器；

分为id选择器、类别选择器和标签元素选择器；

新建一个页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<style type="text/css">
	.c1{
		font-size: 40px;
	}
	
</style>
</head>
<body>
<p class="c1">Jquery选择器</p>
<ul>
	<li id="i1"><a id="a1" class="c1" href="https://www.bilibili.com" >哔哩哔哩干杯</a></li>
	<li><a id="a2" class="c1" href="http://www.csdn.net">CSDN</a></li>
	<li><a href="https://gitee.com">码云</a></li>
	<li><a href="http://www.cnblogs.com">博客园</a></li>
	<li><a class="c1" href="#">百度</a></li>
	<li><a href="http://www.google.com">谷歌</a></li>
</ul>
</body>
</html>

运行结果：

2.1 id选择器；

<script type="text/javascript">
	/* 当文档加载完毕才会执行里面的方法 */
	$(document).ready(function(){
		//基本选择器
		$("#a1").css("background-color","blue"); //根据id选择
		//$(".c1").css("background-color","blue"); //根据类别选择
		//$("a").css("background-color","blue"); //根据标签元素选择
	});
</script>

运行结果：

2.2 类别选择器；

<script type="text/javascript">
	/* 当文档加载完毕才会执行里面的方法 */
	$(document).ready(function(){
		//基本选择器
		//$("#a1").css("background-color","blue"); //根据id选择
		$(".c1").css("background-color","blue"); //根据类别选择
		//$("a").css("background-color","blue"); //根据标签元素选择
	});
</script>

运行结果：

2.3 便标签元素选择器；

<script type="text/javascript">
	/* 当文档加载完毕才会执行里面的方法 */
	$(document).ready(function(){
		//基本选择器
		//$("#a1").css("background-color","blue"); //根据id选择
		//$(".c1").css("background-color","blue"); //根据类别选择
		$("a").css("background-color","blue"); //根据标签元素选择
	});
</script>

运行结果：

3. 属性选择器；

这里可以理解为元素包含某个属性、或者属性等于某个值、或者以某个属性结尾的都可以进行选择；

原始页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<style type="text/css">
	.c1{
		font-size: 40px;
	}
	
</style>
</head>
<body>
<p class="c1">Jquery选择器</p>
<ul>
	<li id="i1"><a id="a1" class="c1" href="https://www.bilibili.com" >哔哩哔哩干杯</a></li>
	<li><a id="a2" class="c1" href="http://www.csdn.net">CSDN</a></li>
	<li><a href="https://gitee.com">码云</a></li>
	<li><a href="http://www.cnblogs.com">博客园</a></li>
	<li><a class="c1" href="#">百度</a></li>
	<li><a href="http://www.google.com">谷歌</a></li>
</ul>
</body>
</html>

运行结果：

3.1 元素包含某个属性；

<script type="text/javascript">
	/* 当文档加载完毕才会执行里面的方法 */
	$(document).ready(function(){
		//属性选择器
		$("[href]").css("background-color","green"); //含有href属性的标签
	});
</script>

运行结果：

3.2 属性等于某个值；

<script type="text/javascript">
	/* 当文档加载完毕才会执行里面的方法 */
	$(document).ready(function(){
		//属性选择器
		//$("[href]").css("background-color","green"); //含有href属性的标签
		$("[href='#']").css("background-color","green"); //href属性等于#的标签
	});
</script>

运行结果：

3.3 以某个属性结尾的；

<script type="text/javascript">
	/* 当文档加载完毕才会执行里面的方法 */
	$(document).ready(function(){
		//属性选择器
		//$("[href]").css("background-color","green"); //含有href属性的标签
		//$("[href='#']").css("background-color","green"); //href属性等于#的标签
		$("[href$='com']").css("background-color","green"); //以.com结尾的属性标签
	});
</script>

运行结果：

4. 其他选择器；

4.1 连接选择器；

<script type="text/javascript">
	/* 当文档加载完毕才会执行里面的方法 */
	$(document).ready(function(){
		//其他选择器
		$("p.c1").css("background-color","blue"); //根据类别选择，在p标签里面选择类别为c1的
	});
</script>

4.2 首尾选择器；

<script type="text/javascript">
	/* 当文档加载完毕才会执行里面的方法 */
	$(document).ready(function(){
		//其他选择器
		//$("p.c1").css("background-color","blue"); //根据类别选择，在p标签里面选择类别为c1的
		$("ul li:first").css("background-color","blue");//对ul列表下的第一个li标签的内容进行选择
	});
</script>

<script type="text/javascript">
	/* 当文档加载完毕才会执行里面的方法 */
	$(document).ready(function(){
		//其他选择器
		//$("p.c1").css("background-color","blue"); //根据类别选择，在p标签里面选择类别为c1的
		//$("ul li:first").css("background-color","blue");//对ul列表下的第一个li标签的内容进行选择
		$("ul li:last").css("background-color","blue");//对ul列表下的最后一个li标签的内容进行选择
	});
</script>

程序员的时光

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery（二）——Jquery选择器

目录1. Jquery选择器介绍；2. 基本选择器；2.1 id选择器；2.2 类别选择器；2.3 便标签元素选择器；3. 属性选择器；3.1 元素包含某个属性；3.2 属性等于某个值；3.3 以某个属性结尾的；4. 其他选择器；4.1 连接选择器；4.2 首尾选择器；1. Jquery选择器介绍；我们能通过Jq...
复制链接

扫一扫