jQuery 对象与 DOM 对象之间的转换

jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。

通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了

看如下代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery 对象   与DOM 对象的转换</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
		<div>元素一</div>
		<div>元素二</div>
		<div>元素三</div>

		<script type="text/javascript">
		 var div = document.getElementsByTagName('div'); //这是一个DOM 对象

		 var $div = $(div); //jQuery 对象  将dom节点div转化为$div的jquery对象
		 var $first = $div.first(); //找到第一个div元素
		 $first.css('color', 'red'); //给第一个元素设置颜色
	</script>
</body>
</html>

如何将jQuery 对象转换成DOM对象

    jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中,我们需要jQuery与DOM能够相互的转换,它们都是可以操作的DOM元素,jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
		<div>元素一</div>
		<div>元素二</div>
		<div>元素三</div>

		<script type="text/javascript">
		 	var $div = $('div');  //jquery对象
		 	var div = $div[1];	//转换成dom对象
		 	div.style.color = "red";//对dom对象进行操作
		</script>
</body>
</html>


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery 对象 与DOM 对象的转换</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div>元素一</div> <div>元素二</div> <div>元素三</div> <script type="text/javascript"> var div = document.getElementsByTagName('div'); //这是一个DOM 对象 var $div = $(div); //jQuery 对象 将dom节点div转化为$div的jquery对象 var $first = $div.first(); //找到第一个div元素 $first.css('color', 'red'); //给第一个元素设置颜色 </script> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

JQuery 基础入门教程

高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

如果我要找到第二个div该改first为second吗?

5年前    添加回复 0

学习ing

这么互相转化有什么用处呢

7年前    添加回复 0

Alway.以为

要对着代码看一会才能明白

7年前    添加回复 0

据说名字长的人会有很多女朋友

DOM一直搞不懂什么意思

7年前    添加回复 0

末日的春天

经常打代码的话自然而然的就记住了

7年前    添加回复 0

橱窗的光

通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了

7年前    添加回复 0

什么是DOM?

[最新 数据分析师 的回答] 什么是DOM?-PHP中文网问答-什么是DOM?-PHP中文网问答围观一下哦,学习一下。

时间:7年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~