Как создать свой сайт → Уроки jQuery → JQuery селекторы

JQuery селекторы

В прошлом уроке мы определились, что селекторы - это элементы, с которыми мы хотим что-либо сделать. Давайте посмотрим, как их можно задавать:
  • #id - выбирает единственный элемент с переданным идентификатором (id).
    Пример:
    $("#lok").css("border", "1px solid red");
    Данный оператор выберет элемент с id="lok" и добавит ему css-стиль, в данном случае рамку, шириной в 1 пиксел, сплошную и красную. (О способах задания css-стилей будет говориться в отдельном уроке).


  • .class - выбирает все элементы с переданным классом.
    Пример:
    $(".lok").css("border", "1px solid red");
    Данный оператор выберет все элементы с class="lok" и добавит им css-стиль, в данном случае рамку, шириной в 1 пиксел, сплошную и красную.


  • elements - выбирает все элементы с выбранным именем.
    Пример:
    $("div").css("border", "1px solid red");
    Данный оператор выберет все div-ы и обведет их в рамки.


  • * - выбирает все элементы, включая head и body.
    Пример:
    $("*").css("border", "1px solid red");
    Данный оператор добавит рамку ко всем элементам.
    $("*", document.body).css("border", "1px solid red");
    Данный оператор добавит рамку ко всем элементам в тегах body.


  • selector1, ..., selectorN - выбирает все элементы, переданные в селекторах.
    Пример:
    $("div, span, p.lok").css("border", "1px solid red");
    Данный оператор добавит рамку ко всем div-ам, span-ам, и абзацам, имеющим класс lok. Таким образом, через зяпятую можно указать любые селекторы.

Давайте попрактикуемся и сделаем вот что (пощелкайте по кнопкам):

Селекторы jQuery

Текст первого абзаца

Текст второго абзаца

Текст третьего абзаца






Код html-страницы прост:
<html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h2>Селекторы jQuery</h2> <div id="st1" ><p>Текст первого абзаца</p></div> <div id="st2" ><p class="withBorder">Текст второго абзаца</p></div> <div id="st3" ><p>Текст третьего абзаца</p></div> <div style="clear: both"></div> <button onclick="addStyle1()">Сделать первый div красным</button><br><br> <button onclick="addStyle2()">Обвести средний абзац синей рамкой</button><br><br> <button onclick="addStyle3()">Сделать шрифт в первом и третьем div-ах жирным</button> </body> </html>
Внешний вид зададим с помощью таблицы стилей (style.css):
#st1, #st2, #st3{ float:left; background:yellow; margin:5px; padding:5px; }
Ну и на странице script.js напишем сами функции:
function addStyle1(){ $("#st1").css("background", "red"); } function addStyle2(){ $("p.withBorder").css("border", "1px solid blue"); } function addStyle3(){ $("#st1, #st3").css("fontWeight", "bold"); }
Как задавать css-стили мы сейчас разбирать не будем (для этого будет отдельный урок), а вот как задавать селекторы Вы, я надеюсь, уяснили. Тогда двигаемся дальше.

Иерархические селекторы

В уроке 9 по javascript мы рассматривали иерархию объектов, по аналогии у элементов могут быть предки (parent) и потомки (child). Например, все элементы, находящиеся на форме являются потомками формы, а форма, в свою очередь, является их предком. А в предыдущем примере абзац с классом withBorder является потомком div-а с id="st2" (он находится внутри него).

Посмотрим, как это можно использовать в селекторах jQuery:
  • parent child - выбирает все элементы, являющиеся потомками для определенного элемента предка.
    Пример:
    $("form input").css("border", "1px solid red");
    Данная инструкция добавит рамку всем input-ам, которые являются потомками элемента form.


  • parent > child - выбирает всех прямых наследников элемента-родителя.
    Пример - пусть у нас есть html-страница такой структуры:
    <html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h2>Селекторы jQuery</h2> <div id="main"> <p></p> <div></div> <span></span> </div> <div id="content"> <p></p> <div></div> <span></span> </div> </body> </html>
    Тогда следующая инструкция:
    $("#content > *").css("border", "1px solid red");
    добавит рамку всем элементам (div-у, span-у и абзацу), которые находятся в div-е с id="content", но не затронет одноименные элементы в div-е с id="main".


  • prev + next - выбирает все элементы, которые являются следующими (next) за элементом prev (предыдущий).
    Пример:
    $("label + input").css("border", "1px solid red");
    Данная инструкция добавит рамку только тем input-ам, которые следуют непосредственно за надписями (label).


Селекторы форм

Сначала просто их перечислим:
  • :input - выбираются все элементы input.

  • :text - выбираются все элементы input типа text.

  • :password - выбираются все элементы input типа password.

  • :radio - выбираются все элементы input типа radio.

  • :checkbox - выбираются все элементы input типа checkbox.

  • :submit - выбираются все элементы input типа submit.

  • :reset - выбираются все элементы input типа reset.

  • :button - выбираются все элементы input типа button.

  • :image - выбираются все элементы input типа image.

  • :file - выбираются все элементы input типа file.

  • :hidden - выбираются все элементы input типа hidden или просто скрытые.

Давайте сделаем, например, вот такую форму (пощелкайте по кнопкам):

Селекторы форм в jQuery





Код html-страницы:
<html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h2>Селекторы форм в jQuery</h2> <form> <label>E-mail:</label><br> <input type="text" name="mail"><br> <label>Password:</label><br> <input type="password" name="pas"><br> <input type="button" id="b1" value="Поменять цвет полей для ввода" onclick="addColor1();"> <input type="button" id="b2" value="Поменять цвет кнопок" onclick="addColor2();"> </form> </body> </html>
Сами функции:
function addColor1(){ $(":text, :password").css("background", "red"); } function addColor2(){ $(":button").css("background", "blue"); }
Вот так все просто! Кстати, если бы мы захотели поменять цвет только у одной кнопки, например, у первой, то мы обращались бы к ней по ее id:
function addColor2(){ $("#b1").css("background", "blue"); }
Т.е. селекторы форм помогают совершать массовые действия с элементами формы.

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



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