zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    获取自己的网络出口IP地址
    go语言开发IDE
    国内可用的python源
    Tomcat 配置及优化
    大小不固定的图片和多行文字的垂直水平居中
    行内元素与块级元素比较全面的区别和转换
    常用的四种CSS样式表格
    JS鼠标事件大全
    Javascript 5种方法实现过滤删除前后所有空格
    JavaScript trim 实现(去除字符串首尾指定字符)
  • 原文地址:https://www.cnblogs.com/xielong/p/7987954.html
Copyright © 2011-2022 走看看