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

時間 2019-11-25

標籤須要知道 jquery 對象 dom 之間轉換欄目 JQuery 简体版

原文原文鏈接

jQuery對象和DOM對象之間的轉換

jQuery對象就是經過jQuery包裝DOM對象後產生的對象。javascript

jQuery對象和DOM對象不能互相調用對方的方法或屬性，但它們之間能夠進行轉換。html

二者都沒法使用對方的任何方法非要使用也能夠（會報錯）java

將DOM對象轉換爲jQuery對象的裝換方式：

例如：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對象中的元素spa

第二種經過.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>