jQuery в деталях. Селекторы и поиск элементов

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

Итак, самая базовая основа, на которой работает jQuery - это селекторы. По ним происходит обход дерева DOM, находятся элементы, навешиваются события, добавляются стили, анимация и многое другое. Почти половина объема кода, который вы будете писать на jQuery будет сводиться к поиску необходимого элемента на странице.

Что из себя представляют селекторы?

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

Наиболее подробный справочник по селекторам разработан организацией W3C и находится здесь

Это понятие пришло из CSS. Для полного описания селекторов, необходимо углубиться в курс CSS3, но это займет не один урок, поэтому рассмотрим их вкратце, ведь приступая к изучению jQuery вы уже должны иметь базовые знания по работе с CSS.

Давайте пробежимся по структуре следующего html документа

В данном примере можно выделить следующие селекторы:

#header - элемент с id равным 'header'

div#content - блок div с id равным 'content'

h3 - все теги h3

div, p - все теги div и p

#menu ul li - все элементы списка ul находящемся в блоке с id равным 'menu'

.post - все элементы с классом равным 'post'

.post > p - все элементы p которые вложены (являются потомками) в элемент с классом 'post'

.post > * - все потомки элемента с классом равным 'post'

h3 + img - все изображения img перед которыми есть блок заголовков h3

#wrapper #content .post img - все изображения img, находящиеся в блоке с классом 'post', который находится в блоке с id = 'content', а тот, в свою очередь, находится в блоке с id = 'wrapper'

...И множество других вариантов...

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

#wrapper #content .post{
       margin: 15px;     
       /* ... здесь идет перечисление стилей ... */
}

а в jQuery строку селектора следует обернуть в функцию $( ) - она то и укажет, что необходимо сделать поиск по заданному в качестве параметра селектору.

Выглядеть это будет так:

$("#wrapper #content .post")

Виды селекторов:

Существует несколько видов селекторов:

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

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

Важно. Обработка таких селекторов происходит быстрее.

Обозначение	Описание
"*"	все элементы
".className"	элементы с классом className
"#idName"	один элемент с идентификатором idName
"tagName"	элементы с заданным именем тега

2. Комбинированные селекторы

Два или более селектора, находящиеся в одном выражении, взаимодействуют между собой практически так же, как в правилах CSS

Обозначение	Описание
"first, second"	элементы удовлетворяющие любому из селекторов first, second
"outer inner"	элементы из inner, которые являются потомками (т.е. лежат внутри) элементов из outer
"parent > child"	элементы из child, которые являются прямыми потомками элементов из parent
"prev + next"	элементы из next, которые следуют непосредственно за элементами из prev
"prev ~ next"	элементы из next, которые следуют за элементами из prev

3. Селекторы по атрибутам

Эти селекторы также могут применяться вместе с базовыми селекторами, чтобы конкретизировать выборку по одному из тегов

Обозначение	Описание
"[name]"	элементы, содержащие атрибут name
"[name = value]"	элементы, у которых значение атрибута name совпадает с value
"[name != value]"	элементы, у которых значение атрибута name не совпадает с value
"[name ^= value]"	элементы, у которых значение атрибута name начинается с value
"[name $= value]"	элементы, у которых значение атрибута name заканчивается на value
"[name *= value]"	элементы, у которых значение атрибута name содержит подстроку value
"[name ~= value]"	элементы, у которых значение атрибута name содержит слово value
"[first][second][..."	элементы, соответствующие всем заданным условиям на атрибуты одновременно

Примечание: Вместо name можно обращаться к любому аттрибуту, например к href, title, src и т.д.

Важно помнить:

При разборе селекторов, выражение будет анализироваться с помощью регулярного выражения, поэтому необходимо всегда экранировать специальные символы используя обратный слеш "\\"

Например $("a[href^=\\/]")

А теперь попрактикуемся

Есть структура файла

<html>
<head>
    <title>Новости проекта Голос</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>   
</head>
    <body>       
        <div id="header">
        <h1>Последние новости</h1>    
        </div>
        <div id="wrapper">
            <div id="content">
                <div class="post">
                    <h3>Новость №1</h3>
                    <img src="http://somewhere.com/image.png" alt="golos picture"/>   
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
                       Cras condimentum, tellus id lacinia fermentum, tortor
                       vel varius augue tortor vel tortor.</p>                       
                    <div class="credate">Опубликовано: <span>14.02.2017</span></div>
                </div>   
            </div>
        </div>
        <div id="menu">
            <ul> 
                 <li><a href="/menu1.html">Анонсы</a></li>
                 <li><a href="/menu2.html">События</a></li>
                 <li><a href="/menu3.html">Хроника</a></li>
                 <li><a href="/menu4.html">Галлерея</a></li>
            </ul>
        </div>
        <div class="clear"></div>
        <div id="footer">
            Copyright &copy; Агенство новостей 2017
        </div>
    </body>
</html>

В нем необходимо динамически изменить ссылку src на изображение в новости. И подогнать размер изображения под текст.

Добавим в секцию head один класс, описывающий стиль для изображения:

<style>
   .preview{
       width: 250px;
       margin: 5px;
   }
</style>

А за ним добавим скрипт, который при загрузке документа изменит атрибуты и параметры изображения.

<script>
     $(function(){
          $('#wrapper #content .post img').attr('src', 'https://golos.io/images/landing/golos.png');
          $('#wrapper #content .post img').addClass('preview');
     });
</script>

Получим такой результат:

Мы видим, что изображение было получено из удаленного источника и вставлено в документ путем подмены атрибута src. А затем к нему был применен класс preview.

Хочу заметить, что данный пример написан не очень оптимально в плане производительности, устойчивости к ошибкам, а также компактности кода.

Правильней будет написать:

<script>
     $(function(){
          var img = $('#wrapper #content .post img');
          if(img.length > 0){
               img.attr('src', 'https://golos.io/images/landing/golos.png').addClass('preview');
          }       
     });
</script>

Почему именно так я объясню в следующем уроке.

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

Всем приятного отдыха.

---

Всегда рад Вашему вниманию, голосуйте и комментируйте.
Подписывайтесь, дальше здесь будет очень интересно.

---