zoukankan      html  css  js  c++  java
  • 需要知道的jQuery对象和DOM对象之间的转换

    jQuery对象和DOM对象之间的转换

    jQuery对象就是通过jQuery包装DOM对象后产生的对象。

    jQuery对象和DOM对象不能互相调用对方的方法或属性,但它们之间可以进行转换。

    两者都无法使用对方的任何方法 非要使用也可以(会报错)

    将DOM对象转换为jQuery对象的装换方式:

    例如:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
    
            $(function(){
                var divDom = document.getElementById("myDiv");//这是一个DOM对象
                var divjQ = $(divDom);//转换为jQuery对象只需套上$()
                console.log(divjQ.html());//在控制台输出转为jQuery对象的DOM对象
            })
            </script>
        </head>
        <body>
            <div id="myDiv">
                这是一句话。
            </div>
        </body>
    </html>

    成为jQuery对象必须要使用jQuery方法.html()而不是.innerHTML,不然会报错

    将jQuery对象转换为DOM对象的装换方式有2种:

    第一种获取数组中的元素

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
    
            $(function(){
                //jQuery对象实际上是一个数组,这里数组中只包含一个元素
                var divJquery = $("#myDiv");//直接获取到jQuery对象,
                
                var divDom = divJquery[0]//取出后变为DOM对象
                console.log(divDom.innerHTML);//用DOM的方法可以在控制台成功输出,证明已经转换
            })
            </script>
        </head>
        <body>
            <div id="myDiv">
                这是一句话。
            </div>
        </body>
    </html>

    jQuery对象实际上是一个数组,这里数组中只包含一个元素,所以使用[0]取出jQuery对象中的元素

    第二种通过.get()方法 得到相应DOM对象

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
    
            $(function(){
                //jQuery对象实际上是一个数组,这里数组中只包含一个元素
                var divJquery = $("#myDiv");//和上面一样 获取到jQuery对象
                var divDom = divJquery.get(0);//jQuery本身提供的get()方法,得到相应DOM对象
                console.log(divDom.innerHTML);//DOM方法在控制台输出
            })
            </script>
        </head>
        <body>
            <div id="myDiv">
                这是一句话。
            </div>
        </body>
    </html>

    转换成功正常输出

     

     如有错误请指正:D

  • 相关阅读:
    多线程系列教材 (四)- 常见的线程安全相关的面试题
    多线程系列教材 (三)- Java 多线程同步 synchronized 详解
    多线程系列教材 (二)- Java 常见的线程方法
    UPC-最优分解问题(贪心)
    【数论】【模板】
    UPC-人品指数(模拟)
    UPC-趾压板矩阵(强行找规律)
    UPC-排队出发+AcWing-耍杂技的牛(推公式的贪心)
    UPC-购买巧克力(贪心)
    前端——多行三列模式页面布局
  • 原文地址:https://www.cnblogs.com/449house/p/11925614.html
Copyright © 2011-2022 走看看