js學習總結----核心解讀
阿新 • • 發佈:2017-07-18
log style 簡單 對象 charset color pan 通過 const
下面是對jquery源碼的簡單解讀:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //window.jQuery = window.$ = jQuery(jQuery就是那個閉包中的私有函數) //selector:[string]選擇器的類型 [object]JS原生的對象(把原生的對象轉換為jQuery對象) [function]回調函數(等價於$(document).ready...)//context:document(傳遞的是一個原生JS對象能夠修改上下文,如果是jQuery對象,它默認會把其重構為選擇器) var jQuery = function(selector,context){ return new jQuery.fn.init(selector,context);//我們可以把這個理解為返回的是一個jQuery類的實例 } jQuery.fn = jQuery.prototype = { constructor:jQuery } jQuery.extend= jQuery.fn.extend = function(){ //jQuery.extend:把它當做一個普通的對象,在對象中增加了extend方法 //jQuery.fn.extend:在它的原型上也增加了一個extend方法 } //jQuery選擇器:創建jQuery這個類的一個實例(jQuery對象) //在jQuery這個類的原型上定義了很多的屬性和方法,而通過選擇器獲取的每一個實例都可以調用這些方法:屬性、css、文檔操作、篩選、動畫、事件... $("*").css()//把jQuery當做一個普通的對象,在它自己的屬性上增加了一些常用的方法:Ajax、工具... //extend:擴展,向jQuery這個類庫中增加一些其他常用的方法 //1)、向jQuery屬性名上擴展(把他當做一個對象)->完善類庫,給類庫增加核心的方法 jQuery.extend({ aa:function(){ console.log("aa"); } }) $.aa(); //2)、向jQuery原型上擴展(把他當做一個類)->編寫一些基於jQuery的插件 jQuery.fn.extend({ bb:function(){ console.log("bb") } }) $().bb(); </script> </body> </html>
js學習總結----核心解讀