jQuery Мелочи

jQuery Прогнозирование - Фильтрация

Используя jQuery, можно легко отфильтровать различные элементы из списка DOM элементов.

В этой главе мы покажем, как сузить область поиска элементов в DOM дереве.

Фильтрация DOM дерева

• jQuery first() метод

• jQuery last() метод

• jQuery eq() метод

• filter()

• jQuery not() метод

• has()

• is()

У нас есть следующие методы jQuery, которые позволяют выбирать элементы на основе их положения в группе элементов:

Ниже мы покажем, как использовать каждый из этих методов.

jQuery jQuery first() методfirst()

Метод возвращает первый элемент选定ного элемента.

$("document").ready(function(){
　　Следующий пример подчеркивает первый абзац:
});

$("p").first().css("background", "coral");

jQuery jQuery last() методlast()

Метод возвращает последний элемент选定ного элемента.

$("document").ready(function(){
　　Следующий пример подчеркивает последний абзац:
});

$("p").last().css("background", "coral");

jQuery jQuery eq() методeq()

Метод возвращает элемент с заданным индексом选定ного элемента.

Индекс всегда начинается с 0, поэтому первый номер имеет индекс 0 (а не 1).

Пример показывает третий абзац (индекс 2):
　　$("button").click(function(){
});

Метод filter() jQuery

jQuery filter()$("p").eq(2).css("background-color", "red");

Метод возвращает элементы, которые соответствуют определенным условиям.

Этот метод фильтрует все элементы, которые не соответствуют выбранным условиям, и возвращает те, которые соответствуют.

$("document").ready(function(){
　　Пример показывает все абзацы с классом 'demo':
});

$("p").filter(".demo").css("background", "coral");

$("document").ready(function(){
　　Пример показывает все четные элементы списка:
});

$("li").filter(":even").css("background", "coral");

jQuery jQuery not() методnot()

Этот метод возвращает элементы, которые не соответствуют определенным условиям.filter()Метод обратен.

Пример показывает все абзацы, у которых нет класса 'demo':

$("document").ready(function(){
　　$("p").not(".demo").css("background", "coral");
});

Метод has() jQuery

jQuery has()Метод возвращает все элементы, соответствующие заданному селектору, которые содержат один или несколько элементов.

Ниже приведен пример, который возвращает все абзацы, содержащие элемент <span>:

$("document").ready(function(){
　　$("p").has("span").css("background-color", "coral");
});

Метод is() jQuery

jQuery is()Метод проверяет, соответствует ли所选 элемент одному из заданных параметров.

Если по крайней мере один из этих элементов соответствует заданным параметрам, то该方法 возвращает true, в противном случае false.

Ниже приведен пример, который проверяет, является ли родителем <p> элемент <div>:

$("document").ready(function(){
　　$("p").parent().is("div");
});

Референтное руководство по遍ению jQuery

Для получения полной информации о методах遍ения посетите нашРеферентное руководство по遍ению jQuery.