需要知道的jQuery對象和DOM對象之間的轉換

-Advertisement-

jQuery對象和DOM對象之間的轉換 jQuery對象就是通過jQuery包裝DOM對象後產生的對象。 jQuery對象和DOM對象不能互相調用對方的方法或屬性，但它們之間可以進行轉換。兩者都無法使用對方的任何方法非要使用也可以（會報錯）將DOM對象轉換為jQuery對象的裝換方式：例如： ...

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

您的分享是我們最大的動力!