认识jQuery及jQuery选择器

最新推荐文章于 2024-05-21 14:15:14 发布

煎蛋zai冒泡

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量213

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_68266487/article/details/127236183

版权

1:jQuery介绍

jQuery是一个快捷、简洁的javaScript库，其设计的宗旨是"write Less,Do More",即倡导写更少的代码，做更多的事情。

j:就是javaScript; Query查询：意思就是查询js,把js中的DOM操作做了封装，我们可以快速地查询使用里面的功能。

2：$是jQuery中的顶级对象

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

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

3：jQuery对象和DOM对象

1:用原生js获取来的对象就是DOM对象

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

3:jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）。

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

DOM对象与jQuery对象之间是可以相互转换的。因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

代码示例：

		<!-- 引入jQuery的类库 -->
		<script src="js/jquery.min.js"></script>
		<!-- 书写jQuery的代码 -->
		<script type="text/javascript">
        //jQuery加载文档
			$(function(){
				//1)js获取的是DOM对象
				var dom=document.getElementById("d1")
				//2)jQuery获取的是jQuery对象
				var jq=$("#d1");
				
				// 直接输出
                dom.innerText="abc"
                jq.text("xyz")
				
				//JQ对象换成DOM对象
				jq[0].innerText="xyz"
				//DOM对象转换成JQ对象
				$(dom).text("111")
			})
		</script>

4：jQuery选择器

1：基础选择器

2.层级选择器

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				//Id选择器获取元素
				var a1 = $("#d1")
				console.log(a1)
				//class选择器获取元素
				var a2 = $(".d2")
				console.log(a2)
				//标签选择器获取元素
				var a3 = $("d3")
				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="d1">id选择器1</div>
		<div class="c2">id选择器2</div>
		<div id="d3">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>

煎蛋zai冒泡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识jQuery及jQuery选择器

1:jQuery介绍jQuery是一个快捷、简洁的javaScript库，其设计的宗旨是"write Less,Do More",即倡导写更少的代码，做更多的事情。j:就是javaScript;Query查询：意思就是查询js,把js中的DOM操作做了封装，我们可以快速地查询使用里面的功能。2：$是jQuery中的顶级对象1：$是jQuery的别称，在代码中可以使用jQuery代替，为了方便，通常直接用$。
复制链接

扫一扫