Jquery как обратиться к элементу

Выборка элементов

Одним из важных функциональностей jQuery является выборка элементов. Чтобы что-то делать с элементами, манипулировать ими, применять к ним методы jQuery, нам надо сначала их получить. Библиотека предоставляет нам удобный способ выбора элементов, основанный на селекторах. Нам достаточно передать в функцию jQuery селектор и мы можем получить нужный нам элемент, который соответствует данному селектору. Например, если необходимо получить все эелементы img , то мы можем использовать следующее выражение: $(«img») . В данном случае «img» будет выступать в качестве селектора.

Рассмотрим основные селекторы jQuery, которые используются для выборки элементов.

Базовые селекторы jQuery

Выборка всех элементов страницы

Например, выражение $(«*»).css(‘background-color’, ‘red’) окрасит все элементы страницы и саму страницу в красный цвет

Выборка всех элементов с данным именем тега

$(«img») выбирает все элементы img
$(«input») выбирает все элементы input

Выборка элемента с данным значением атрибута id

$(«#btn1») выбирает элемент, у которого значение id равно btn1 (например, )

Выборка всех элементов с данным значением атрибута class

$(«.redStyle») выбирает элементы, у которого значение class равно redStyle (например, )

Выборка всех элементов, которые соответствуют указанным селекторам

Например, у нас есть такой код:

то селектор $(«.apple, .orange») выберет элементы, выделенные жирным

Конкретизация выбора

Мы можем использовать сразу несколько селекторов, чтобы более детально настроить выборку элементов. Например, у нас есть такая веб-страница:

     
Словарь
 
Слово
Перевод
 
table
таблица
 
apple
яблоко
 
    

В данном случае мы используем селектор #tab, то есть выбираем нашу таблицу, которая имеет Выражение css(‘background-color’, ‘silver’) устанавливает цвет элемента — в данном случае серебряный.

Запустив данную страничку в веб-браузере мы получим следующую картину:

Но мы также можем использовать набор селекторов, чтобы более детально произвести действие. Например, нам надо, чтобы была закрашена только первая строка, которая имеет атрибут . Тогда мы можем использовать следующий селектор: $(«#tab .tabhead») . В этом случае селектор выберет элемент с , который находится в элементе с .

При этом мы можем для сужения выборки использовать множество различных селекторов, например: $(«div#menu a.redStyle») . К примеру данный селектор может найти например такой элемент:

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

Выборка всех элементов, которые соответстуют второму селектору и являются дочерними для элементов первого селектора

Например, чтобы получить элемент ссылки в предыдущем примере мы можем использовать селектор $(«#menu > a»)

Выборка элементов с селектором ‘селектор2’, которые располагаются непосредственно за элементами ‘селектор1’. Причем оба элемента должны находиться на одном уровне

Например, у нас есть следующий блок ссылок:

 
1.html 2.html 3.html 4.html 5.html 6.html 

Тогда селектор $(«.closed + .open») выберет те ссылки, которые выделены жирным, так как эти элементы с атрибутом идут непосредственно за элементами с атрибутом .

Выборка элементов с селектором ‘селектор2’, которые располагаются на одном уровне с элементами с селектором ‘селектор1’.

Например, у нас есть следующий блок ссылок:

 
1.html 2.html 3.html 4.html 5.html 6.html 

Тогда селектор $(«.closed ~ .open») выберет те ссылки, которые выделены жирным, так как эти элементы с атрибутом находятся на одном уровне с элементами с атрибутом .

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

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

Выборка всех элементов с атрибутом attr

Например, выражение $(«a[class]») выберет все элементы ссылок, которые имеют атрибут class

Выборка всех элементов, у которых значение атрибута attr равно value

Например, выражение $(«a[class=’redStyle’]») выберет все элементы ссылок, которые имеют атрибут class=»redStyle»

Выборка всех элементов, у которых значение атрибута attr начинается со строки value

Например, выражение $(«a[class^=’red’]») выбрать элементы ссылок, которые имеют атрибут class=»redStyle» , так как слово ‘redStyle’ начинается на ‘red’.

Выборка всех элементов, у которых значение атрибута attr оканчивается на строку value

Например, выражение $(«a[class$=’Style’]») выбрать элементы ссылок, которые имеют атрибут class=»redStyle» , так как слово ‘redStyle’ оканчивается на ‘Style’.

Выборка всех элементов, у которых атрибут attr имеет список значений, разделенных пробелом, и одно из этих значений равно value

Например, выражение $(«a[class~=’redStyle’]») выбрать элементы ссылок, которые могут иметь следующее значение атрибута class=»redStyle closed» .

Выборка всех элементов, у которых значение атрибута attr имеет имеет подстроку value

Например, выражение $(«a[class*=’Style’]») выбрать элементы ссылок, которые могут иметь следующее значение атрибута class=»redStyle1″ .

Выборка всех элементов, у которых значение атрибута attr представляет либо значение value, либо список значений, разделенных дефисами, и первое значение в этом списке равно value

Например, выражение $(«a[class|=’red’]») выбрать элементы ссылок, которые могут иметь следующее значение атрибута class=»red-freeStyle-closed» .

Контекст селекторов

Выше мы использовали такую запись для выборки элемента: $(селектор). Данное выражение просматривало все дерево DOM на соответствие элемента селектору. Однако мы можем ограничить поиск, применив контекст поиска. Контекст представляет собой селектор, в рамках которого наждо производить выборку элементов. Например, у нас есть такая веб-страница:

      
Ссылка 1
 
Ссылка 2
 
 
Ссылка 3
    

На странице у нас три ссылки, у всех у них определен один и тот же класс, но две из них находятся в элементе div и именно их мы хотим получить. Тогда мы используем выражение $(«.open», «div#menu») — здесь второй параметр-селектор будет являться контекстом выборки. А результатом в данном случае будет следующая страница:

Важно не путать это выражение с выборкой по множеству селекторов, например, $(«.open, div#menu «) — это разные выражения, которые будут давать разный результат.

Выбор элементов в jQuery

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

К счастью, библиотека jQuery обеспечивает достаточно мощный способ выбора элементов, основанный на селекторах. Заключается он в том, что для получения набора элементов достаточно просто передать селектор в функцию jQuery:

JavaScript

// selector – это селектор jQuery('selector'); // или с помощью псевдонима $ $('selector')

Селектор – это шаблон для поиска элементов. Синтаксис селекторов в jQuery соответствует синтаксису CSS, который дополнен некоторыми нестандартными методами.

В качестве результата данная функция возвращает набор найденных элементов в формате объекта jQuery.

JavaScript

// $elements – переменная, в которой находится объект jQuery, содержащий все найденные элементы var $elements = $('selector')

Узнать количество выбранных элементов можно с помощью свойства length :

JavaScript

// $anchors - переменная, содержащая все найденные элементы на странице var $anchors = $('a'); // количество найденных элементов var length = $anchors.length;

Если length возвращает 0, то значит, что объект jQuery «пустой», т.е. он не содержит искомых элементов (они не были найдены).

При этом функция jQuery(‘selector’) и «родные» JavaScript-методы для поиска элементов ( querySelector , querySelectorAll и др.) возвращают совсем разные вещи.

«Родные» методы возвращают DOM-элемент или HTML-коллекцию элементов, а функция jQuery — объект jQuery.

Это означает, что вы не можете напрямую применить какие-либо «родные» свойства и методы JavaScript для работы с элементами к объекту jQuery. И наоборот, применить свойства и методы jQuery непосредственно к DOM-элементам.

Например, с помощью jQuery получим элемент и изменим ему цвет фона:

JavaScript

// выберем элемент var $body = $('body'); // установим цвета фону элемента с помощью jQuery-метода css $body.css('background-color', '#eee');

На чистом JavaScript эти действия записываются так:

JavaScript

// выберем элемента var bodyElem = document.querySelector('body'); // установим стили элементу, используя нативные свойства JavaScript bodyElem.style.backgroundColor = '#eee';

Но, чтобы применить родные свойства и методы JavaScript к элементу, обёрнутому в объект jQuery, необходимо в этом случае обратиться непосредственно к этому элементу:

JavaScript

var $body = $('body'); // получим сам элемент var bodyElem = $body[0]; if (bodyElem) { // установим стили на чистом JavaScript bodyElem.style.backgroundColor = '#eee'; }

Также, если вы хотите использовать свойства и методы jQuery для DOM-элементов их следует обернуть в объект jQuery. Выполняется это следующим образом:

JavaScript

var bodyElem = document.querySelector('body'); // обернём $bodyElem в объект jQuery var $body = $(bodyElem); // установим стили с помощью jQuery-метода css $body.css('background-color', '#eee');

Базовые селекторы

Основные CSS селекторы, которые используются для выборки элементов в jQuery:

• $(‘.class’) – по классу;
• $(‘#id’) – по id;
• $(‘tag’) – по тегу;
• $(‘*’) – все элементы;
• $(‘selector1,selector2. ‘) – по группе селекторов (выбирает все элементы, соответствующие хотя бы одному из указанных селекторов);
• $(‘selector1selector2. ‘) – по комбинации селекторов (выбирает элементы, которые должны соответствовать всем указанным селекторам).

Примеры

1. Найдём все элементы с классом btn :

JavaScript

var elements = $('.btn');

2. Выберем элемент с id=»carousel» :

JavaScript

var element = $('#carousel');

3. Выполним поиск всех элементов с тегом :

JavaScript

var elements = $('a');

4. Выберем все элементы на странице:

JavaScript

var elements = $('*');

5. Выполним поиск элементов с классом nav или menu :

JavaScript

var elements = $('.nav,.menu');

6. Найдём элементы с тегом и классом menu :

JavaScript

// nav - селектор для выбора элементов по тегу // .menu - селектор для выбора элементов с классом menu var navs = $('nav.menu');

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

CSS селекторы для идентификации элементов по их атрибутам::

• [attr] – по атрибуту независимо от его значения;
• [attr=value] – по атрибуту со значением, точно равным заданному;
• [attr^=value] – по атрибуту со значением, начинающимся точно с заданной строки;
• [attr|=value] – по атрибуту со значением, равным заданной строке или начинающимся с этой строки, за которой следует дефис (-);
• [attr$=value] – по атрибуту со значением, оканчивающимся точно на заданную строку (при сравнении учитывается регистр);
• [attr*=value] – по атрибуту со значением, содержащим заданную подстроку;
• [attr~=value] – по атрибуту со значением, содержащим заданное слово, отделённое пробелами;
• [attr!=value] – выбирает элементы, которые не содержат указанного атрибута, либо имеют указанный атрибут, но не с заданным значением.

Значение атрибута в выражении селектора должно быть заключено в кавычки. Осуществляется это одним из следующих способов:

• $(‘a[rel=»nofollow»]’) — двойные кавычки внутри одинарных кавычек;
• $(«[rel=’nofollow’]») — одинарные кавычки внутри двойных кавычек;
• $(‘a[rel=\’nofollow\’]’) — экранированные одинарные кавычки внутри одинарных кавычек;
• $(«a[rel=\»nofollow\»]») — экранированные двойные кавычки внутри двойных кавычек;

Селектор [attr!=»value»] не является стандартным CSS селектором. Это расширение jQuery. При его использовании снижается производительность, поэтому в выборке не рекомендуется его использовать. Вместо него предпочтительнее использовать следующую конструкцию:

JavaScript

$('selector').not('[attr="value"]')

Примеры

1. Выберем изображения с атрибутом alt :

2. Найдём элементы с атрибутом type=»button» :

 Информация о заказе   

3. Выполним поиск с классом btn и атрибутом href начинающимся со строки « http: ».

. . .  

4. Выполним поиск всех с атрибутом data-name , имеющим значение, равное alert или начинающимся с alert , за которым следует дефис:

.
 
.
 
.
 
.
  

5. Найдём все элементы с атрибутом href , имеющие значения точно оканчивающиеся на строку « .zip »:

. . 
.
  

6. Найдём все элементы с атрибутом href , содержащим подстроку « youtube »:

. . 
.
  

7. Выполним поиск с атрибутом data-target , значение которого содержит « btn », отделённое от других пробелами:

. . Отправить . .   

. . . . 
.
  

. . .  

Селекторы отношений

В документы каждый элемент связан определёнными отношениями с другими элементами.

В CSS имеется 4 селектора отношений ( A и B – это селекторы):

• A>B – выбирает элементы B , расположенные непосредственно в A ;
• A B – выбирает элементы B , расположенные в A ;
• A+B – выбирает элементы B , каждый из которых расположен сразу же после A (при этом данные элементы должны являться детьми одного родителя, т.е. находиться на одном уровне вложенности);
• A~B – выбирает все элементы B , каждые из которых расположены после A (при этом данные элементы должны являться детьми одного родителя, т.е. находиться на одном уровне вложенности).

Примеры

1. Найдём все

, расположенные в :

 
.
 
.
 
.
  
.
 
  
  

3. Найдём все элементы .warning , расположенные сразу же после элементов .danger :

 
.
 
.
 
.
  
.
 
 
.
  

4. Выберем все , которые находятся сразу же за . При этом и должны располагаться на одном уровне вложенности, т.е. иметь одного родителя:

JavaScript

var $elements = $('label + input');

5. Найти все , расположенные после .prev внутри одного родителя:

JavaScript

var $elements = $('.prev~div');

Управление контекстом

По умолчанию поиск элементов осуществляется во всём документе. Но при необходимости вы можете его ограничить, определив контекст поиска.

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

Контекст передаётся во второй аргумент функции jQuery. Задавать его можно с помощью селектора, DOM-элемента или набора jQuery.

Например, найдём элементы с классом active в контексте элемента с id=»#list» :

JavaScript

// #list – контекст var active = $('.active', '#list');

Задачи

• $(‘#list’) — 1;
• $(‘.active’) — 3;
• $(‘li’) — 2, 3, 4;
• $(‘ul,li,p’) — 1, 2, 3, 4, 5;

Обратиться к элементу jQuery на странице по ID в котором есть часть текста

Суть вопроса такова, есть элемент на с как я могу через jQuery обратиться к этому элементу? Но проблема в том, что я знаю только то, что а остальные цифры генерируются кодом. То есть я не знаю точный id, только часть Есть ли возможность через фильтр как то найти этот элемент? Можно и на чистом JS если на jquery нету вариантов

Отслеживать

задан 16 июн 2020 в 17:26

Владимир Тытыкало Владимир Тытыкало

29 9 9 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

$("div[id^='v-cancel']").text("работает!")

Отслеживать

ответ дан 16 июн 2020 в 17:31

Alex Krass Alex Krass

17.7k 2 2 золотых знака 25 25 серебряных знаков 52 52 бронзовых знака

Обращение к элементам с помощью JQuery

jQuery позволяет легко получать доступ к любым элементам на странице (ссылкам, изображениями, блочным элементам, текстовым полям и т.п.). При этом нам не требуется писать длинные конструкции, как это делается, например, в JavaScript. Ниже – небольшое справочное руководство.

Основная конструкция для выбора того или иного элемента на странице – $(селектор).

Допустим мы имеем следующий html-код:

   Текст 1 1 2 3 Текст 2 
Разное
  

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

1. $(‘.main’) – получаем доступ к ссылке с классом main
2. $(‘#top’) – получаем доступ к элементу span c идентификатором “top”
3. $(«a[href$=’.pdf’]») – получаем доступ к ссылкам, ведущим на pdf документ
4. $(«span[rel=’bottom’]») – получаем доступ к элементу span, имеющему атрибут rel, равный значению bottom
5. $(«h2 > a») – получаем доступ к ссылкам, являющимся прямыми потомками элемента h2

Очень просто, не правда ли?
Другие примеры выбора элементов страницы, не связанные с вышеприведенным кодом:

1. $(«a[href^=’http://’]») – все ссылки на странице, начинающиеся с http://
2. $(«a[href*=’codernote.ru’]») – все ссылки на странице, содержащие в адресе codernote.ru
3. $(«input[type=text]») – все текстовые поля (с типом text)
4. $(«a.my») – ссылки, имеющие класс my
5. $(«div#cat») – элемент div с идентификатором (id) cat
6. $(«p:first») – первый элемент p на странице
7. $(«p:last») – последний элемент p на странице
8. $(«li:odd») – нечетный элементы li в списке
9. $(«li:even») – четные элементы li в списке
10. $(«li:first-child») – первый элемент li в списке
11. $(«li:last-child») – последний элемент li в списке
12. $(«li:nth-child(2)») – второй li в списке (отсчет с 1)
13. $(«p:eq(5)») – шестой элемент p на странице
14. $(«a:gt(3)») – все ссылки после 4-й (отсчет с 0)
15. $(«a:lt(3)») – все ссылки до 4-й (отсчет с 0)

Похожие записи

• .dblclick() – обработчик двойного клика мышью
• .keyup() – обработчик возвращения клавиши клавиатуры в ненажатое состояние
• .keydown() – обработчик перехода клавиши клавиатуры в нажатое состояние
• .unbind() – удаление обработчика событий