jQuery ч.2: Введение в jQuery Селекторы
августа 13, 2011 | Published in ClientSide, JavaScript, jQuery | 3 Comments
jQuery ч.2: Введение в jQuery Селекторы
Селектором могут быть свойства тега, стили тега, имя тега, имя класса и идентификатора.
В этой статье мы будем использовать следущий HTML/CSS код:
<!DOCTYPE html>
<html>
<head>
<title>RubyDev.ru</title>
<style>
div.mega-div{width:640px;margin: 0 auto;background:#c00; border:10px solid #a22;padding:10px;overflow:hidden}
ul{list-style-type:none;margin:0;padding:0;}
a{color:#fff;font-size:11px;}
div#nav{width:200px;background:#333;padding:10px;border:10px solid #222;float:left;margin-right:10px;}
div#content{width:350px;background:#333;padding:10px;border:10px solid #222;float:left}
#content p{color:#ddd;padding:0;margin:0;margin-bottom:10px;text-indent:20px;}
</style>
<script src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div class="maga-div">
<div id="nav">
<ul>
<li><a href="/">RubyDev</a></li>
<li><a href="#" style="link-style">This page</a></li>
<li><a href="http://rubyonrails.org/">Ruby on Rails</a></li>
<li><a href="http://rubyflow.ru">RubyFlow.ru</a></li>
<li><a href="http://rubyflow.com" id="link-id">RubyFlow.com</a></li>
</ul>
</div>
<div id="content">
<p>Content content content Content content content Content.</p>
<p>Content content content Content content content Content.</p>
<p>Content content content Content content content Content.</p>
<p>Content content content Content content <a href="#">content Content</a>.</p>
</div>
</div>
</body>
</html>
Давайте сначала выберим все ссылки:
$(«a»)
А теперь давайте выберем только те ссылки, которые ссылаются на мой кошерный бложек:
$(«a[href=\"http://rubydev.ru\"]«)
Выбираем все ссылки из меню:
$(«li a»)
Выбираем каждую вторую (парный номер) ссылку из меню:
$(«li a:odd»)
Выбираем каждую вторую (непарный номер) ссылку из меню:
$(«li a:even»)
Примеры выше демонстрируют как легко производить выбор элемента или элементов DOM. Как видите, они весьма логичны, а некоторые из них очень похожи на селекторы CSS. Ниже приведены некоторые наиболее полезные на первых этапах изучения селекторы:
Селекторы по тегу
Эти селекторы очень просты, вы просто указываете имя тега и jQuery производит выбор всех тегов — объектов DOM, с соответствующим именем.
$(«a»), $(«div»), $(«p») и т.д.
Атрибутивные селекторы
Эти селектроры используются для выбора объектов DOM по их атрибутам, например, как в примерах выше выбор элемента с свойством href и значением «http://rubydev.ru». Атрибутивные селекторы всегда заключаются в квадратные скобки, кроме сокращенных селекторов специально для выбора по классу и идентификатору.
Выбор элемента с точно определенным значением:
$(«[src='img.jpg']«) // например: <img src=»img.jpg» />
Выбор элемента с атрибутом, значение которого содержит указанную подстроку:
$(«[class*='-div']«) // например: <div>
Выбор элемента с атрибутом значение которого начинается с определенной подстроки:
$(«[class^='mega']«) // например: <div>
Выбор элемента с атрибутом значение которого заканчивается определенной подстроки:
$(«[href$='ru']«) // например: <a href=»http://rubydev.ru»>RubyDev</a>
Выбор элемента с атрибутом значение которого содержит определенную строку отделенную пробелами:
$(«[alt='photo']«) // например: <img src=»…» alt=»Super photo with animals.» />
Выбор элемента с атрибутом который соответствует подстроке или который начинается с подстроки:
$(«[style='style']«) // например: <img style=»style» /> и <img style=»style-smile» />
Выбор элементов, которые не содержат определенного значения атрибута:
$(«[href!='#']«) // например все кроме: <a href=»#»>Ссылка на сюда</a>
Выбор элемента по его ID:
$(«#nav») // например: <div id=»nav»></div>
Выбор элемента по его классу:
$(«.mega-div») // например: <div class=»mega-div»></div>
Позиционные селекторы
Эти селекторы используются для выборки объектов на основе их положения по отношению к другим элементам, например на основе вложенности или наличия вложенных объектов, порядка следования в очереди (парные, не парные, первый элемент, последний элемент).
Выбор первого элемента:
$(«li:first») // здесь выбирается первый элемент <li>
Выбор последнего элемента:
$(«p:last») // здесь выбирается последний элемент p
Выбор каждого второго элемента начиная с 0 (индексация эллементов с нуля):
$(«p:even») // каждый второй параграф начиная с нулевого
Выбор каждого второго элемента начиная с первого:
$(«.mega-div:odd») // выбор каждого второго элемента с классом .mega-div начиная с первого (индексация с нуля)
Выбор вложенных элементов любой вложенности:
$(«div#nav a») // выбор всех ссылок произвольной вложенности в <div id=»nav»>…</div>
Выбор непосредственных дочерних элементов (первый уровень вложенности):
$(«li > a») // выбор всех ссылок находящихся в элементах списка <li><a href=»…»>…</a></li>
В статье я не буду приводить все селекторы их достаточно много для того, чтобы это стало монотонной и счкучной работой для меня и достаточно мало, что позволяет немного потренеровавшись запомнить их все (честно признаться, полезными окажутся только ок. 50% из них, а некоторые вы и вовсе никогда не будете использовать). Статья ставит целью не стать справочником, а просто рассказать о том, что такое селектор и как его использовать.
Полный перечень селекторов jQuery можно найти в официальной доке по API jQuery:
ноября 6, 2011 at 09:49 (#)
Видимо, что-то не так, или я чего-то не знаю:
$(«[class*='-div']«) — должно быть:
И далее, все неправильно…
ноября 6, 2011 at 09:52 (#)
Оуу..
Если что:
… — должно быть <div class="a-diva">
августа 27, 2012 at 09:20 (#)
Тут тоже попровить надо
Выбор элемента по его классу:
$(«.mega-div») // например: