jQuery: Селекторы, часть 1

Справочники

Рисунок jQuery: Селекторы, часть 1
jQuery: Селекторы, часть 1 jQuery: Селекторы, часть 1
оценка: 4.2 из 5
оценок: 5

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

В основном, селекторы jQuery используют структуру выборки, соответствующую спецификации CSS3 W3C. То есть, можно выбирать элементы страницы по классу, уникальному ID-идентификатору, тегу и даже определенному свойству элемента.

Меню разделов материала для быстрого доступа:

selector #id: jQuery

Возвращает элемент с определенным ID-идентификатором. В принципе, во всем документе элемент с определенным ID-идентификатором может быть только 1, но если их несколько, то будет возвращен массив элементов jQuery.

  • id: string - уникальный идентификатор элемента.

Пример: выводится текст кнопки, на которой щелкнул пользователь.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#button1').click(function(){
          $('#result').text($('#button1').text());
        });
        $('#button2').click(function(){
          $('#result').text($('#button2').text());
        });
      });
    </script>
  </head>
  <body>
    <div>Была нажата кнопка: <span id="result">нет</span>.</div>
    <button id="button1">Кнопка 1</button>
    <button id="button2">Кнопка 2</button>
  </body>
</html>

К содержанию.

selector element: jQuery

Возвращает элемент по имени тега элемента.

  • element: string - имя тега элемента.

Пример:

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('span').css('background','#00ff00');
      });
    </script>
  </head>
  <body>
    Это пример использования <span>селетора</span> по тегу элемента. Элемент, <span>подсвеченный</span> зеленым, выделен тегом SPAN в тексте.
  </body>
</html>

К содержанию.

selector .class: jQuery

Возвращает элементы с заданным классом.

  • class: string - класс элементов, которые нужно получить.

Пример: скрывает все элементы с классом tohide, если щелкнуть на кнопке.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('button').click(function(){
          $('.tohide').hide();
        });
      });
    </script>
  </head>
  <body>
    <div class="tohide">Пункт 1 (tohide)</div>
    <div class="tohide">Пункт 2 (tohide)</div>
    <div class="nohide">Пункт 3 (nohide)</div>
    <div>Пункт 4 (без класса)</div>
    <div class="tohide">Пункт 5 (tohide)</div>
    <button>Скрыть</button>
  </body>
</html>

К содержанию.

selector .class1.class2: jQuery

Возвращает элементы, в которых существуют все перечисленные классы.

  • class1: string - первый класс для выборки.
  • class2: string - второй класс для выборки.

Пример: выделяет красной рамкой элемент, в котором присутствуют оба перечисленных в селекторе класса class1 и class2.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('button').click(function(){
          $('.class1.class2').css('border','3px solid red');
        });
      });
    </script>
  </head>
  <body>
    <div class="class1">Пункт 1 (class1)</div>
    <div class="class1 class2">Пункт 2 (class1 и class2)</div>
    <div class="class3">Пункт 3 (class3)</div>
    <div>Пункт 4 (без класса)</div>
    <div class="class2">Пункт 5 (class2)</div>
    <button>Выделить</button>
  </body>
</html>

К содержанию.

selector *: jQuery

Возвращает все элементы документа.

Пример: выделяет красной рамкоы все элементы страницы (включая HEAD, BODY).

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('*').css('border','1px solid #ff0000');
      });
    </script>
  </head>
  <body>
    <div>DIV-блок. <span>Внутри SPAN-элемент</span>.</div>
    <p>Параграф P
    <ul>
      <li>Пункт 1</li>
      <li>Пункт 2</li>
      <li>Пункт 3</li>
    </ul>
  </body>
</html>

К содержанию.

selector Selector1, Selector2, SelectorN: jQuery

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

  • Selector1: selector - селектор 1
  • Selector2: selector - селектор 2
  • SelectorN: selector - селектор N

Пример: выделяет красной рамкой элементы с классом class2, элементы SPAN внутри элемента с классом class2 и элемент DIV.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('.class2, .class2 span, div').css('border','1px solid #ff0000');
      });
    </script>
  </head>
  <body>
    <p class="class1">P Class 1
    <p class="class2">P Class 2, <span>внутри SPAN</span>
    <div class="class3">DIV Class 3, <span>внутри SPAN</span></div>
    <div>DIV без класса</div>
  </body>
</html>

К содержанию.

selector Selector1 Selector2: jQuery

Возвращает элементы, которые соответствуют Selector2, которые, в свою очередь, являются потомками Selector1.

  • Selector1: selector - селектор родительского элемента.
  • Selector2: selector - селектор дочернего элемента.

Пример: выделяет красной рамкой элемент SPAN, который является потомком элемента DIV с классом class1.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('div.class1 span').css('border','1px solid #ff0000');
      });
    </script>
  </head>
  <body>
    <div>Элемент DIV без класса <span>с элементом SPAN</span></div>
    <p>Элемент P без класса</p>
    <div class="class1">Элемент DIV с классом class1 <span>с элементом SPAN</span></div>
    <p class="class1">Элемент P с классом class1 <span>с элементом SPAN</span></p>
    <div class="class1">Элемент DIV с классом class1</div>
  </body>
</html>

К содержанию.

selector Parent > Child: jQuery

Возвращает все элементы, соответствующие элементу Child, которые, в свою очередь, являются непосредственно дочерними к элементам Parent.

  • Parent: selector - селектор родительского элемента.
  • Child: selector - селектор дочернего элемента.

Пример: выделяет зеленым все элементы SPAN, которые являются дочерними непосредственно к элементу DIV.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('div > span').css('background','#00ff00');
      });
    </script>
  </head>
  <body>
    <div>Элемент DIV, <span>Вложенный SPAN</span></div>
    <div>Элемент DIV, <b>Вложенный B</b></div>
    <div>Элемент DIV, <span>Вложенный SPAN</span></div>
    <div>Элемент DIV, <b>Вложенный B, <span>Вложенный в B элемент SPAN</span></b></div>
    <div>Элемент DIV</div>
  </body>
</html>

К содержанию.

selector Prev + Next: jQuery

Возвращает элемент Next, который следует за элементом Prev.

  • Prev: selector - селектор элемента, за которым идет нужный элемент.
  • Next: selector - селектор элемента, который идет вслед за элементом в селекторе Prev.

Пример: выделяет зеленым элемент P, который следует за элементом DIV.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('div + p').css('background','#00ff00');
      });
    </script>
  </head>
  <body>
    <div>Элемент DIV</div> <p>Элемент P</p>
    <hr>
    <p>Элемент P</p> <div>Элемент DIV</div>
    <hr>
    <div>Элемент DIV <p>Вложенный в DIV элемент P</p></div>
  </body>
</html>

К содержанию.

selector Prev ~ Siblings: jQuery

Возвращает все элементы Siblings, которые следуют за элементом Prev.

  • Prev: selector - селектор элемента, за которым идут нужные элементы.
  • Siblings: selector - селектор элементов, которые нужно вернуть.

Пример: выделяет красной рамкой все элементы DIV, которые следуют за элементом с ID = mydiv.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#myid ~ div').css('border','3px dotted red');
      });
    </script>
  </head>
  <body>
    <div>Элемент DIV 1 </div>
    <div id="myid">Элемент DIV 2 (id = myid) </div>
    <div>Элемент DIV 3 <div>Элемент DIV внутри DIV 3 </div></div>
    <p>Элемент P <div>Элемент DIV внутри P </div></p>
    <div>Элемент DIV 4 </div>
  </body>
</html>

К содержанию.

selector Select:first: jQuery

Возвращает первый элемент из выборки, которая соответствует селектору Select.

  • Select: selector - стандартный селектор.

Пример: меняет фон первой ячейки всех таблиц.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('td:first').css('background','#00ff00');
      });
    </script>
  </head>
  <body>
    <table width="400" border="1">
      <tr>
        <td width="200">Ячейка 11</td>
        <td width="200">Ячейка 12</td>
      </tr>
      <tr>
        <td width="200">Ячейка 21</td>
        <td width="200">Ячейка 22</td>
      </tr>
    </table>
  </body>
</html>

К содержанию.

selector Select:last: jQuery

Возвращает последний элемент из выборки, которая соответствует селектору Select.

  • Select: selector - стандартный селектор.

Пример: меняет фон последней ячейки всех таблиц.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('td:last').css('background','#00ff00');
      });
    </script>
  </head>
  <body>
    <table width="400" border="1">
      <tr>
        <td width="200">Ячейка 11</td>
        <td width="200">Ячейка 12</td>
      </tr>
      <tr>
        <td width="200">Ячейка 21</td>
        <td width="200">Ячейка 22</td>
      </tr>
    </table>
  </body>
</html>

К содержанию.

selector Select1:not(Select2): jQuery

Возвращает элементы, соответствующие селектору Select1, отсеивая элементы, которые соответствую Select2.

  • Select1: selector - селектор выбора элементов.
  • Select2: selector - фильтрующий селектор (то, что не нужно выбирать).

Пример: выбирает все элементы с классом myclass, которые не являются элементами P.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('.myclass:not(p)').css('border','3px solid #00ff00');
      });
    </script>
  </head>
  <body>
    <div class="myclass">DIV 1 (класс myclass)</div>
    <div class="myclass">DIV 2 (класс myclass) <div>DIV внутри DIV 2 </div></div>
    <p class="myclass">P 1 (класс myclass) </p>
    <div>DIV 3 </div>
    <span class="myclass">SPAN 1 (класс myclass)</span>
  </body>
</html>

К содержанию.

selector Select:even: jQuery

Выбирает четные элементы, начиная с нуля.

  • Select: selector - селектор, четные элементы которого нужно вернуть.

Пример: меняет цвет фона каждого четного элемента DIV.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('div:even').css('background','#cccccc');
      });
    </script>
  </head>
  <body>
    <div>DIV №1</div>
    <div>DIV №2</div>
    <div>DIV №3</div>
    <div>DIV №4</div>
    <div>DIV №5</div>
  </body>
</html>

К содержанию.

selector Select:odd: jQuery

Выбирает нечетные элементы, начиная с еденицы.

  • Select: selector - селектор, нечетные элементы которого нужно вернуть.

Пример: меняет цвет фона каждого нечетного элемента DIV.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('div:odd').css('background','#cccccc');
      });
    </script>
  </head>
  <body>
    <div>DIV №1</div>
    <div>DIV №2</div>
    <div>DIV №3</div>
    <div>DIV №4</div>
    <div>DIV №5</div>
  </body>
</html>

К содержанию.

selector Select:eq(Index): jQuery

Выделяет элемент с определенным индексом из набора, соответствующего селектору Select.

  • Select: selector - селектор группы элементов.
  • Index: Number - номер элемента, который нужно получить из группы. Нумерация выбранных элементов начинается с нуля.

Пример: меняет цвет шрифта на красный первого элемента DIV.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('div:eq(1)').css('color','red');
      });
    </script>
  </head>
  <body>
    <div>Элемент № 0</div>
    <div>Элемент № 1</div>
    <div>Элемент № 2</div>
    <div>Элемент № 3</div>
  </body>
</html>

К содержанию.

selector Select:gt(Index): jQuery

Отбирает все элементы выборки Select, индекс которых строго больше номера Index.

  • Select: selector - селектор, из которого нужно сделать выборку элементов.
  • Index: Number - индекс, после которого нужно выбрать элементы. Индексы начинаются с нуля.

Пример: заменяет фон всех ячеек таблицы, расположенные после четвертой.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('td:gt(4)').css('background','green');
      });
    </script>
  </head>
  <body>
    <table border="0">
      <tr><td>Ячейка 0</td><td>Ячейка 1</td><td>Ячейка 2</td></tr>
      <tr><td>Ячейка 3</td><td>Ячейка 4</td><td>Ячейка 5</td></tr>
      <tr><td>Ячейка 6</td><td>Ячейка 7</td><td>Ячейка 8</td></tr>
    </table>
  </body>
</html>

К содержанию.

selector Select:lt(Index): jQuery

Отбирает все элементы выборки Select, индекс которых строго меньше номера Index.

  • Select: selector - селектор, из которого нужно сделать выборку элементов.
  • Index: Number - индекс, до которого нужно выбрать элементы. Индексы начинаются с нуля.

Пример: заменяет фон всех ячеек таблицы, расположенные до четвертой.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('td:lt(4)').css('background','green');
      });
    </script>
  </head>
  <body>
    <table border="0">
      <tr><td>Ячейка 0</td><td>Ячейка 1</td><td>Ячейка 2</td></tr>
      <tr><td>Ячейка 3</td><td>Ячейка 4</td><td>Ячейка 5</td></tr>
      <tr><td>Ячейка 6</td><td>Ячейка 7</td><td>Ячейка 8</td></tr>
    </table>
  </body>
</html>

К содержанию.

selector Select:header: jQuery

Этот селектор отбирает из совокупности элементов только заголовки H1, H2, H3, H4 и H5.

  • Select: selector - селектор, из элементов которого нужно отобрать заголовки.

Пример: выделяет зеленым цветом фон всех заголовков из набора элементов с классом sel.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('.sel:header').css('background','green');
      });
    </script>
  </head>
  <body>
    <table border="0">
      <h1 class="sel">Заголовок 1</h1>
      <p class="sel">Текст 1
      <h1 class="sel">Заголовок 2</h1>
      <p class="sel">Текст 2
      <h1>Заголовок 3</h1>
      <p class="sel">Текст 3
    </table>
  </body>
</html>

К содержанию.

selector Select:animated: jQuery

Выделяет элементы, которые в данный момент выполняют анимацию.

  • Select: selector - селектор элементов, среди которых нужно выбрать анимированный.

Пример: выделяет зеленым фоном элементы, которые в данный момент анимированы.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      aimateDiv = function(ind){
        if(ind==3) ind=-1;
        $('div').eq(ind).toggle('slow',function(){aimateDiv(ind+1);});
      }
      $(function(){
        $('button').click(function(){
          $('div').css('background','white');
          $('div:animated').css('background','green');
        });
        aimateDiv(0);
      });
    </script>
  </head>
  <body>
    <button>Выделить анимацию</button>
    <div>Элемент № 1</div>
    <div>Элемент № 2</div>
    <div>Элемент № 3</div>
    <div>Элемент № 4</div>
  </body>
</html>

К содержанию.

selector Select:contains(Text): jQuery

Выбирает элементы, которые содержат внутри себя заданный текст.

  • Select: selector - селектор элемента, который должен содержать заданный текст.
  • Text: String - текст, который должен содержать выбранный елемент или элементы.

Пример: выделяет красным цветом шрифт элемента P содержащего текст "селектор", и выделяет серым цветом фон элемента P, содержащего текст "пример".

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('p:contains("селектор")').css('color','red');
        $('p:contains("пример")').css('background','#cccccc');
      });
    </script>
  </head>
  <body>
    <p>Привет! Это пример селектора.</p>
    <p>Тестируется селектор поиска элемента с текстом</p>
    <p>Селектор регистрозависим.</p>
    <p>Пример закончен.</p>
  </body>
</html>

К содержанию.

selector Select:empty: jQuery

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

  • Select: selector - селектор элементов, которые нужно вильтровать.

Пример: выделяет красной рамкой пустой элемент.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('div')
          .css('height','20px')
          .css('border','1px solid #cccccc')
          .css('margin','5px')
        ;
        $('div:empty').css('border','1px solid red');
      });
    </script>
  </head>
  <body>
    <div>Текст 1</div>
    <div><span></span></div>
    <div></div>
    <div>Текст 2</div>
    <div> </div>
  </body>
</html>

К содержанию.

selector Select1:has(Select2): jQuery

Выбирает элементы, которые соответствуют селектору Select1, в которых находится элемент, соответствующий селектору Select2.

  • Select1: selector - селектор искомого элемента.
  • Select2: selector - селектор элемента, который должен содержаться в элементе Select1.

Пример: выделяет красной рамкой элемент DIV, который содержит в себе элемент SPAN.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('div')
          .css('height','20px')
          .css('border','1px solid green')
          .css('margin','5px')
        ;
        $('div:has("span")').css('border','1px solid red');
      });
    </script>
  </head>
  <body>
    <div>Элемент DIV 1</div>
    <div>Элемент DIV 2. <span>Элемент SPAN 1</span></div>
    <div>Элемент DIV 3</div>
    <div>Элемент DIV 4</div>
    <div>Элемент DIV 5</div>
  </body>
</html>

К содержанию.

selector Select:parent: jQuery

Выбирает все элементы, соответствующие селектору Select, которые содержат в себе любой элемент, включая текст. Попросту говоря, выбирает непустые элементы.

  • Select: selector - селектор элемента, который нужно найти.

Пример: выделяет красной рамкой все элементы, которые содержат в себе другой элемент.

Code
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('p')
          .css('border','1px solid red')
          .css('height','20px')
        ;
        $('p:parent').css('background','#cccccc');
      });
    </script>
  </head>
  <body>
    <div>Элемент DIV 2. <p>Элемент P 1</p></div>
    <p>Элемент P 2</p>
    <pre><p>Элемент P 3</p></pre>
    <pre><p> </p></pre>
    <p></p>
  </body>
</html>

К содержанию.

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




jQuery: Селекторы, часть 1
Справочники
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Справочники
Просмотрено:9164
Рейтинг:4.2/5
Дата добавления:2010-10-16 13:58, Суббота
Добавил:Szen
Теги:jQuery справка

Мини-форум

№ 02010-10-16 13:58
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "jQuery: Селекторы, часть 1".
Гость
Учавствовать в обсуждении "jQuery: Селекторы, часть 1" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Каким файл-хостингом вы пользуетесь?
Всего ответов: 389
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 1
Гостей: 1
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz