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

一、DOM对象

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

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

二、JavaScript 对象

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

三、jQuery对象

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

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

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

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

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

<body>

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

    <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对象,js对象和jquery对象的区别_第1张图片

Dom对象,js对象和jquery对象的区别_第2张图片

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

Dom对象,js对象和jquery对象的区别_第3张图片

Dom对象,js对象和jquery对象的区别_第4张图片

Dom对象,js对象和jquery对象的区别_第5张图片

你可能感兴趣的:(前端,前端和小程序)