TutorialСелекторы jQuery

В этом руководстве мы рассмотрим различные аспекты селекторов jQuery . У вас должно быть базовое понимание JavaScript и объектов.

Некоторые люди думают, что селекторы используются для применения свойств к элементам JQuery . Но с ними можно делать гораздо больше, чем просто применять свойства. Поскольку селекторы JQuery создают объекты, их можно использовать для того, что нельзя сделать с помощью объекта. Например: изменить текст элемента, добавить элемент HTML внутри другого и т.д.

Признаки JQuery-селекторов

Вот некоторые признаки JQuery- селекторов :

Способ создания объектов DOM : JQuery-селекторы это способ создания объектов JavaScript в HTML-элементах . Если в JavaScript

используется document. getElementById , чтобы создать объект HTML-элемент , то есть признак JQuery-селектора ; Пелектора ; Пиылектора ;> JQuery похожи на CSS-селекторы ; Параметры, как функции JQuery : В JQuery CSS-селекторах ; Встроенный способ прохождения до определенного уровня : После передачи селектором значения аргумента методу JQuery он проходит и выбирает элементы, которые попадают под действие этого селектора .

Как использовать JQuery-селекторы

или Jquery () это функция, в которой можно передать параметр селектора, как в CSS-селекторе . Ниже приведено несколько примеров:

Чтобы выбрать или создать объект & # 171; testdiv & # 187; ( JQuery селектор по атрибуту ):

 var objTestDiv = $ ('# testdiv'); 

Этот код вызывает < диапазон> документ. getElementById (‘testdiv’) .

Чтобы выбрать все теги span страницы:

 var objAllSpan = $ ('span'); 

Мы снова вызываем родную функцию документ JavaScript. getElementsByName (‘span’) ;

Чтобы выбрать все элементы с классом « red-div »:

 var redDiv = $ ('. red-div'); 

Снова используем document. getElementsByClassName (‘red-div’) .

Чтобы выбрать все элементы страницы:

 var allElement = $ ('*'); 

Так в чем же преимущество использования JQuery-селекторов ? Вот несколько примеров, которые ответят на этот вопрос:

Чтобы выбрать все элементы с классо> <" селектор по классу ):

 var objRedDiv = $ ('div. red-div'); 

Выбираем все элементы с классом red -div .

Другой сложный пример : Выбрать все дочерние элементы span из с указанием катормесртентификато> ”:

 var spanButton = $ ('form span. Button'); 

JQuery несколько селекторов через запятую:

 var multiple = $ ('# div1, # div2'); 

Мы выбираем элементы с указателем и.

Во всех приведенных выше выражениях, если вы внимательно посмотрите на аргумент, передаваемый функцией, то поймете, что он похож на CSS-селекторы . Например, «#form span.button», «red-div», «span», «#testdiv».

Различные типы JQuery-сел

В этом раздрскмскм. JQuery-селекторов , которые можно использовать.

JQuery-селекторы можно разделить на следующие категории:

Основные селекторы; JQuery селектор по атрибуту; Селекторы формы; Селекторы контента. ; Селекторы иерархии.

Основные селекторы CSS

JQuery-селектор , который работает, который работает, который работает, который работает работает работает, который работает, который работает, который работает который работает который работает катикет Например, выборка по элементу, класса элемента, ( для всех элементов ) и разделеннытой запятойнескольких элементов, относится к этой категории. Селекторы, которые рассматривались в предыдущих разделах, являются основными селекторами .

Селекторы атрибута

В JQuery можно выбрать элемент на основе HTML-атрибутов. Например, выбрать все теги анкоров, которые содержат атрибут target со значением «_blank«. Или все , которые содержат элемент data-id. JQuery селектор по атрибуту можно создать и в . Но некоторые из них могут не работать в отдельных браузерах.

Ниже приведены примеры селекторов атрибутов разных типов, доступных в JQuery.

Выбор элементов по указанному атрибуту.

Чтобы выбрать все элементы , которые имеют атрибут , нужно написать такой селектор:

var spanwithid = $('span[id]')

Выбор элементов с определенным значением атрибута.

Чтобы выбрать все теги анкоров, которые содержат атрибут target со значением «_blank«:

var target_blank = $('a[target="_blank"]');

Выбор элементов с атрибутом, содержащим определенное значение.

Чтобы выбрать все элементы , которых содержит строку “”:

var id_has_test = $('div[id*="test"]');

Приведенный выше код будет выбирать все элементы , которых содержит “”: “1-test-1” ,

“test-1” , “1-test”.

Селекторы формы

С помощью селекторов JQuery можно выбрать элемент с различным набором правил. Например, все элементы формы disabled, все элементы формы enabled. Ниже приведено несколько JQuery-селекторов, которые могут быть использованы в форме.

Чтобы выбрать все элементы формы, с установленными флажками:

var checked = $('input:checked');

Выбрать все отключенные элементы:

var allDisable = $('input:disabled');

JQuery селектор input:

var text_input = $('input:text');

Выбрать все радио-кнопки:

var radio = $('input:radio')

Селекторы контента

В JQuery элемент также может быть выбран на основе его содержимого. Например, можно выбрать все элементы, содержащие слово ««. Или выбрать все элементы, которые не содержат какой-либо фрагмент, которые содержат тег . Ниже приведено несколько примеров селекторов контента.

Соответствующие JQuery селекторов примеры использования:

Выбрать все теги , которые содержат слово :

var p_with_test = $('p:contains("test")');

Выбрать все элементы , которые содержат тег :

var div_has_p = $('div: has(p)');

Выбрать все пустые теги :

var empty_span = $('span:empty');

Выбрать элементы , которые не являются пустыми:

var not_empty_div = $(‘div:parent’);

Селекторы иерархии

В jQuery селекторы также могут быть применены на основе иерархии. Например, можно выбрать элементы одного уровня, родительский элемент на уровень выше или дочерние элементы. Ниже приведено несколько примеров:

Получить все элементы одного уровня с конкретным элементом (JQuery селектор по ):

var div_sibling('#test ~ div');

Этот код выбирает все элементы одного уровня с элементом, имеющим id test.

Вывести все элементы одного уровня с абзацами:

var div_sib_p = $('div + p');

Получить все элементы конкретного элемента :

var objli = $('ul. nav > li');