js中的DOM对象和jQuery对象的比较

1. 二者的不同之处：

通过jQuery获取的元素是一个数组，数组中包含着原生JS中的DOM对象。

例如，针对下面的一个div结构：

    <div id="Box"></div><div class="box"></div><div class="box"></div>

通过原生JS获取这些元素节点的方式是：

<script type="text/javascript">var myBox = document.getElementById("Box")          //通过id获取单个元素var boxArr = document.getElementsByClassName("box") //通过class获取的是伪数组var divArr = document.getElementsByTagName("div")   //通过标签获取的是伪数组
</script>

通过jQuery获取这些元素节点的方式：

   <script src="jquery.js"></script><script type="text/javascript"><!--获取的是数组, 里面包含着原生JS中的DOM对象-->console.log($("#Box"));console.log($(".box"));console.log($("div"));</script>

结果显示为：

由于jQuery自带了css()方法，我们还可以直接在代码中给div设置css属性，如下面所示：

        $("div").css({"width": "200px","height": "200px","background-color": "red","margin-top": "20px"})

总结：

jQuery就是把DOM对象重新包装了一下，让其具有了jQuery方法。

2. 二者的相互转换

（1）DOM对象转为jQuery对象：

$(JS对象)；

（2）jQuery对象转为DOM对象：

jQuery对象[index];    //方式1 （推荐使用）

jQuery对象.get(index); //方式2

jQuery对象转换成DOM对象之后，可以直接调用DOM提供的一些功能。

        $("div")[1].style.backgroundColor = "yellow";$("div")[2].style.backgroundColor = "red";

总结：

　　如果想要使用使用哪种方式设置属性或方法，必须转换成该类型。

3. jQuery示例：隔行换色

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>隔行换色</title><script src="jquery.js"></script><script>$(function () {var jQuery_li = $("li");for(var i=0; i<jQuery_li.length; i++){if(i % 2 == 0){jQuery_li[i].style.backgroundColor = "yellow";}else {jQuery_li[i].style.backgroundColor = "green";}}})</script>
</head>
<body><ul><li>This is the first line.</li><li>This is the second line.</li><li>This is the Third line.</li><li>This is the fourth line.</li><li>This is the fifth line.</li><li>This is the sixth line.</li></ul>
</body>
</html>

显示结果为：

转载于:https://www.cnblogs.com/yang-wei/p/9494358.html

js中的DOM对象和jQuery对象的比较相关推荐

JS对象与Dom对象与jQuery对象之间的区别
前言通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
Js - Dom原生对象和jQuery对象的联系、区别、相互转换
Dom原生对象和jQuery对象的联系.区别.相互转换: 联系: 1.jQuery对象:通过jQuery包装DOM对象后产生的对象: 2.两者之间可以相互转换: 区别: 1.jquery选择器得到的j ...
【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查
这篇文章,主要介绍JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性.DOM增删改查. 目录一.JS中的DOM 1.1.什么是DOM 1.2.获取DOM结点 (1)获取htm ...
json对象、字符串-数组和数学对象中的相关方法、BOM对象、JS中的DOM操作
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 json对象字符串对象的相关方法获取字符串长度 length 清除两侧的空白 trim [ python的strip ] ...
jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery Hello World程序 <script type="text/javascript" src="xxx//jquery-x.y.z.js" ...
DOM对象与jquery对象有什么不同
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
（四）DOM对象和jQuery对象
学习jQuery,需要搞清楚DOM对象和jQuery对象的关系与区别,因为两者的方法并不共用,如果搞不清楚对象类型就会导致调用错误的方法. DOM(Document Object Model)称为文档 ...
Dom对象、JavaScript对象、jQuery对象区别
一.Dom对象.JavaScript对象.jQuery对象 1.1 Dom对象文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际上是以面向对象方式描述的文档模型 ...
Dom对象与jQuery对象的转换
Dom对象与jQuery对象的转换 (1) Dom转jQuery包装集如果要使用jQuery提供的函数, 就要首先构造jQuery包装集. 我们可以使用本文即将介绍的jQuery选择器直接构造j ...

js中的DOM对象和jQuery对象的比较

1. 二者的不同之处：

2. 二者的相互转换

3. jQuery示例：隔行换色

js中的DOM对象和jQuery对象的比较相关推荐

最新文章

热门文章

js中的DOM对象和jQuery对象的比较

1. 二者的不同之处：

2. 二者的相互转换

3. jQuery示例： 隔行换色

js中的DOM对象和jQuery对象的比较相关推荐

最新文章

热门文章

3. jQuery示例：隔行换色