-
sizzle:將近兩千行代碼,主要實現一個復雜選擇器的。實現比較復雜。 比如:$("ul li + p input.class") 就是通過sizzle來查詢的。 sizzle是獨立的部分,在jquery官網可以單獨下載這部分代碼。查看全部
-
jQuery.extend擴展一些工具方法。 兩種調用方法: $().css() =>實例方法 $.trim =>工具方法、靜態方法 靜態方法是底層的東西,實例方法是更高一層的方法 很多實例方法中調用的是靜態方法查看全部
-
extend是JQ的繼承方法。 后續添加的方法可以用extend來加載到jQuery中。查看全部
-
通過下面的方法將jquery中定義的函數掛載到window對象上,這樣就可以供外界使用了: window.jQuery=window.$=jQuery; 所以說,在外界使用時,jQuery和$是一樣的。查看全部
-
把所有的代碼都寫在 自執行 函數里面,這樣外面是看不到這個函數里定義的變量或者函數,這樣可以防止沖突查看全部
-
jQuery設計理念 引用百科的介紹: jQuery是繼prototype之后又一個優秀的Javascript框架。它是輕量級的js庫 ,它兼容CSS3,還兼容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML(標準通用標記語言下的一個應用)、events、實現動畫效果,并且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離,也就是說,不用再在html里面插入一堆js來調用命令了,只需定義id即可。 The Write Less,Do More(寫更少,做更多),無疑就是jQuery的核心理念,簡潔的API、優雅的鏈式、強大的查詢與便捷的操作。從而把jQuery打造成前端世界的一把利劍,所向披靡! 簡潔的API: $.on $.css $.ajax …. 優雅的鏈式: var jqxhr = $.ajax( "example.php" ) .done(function() { alert("success"); }) .fail(function() { alert("error"); }) .always(function() { alert("complete"); }); 強大的選擇器: $("div, span, p.myClass" ) $("div span:first-child") $("tr:visible") … 便捷的操作: $("p").removeClass("myClass noClass").addClass("yourClass"); $("ul li:last").addClass(function(index) { return"item-" + index; }); $('.container').append($('h2')); …查看全部
-
五大塊: jQuery按我的理解分為五大塊,選擇器、DOM操作、事件、AJAX與動畫,那么為什么有13個模塊?因為jQuery的設計中最喜歡的做的一件事,就是抽出共同的特性使之“模塊化”,當然也是更貼近S.O.L.I.D五大原則的“單一職責SRP”了,遵守單一職責的好處是可以讓我們很容易地來維護這個對象,比如,當一個對象封裝了很多職責的時候,一旦一個職責需要修改,勢必會影響該對象的其它職責代碼。通過解耦可以讓每個職責更加有彈性地變化。 我們來看看jQuery文檔針對業務層的Ajax的處理提供了一系列的門面接口: .ajaxComplete() .ajaxError() .ajaxSend() .ajaxStart() .ajaxStop() .ajaxSuccess() 底層接口: jQuery.ajax() jQuery.ajaxSetup() 快捷方法: jQuery.get() jQuery.getJSON() jQuery.getScript() jQuery.post() jQuery接口的設計原理 業務邏輯是復雜多變的,jQuery的高層API數量非常多,而且也非常的細致,這樣做可以更友好的便于開發者的操作,不需要必須在一個接口上重載太多的動作。我們在深入內部看看Ajax的高層方法其實都是統一調用了一個靜態的jQuery.ajax方法,代碼見右側代碼編輯器(27-43行)。 在jQuery.ajax的內部實現是非常復雜的,首先ajax要考慮異步的處理與回調的統一性,所以就引入了異步隊列模塊(Deferred)與回調模塊(Callbacks), 所以要把這些模塊方法在ajax方法內部再次封裝成、構建出一個新的jQXHR對象,針對參數的默認處理,數據傳輸的格式化等等。查看全部
-
jQuery整體架構 任何程序代碼不是一開始就復雜的,成功也不是一躇而蹴的,早期jQuery的作者John Resig在2005年提議改進Prototype的“Behaviour”庫時,只是想讓其使用更簡單才發布新的jQuery框架。起初John Resig估計也沒料想jQuery會如此的火熱。我們可以看到從發布的第一個1.0開始到目前最新的2.1.1其代碼膨脹到了9000多行,它兼容CSS3,還兼容各種瀏覽器,jQuery使用戶能更方便地處理DOM、事件、實現動畫效果,并且方便地為網站提供AJAX交互。 1、最新jQuery2.1.1版本的結構: 代碼請查看右側代碼編輯器(1-24行) 2、jQuery的模塊依賴網: (單擊圖片可放大) jQuery一共13個模塊,從2.1版開始jQuery支持通過AMD模塊劃分,jQuery在最開始發布的1.0版本是很簡單的,只有CSS選擇符、事件處理和AJAX交互3大塊。其發展過程中,有幾次重要的變革: ? 1.2.3 版發布,引入數據緩存,解決循環引用與大數據保存的問題 ? 1.3 版發布,它使用了全新的選擇符引擎Sizzle,在各個瀏覽器下全面超越其他同類型JavaScript框架的查詢速度,程序庫的性能也因此有了極大提升 ? 1.5 版發布,新增延緩對像(Deferred Objects),并用deferred重寫了Ajax模塊 ? 1.7 版發布,抽象出回調對象,提供了強大的的方式來管理回調函數列表。 每一次大的改進都引入了一些新的機制、新的特性,通過這些新的機制就造就了如今jQuery庫,一共13個模塊,模塊不是單一的,比如jQuery動畫,都會依賴異步隊列、動畫隊列、回調隊列與數據緩存模塊等。 jQuery抽出了所有可復用的特性,分離出單一模塊,通過組合的用法,不管在設計思路與實現手法上jQuery都是非常高明的。查看全部
-
undefined并不是JavaScript的保留字。查看全部
-
但因為匹配的情況遠遠低于不匹配的情況,所以逆向匹配帶來的優勢是巨大的。同時我們也能夠看出,在選擇器結尾加上「*」就大大降低了這種優勢,這也就是很多優化原則提到的盡量避免在選擇器末尾添加通配符的原因。查看全部
-
一個是ready一個是load,這兩個到底有什么區別呢? ready與load誰先執行: 大家在面試的過程中,經常會被問到一個問題:ready與load那一個先執行,那一個后執行?答案是ready先執行,load后執行。 DOM文檔加載的步驟: 要想理解為什么ready先執行,load后執行就要先了解下DOM文檔加載的步驟: (1) 解析HTML結構。 (2) 加載外部腳本和樣式表文件。 (3) 解析并執行腳本代碼。 (4) 構造HTML DOM模型。//ready (5) 加載圖片等外部文件。 (6) 頁面加載完畢。//load ready與load的區別就在于資源文件的加載,ready構建了基本的DOM結構,所以對于代碼來說應該越快加載越好。所以對于框架來說用戶體驗是至關重要的,我們應該越早處理DOM越好,我們不需要等到圖片資源都加載后才去處理框架的加載,圖片資源過多load事件就會遲遲不會觸發。 我們看看jQuery是如何處理文檔加載時機的問題: jQuery.ready.promise = function( obj ) { if ( !readyList ) { readyList = jQuery.Deferred(); if ( document.readyState === "complete" ) { // Handle it asynchronously to allow scripts the opportunity to delay ready setTimeout( jQuery.ready ); } else { document.addEventListener( "DOMContentLoaded", completed, false ); window.addEventListener( "load", completed, false ); } } return readyList.promise( obj ); };查看全部
-
1:匿名函數格式:要調用一個函數,我們必須要有方法定位它、引用它。所以,我們要取一個名字 jQuery使用()將匿名函數括起來,然后后面再加一對小括號(包含參數列表),那么這小括號能把我們的表達式組合分塊,并且每一塊(也就是每一對小括號),都有一個返回值。這個返回值實際上也就是小括號中表達式的返回值。所以,當我們用一對小括號把匿名函數括起來的時候,實際上小括號返回的,就是一個匿名函數的Function對象。因此,小括號對加上匿名函數就如同有名字的函數般被我們取得它的引用位置了。所以如果在這個引用變量后面再加上參數列表,就會實現普通函數的調用形式。 var jQuery = function(){ //代碼邏輯 } 2:其實這個undefined并不是JavaScript數據類型的undefined,而是一個普普通通的變量名。只是因為沒給它傳遞值,它的值就是undefined,undefined并不是JavaScript的保留字。 3:jQuery為什么要創建這樣的一個外層包裹,其原理又是如何? 這里要區分2個概念一個是匿名函數,一個是自執行。顧名思義,匿名函數,就是沒有函數名的函數,也就是不存在外部引用。查看全部
-
理解回調函數最重要的2點: 1、一個回調函數作為參數傳遞給另一個函數是,我們僅僅傳遞了函數定義。我們并沒有在參數中執行函數。我們并不傳遞像我們平時執行函數一樣帶有一對執行小括號()的函數 2、回調函數并不會馬上被執行,它會在包含它的函數內的某個特定時間點被“回調”。查看全部
-
通過new操作符構建一個對象,一般經過四步: A.創建一個新對象 B.將構造函數的作用域賦給新對象(所以this就指向了這個新對象) C.執行構造函數中的代碼 D.返回這個新對象查看全部
-
DOM文檔加載的步驟: (1) 解析HTML結構。 (2) 加載外部腳本和樣式表文件。 (3) 解析并執行腳本代碼。 (4) 構造HTML DOM模型。//ready (5) 加載圖片等外部文件。 (6) 頁面加載完畢。//load查看全部
舉報
0/150
提交
取消