jQuery基础选择器

最新推荐文章于 2024-03-18 04:00:16 发布

{[("青椒盖饭")]}

最新推荐文章于 2024-03-18 04:00:16 发布

阅读量337

点赞数

分类专栏： javaweb学习笔记

本文链接：https://blog.csdn.net/qq_43386754/article/details/86421851

版权

javaweb学习笔记专栏收录该内容

77 篇文章 0 订阅

订阅专栏

jQuery给所有开发者最大的方便之处中就是其强大的元素选择功能,可以根据各种形式来选择,例如:根据id.根据样式,根据父子关系,根据祖宗关系,属性内容.

基础选择器

jQuery中所有的选择器都通过"$"开始的,那么对于基础选择器包含如下内容

NO	选择器	描述	返回的内容
1	#id	取得指定的id的内容,相当于document.getElementById()	但各元素
2	元素名称	根据指定的标签名称取得对应的元素,例如:html,div,相当于coument.getELementsByTagName()	返回一个对象数组
3	.class	具备有指定的样式的元素	对象数组
4	*	取得所有的元素,包括html,head等元素	元素集合
5	元素名称,元素名称…	选择具备有指定元素名称的所有对于的元素信息	元素集合

为了方便处理操作,本次将直接使用一个固定的样式来进行显示,所以可以在css目录中建立一个style.css文件
示例:建立style.css样式

.init{
	background:green;
	font-weight:bold;
	font-size:20px;
	color:#FFFFFF;
	border:5px #000000 solid;
}

根据id选择内容

实际上对于ID的选择器有两种方式"$(id)’“和”$(#id)"

<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
		//选择id为"mydiv"的元素,并使用attr()函数设置器class属相为"init"
			$("#mydiv").attr("class","init");
		})
	</script>
</head>
<body>
	<div id="mydiv">我爱这个世界!</div>
</body>
</html>

执行结果

在这里插入图片描述

此时的ID选择方式为"$("#id"),该方式也可以简化为以下的形式

		$(function(){
		//选择id为"mydiv"的元素,并使用attr()函数设置器class属相为"init"
			$(mydiv).attr("class","init");
		})

但是这种简化的方式也可能存在有一些问题,在实际的开发中,为了可以保证参数自动的转换为vo类对象,所有的参数实际上都会采用"对象名称.属性".那么在这样的情况下,来观察此选择器是否可以正常工作.
属性出现"."的操作

<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			//小数点为特殊字符,需要进行转义符 \ 操作, 但是转义符号同样也是一个特殊符号也需要进行转义
			$("#mydiv\\.name").attr("class","init");
		})
	</script>
</head>
<body>
	<div id="mydiv.name">我爱这个世界!</div>
</body>
</html>

对于此时带有".“的元素id信息,必须使用”\"进行转义,否则无法进行读取.

根据元素选择内容

在任何一个HTML页面之中,元素一定有许多,而且一定会存在许多重名元素
根据元素选择内容

<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			//选择所有元素名称为div的元素
			$("div").attr("class","init");
		})
	</script>
</head>
<body>
	<div>我爱这个世界!</div>
	<div>生活还需继续!</div>
	<div>生活不会偏袒你!</div>
	<div>世界不会帮你</div>
	<div>但是这个世界依然美好,因为有无数人再为自己和家人努力着,他们组成了这美好的世界!</div>
</body>
</html>

运行结果

在这里插入图片描述

此时会根据设置的元素名称来选择所需要的元素内容,不过以上的操作只能够选择一种元素名称的元素,还可以使用逗号分隔,来选择多个元素
选择多个元素

<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			//选择所有元素名称为div的元素
			$("div,p,end").attr("class","init");
		})
	</script>
</head>
<body>
	<div>我爱这个世界!</div>
	<div>生活还需继续!</div>
	<div>生活不会偏袒你!</div>
	<div>世界不会帮你</div>
	<div>但是这个世界依然美好,因为有无数人再为自己和家人努力着,他们组成了这美好的世界!</div>
	<p>
	<span>
		努力吧人生需要努力,否则自己将会后悔!
	</span>
	</p>
	<end>
		人生没有重来的机会,把握时机,极为重要,此时就算是厚着脸皮也要坚持下去.
	</end>
</body>
</html>

显示结果

在这里插入图片描述

通过以上的代码会发现一点,即使是自定义的元素,“end”,只要是符合DOM树的规范,jQuery也可进行相关元素的取得.

样式选择

对于jQuery而言,也可以根据设置的样式来选择所需要的元素,.
样式选择的操作

<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			//选择所有样式为.word的元素
			$(".word").attr("class","init");
		})
	</script>
</head>
<body>
	<div class="word">我爱这个世界!</div>
	<div>生活还需继续!</div>
	<div class="hello">生活不会偏袒你!</div>
	
</body>
</html>

在这里插入图片描述

同样,样式选择也可以使用都好分隔,同时选择多个样式元素

<script type="text/javascript">
		$(function(){
			//选择所有样式为.word的元素
			$(".word,.hello").attr("class","init");
		})
	</script>

在这里插入图片描述

在以后一些开发之中往往会利用一些样式设置一些验证规则,以实现一些前端验证的使用.

选择所有元素

使用"*"可以实现所有元素信息选择处理,包括了html于head元素
示例:选择所有的样式

<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			//选择所有样式
			$("*").attr("class","init");
		})
	</script>
</head>
<body>
	<div class="word">我爱这个世界!</div>
	<div>生活还需继续!</div>
	<div class="hello">生活不会偏袒你!</div>
	
</body>
</html>

在这里插入图片描述

由于此时没有设置任何的层级关系,所以"*"好会选择html元素一下的所有元素设置样式

{[("青椒盖饭")]}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础选择器

jQuery给所有开发者最大的方便之处中就是其强大的元素选择功能,可以根据各种形式来选择,例如:根据id.根据样式,根据父子关系,根据祖宗关系,属性内容.基础选择器jQuery中所有的选择器都通过"$"开始的,那么对于基础选择器包含如下内容NO选择器描述返回的内容1#id取得指定的id的内容,相当于document.getElementById()但各元...
复制链接

扫一扫

专栏目录