其他

作為聞名遐邇的選取器，Sizzle並不是人們所說的從右至左選擇那麼簡單的。本文將揭開其神秘的內幕，讓大家看看其令人驚歎的最佳化。在此之前，大家必需有一些概念，否則無法勾勒其輪廓。這些概念我在做類似的事，一點點總結出來的。總的來說，有如下幾個：種子選取器，候選集，映射集，迭代器，過濾器，切割器，查詢次數……由於CSS選取器的種類是如此繁多，加上jQuery的自訂偽類就更多，因此它們組成的運算式一定要加以拆分，才能工作。我們就拿一個簡單的CSS運算式著手吧。div

這個以前已經研究過了，但嫌速度不夠快，重新搞了一個。現在略略重申一下問題，比如有一個節點集合[a,b,c,d,e]，其中，a是b的父節點， d是b的父節點，我要的結果是去掉這些存在內含項目關聯性的節點中的被包含者，換言之，最終得到[c,d,e]。這裡可能用到contains函數：預先列出來吧。//http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583523.html var contains =

domReay，在DOM樹建完之前，所有添加的回調存到一個列隊中，待到DOM樹建完，依次執行它們，以後來一個執行一個。onload（使用多投事件）, 在頁面資源載入完之前，所有添加的回調存到一個列隊中，待到資源載入完畢，依次執行它們。由於每個頁面只有一次onload，因此頁面載入完後的再添加的回調不會再執行。window.addEventListner("click",function(){

在匹配類時，jQuery用於一種相對笨拙的方法，無論是目標節點的類名，還是運算式都要進行處理才能用。match = " " + match[1].replace(/\\/g, "") + " ";for (var i = 0, elem;(elem = curLoop[i]) != null; i++) { if ((elem.className && (" " + elem.className + " ").replace(/[\t\n\r]/g, "

從右至左選擇最大的好處有兩個:1、如果不出現並聯選取器的情況下了,經過一系列篩選後得到的結果就是自然按DOM樹的順序排列，2、之後的每次篩選的節點只會減少不會變多。 var reg_find =/(^[\w\u00a1-\uFFFF][\w\u00a1-\uFFFF-]*)|^(\*)|^#([\w\u00a1-\uFFFF-]+)|^\.([\w\u00a1-\uFFFF-]+)|^:(root)|^:(link)/ function

在IE8與opera10-中，數字一旦大於1342177.27,都將自動被變成1342177.27這個數，其他見下面的注釋部分。 var zooms = [ ["256px","256px"] , ["512px","512px"] , ["1024px","1024px"] , ["2048px","2048px"] , ["4096px","4096px"] , ["8192px","8192px"] , ["163

現在先撇開效能不談，就算是談效能，也是把函數迴圈成千上萬才看到幾毫秒的差距，因此我才不管它呢。我首先考慮的是類庫的大小，這就要求，不要才分膨脹其裡的函數。我在群裡提出的問題是，要為一個className為"aaa eee bbb"的元素節點添加多兩個類名，“aaa”,"ddd"，如果讓此實現儘可能的簡單，不能用架構，不能用for迴圈。經過一輪的跑題（主要如何用hash進行去重，總難免還是談到效能上），最好得到兩個比較好的方案： var str= 'aaa eee bbb aaa

位置偽類好像天生克從右至左的選取器，處理起來非常複雜，大抵有以下三種情況1、位置選取器出現群組的最後面。這種情況相對簡單，我們先跳過它，取得節點後再進行過濾，如“"div span:eq(0)” for (var selector ; selector = selectors[i++];) { /**********略**********/ /*遍曆DOM樹，收集合格節點*/ } /*如果選取器群組包含位置偽類，則進行篩選*/

真不知誰開了個壞頭，搞了什麼-xxx-首碼，CSS3上大量充斥著這樣的私人實現，因此檢測樣式變得非常麻煩。參考外國的一些實現，搞出自己的測試程式：//by 司徒正美//http://www.cnblogs.com/rubylouvre/archive/2011/03/28/1998223.html 　　　　　 var getStyleProperty = new function (css, el) { var prefixes = ['', '-

我在《javascript

我有一個需求，無論如何都要把動態建立的script標籤去掉，時機有四個，onload, ontimeout, onerror，因此需要檢測瀏覽器是否支援onerror事件。通過肉眼確認，IE6~8與opera11都不支援，safari,chrome,firefox,ie9支援，但opera是無法通過編程方式檢測opera的支援情況（在我的能力下，望高手指點）。 var el = document.createElement("script");

本文將一種嶄新的為JSONP添加onerror事件的跨瀏覽器解決方案。由於ie6~8及opera的script標籤不支援onerror事件，因此一般的類庫（包括jquery，及其他我所看到的庫）也無法處理它們的JSONP的onerror回調（下稱負向回調）。難道就沒有辦法嗎？經筆者發現，JSONP的回呼函數（下稱正向回調）總是在script的onload事件（IE為onreadystatechange）之前就被調用了。因此我們在正向回調執行之時，為script標籤添加一個屬性，然後待到onloa

option標籤的前兩個屬性估計大家比較常用，其中text是隱式定義的，相當於innerText或textContent，而value可以顯式定義，如果不定義，它預設與text相同。那麼label是什麼呢？它是用來決定option顯示的內容，雖然我們直接在它的開始標籤與結構標籤之間直接填寫內容，我們也可以用來label來填寫內容。 <select id="test"> <option

//標籤，ID 類 偽類 屬性的標識符 它們的主體部分，親子相鄰兄長並聯萬用字元，空白var reg = /[\w\u00a1-\uFFFF][\w\u00a1-\uFFFF-]*|[#.:\[][\w\(\)\]]+|\s*[>+~,*]\s*|\s+/g //讓小括弧裡面的東西不被切割var reg = /[\w\u00a1-\uFFFF][\w\u00a1-\uFFFF-]*|[#.:\[](?:[\w\u00a1-\uFFFF-]|\([^\)]*\)|\])+|(?

var autoSelect = function (el) { if (/textarea/i.test(el.tagName) || (/input/i.test(el.tagName) && /text/i.test(el.type))) { el.select(); } else if (!!window.getSelection) { // FF, Safari, Chrome, Opera var sel = window.getSelection()

CSS3支援動態計算一個元素的長度寬度，思路和以前的IE CSS運算式差不多，不過功能強大很多。它允許裡面的運算式支援+, -, *, /, mod, min, 和 max 運算子。如：width: calc(25% - 1em); 更多例子見這裡Robert Nyman給出的相容方案：.calc {width: 100px;height: 100px;border: 1px solid #f00;padding: 10px;/* Firefox */width: -moz-calc(75%

如果是在預先載入的情況下，即沒有把圖片插入DOM樹，它沒有受到CSS規則的影響，直接取其img.width與img.height就行了。可以參考〈a href="http://www.cnblogs.com/rt0d/archive/2011/04/17/2018646.html"〉這一篇博文，做得相當棒了。 function loadImage(url, callback) { var img = new Image(); img.onload

感覺jQuery1.5最大的改變有兩個，jQuery子類與非同步列隊，本文只談jQuery子類。首先要明白為何要推出此功能，是強化它那基本為零的OO功能嗎？不是，從下面的源碼你應該知道它不是讓你自訂類。但這也是個愚蠢的問題，因為這樣，這方法就叫Class，而不是subclass。subclass: function(){function jQuerySubclass( selector, context ) {return new jQuerySubclass.fn.init(

如果是從左至右，我們想過濾一些節點，就用現在手頭上的節點就行了，但從右至左，我們就需要根據這些節點的父親、孩子、兄弟進行過濾，而且過濾後，這些用作比較的節點不能丟棄掉,它們可以還要用於下一次的過濾。這樣就存在一個代理關係，我們需要一些代理器來幹這事情。當然像div.aaa是不需要代理器，但div

以前我就是一篇博文就給出一個好用的函數，它在我幾篇博文中被廣泛運用的。最近看了不少東西，於是便有了這篇博文，以梳理我學到的新東西。毫無疑問，基於表現與結構相分離的原則，直接匯入一個新的樣式表是最好的選擇，但有些情況就行不通，如我們做一個能拖動的DIV，從設定樣式的角度看，就是把它絕對位置，以防影響原來的文檔流，然後一點點改變其top與left的值實現移動的效果。由於拖動是有時間概念的，一秒24幀，樣式表不可能面面俱到都把它們寫進去。因此動態產生樣式規則與快速修改樣式規則是非常有必要的，W3C為此