1. Главная страница » Уроки jQuery » jQuery, селекторы

jQuery, селекторы

Автор: | 31.03.2013

Селекторы — это элементы, с которыми мы хотим что-либо сделать. Давайте посмотрим, как их можно задавать:

#id — выбирает единственный элемент с переданным идентификатором (id). Пример:

$(«#lok»).css(«border», «1px solid red»);

Данный оператор выберет элемент с id=»lok» и добавит ему css-стиль, в данном случае рамку, шириной в 1 пиксел, сплошную и красную.

.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="cascade.css">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
 <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()">Сделать шрифт в 1 и 3 div-ах жирным</button>
  </body>
</html>

Внешний вид зададим с помощью таблицы стилей (cascade.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");
}

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

У элементов могут быть предки (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="cascade.css">
    <script type="text/javascript" src="jquery-1.7.1.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="cascade.css">
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
      <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="Cx1();">
<input type="button" id="b2" value="Поменять цвет кнопок" onclick="Cx2();">
      </form>
  </body>
</html>

Сами функции:

function Cx1(){
  $(":text, :password").css("background", "#EDFF23");
}
function Cx2(){
  $(":button").css("background", "green");
}

Вот так все просто! Кстати, если бы мы захотели поменять цвет только у одной кнопки, например, у первой, то мы обращались бы к ней по ее id:

function Cx2(){
  $("#b1").css("background", "blue");
}

Т.е. селекторы форм помогают совершать массовые действия с элементами формы.

1 2 3 4 5 6

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code