jQuery對象與DOM對象

時間 2021-08-14

標籤 javascript css html java jquery 編程數組 dom ide 測試欄目 JQuery 简体版

原文原文鏈接

一、jQuery對象、DOM對象二者之間的關係javascript

DOM對象，若是想調用jQuery的方法，必須先轉換爲jQuery對象css

DOM對象：文檔樹中的對象都是DOM對象html

jQuery對象：把DOM對象包裝後就獲得jQuery對象java

二、jQuery對象與DOM對象之間的轉換jquery

2.一、如何獲取DOM對象:jQuery->DOM編程

$(spObj)[0].innerHTML數組

$(spObj).get(0).innerHTMLdom

2.二、如何將DOM對象轉換爲jQuery對象ide

$(spObj)測試

三、jQuery方式獲取頁面上的元素？

主要經過如下方法獲取jQuery對象

$('#id')

$('span')

$('.cls')

獲取後直接就是一個jQuery對象，經過jQuery對象便可調用jQuery的方法，例如

.text()

.val()

.html()

.css('color','red');

jQuery中大多都是方法，不多有屬性，由於屬性很難鏈式編程。獲取值、設置值都是使用同一個方法，有參數表示設置值，無參數表示取值

四、示例

4.一、使用DOM對象改變背景色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>jQuery測試</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(function(){
            //dom
            document.getElementById('btn').onclick = function(){
                //dom對象
                var divObj = document.getElementById('dv');
                divObj.style.backgroundColor = "red";
            };
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="變背景顏色"/>
    <div id="dv" style="width:300px;height:200px;border:solid 1px red;"></div>
</body>
</html>

效果圖

4.二、使用jQuery對象改變背景色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>jQuery測試</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(function(){
            //dom
            document.getElementById('btn').onclick = function(){
                //dom對象
                var divObj = document.getElementById('dv');
                //dom對象轉jQuery對象
                $(divObj).css('backgroundColor','red');
            };
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="變背景顏色"/>
    <div id="dv" style="width:300px;height:200px;border:solid 1px red;"></div>
</body>
</html>

4.三、使用jQuery註冊事件且改變背景色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>jQuery測試</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                $('#dv').css('backgroundColor','blue');
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="變背景顏色"/>
    <div id="dv" style="width:300px;height:200px;border:solid 1px red;"></div>
</body>
</html>

效果圖

五、哪些不須要轉jQuery對象

Array（數組）對象有沒有對應的jQuery對象？

數組自己就不是DOM對象。不存在與jQuery對象之間的轉換。

使用jQuery語句能夠直接使用數組，就像$.each()或$.map();

parseInt() Array這些是不須要轉換的。

補充

經過document.getElementsByTagName()或者document.getElementsByName()獲取的返回值是一個相似於數組的值，但不是數組，沒有數組特有的方法。