分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

jQuery对象转化成DOM对象

发布时间:2023-09-06 01:43责任编辑:林大明关键词:jQueryDOM

 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。

我们使用jQuery的同时也能混合JavaScript原生代码一起使用。

在很多场景中,我们需要jQuery与DOM能够相互的转换,它们都是可以操作的DOM元素,

jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。

如何把jQuery对象转成DOM对象?

利用数组下标的方式读取到jQuery中的DOM对象

用jQuery找到所有的div元素(3个),因为jQuery对象也是一个数组结构,可以通过数组下标索引找到第一个div元素,

通过返回的div对象,调用它的style属性修改第一个div元素的颜色。

这里需要注意的一点是,数组的索引是从0开始的,也就是第一个元素下标是0.

<!DOCTYPE html>
<html>

<head>
<!DOCTYPE html>
<html>

<head>
???<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
???<title></title>
???<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>

<body>
?<div>元素一</div> //运行后
?<div>元素二</div> //运行后
?<div>元素三</div>

???<script type="text/javascript">   //第一种方法
???var $div = $(‘div‘); //jQuery对象
???var div=$div[0];      //转化成DOM对象
???div.style.color = ‘red‘; //操作dom对象的属性
???</script>

<script type="text/javascript">  //第二种JQ对象转化成DOM对象的方法

var $div=$("div");       //jQuery对象
?????var div=$div.get(1);    //通过get方法,转化成DOM

div.style.color="blue";  //操作dom对象的属性

?</script>
</body>

</html>

小结

   <script>

         var $div=$("div");       //jQuery对象

         $div.get(0).style.color="red";或$div[0].style.color="red ; //也可以这样直接操作dom对象的属性,省去上面中间“转化成DOM对象”的第二步

   </script>

jQuery对象转化成DOM对象

原文地址:https://www.cnblogs.com/youxiaowj/p/8476859.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved