jQuery ч.2: Введение в jQuery Селекторы

августа 13, 2011  |  Published in ClientSide, JavaScript, jQuery  |  3 Comments

jqueryjQuery ч.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:

Tags: ,

Responses

  1. says:

    ноября 6, 2011 at 09:49 (#)

    Видимо, что-то не так, или я чего-то не знаю:
    $(«[class*='-div']«) — должно быть:
    И далее, все неправильно…

  2. says:

    ноября 6, 2011 at 09:52 (#)

    Оуу..
    Если что:
    … — должно быть <div class="a-diva">

  3. volniy_strelok says:

    августа 27, 2012 at 09:20 (#)

    Тут тоже попровить надо
    Выбор элемента по его классу:
    $(«.mega-div») // например:

Leave a Response

Для подсветки кода используйте BB - коды: [language]...[/language], где language может быть: ruby, javascript, css, html.