C# list distinct操作


querySelector和querySelectorAll

 

jQuery被開發者如此的青睞和它強大的選擇器有很大關系,比起笨重的document.getElementById、document.getElementByName… ,查找元素很方便,其實W3C中提供了querySelector和querySelectorAll查詢接口已經實現了類似功能。

定義

其實這兩個方法看名字就能明白什么意思,不過還是引用一下W3C的解釋

querySelector:return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null .(返回指定元素節點的子樹中匹配選擇器的集合中的第一個元素,如果沒有匹配返回null)

querySelectorAll:return a NodeList containing all of the matching Element nodes within the node’s subtrees, in document order. If there are no such nodes, the method must return an empty NodeList. (按文檔順序返回指定元素節點的子樹中匹配選擇器的元素集合,如果沒有匹配返回空集合)

從定義可以看到Document和Element都實現了NodeSelector接口。即這三種類型的元素都擁有者兩個方法。querySelector和querySelectorAll的參數是CSS選擇器字符串。區別在於querySelector返回的是一個第一個匹配元素,querySelectorAll返回的一個所有匹配元素集合(NodeList)。

用法

如果使用過jQuery或者了解CSS,這兩個方法使用很簡單,傳入選擇器即可

復制代碼
<div id="test">
        <div class="dialog">
            <p>
                123</p>
            <span>456</span>
            <div>
                789</div>
            <div class="text">
                452</div>
        </div>
    </div>
復制代碼
var test=document.querySelector('#test');
        var subDivs = test.querySelectorAll('div');
        var text = document.querySelectorAll('div[class=text]');

image

缺陷及解決辦法

確實很好用,但是瀏覽器對Element.querySelector和Element.querySelectorAll的實現有錯誤,看個例子

<div id="test">
        <p>
            <span>123</span>
        </p>
    </div>
var test=document.querySelector('#test');
        var span = test.querySelectorAll('div span');

按照我們的理解span因該是搜索test內部祖先元素為div的span元素,但是其祖先必須在test內部,而不能包括test本身甚至test的父元素,所以應該返回空基赫才對,但是瀏覽器會返回

image

大神Andrew Dupont提出了一種方法修復這個bug,被廣泛應用到各個框架中,在selector前面指定調用元素的id,限制匹配范圍。在jQuery中大概是這么個意思

復制代碼
var span, selector = 'div span',context=document.querySelector('#test');

        var oldContext = context,
        oldId = context.getAttribute('id'),
        newId = oldId || '__sizzle__';
        try {
            span= context.querySelectorAll('#'+newId+' '+selector);
        } catch (e) {
            
        } finally {
            if (!oldId) {
                oldContext.removeAttribute('id');
            }
        }
復制代碼

這樣做其實是給搜索加了一層id的限制,巧妙的利用了這個bug,得到正確結果

image

瀏覽器兼容性

雖然有些問題,但瑕不掩瑜,這么好用的兩個方法咋沒火呢?瀏覽器兼容性。。。其實比起一些HTML5和CSS3的特性來說這兩個方法還沒那么讓人絕望,因為IE8都已經支持了,其它各個主力主流瀏覽器自然是實現了。

IE8+

Firefox

Chrome

Safari

Opera

Android

所以騷年們如果你是針對Mobile web優化,不要引用jQuery了,直接使用這兩個方法吧

 
投遞人 曾經的夢  發布於 2013-10-10 23:01  評論(6)  有1650人閱讀   原文鏈接   [收藏]   «  »

  英文原文:Enter the Dragon: RyuJIT Project Yields New Compiler for NET

  作者 :Jeff Martin,譯者:孫鏡濤

  Microsoft 正在開發一個新的即時(Just-In-Time,JIT)編譯器,該編譯器最終會被用於運行 .NET 應用程序。新編譯器的代號為“RyuJIT”,它標志着設計哲理的變化。現在的 64 位 JIT 編譯器是為了支持在服務器環境中發現的操作配置文件而設計的,這種情況下的執行性能要優於啟動性能。為了獲得額外的性能提升它還依賴了像 NGen 和后台 JIT 這樣的支持技術。但是 RyuJIT 的設計目標考慮了 64 位代碼在服務器之外的計算平台上的流行程度。因此,與現在的 x64 JIT 相比,RyuJIT 強調整體的性能提升,包括縮短了應用程序啟動時間。

  Microsoft 從事 RyuJIT 項目的一位程序經理 Andrew Pardoe 注意到,一直到現在為止 .NET CodeGEN 團隊一直在管理兩個獨立的代碼庫,一個針對 X64 .NET JIT 編譯器,一個針對 X86 .NET JIT 編譯器。RyuJIT 是基於目前 X86 .NET JIT 編譯器代碼庫的。它的最終目標是讓 RyuJIT 項目成為現在以及將來所有架構(X86、 X64、ARM 等)上的 .NET JIT 編譯器。現在的 RyuJIT 僅支持 X64 架構,同時還有一個針對 64 位 Windows 8.1 和 Windows Server 2012 R2 的社區技術預覽版(CTP)。

  安裝了 CTP 之后你將能夠根據自己的需要體驗新的編譯器,它並不會替代現在正在使用的 X64 JIT 編譯器。如果想要使用 RyuJIT 有兩種方式可以選擇,或者使用下面的環境變量:COMPLUS_AltJit=*;或者創建一個新的值為*的字符串注冊表鍵 HKEY_Local_Machine\SOFTWARE\Microsoft\.NETFramework\AltJit 。注意,RyuJIT 現在並不支持編輯並繼續(Edit & Continue),但是將來的版本將會支持該功能。Microsoft 的 Kevin Frei 聲明說,雖然現在的 RyuJIT 僅支持 Windows 8.1 和 Server 2012 R2,但是最終版本的 RyuJIT 將會是完整 .NET 運行時的一部分,在 .NET 支持的所有平台上都將獲得完整的支持。

 
分類:  JavaScript


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM