ready()、DOM對象、jQuery對象、DOM對象與jQuery對象的相互轉換 ...
jQuery是一個輕量級的JavaScript庫，擁有獨特的選擇器、出色的DOM操作、可靠的事件處理、完善的相容性、鏈式操作以及方便的ajax等功能。jQuery的最新版本可在官方網站（http://jquery.com）下載。
1.jQuery庫類型（2種）
|
名稱 |
類型 |
大小 |
說明 |
|
jquery.js |
開發版 |
約229KB |
完整無壓縮版本，主要用於測試、學習和開發 |
|
jquery.min.js |
生產版 |
約31KB |
經過工具壓縮或經過伺服器開啟Gzip壓縮，主要用於產品和項目 |
2. jQuery模板
<!-- JQuery.html --> <!DOCTYPE html> <html> <head> <title>Test JQuery</title> <script type="text/javascript" src="jquery-3.2.0.js"></script> </head> <body> <!-- add your code here. --> </body> </html>
3.$(document).ready()
該代碼作用類似於JavaScript中的Windows.onload()。不過兩者之間仍有以下區別:
|
|
windows.onload |
$(document).ready() |
|
執行時機 |
網頁載入完成後 |
DOM結構載入完成後(不必等頁面載入完成) |
|
編寫個數 |
最多1個 |
任意個 |
|
編碼形式 |
windows.onload = function(){ /*…*/}; |
$(document).ready(function(){/*…*/}); |
|
編碼簡寫 |
無 |
$(function(){/*…*/}); |
註意：在jQuery庫中，$就是jQuery的簡寫形式。
jQuery代碼必須寫在<script type="text/javascript"></script>標簽內。
3.1 實例：
<script type="text/javascript"> $(document).ready(function(){ alert("Hello JQuery"); }); </script>
簡寫形式：
<script type="text/javascript"> $(function(){ alert("Hello JQuery"); }); </script>
4.DOM對象和 jQuery對象
4.1 DOM對象(通過document獲取的element對象)
var question = document.getElementById(“question”);
4.2 jQuery對象 (通過$()獲取的對象)
註意： 為了方便識別jQuery變數，獲取jQuery對象的變數名前面應加上“$”.
var $question = $(“#question”);
5. jQuery對象與DOM對象的相互轉換
5.1 jQuery對象轉換成DOM對象
jQuery提供了兩種方法將jQuery對象轉換成DOM對象，即[index]和get(index).
5.1.1 [index]方法
var $question = $(“#question”); //jQuery對象 var question = $question[0]; //DOM對象
5.1.2 get(index)方法
var $question = $(“#question”); //jQuery對象 var question = $question.get(0); //DOM對象
5.2 DOM對象轉換成jQuery對象
jQuery對象本質上是就是通過jQuery包裝DOM對象後產生的對象所以只需要用$()把DOM對象包裝起來就可以獲得jQuery對象。
var question = document.getElementById(“question”); var $question = $(question);
註意：平時用到的jQuery對象都是通過$()函數創造出來的，$()函數就是一個jQuery對象的製造工廠。
如有紕漏，敬請聯繫！感謝您的支持。
