Когда использовать filter () по сравнению с: в jQuery?

Question

Я рассматриваю некоторые основы JavaScript / jQuery и мне любопытно по поводу использования filter() и :

Какая разница между ними?

Почему работают эти строки кода:

$("li").filter(":even").css("background-color", "red"); 
$("li:even").css("background-color", "red"); 
$("p").filter(".intro").css("color", "green");

но что-то вроде этого не будет?

$("li").filter("even").css("background-color", "red");
$("p:.intro").css("color", "green");

Так когда бы вы использовали filter() против :?

Answer 1

Какая разница между ними?

Я думаю, что это лучше всего ответить в jQuery селектор против фильтра () , но суммируя ...

Первый использует механизм выбора jQuery ( Sizzle ) только один раз, чтобы создать объект jQuery, представляющий коллекцию элементов.

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

Sizzle предоставляет функции выбора, примерно эквивалентные селекторам CSS 3, которые вы можете использовать в document.querySelector(), но с некоторыми дополнениями, большинство из которых подпадают под категорию filter ; это те, которые следуют за двоеточием.

---

Почему эти строки кода работают
...
но что-то вроде этого не будет?

Давайте посмотрим, что вы спрашиваете о селекторе ...

$("li").filter(":even")
$("li:even")

Они эквивалентны (за исключением , когда они что-то делают), но это одна из тех дополнительных функций в библиотеке Sizzle; позиционные фильтры, такие как :first, :odd и, конечно, :even.

Теперь это ...

$("li").filter("even")

сначала запрашивает все элементы <li>, а затем пытается отфильтровать его по строке селектора "even". Это селектор элементов, поэтому вы запрашиваете все элементы <li>, которые также являются элементами <even>. Это, очевидно, приведет к пустому списку.

---

$("p").filter(".intro")

Получаются все теги <p>, которые затем фильтруются до тегов "intro". Точечный (класс) селектор является стандартным селектором CSS 3.

$("p:.intro")

Специального фильтра селектора точек нет. Стандартный точечный селектор может быть объединен с селектором элементов, производя

$('p.intro')