• JQuery对象和DOM对象的区别与转换


    刚开始学习JQuery,经常分不清楚哪些是JQuery对象,哪些是DOM对象,了解它们之间的关系是很有必要的。

    1、DOM对象和JQuery对象的区别

    1)  DOM对象

      DOM是Document Object Model,即文档对象模型的缩写。DOM是以层次结构组织的节点或信息片段的集合,每一份

    DOM都可以表示成一个树。

    如:

    <html>
        <head>
           <title>标题内容</title>
       </head>
        <body>
             <p>测试文本</p>
       </body>
    </html>

    上面<html>是DOM树的根元素,其他是根下面的元素(<head>、<body>)等

    2) JQuery对象

      JQuery对象是通过JQuery包装DOM对象后产生的对象,JQuery对象是独有的,可以使用JQuery的方法

    如:

    $('#test').html();

    等价于DOM中的:

    document.getElementById("test").innerHTML;

    虽然JQuery对象是包装DOM对象后产生的,但是JQuery无法使用DOM对象的任何方法,同理,DOM对象也不能使用JQuery对象方法。

    注:

    $('#test')  这样获取的是JQuery对象,document.getElementById("test") 获取的是DOM对象,它们不是等价的。

    2、DOM对象和JQuery对象的相互转换

    1)JQuery对象转化为DOM对象

    var $mr = $('#mr');   //JQuery对象
    var mr1 = $mr[0];   //DOM对象
    var mr2 = $mr.get(0);  //DOM对象
    alert(mr1.value);   //弹出DOM对象元素的值

    2)DOM对象转化为JQuery对象

    var mt = document.getElementById("mt");   //DOM对象
    var $mt = $(mr);   //JQuery对象
    alert($mt.val());   //弹出JQuery对象的值

    如:

    <script>
       $(document).ready(function(){
            var domObj = document.getElementById("mr");
             alert("使用DOM方法获取节点mr的内容:" + domobj.innerHTML);
             var $jqueryObj = $(domObj);   //转化为Jquery对象
             alert("使用JQuery方法获取节点mr的内容:" + $jqueryObj.html());
       })
    </script>
  • 相关阅读:
    win7台式机上使用airpods
    通达信自定义版面设置
    pthread_cond_wait函数实现
    为什么卸载手机微软必应浏览器
    看电子书的好处
    Web前端学习方法
    用Bing搜索单词的时候按下Ctrl键不放可以持续发音
    怎么制作档案盒标签
    三个按钮指向一个Click事件的错误
    What is .NET
  • 原文地址:https://www.cnblogs.com/xielong/p/7987954.html
Copyright © 2020-2023  润新知