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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/28080.html

標籤：jQuery

上一篇：七牛云免費物件存盤(解決圖片加載緩慢問題）

下一篇：$和jquery的關系

需要知道的jQuery物件和DOM物件之間的轉換

jQuery物件和DOM物件之間的轉換

將DOM物件轉換為jQuery物件的裝換方式：

將jQuery物件轉換為DOM物件的裝換方式有2種：

第一種獲取陣列中的元素

第二種通過.get()方法 得到相應DOM物件

第二種通過.get()方法得到相應DOM物件