Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Селекторы jquery значительно упростят вам доступ и работу со всеми элементам веб страницы

Доброго времени суток, дорогие гости моего блога и верные подписчики. Если вы решили разобрать основные селекторы jQuery, то текущая статья именно то, что вам нужно.

Я расскажу, что такое селекторы и какими они бывают в библиотеке языка JavaScript, опишу работу с дочерними элементами, а также каким образом можно вытаскивать значения нужных объектов и сами объекты по атрибуту, по классу или по идентификатору. Конечно же в статье вы найдете множество практических примеров. Ну а теперь вперед за дело!

Что такое селекторы и для чего они используются

Библиотека jQuery так полюбилась девелоперам из-за своих преимуществ, которые заключаются в удобном доступе ко всем существующим на веб-странице элементам. Все это стало возможным благодаря появлению селекторов.

Если вы хоть когда-то работали с css-файлом, то знаете, что данный язык также имеет такой термин, как селектор. И с его помощью разработчик может выбрать конкретные теги или пользовательские элементы и задать им определенные стилевые правила.

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

Знакомство с базовыми селекторами библиотеки

Чтобы создать описываемый инструмент, необходимо вначале строки указать знак доллара, а после в круглых скобках и двойных кавычках указать название тега, класса и т.д. Это выглядит следующим образом:

$(«Selector»)

Существует всего пять базовых типов, которые чаще всех используются в программном коде. Все они представлены в таблице чуть ниже.

Тип селектора Описание Контрольный пример
$(“*”) Выбираются все созданные объекты на странице. Я решил изменить цвет всего текста с черного на зеленый:

$(«*»).css ('color', 'green');
$(“Element”) Отбираются все элементы с тегом, который указан в двойных кавычках. Весь текст, содержащийся в тегах «p» будет отображаться в желтых цветах:

$(«p»).css ('color', 'yellow');

При нажатии на один из input-ов выполнится функция:

$(«input»).click (function (){

});
$(“.class”) Выбор всех объектов, в которых прописан указанный класс. При ответе на вопрос и нажатии на определенную клавишу последняя будет подсвечиваться цветом:

<script>

$(document).ready (function (){

$(«.first»).click (function (){

$(«.first»).css («background», «green»);

$(«.second»).css («background», «buttonface»);

});

$(«.second»).click (function (){

$(«.second»).css («background», «red»);

$(«.first»).css («background», «buttonface»);

});

});

</script>

<h2>Вы любите зиму?</h2>

<button class="first">Да</button>

<button class="second">Нет</button>
$(“#id”) Выбор элемента (наименование id по правилам может быть только уникальным), которому приписан указанный в двойных кавычках идентификатор.  

<script>

$(document).ready (function (){

$(«#name»).click (function (){

$(this).val («Тыцнул!»);

});

 

});

</script>

 

<input type="button" id="name" value="Тыцни на меня!">
$(“sel_name1, sel_name2,…,sel_nameN”) Выбираются все элементы, созданные благодаря указанным селекторам. А теперь хочу выделить желтым цветом все блоки, где указаны фрукты с соответствующим цветом:

$(«.apple, .banana»).css («background»,"yellow");

 

<div class="apple">apple</div>

<div class="strawberry">strawberry</div>

<div class="banana">banana</div>

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

Так, например, при написании

$(“#goods .fruits”)

будут выбираться все объекты, найденные начиная с вхождения в id-шник #goods всех классов с наименованием .fruits.

Поиск элементов веб-страницы по атрибутам

Сама по себе jQuery включает в себя множество различных конструкций для поиска определенных элементов по их атрибутам.

Опять-таки, для удобства я структурировал всю информацию в таблицу.

Запись атрибута Описание Контрольный пример
[SomeAttribute] Выбор всех объектов с указанным атрибутом. Если нам необходимо везде изменить атрибут color в теге “p”, то стоит написать это следующим образом $(“p[color]”).
[SomeAttribute= ‘SomeValue’] Выборка всех элементов страницы, где значение заданного атрибута совпадет с указанным. В качестве примера можно привести следующую строку кода:

$(“p[color=’blue’]”).
[SomeAttribute^= ‘SomeValue’] Выбираются все объекты, у которых значение конкретного атрибута начинается именно с указанного параметра. Так, к примеру, если расширить запись выше ($(“p[color^=’blue’]”)), то в результате получим все варианты со словом «blue» сначала.
[SomeAttribute$= ‘SomeValue’] В данном случае все с точностью да наоборот. Т.е. на указанное значение должен оканчиваться параметр. $(“h2[font-size$=2]”) определит все параметры с 2-ой в конце значения.
[SomeAttribute~= ‘SomeValue’] Определяет все элементы, которые содержат в себе SomeValue, разделенное в свою очередь пробелом с другими параметрами. Так запись $(“button[class~='big']”) учтет параметр следующего вида записи: «Super big».
[SomeAttribute*= ‘SomeValue’] Находит заданную строку в значениях атрибута. Повторюсь с примером. $(“button[class*='big']”) определит, как правильный ответ следующий результат «Megabig».
[SomeAttribute|= ‘SomeValue’] Определяет за истину выборку (группировку) элементов, значение атрибута которых выводится через дефис. При этом первый элемент в найденной записи должен быть именно SomeValue. $(“div[class|=super]”) отвечает за следующую запись: «super-build»

Но это еще не самое интересное! Существуют также селекторы, которые используют для поиска упрощенные записи для input-ов и select-ов. Как, например,

$(«input:image») или $(«option:selected»)

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

  • :first;
  • :last;
  • :even;
  • :odd.

Обо всем этом вы сможете подробнее прочесть в моих следующих статьях. А на сегодня обучение подошло к концу. Не забывайте рассказывать своим друзьям о моем блоге и подписываться на обновления. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 1 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Денис

    При внесении новых тегов в разметку страницы селекторы автоматически скорректируются на предыдущие теги или самому править надо?

    11.01.2017 в 21:02
  • Денис

    Заумная для меня статья, хотя тематика интересная. Роман, приведи пример написания селектора подзаголовка на этой странице «Знакомство с базовыми селекторами библиотеки». Мне понятнее станет.

    11.01.2017 в 21:09