jQuery: Селекторы, часть 1
Справочники
jQuery: Селекторы, часть 1Продолжим изучение фреймворка jQuery. В этом материале рассмотрим селекторы jQuery, котрые дают очень широкую возможность поиска элементов DOM документа. Можно использовать довольно сложные комбинации выборки всего одной строкой.
В основном, селекторы jQuery используют структуру выборки, соответствующую спецификации CSS3 W3C. То есть, можно выбирать элементы страницы по классу, уникальному ID-идентификатору, тегу и даже определенному свойству элемента.
Меню разделов материала для быстрого доступа:
- selector #id: jQuery
- selector element: jQuery
- selector .class: jQuery
- selector .class1.class2: jQuery
- selector *: jQuery
- selector Selector1, Selector2, SelectorN: jQuery
- selector Selector1 Selector2: jQuery
- selector Parent > Child: jQuery
- selector Prev + Next: jQuery
- selector Prev ~ Siblings: jQuery
- selector Select:first: jQuery
- selector Select:last: jQuery
- selector Select1:not(Select2): jQuery
- selector Select:even: jQuery
- selector Select:odd: jQuery
- selector Select:eq(Index): jQuery
- selector Select:gt(Index): jQuery
- selector Select:lt(Index): jQuery
- selector Select:header: jQuery
- selector Select:animated: jQuery
- selector Select:contains(Text): jQuery
- selector Select:empty: jQuery
- selector Select1:has(Select2): jQuery
- selector Select:parent: jQuery
selector #id: jQuery
Возвращает элемент с определенным ID-идентификатором. В принципе, во всем документе элемент с определенным ID-идентификатором может быть только 1, но если их несколько, то будет возвращен массив элементов jQuery.
- id: string - уникальный идентификатор элемента.
Пример: выводится текст кнопки, на которой щелкнул пользователь.
<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 - имя тега элемента.
Пример:
<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, если щелкнуть на кнопке.
<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.
<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).
<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.
<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.
<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.
<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.
<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.
<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 - стандартный селектор.
Пример: меняет фон первой ячейки всех таблиц.
<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 - стандартный селектор.
Пример: меняет фон последней ячейки всех таблиц.
<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.
<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.
<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.
<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.
<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 - индекс, после которого нужно выбрать элементы. Индексы начинаются с нуля.
Пример: заменяет фон всех ячеек таблицы, расположенные после четвертой.
<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 - индекс, до которого нужно выбрать элементы. Индексы начинаются с нуля.
Пример: заменяет фон всех ячеек таблицы, расположенные до четвертой.
<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.
<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 - селектор элементов, среди которых нужно выбрать анимированный.
Пример: выделяет зеленым фоном элементы, которые в данный момент анимированы.
<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, содержащего текст "пример".
<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 - селектор элементов, которые нужно вильтровать.
Пример: выделяет красной рамкой пустой элемент.
<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.
<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 - селектор элемента, который нужно найти.
Пример: выделяет красной рамкой все элементы, которые содержат в себе другой элемент.
<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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
jQuery: Селекторы, часть 1
Справочники
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Справочники |
| Просмотрено: | 11920 |
| Рейтинг: | 4.2/5 |
| Дата добавления: | 2010-10-16 13:58, Суббота |
| Добавил: | Szen |
| Теги: | jQuery справка |
Рекомендуем
Дополнительно к jQuery: Селекторы, часть 1
Мини-форум
| № 0 | 2010-10-16 13:58 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "jQuery: Селекторы, часть 1". |
| Гость |
