Dom对象,js对象和jquery对象的区别一、DOM对象二、JavaScript 对象三、jQuery对象四、js对象和jQuery对象之间的区别于转换

74 阅读 0 评论 49 点赞

我是靠谱客的博主自然果汁，最近开发中收集的这篇文章主要介绍Dom对象,js对象和jquery对象的区别一、DOM对象二、JavaScript 对象三、jQuery对象四、js对象和jQuery对象之间的区别于转换，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

原文：https://blog.csdn.net/kuangdacaikuang/article/details/72235747

一、DOM对象

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
通过DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。 HTML
DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
DOM对象，即是我们用传统的方法(javascript)获得的对象。
DOM准确说是对文档对象的一种规范标准(文档对象模型),标准只定义了属性和方法行为。

二、JavaScript 对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
通过js获取的DOM对象就是js对象
当浏览器支持js的dom接口(api)时，这里狭义的dom对象是以js对象的形式出现的，也就是一个js对象

三、jQuery对象

jquery对象其实是一个javascript的数组,这个数组对象包含125个方法和4个属性
4个属性分别是

jquery 当前的jquery框架版本号
length 指示该数组对象的元素个数 .
context 一般情况下都是指向HtmlDocument对象 .
selector 传递进来的选择器内容

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法;反过来Dom对象也不能使用jquery的方法

四、js对象和jQuery对象之间的区别于转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../css/base.css">
    <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
</head>

<body>

    <div>2222222</div>
    <div class="class-box">2222222</div>
    <div id="id-box">2222222</div>
    <div class="class-box">2222222</div>
    <div>2222222</div>

    <script>
        $(function () {
            //js原生DOM对象
            var idBox = document.getElementById('id-box')
            var classBox = document.getElementsByClassName('class-box')
            var div = document.getElementsByTagName('div')

            //jqueryDOM对象---都是数组类型的,包含标签,上下文,选择器
            //数组中包含原生jsDOM对象
            //jqueryDOM对象包装了jsDOM对象,增加了丰富的功能
            var $idBox = $('#id-box')
            var $classBox = $('.class-box')
            var $div = $('div')

            //两种对象的区别
            console.log(idBox)
            console.log($idBox)
            console.log('----------------------')
            console.log(classBox)
            console.log($classBox)
            console.log('----------------------')
            console.log(div)
            console.log($div)

            //原生jsDOM没有css()方法,jqueryDOM有css()方法
//            idBox.style.color = 'red'
//            classBox[0].style.background = 'red'
//            $div.css({
//                'width':500,
//                'hight':100
//            })


//************************************************************
            //js对象转成jQuery对象
            var $JS2JQ_idBox = $(idBox)
            var $JS2JQ_classBox = $(classBox)
            var $JS2JQ_div = $(div)

            //content和selector有时有,有时无
            console.log('js转换成原生jquery对象---------------')
            console.log($JS2JQ_idBox)
            console.log($JS2JQ_classBox)
            console.log($JS2JQ_div)

            //数组的隐式迭代,数组直接操作属性,隐式遍历修改
//            $JS2JQ_idBox.css({'width':300})

//************************************************************
            //jquery转换成原生js对象
            var JQ2JS_idBox = $idBox[0]
            var JQ2JS_classBox = $classBox.get(1)
            var JQ2JS_div = $div[1]

            //丢失了prevObject: 但是保留了selector
            console.log('jquery转换成原生js对象---------------')
            console.log(JQ2JS_idBox)
            console.log(JQ2JS_classBox)
            console.log(JQ2JS_div)

            //原生js数组对象里含有的标签,只能通过手动遍历操作
            JQ2JS_classBox.style.background = 'blue'
        })

    </script>
</body>
</html>