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>

显示结果为：

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

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

    一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...

  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. AlertManager 部署及使用

    熟悉了 Grafana 的报警功能,但是 Grafana 的报警功能目前还比较弱,只支持 Graph 的图表的报警.今天来给大家介绍一个功能更加强大的报警工具:AlertManager. 简介 之前我 ...

  2. Windows 证书签名的伪造

    Windows 系统中的一些非常重要文件通常会被添加数字签名,其目的是用来防止被篡改,能确保用户通过互联网下载时能确信此代码没有被非法篡改和来源可信,从而保护了代码的完整性.保护了用户不会被病毒.恶意 ...

  3. 作业13：Map相关知识点（一）

    一 Map相关类图 二 Map接口 1 Map接口中的方法 jdk 方法名 简单描述 put(K,V):V 添加value,当Key对应无值,返回null;有值则返回上一个值.(覆盖式,可以反复覆盖前 ...

  4. luogu4777[模板]拓展中国剩余定理题解

    题目链接 https://www.luogu.org/problemnew/show/P4777 分析 扩展\(CRT\)就是解决模数不互质的情况,说是扩展\(CRT\),其实都是扩欧... 先来考虑 ...

  5. python matplotlib 折线图

    1.绘制折线图,去上和右边框,显示中文 import numpy as np import matplotlib.pyplot as plt #plt.style.use('default') #pl ...

  6. vue项目之购物车

    简单的完成一个购物车项目,满足基本功能 安装创建好项目以后需要引入安装elementui和vuex 项目目录如下:(home.vue为主页面) ### ~home.vue <template&g ...

  7. 一秒钟教会你如何 使用jfreechart制作图表，扇形图，柱形图，线型图，时序图，附上详细代码，直接看效果

    今天有小伙伴问到我怎么使用jfreeChat生成图标,去年就有一个这方便的的总结,今天再遇到,就总结出来,供大家参考: 第一个: 创建柱状图,效果图如下: 柱状图代码如下: package cn.xf ...

  8. [LeetCode] 40. Combination Sum II ☆☆☆(数组相加等于指定的数)

    https://leetcode.wang/leetCode-40-Combination-Sum-II.html 描述 Given a collection of candidate numbers ...

  9. jQuery EasyUI简介

    jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助we ...

  10. SpEL表达式总结

    前言SpEL(Spring Expression Language),即Spring表达式语言,是比JSP的EL更强大的一种表达式语言.为什么要总结SpEL,因为它可以在运行时查询和操作数据,尤其是数 ...