-
jQuery的each迭代器 jQuery的each方法從使用上就要分2種情況： ? $.each()函數 ? $(selector).each() $.each()函數和$(selector).each()是不一樣的，后者是專門用來遍歷一個jQuery對象的，是為jQuery內部服務的。 $.each()函數可用于迭代任何集合，無論是“名/值”對象（JavaScript對象）或數組。在迭代數組的情況下，回調函數每次傳遞一個數組索引和相應的數組值作為參數。（該值也可以通過訪問this關鍵字得到，但是JavaScript始終將this值作為一個Object，即使它是一個簡單的字符串或數字值。）該方法返回其第一個參數，這是迭代的對象。 jQuery的實例方法最終也是調用的靜態方法，我們在之前就解釋過jQuery的實例與原型方法共享的設計。 其中each的實例方法如下： 可見內部是直接調用的靜態方法： each: function(callback, args) { return jQuery.each(this, callback, args); },查看全部
-
我們簡單的修改一下上面的代碼： function each(obj, callback, context, arg) { var i = 0; var value; var length = obj.length; for (; i < length; i++) { callback.call(context || null, obj[i], arg); } } var arr = ['a', 'b', 'c']; each(arr, function(name, arg) { console.log(name, arg ,this); }, this, 'aaa') 當然根據回調的處理，從而判斷是否要立刻中斷這個循環，從而節約性能，也是很簡單的，我們可以通過獲取處理的返回值來處理，如下代碼： function each(obj, callback, context, arg) { var i = 0; var value; var length = obj.length; for (; i < length; i++) { value = callback.call(context || null, obj[i], arg); if (value === false) { break; } } 可見只要通過回調函數callback返回的ture/false的布爾值結果就可以來判斷當前是否要強制退出循環。查看全部
-
迭代器 迭代器是一個框架的重要設計。我們經常需要提供一種方法順序用來處理聚合對象中各個元素，而又不暴露該對象的內部，這也是設計模式中的迭代器模式(Iterator)。 jQuery中的$.each方法就是一個典型的迭代器，通過each我們可以傳入額外的function，然后來對所有的item項進行迭代操作，如下代碼： $.each([52, 97], function(index, value) { alert(index + ': ' + value); }); $( "li" ).each(function( index ) { console.log( index + ": "" + $(this).text() ); }); 針對迭代器，這里有幾個特點： ? 訪問一個聚合對象的內容而無需暴露它的內部。 ? 為遍歷不同的集合結構提供一個統一的接口，從而支持同樣的算法在不同的集合結構上進行操作。 ? 遍歷的同時更改迭代器所在的集合結構可能會導致問題。 簡單的說：封裝實現，然后迭代器的聚合對象不用關心迭代的過程，從而符合SRP原則。 拋開jQuery的each方法，我們自己實現一個有簡單的迭代器功能的代碼： 1、簡單回調 function each(obj, callback) { var i = 0; var value; var length = obj.length; for (; i < length; i++) { callback(obj[i]); } } var arr = ['a', 'b', 'c']; each(arr, function(name) { console.log(name); }) 這樣就滿足了迭代模式的設計原則，對于集合內部結果常常變化各異，我們不想暴露其內部結構，但又想讓客戶代碼透明地訪問其中的元素，通過回調把邏輯給解耦出來。但是這樣的處理其實太簡單了，我們還要考慮至少四種情況： ? 聚合對象，可能是對象，字符串或者數組等類型 ? 支持參數傳遞 ? 支持上下文的傳遞 ? 支持循環中退出查看全部
-
jQuery的考慮很周到，通過eq方法只能產生一個新的對象，但是如果需要的是一個合集對象要怎么處理？因此jQuery便提供了一個slice方法： 語法： .slice( start [, end ] ) 作用： 根據指定的下標范圍，過濾匹配的元素集合，并生成一個新的 jQuery 對象。 因為是數組對象，意味著我們可以用silce來直接取值了，所以針對合集對象我們可以這樣寫代碼： var arr = [] arr.push( this.slice(start[,end]) ) this.pushStack（arr） 這個this指的是jQuery對象，因為jQuery對象是數組集合，所以我們可以通過原生的silce方法直接取到集合數，然后通過包裝處理即可了。 slice: function() { return this.pushStack( slice.apply( this, arguments ) ); },查看全部
-
get與eq的區別 .eq() 減少匹配元素的集合，根據index索引值，精確指定索引對象。 .get() 通過檢索匹配jQuery對象得到對應的DOM元素。 同樣是返回元素，那么eq與get有什么區別呢？ eq返回的是一個jQuery對象，get返回的是一個DOM對象。舉個例子： $( "li" ).get( 0 ).css("color", "red"); //錯誤 $( "li" ).eq( 0 ).css("color", "red"); //正確 get方法本質上是把jQuery對象轉換成DOM對象，但是css屬于jQuery構造器的，DOM是不存在這個方法的，如果需要用jQuery的方法，我們必須這樣寫： var li = $( "li" ).get( 0 ); $( li ).css("color", "red"); //用$包裝 取出DOM對象li，然后用$再次包裝，使之轉變成jQuery對象，才能調用css方法，這樣要分2步寫太麻煩了，所以jQuery給我們提供了一個便捷方法eq()。 eq()的實現原理就是在上面代碼中的把eq方法內部轉成jQuery對象： eq: function( i ) { var len = this.length, j = +i + ( i < 0 ? len : 0 ); return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] ); 上面實現代碼的邏輯就是跟get是一樣的，區別就是通過了pushStack產生了一個新的jQuery對象。查看全部
-
jQuery提供了.get()、:index()、 :lt()、:gt()、:even()及 :odd()這類索引值相關的選擇器，他們的作用可以過濾他們前面的匹配表達式的集合元素，篩選的依據就是這個元素在原先匹配集合中的順序。 我們來分別看一下這幾個選擇器的實現原理: get方法--是通過檢索匹配jQuery對象得到對應的DOM元素，如下代碼實現： get: function(num) { return num != null ? // Return just the one element from the set (num < 0 ? this[num + this.length] : this[num]) : // Return all the elements in a clean array slice.call(this); } 原理很簡單，因為jQuery查詢出來的是一個數組的DOM集合，所以就可以按照數組的方法通過下標的索引取值，當然如果num的值超出范圍，比如小于元素數量的負數或等于或大于元素的數量的數，那么它將返回undefined。 假設我們頁面上有一個簡單的無序列表，如下代碼： <ul> <li id="foo">foo</li> <li id="bar">bar</li> </ul> 如果指定了index參數，.get()則會獲取單個元素，如下代碼： console.log( $( "li" ).get( 0 ) ); 由于索引 index 是以 0 開始計數的，所以上面代碼返回了第一個列表項<li id="foo">foo</li>。 然而，這種語法缺少某些 .get() 所具有的附加功能，比如可以指定索引值為負值： console.log( $( "li" ).get(-1) ); 負的索引值表示從匹配的集合中從末尾開始倒數，所以上面這個例子將會返回列表中最后一項：<li id="bar">bar</li>。 由于是數組的關系，所以我們有幾個快速方法，比如頭跟尾的取值： first: function() { return this.eq( 0 ); }, last: function() { return this.eq(-1); },查看全部
-
$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green'); 鏈式的原理就是要返回當前操作的上下文。查看全部
-
回溯處理的設計： aaron.find('li').click(function() { alert(1); }).end().click(function() { alert(2); }) jQuery為我們操作這個內部對象棧提供個非常有用的2個方法 .end() .addBack()查看全部
-
jQuery整體架構 任何程序代碼不是一開始就復雜的，成功也不是一躇而蹴的，早期jQuery的作者John Resig在2005年提議改進Prototype的“Behaviour”庫時，只是想讓其使用更簡單才發布新的jQuery框架。起初John Resig估計也沒料想jQuery會如此的火熱。我們可以看到從發布的第一個1.0開始到目前最新的2.1.1其代碼膨脹到了9000多行，它兼容CSS3，還兼容各種瀏覽器，jQuery使用戶能更方便地處理DOM、事件、實現動畫效果，并且方便地為網站提供AJAX交互。查看全部
-
jQuery對象的構建如果在性能上考慮，所以就必須采用原型式的結構： jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); } jQuery.fn = jQuery.prototype = { init：function(){ return this }, jquery: version, constructor: jQuery, ……………… } var a = $() ; 使用原型結構，性能上是得到了優化，但是ajQuery類這個結構與目標jQuery的結構的還是有很大不一致： ? 沒有采用new操作符； ? return返回的是一個通過new出來的的對象 。查看全部
-
函數在充當類的構造器時，原型prototype是一個重要的概念。prototype是構造函數的一個屬性, 該屬性指向一個對象。而這個對象將作為該構造函數所創建的所有實例的基引用(base reference), 可以把對象的基引用想像成一個自動創建的隱藏屬性。 當訪問對象的一個屬性時, 首先查找對象本身, 找到則返回；若不, 則查找基引用指向的對象的屬性(如果還找不到實際上還會沿著原型鏈向上查找, 直至到根)。 只要沒有被覆蓋的話, 對象原型的屬性就能在所有的實例中找到。 類一： function ajQuery() { this.name = 'jQuery'; this.sayName = function(){ return this.name } var a = new ajQuery() var b = new ajQuery() var c = new ajQuery() 類二: function ajQuery() { this.name = 'jQuery' } ajQuery.prototype = { sayName: function() { return this.name } } var a = new ajQuery() var b = new ajQuery() var c = new ajQuery() 類一與類二產生的結構幾乎是一樣的，而本質區別就是：類二new產生的a、b、c三個實例對象共享了原型的sayName方法，這樣的好處節省了內存空間，類一則是要為每一個實例復制sayName方法，每個方法屬性都占用一定的內存的空間，所以如果把所有屬性方法都聲明在構造函數中，就會無形的增大很多開銷，這些實例化的對象的屬性一模一樣，都是對this的引用來處理。除此之外類一的所有方法都是拷貝到當前實例對象上。類二則是要通過scope連接到原型鏈上查找，這樣就無形之中要多一層作用域鏈的查找了。查看全部
-
Var _jQuery = window.jQuery, _$ = window.$; jQuery.noConflict = function( deep ) { if ( window.$ === jQuery ) { window.$ = _$; } if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; } return jQuery; }; 如果我們需要同時使用jQuery和其他JavaScript庫，我們可以使用 $.noConflict()把$的控制權交給其他庫。舊引用的$ 被保存在jQuery的初始化; noConflict() 簡單的恢復它們。 通過類似swap交換的概念，先把之前的存在的命名空間給緩存起來，通過對比當前的命名空間達到交換的目的，首先，我們先判斷下當前的的$空間是不是被jQuery接管了，如果是則讓出控制權給之前的_$引用的庫，如果傳入deep為true的話等于是把jQuery的控制權也讓出去了。查看全部
-
如果我們需要同時使用jQuery和其他JavaScript庫，我們可以使用 $.noConflict()把$的控制權交給其他庫。舊引用的$ 被保存在jQuery的初始化; noConflict() 簡單的恢復它們。 通過類似swap交換的概念，先把之前的存在的命名空間給緩存起來，通過對比當前的命名空間達到交換的目的，首先，我們先判斷下當前的的$空間是不是被jQuery接管了，如果是則讓出控制權給之前的_$引用的庫，如果傳入deep為true的話等于是把jQuery的控制權也讓出去了。查看全部
-
DOM文檔加載步驟: 1. 解析HTML結構 2. 加載外部腳本和樣式表文件 3. 解析并執行腳本代碼 4. 構造HTML DOM模型 // ready 4完成后，$(document).ready(function() {//...}); 或 $(function() {//...})執行 5. 加載圖片等外部文件 6. 頁面加載完畢 // load 6完成后，$(document).load(function() {//...});執行查看全部
-
首先我們看jQuery的入口都是統一的$, 通過傳遞參數的不同，實現了9種方法的重載： 1. jQuery([selector,[context]]) 2. jQuery(element) 3. jQuery(elementArray) 4. jQuery(object) 5. jQuery(jQuery object) 6. jQuery(html,[ownerDocument]) 7. jQuery(html,[attributes]) 8. jQuery() 9. jQuery(callback) 9種用法整體來說可以分三大塊：選擇器、dom的處理、dom加載。 換句話說jQuery就是為了獲取DOM、操作DOM而存在的！所以為了更方便這些操作，讓節點與實例對象通過一個橋梁給關聯起來，jQuery內部就采用了一種叫“類數組對象”的方式作為存儲結構，所以我們即可以像對象一樣處理jQuery操作，也能像數組一樣可以使用push、pop、shift、unshift、sort、each、map等類數組的方法操作jQuery對象了。查看全部
舉報
0/150
提交
取消