JQuery对象和jQuery的选择器

听两分钟故事

于 2022-10-17 20:57:50 发布

阅读量224

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_70675760/article/details/127376054

版权

$是jQuery中的顶级对象
1,$是jQuery的别称，在代码中可以使用jQuery代替，为了方便，通常直接用$。

2,$是jQuery的顶级对象，相当于原生JavaScript中的window把元素利用$包装成jQuery对象，就可以调用jQuery对象。

jQuery对象和DOM对象
1，用原生js获取来的对象就是DOM对象

2，jQuery方法获取的元素就是jQuery对象。

注意：只有jQuery对象才能使用jQuery方法，DOM对象则使用原生的JavaScript方法。

getElementsByTagName("div")这个方法返回值为DOM对象的集合

$("div")这个方法返回的是jQuery对象封装了DOM 对象

二，jQuery选择器
1.基础选择器

id选择器：$("#id") 获取指定id的元素

通配符选择器：$("*") 匹配所有元素

类选择器：$(".class") 获取同类class元素

标签选择器：$("div") 获取同一类标签的所有元素

并集选择器：$("div,p,li") 获取多个元素

交集选择器：$("li.current") 交集元素

2.层级选择器

子代选择器：$("ul>li") 使用>号，获取亲儿子层级的元素，不会获取到孙子层级的元素

后代选择器：$("ul li")使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子元素等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				//Id选择器获取元素
			var a1=$("#id")
			console.log(a1)
			//class选择器获取元素
			var a2=$(".2")
			console.log(a2)
			//标签选择器获取元素
			var a3=$("div")
			console.log(a3)
			//子代选择器获取元素
			var a4=$("ul>li")
			console.log(a4)
			console.log(a4.text())
			//后代选择器获取元素
			var a5=$("ul li")
			console.log(a5)
			console.log(a4.text())
			});
		</script>
			
		
	</head>
	<body>
		<div id="1">id选择器1</div>
		<div class="2">id选择器2</div>
		<div id="3">id选择器3</div>
		<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<ol>
			<li>1.1</li>
			<li>1.2</li>
			<li>1.3</li>
		</ol>
		</ul>
		
	</body>
</html>

听两分钟故事

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery对象和jQuery的选择器

2,$是jQuery的顶级对象，相当于原生JavaScript中的window把元素利用$包装成jQuery对象，就可以调用jQuery对象。后代选择器：$("ul li")使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子元素等。子代选择器：$("ul>li") 使用>号，获取亲儿子层级的元素，不会获取到孙子层级的元素。$("div")这个方法返回的是jQuery对象封装了DOM 对象。标签选择器：$("div") 获取同一类标签的所有元素。1，用原生js获取来的对象就是DOM对象。
复制链接

扫一扫