(好記性不如爛筆頭,這裏的開發筆記大多數是自己開發過程中所學知識點的記錄,以備後用。也有部分內容爲他人原創,自己查閱資料時copy過來,在這裏說明版權歸屬與原創作者,感謝原始作者的分享。)
$(document).ready(function())是jquery最終更要的一個事件:
1、window.onload 和 $(document).ready(function())的區別
A、我們實際最容易發現的就是兩者的可同時存在個數
對於window.onload來說只能同時存在一個
對於 $(document).ready(function())可以同時存在多個,順序執行
B、是否有簡寫形式
window.onload沒有
$(document).ready(function())有$(function())
C、最重要的一個區別是二者的執行時機
window.onload是頁面中所有元素(包含元素關聯的所有文件)都加載完畢後才執行。
而通過jQuery的$(function()),在DOM完全就緒時就可以被調用,此時頁面上的所有元素對於jQuery而言都是可以訪問的,但是這並不意味這這些元素的關聯文件都已經加載完畢。
舉個例子來說,有一個大型圖庫網站,加載頁面的時候爲所有圖片添加了某些樣式。當我們使用window.onload的時候,需要等到頁面上所有的圖片都加載出來之後才執行給圖片添加樣式的行爲。而用$(function()),那麼只需要DOM就緒就可以執行了,不需要等待所有圖片加載完畢,顯而易見,$(function())相比於window.onload效果更好,它能提高web頁面的加載速度。
2、jQuery對象就是通過jQuery包裝DOM對象後產生的對象,jQuery對象是jQuery獨有的,只要是jQuery對象就可以使用jQuery提供的方法
$("#foo").html() //獲取id爲foo的元素內的html代碼 html()是jQuery內的方法。
注意:jQuery對象只能使用jQuery中提供的方法,不能使用DOM對象的方法,DOM對象只能使用JavaScript提供的方法,不能使用jQuery提供的方法。
jQuery對象與DOM對象的相互轉換
在考慮兩者之間的相互轉換之前先約定好定義變量的風格。如果獲取的對象爲jQuery對象那麼就在定義的變量前面加上$。例如
- var $variable=jQuery對象;
- var variable=DOM對象;
(1)、jQuery對象轉換成DOM對象:
當我們對jQuery封裝的方法不能完全掌握或者jQuery沒有封裝的方法,那麼我們需要將jQuery對象轉換成DOM對象,然後調用JavaScript對象中的方法,jQuery提供了兩種方法將jQuery對象轉換成DOM對象,即index[] ,get(index)
A、jQuery對象是一個數組對象,可以通過[index]將其轉換成DOM對象:
- var $cr=$("#id"); //jQuery對象
- var cr=$cr[0]; //DOM對象
B、另一種方法是jQuery本身提供的,通過get(index)方法得到DOM對象