методы JQuery Vs 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, с определенным идентификатором и проверьте значения, содержащиеся в пролетах является foobar, так что я могу с помощью следующего кода JQuery:

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

FIDDLE HERE

Его довольно сложный фрагмент кода сам по себе, но документация 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?

Если кто-нибудь может объяснить или дать мне смутное представление, это будет фантастично.

EDIT ::

хорошо прояснить мой вопрос в одной строке, мне $(".someClass").eq('10'); имеет смысл, но как-то $(".someClass:eq(10)") does't, я имею в виду это работает, но как на земле, она реализуется внутри? (Я написал это редактирование после прочтения ответов ниже, и этот вопрос на этот вопрос был полностью отреагирован, но это изменение просто для того, чтобы прояснить мой вопрос.).

Answer 1

Прежде всего, да, никил был прав. 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(); 

и вот оно!

Answer 2

Это интересный вопрос. Короткий ответ: они оба выполняют одно и то же. Конечно, в истории всегда больше. В общем:

$('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++, тем лучше. В результате ваш пример, передающий все как селектор, скорее всего, будет быстрее, так как он просто отправляет все браузеру в качестве одного вызова и говорит ему «сделайте это». Вызов $(), , last(), с другой стороны, будет называть querySelectorAll несколько раз, и поэтому он, скорее всего, будет медленнее, так как мы делаем больше JavaScript, а не позволяем браузеру делать тяжелый подъем одним выстрелом. Однако есть исключения. JQuery обычно звонки querySelectorAll. Однако бывают случаи, когда этого не происходит. Это связано с тем, что jQuery расширяет то, на что способен querySelectorAll.

Например, если вы делаете что-то вроде $(".someClass:eq(10)") согласно jQuery documentation:

JQuery продлил CSS3 селекторы со следующими селекторов. Поскольку эти селекторы являются расширением jQuery, а не частью спецификации CSS, запросы, использующие их, не могут воспользоваться повышением производительности, предоставляемым встроенным методом DOM querySelectorAll(). Чтобы добиться максимальной производительности при использовании этих селекторов, сначала выберите некоторые элементы, используя чистый селектор CSS, а затем используйте .filter().

Таким образом, в этом случае, в то время как $(".someClass:eq(10)") может показаться быстрее, в действительности $(".someClass").eq(10)$(".someClass").filter(":eq(10)") или будет быстрее, так как первый вызов будет выполнен в виде кода JavaScript. Последние два сначала вызовут querySelectorAll, чтобы выбрать по классу, а затем используйте только JavaScript для поиска 10-го элемента. Когда jQuery должен делать выбор в чистом JavaScript, он делает это с помощью движка Sizzle, который работает быстро, очень быстро, но не быстрее, чем собственный код в браузере. Итак, краткий ответ: они одно и то же, длинный ответ, это зависит. Если вас интересуют все расширения, которые попадают в эту категорию, ссылка на документацию jQuery, в которую я включала, перечисляет их.