jQuery方法與jQuery選擇器

Question

我最近在jQuery中被分配了一個很小但很復雜的任務，鑒於以下HTML，要求非常簡單：

<div> 
   <span id="myid2151511" class="myclass23462362">....foobar....</span>
   <span id="myid2151512" class="myclass23462362">....YoLO....</span>
   <span id="myid2151513" class="myclass23462362">....lalal....</span>
   <span id="myid2151514" class="myclass23462362">....foobar....</span>
</div>

我需要做的是我遞歸地遍歷div下的所有范圍，並使用特定的ID並檢查范圍中包含的值是否為foobar ，因此我可以使用以下jQuery代碼：

$(function(){
     $('div [id^="myid"]:contains("foobar"):last').css({'background' : 'rgb(227, 216, 22)' })
});

在這里

就其本身而言，這是相當復雜的代碼，但是jQuery文檔對我來說是一個輕而易舉的事，因為對於理解代碼而言。

現在，我很喜歡在jQuery中編寫代碼：

$('some-Element').somemethod().anothermethod().yetanothermethod();

每個函數在上面的jQuery語句中都返回一個值，因此鏈接能力成為現實。

但是當我看到這樣的代碼時。

$('div [id^="myid"]:contains("foobar"):last').css({'background' : 'rgb(227, 216, 22)' });

我有點不高興（盡管我自己設法寫了上面的行），請注意選擇器:last和:contains是如何進行大量過濾的，對我來說，它們似乎在工作，就像某種jQuery方法。 所以我的問題是，與jQuery方法相比，jQuery中的這些選擇器如何工作？

如果有人可以解釋或給我一個模糊的想法，那就太好了。

編輯 ::

$(".someClass").eq('10');一行中向我闡明我的問題$(".someClass").eq('10'); 是有道理的，但是$(".someClass:eq(10)")不起作用，我的意思是它可以工作，但是它是如何在內部實現的？（我在閱讀了下面的答案后寫了這個編輯，還有這個問題到現在為止已經完全回答了，但是此編輯只是為了澄清我的問題。）

Answer 1

這是一個有趣的問題。 簡短的答案是，他們倆都完成同一件事。 當然，故事總會有更多。 一般來說：

$('div [id^="myid"]:contains("foobar"):last').css({'background' : 'rgb(227, 216, 22)' });

等效於：

$("div").find("[id^='myid']").filter(":contains('foobar')").last().css({'background' : 'rgb(227, 216, 22)' });

在大多數情況下，當您調用$（）時，jQuery會調用document.querySelectorAll() 。 這是瀏覽器實現的功能，可基於選擇器獲取元素。 您創建的復雜字符串將傳遞給此方法，並返回元素。

自然，瀏覽器實現的功能比JavaScript快，因此JavaScript越少C ++越多越好。 結果，將所有內容作為選擇器傳遞的示例可能會更快，因為它只是將所有內容作為一個調用發送到瀏覽器並告訴它“執行”。 另一方面，調用$() ， contains() ， last()將多次調用querySelectorAll ，因此它可能會比較慢，因為我們使用了更多的JavaScript，而不是讓瀏覽器一次完成繁重的工作。 但是也有例外。 jQuery 通常調用querySelectorAll 。 但是，有時卻並非如此。 這是因為jQuery擴展了querySelectorAll的功能。

例如，如果您根據jQuery文檔執行類似$(".someClass:eq(10)")的操作：

jQuery使用以下選擇器擴展了CSS3選擇器。 由於這些選擇器是jQuery擴展，而不是CSS規范的一部分，因此使用它們的查詢無法利用本機DOM querySelectorAll（）方法提供的性能提升。 為了在使用這些選擇器時獲得最佳性能，請首先使用純CSS選擇器選擇一些元素，然后使用.filter（）。

因此，在那種情況下，雖然$(".someClass:eq(10)")看起來更快，但實際上$(".someClass").eq(10)或$(".someClass").filter(":eq(10)")將更快，因為第一個調用將作為JavaScript代碼執行。 后兩者將首先調用querySelectorAll按類進行選擇，然后僅使用JavaScript查找第十個元素。 當jQuery必須使用純JavaScript進行選擇時，它使用Sizzle引擎進行選擇，該引擎速度非常快，但並不比瀏覽器中的本機代碼快。 再次，簡短的答案是，它們是同一回事，長答案是，這取決於。 如果您對屬於該類別的所有擴展都感興趣，那么到我包含的jQuery文檔的鏈接會列出它們。

Answer 2

首先，是的，尼克希爾是對的。 ID是唯一的標識符，只能使用一次。 如果您願意將相同的樣式應用於多個元素，或者要使用它來選擇多個元素，請一起使用class屬性。 但是，我聽不懂你的問題。 但這可能會有所幫助

javascript中有功能，幾乎所有主流瀏覽器都廣泛支持該功能

document.querySelectorAll("div [id^=myId]");

實際上，您可以編寫自己的庫（不是像jquery那樣高級的庫，但是）

var $ = function(selector){
    return document.querySelectorAll(selector);
}

// and then you could use it like this
var elementsWithMyId = $("div [id^=myId]");
// where elementsWithMyId will contain array of all divs which's id start with myId

因此，據我了解您的問題，不，在jQuery選擇之后沒有任何魔術發生，只是瀏覽器內置的功能而被jquery縮短了。 當然，他們添加了許多新功能，它們的工作方式如下：

var $ = function(selector){
    var elementsArray = document.querySelectorAll(selector);

    elementsArray.makeBlue = function(){
         for(var i = 0; i < elementsArray.length; i++){
             elementsArray[i].style.backgroundColor = "blue";
         }
         // so elementsArray will now have function to make all of its
         // div blues. but if you want to have chain like that, we have to return this array not just make all of it blue
        return elementsArray;
    }

    elementsArray.makeRed = function(){
         for(var i = 0; i < elementsArray.length; i++){
             elementsArray[i].style.backgroundColor = "red";
         }
        return elementsArray;
    }

    return elementsArray;
}

// so now you can use it like this

// this returns array which has options make blue, and make red so lets use make blue first
// makeBlue then returns itself, meaning it returns array which has again options of making itself red and blue so we can use makeRed now
$("div [id^=myId]").makeBlue().makeRed();

就是這樣！