jQuery(一) ---[jQuery概述,jQuery对象与DOM对象的区别和相互转换]

最新推荐文章于 2023-04-08 10:41:35 发布

小智RE0

最新推荐文章于 2023-04-08 10:41:35 发布

阅读量293

点赞数 3

分类专栏： jQuery从零开始文章标签： jquery

本文链接：https://blog.csdn.net/MrTumnus/article/details/118312392

版权

jQuery从零开始专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

Jquery = javaScript Query
jQuery 理念: 写得少(语法简单), 做得多(功能强大)。

在js的基础上进行封装;基础语法还是使用着js语言;简化处理.

在使用时,先将jquery封装了语法的js文件导入.

<!--搭建部署jQuery-->
<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>

jQuery对象与DOM对象

jQuery 对象：
jQuery 对象就是通过 jQuery() 或$()包装 DOM 对象后产生的对象。
jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。

DOM对象与jQuery对象本质上都表示的是网页中的标签

jQuery 对象是 jQuery 独有的,如果一个对象是 jQuery 对象,可使用jQuery 里的方法: $("#id").html();

在jQuery对象是一个数组对象,里面包含DOM对象,但是在数组对象中封装了许多特有的方法.

jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法。

例如;对于一个文本框分别获取DOM对象和jQuery对象;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--搭建部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script   type="text/javascript">
			function demo(){
				//获取文本框的DOM对象;
				var textobj0=document.getElementById("textId");
				console.log(textobj0);//在控制台输出DOM对象;
				console.log(textobj0.value);//在控制台获取文本框的内容;
				
				//获取文本框的jQuery对象;
				var textobj1=$("#textId");
				console.log(textobj1);//在控制台输出jQuery对象;
				console.log(textobj1.val());//在控制台获得文本框中的内容;
			}
		</script>
	</head>
	<body>
		<spqn>文本框:<input type="text" id="textId" /></spqn>
		<spqn>按钮:<input type="button" value="点击" onclick="demo()"/></spqn>
	</body>
</html>

效果:

在这里插入图片描述

注意这里获取jQuery对象时(var textobj1=$("#textId")),

也可以使用 var textobj1=jQuery("#textId");因为这里的$符号是jQuery中的一个方法简写.

在获取文本框中的内容时,jQuery对象和DOM对象的获取值的方法不一样;

jQuery对象获取内容值时,使用的是封装的方法;例如:textobj1.val()

而在DOM对象获取内容时,使用的是value属性;例如:textobj0.value

所以说;jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法。

DOM对象转为jQuery对象

DOM对象转jQuery对象,实际上只要将DOM对象包装到jQuery对象的语法中就可以了.

var jQuery对象 = $(DOM对象); 这样就转为jQuery对象了;
转换后就可以使用jQuery的方法

例如:将获取到的文本框DOM对象转为jQuery对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--搭建部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script   type="text/javascript">
			function demo(){
				//获取文本框的DOM对象;
				var textobj0=document.getElementById("textId");
				
				//将DOM对象转为jQuery对象;
				var textobj1=$(textobj0);
				//在控制台输出转换后的jQuery对象;
				console.log(textobj1)
				//在控制台输出文本框的内容;
				console.log(textobj1.val());
			}
		</script>
	</head>
	<body>
		<spqn>文本框:<input type="text" id="textId" /></spqn>
		<spqn>按钮:<input type="button" value="点击" onclick="demo()"/></spqn>
	</body>
</html>

效果:

在这里插入图片描述

jQuery对象转为DOM对象

注意;jQuery对象是个数组对象;里面是DOM对象;那么在取指定的DOM对象时就要用到数组的索引下标;(即index ,是从零开始的).

jQuery对象转DOM对象时;有两种处理方式:

方式1:直接通过索引index来取得指定的标签的DOM对象;然后使用DOM对象的方法.

var DOM对象=jQuery对象[index索引];

方式2:使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象

var DOM对象 =jQuery对象 . get(index);

案例:
使用方法 1:将文本框的jQuery对象转DOM对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--搭建部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script   type="text/javascript">
		//方式1:直接通过索引index来取得指定的标签的DOM对象;然后使用DOM对象的方法.
			function demo(){
				//获取文本框的jQuery对象;
				var Stextobj=$("#textId");
				//jQuery对象转为DOM对象;
				var Dtextobj=Stextobj[0];
				//控制台输出DOM对象;
				console.log(Dtextobj);
				//在控制台获取文本框的内容;
				console.log(Dtextobj.value);
			}
		</script>
	</head>
	<body>
		<spqn>文本框:<input type="text" id="textId" /></spqn>
		<spqn>按钮:<input type="button" value="点击" onclick="demo()"/></spqn>
	</body>
</html>

效果:

在这里插入图片描述

案例:
使用方法 2:将文本框的jQuery对象转DOM对象;

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--搭建部署jQuery-->
		<script src="js/jquery.1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script   type="text/javascript">
			function demo(){
				//方式2:使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象;
				  
				//获取文本框的jQuery对象;
				var Stextobj=$("#textId");
				//jQuery对象转为DOM对象;
				var Dtextobj=Stextobj.get(0);
				//控制台输出DOM对象;
				console.log(Dtextobj);
				//在控制台获取文本框的内容;
				console.log(Dtextobj.value);
			}
		</script>
	</head>
	<body>
		<spqn>文本框:<input type="text" id="textId" /></spqn>
		<spqn>按钮:<input type="button" value="点击" onclick="demo()"/></spqn>
	</body>
</html>