JQuery,ready,window.onload,選擇器,載入。 ...
——習慣貴在堅持,天才在於積累。
好久沒寫博客的我,似乎是忘記了當初寫博客的初衷是要在博客筆記中提升自己的寫作能力和積累自己的知識要點。
廢話不多說。
ready()方法作用:
在頁面載入完成後,立即執行指定的函數。這麼做的好處是可以減少頁面渲染的時間,加快頁面載入,提升用戶體驗(自己理解,如有不對,歡迎評論指正。)
ready()相比onload事件綁定函數的優勢:
具有較高優先順序,只需等到html結構載入完成後即可執行;而onload必須等到圖片在內的所有元素載入完畢後才執行。除了使用target選擇器時需要結合window.onload,大多數我們都可以使用ready()來進行編寫js代碼。
——————————————————重點內容分割線————————————————————
1.$().ready(()=>{ });
//自己最常寫的一種方式,結合了ES6的箭頭函數寫法。可能是寫久了習慣了,就忽然想看看到底有幾種其他寫法,希望對有這種突發奇想的朋友們有幫助。( 等價於$().ready(function(){ }) )
2.$(()=>{ });
//這是我發現了一個更簡潔的寫法,沒準以後會常用。
3.$(document).ready(()=>{ });
//這種寫法好像和第一種沒什麼區別,我想可能寫document的原因可能就是應為$符號的不穩定性,$()是一種選擇器,如果存在多個js庫時,可能會將控制權轉移給其他的js庫。
4.還有兩種寫法就是將上面的寫法中的$替換成JQuery。
換過來的用意是因為“$”符號並不是很穩定,而JQuery更能適應各種瀏覽器版本DOM。不過在我使用“$”期間基本沒出現過什麼問題,對於這個符號的用法所出現的現實問題,也就在編譯器Webstorm中會發出警告,對於轉移js庫的問題未出現過。不過基於個人現實情況而定,僅供參考。
——————————————————重點內容分割線————————————————————
註: ready()不能和window.onload共用。
參考鏈接:http://www.365mini.com/page/jquery-ready.htm
——歡迎各路大佬給予批評指正,同時歡迎補充和探討。