Dom对象,js对象和jquery对象的区别

最新推荐文章于 2024-05-07 08:13:42 发布

上进求知,认真思辨

最新推荐文章于 2024-05-07 08:13:42 发布

阅读量4.1k

点赞数 2

分类专栏：前端前端和小程序文章标签： jquery 对象 dom

本文链接：https://blog.csdn.net/kuangdacaikuang/article/details/72235747

版权

前端和小程序同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

一、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>

这里写图片描述

DOM对象转成jQuery对象:对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。
jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
- (1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
- (2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象。

这里写图片描述

上进求知,认真思辨

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Dom对象,js对象和jquery对象的区别

一、DOM对象文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。通过DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。 H
复制链接

扫一扫