一，二者的区别

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

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

二，二者的相互转换

1、 DOM 对象 转为 jQuery对象：

$(js对象);

2、jQuery对象 转为 DOM 对象：

 jquery对象[index];      //方式1（推荐）

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

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

$('div')[1].style.backgroundColor = 'yellow';

$('div')[3].style.backgroundColor = 'green';

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

举例：

三.隔行换色

代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="jquery-3.3.1.js"></script>

    <script>

        //入口函数

        jQuery(function () {

            var jqLi = $("li");

            for (var i = 0; i < jqLi.length; i++) {

                if (i % 2 === 0) {

                    //jquery对象，转换成了js对象

                    jqLi[i].style.backgroundColor = "pink";

                } else {

                    jqLi[i].style.backgroundColor = "yellow";

                }

            }

        });

    </script>

</head>

<body>

<ul>

    <li>清风徐来</li>

    <li>清风徐来</li>

    <li>清风徐来</li>

    <li>清风徐来</li>

    <li>清风徐来</li>

    <li>清风徐来</li>

</ul>

</body>

</html>

js中的DOM对象 和 jQuery对象 比较的更多相关文章

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

    1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...

  2. 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

  3. JS对象与Dom对象与jQuery对象之间的区别

    前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...

  4. DOM对象和js对象以及jQuery对象的区别

    DOM对象和js对象以及jQuery对象的区别 DOM对象和js对象以及jQuery对象的区别 一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际 ...

  5. jQuery中dom对象与jQuery对象之间互相转换

    首先介绍一下什么是dom对象什么时候jQuery对象 1.dom对象就是使用原生js的api获取到的对象就是dom对象 eg: var box1 = document.getElementById(& ...

  6. jquery中 dom对象与jQuery对象相互转换

    var jq = $(dom对象);//额 再补充点吧好记. $是jquery的别名.这一句等价于 var jq = jQuery(dom对象); 反之. dom对象 = jq[0]; //不写那么长 ...

  7. DOM对象与jQuery对象的相互转换

    DOM  对象可以使用 js       中的方法,  不能使用jQuery中的方法:jQuery对象只能使用jQuery中的方法, 不能使用js中的方法:jQuery对象是通过jQuery包装DOM ...

  8. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  9. DOM对象和JQuery对象

    1.JS对象转化为Jquery对象 Var p=document.getElementById(“p”); Var $obj=$(p); 2.Jquery对象转换为JS对象 Var $bh=$(“#i ...

随机推荐

  1. 2016.3.7 Word2007编号设置

    1.点击下图红圈出的下拉箭头 2.点击下图新建样式按钮 3.在弹出窗口中,设置名称AAA(方便稍后的查找修改),样式类型改为列表,点击编号 4.在弹出的窗口中以此设置各级标题的编号样式,保存后设置成功 ...

  2. Android 4学习（6）：概述 - 深入了解Android Activity

    参考:<Professional Android 4 Application Development> 深入了解Android Activity 每一个Android Activity都对 ...

  3. S2SH整合所需jar包及其详解

    转自:https://blog.csdn.net/vvvac1314/article/details/44002205 struts2所必须的jar包五个:struts2-core-2.1.6.jar ...

  4. Win10 蓝屏

    Win10  蓝屏 3分钟就蓝屏,显卡驱动的问题吗?无线网卡?USB?声卡.各种硬件驱动都有可能. KERNEL_SECURITY_CHECK_FAILURE DISM.exe/Online/Clea ...

  5. 【Android 多媒体应用】使用 VideoView 播放视频

    1.MainActivity.java import android.os.Bundle; import android.support.v7.app.AppCompatActivity; impor ...

  6. ie6-ie8不支持opacity，rgba解决方法

    半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: pro ...

  7. VI中的多行删除与复制（转）

    VI中的多行删除与复制 法一: 单行删除,:(待删除行)d 多行删除 ,:,10d 法二: 光标所在行,dd 光标所在行以下的N行,Ndd 方法1: 光标放到第6行, 输入:2yy 光标放到第9行, ...

  8. Linux reboot后数据库无法自动启动

    需将以下由N改为Y orcl:/data/oracle_db/product/13.2.0/db_1:Y Last login: Thu Aug 27 16:36:19 2015 from 10.10 ...

  9. android下db-journal文件作用

    在学习数据库sqlite的过程中,发现在源文件包里除了生成db类型的数据库文件,还生成了db-journal类型的同名文件 查询网上资料后知道该文件是sqlite的一个临时的日志文件,主要用于sqli ...

  10. c#循环语句 for 循环嵌套的练习。还有跳转语句，异常语句，迭代穷举介绍

    先说一下循环嵌套:循环嵌套就是再一个循环里面再放一个循环,也就是说如果没一个循环都循环10次,那么第一个循环是1的时候,嵌套的循环会循环十次.也就是10*10的效果. for 循环语句 主要还是逻辑思 ...