Селекторы — это элементы, с которыми мы хотим что-либо сделать. Давайте посмотрим, как их можно задавать:
#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");
} |
Т.е. селекторы форм помогают совершать массовые действия с элементами формы.
