Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Серьёзной хостинговой компании требуется квалифицированная уборщица. Требования: знание UNIХ-систем, способность восстановить систему после своих действий.

jQuery, селекторы

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

#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

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь