Селекторы jQuery
Селекторы jQuery - одна из самых важных частей библиотеки jQuery.
Селекторы jQuery
Селекторы jQuery позволяют Вам выбирать и управлять элементом (ами) HTML.
Селекторы jQuery используются, чтобы "найти" (или выбрать) элементы HTML на основе их идентификаторов, классов, типов, атрибутов, значений атрибутов и других признаков. Они основаны на существующих CSS Селекторах, и кроме того, существуют некоторые собственные селекторы.
Все селекторы в jQuery начинаются со знака доллара и круглых скобок: $().
Селектор элемента
jQuery селектор элемента выбирает элементы на основании имени элемента.
Можно выбрать все элементы <p> на странице следующим образом:
Пример
Когда пользователь щелкает по кнопке, все <p> элементы будут скрыты:
Пример
$("button").click(function(){
$("p").hide();
});
});
Попробуйте сами »
#id Селектор
jQuery селектор #id использует атрибут идентификатора HTML-тэга, чтобы найти определенный элемент.
Идентификатор должен быть уникальным в пределах страницы, таким образом, следует использовать #id селектор, когда Вы хотите найти единственный, уникальный элемент.
Чтобы найти элемент с определенным идентификатором, напишите символ хеша, сопровождаемый идентификатором элемента:
Пример
Когда пользователь щелкает по кнопке, элемент с идентификатором "test" будет скрыт:
Пример
$("button").click(function(){
$("#test").hide();
});
});
Попробуйте сами »
Селектор .class
jQuery селектор класса находит элементы с определенным классом.
Чтобы найти элементы с определенным классом, напишите символ точки, сопровождаемый именем класса:
Пример
Когда пользователь щелкнет по кнопке, элементы с классом "test" будут скрыты:
Пример
$("button").click(function(){
$(".test").hide();
});
});
Попробуйте сами »
Еще Примеры Селекторов jQuery
Синтаксис | Описание | Пример |
---|---|---|
$("*") | Выбрать все элементы | Показать |
$(this) | Выбрать текущий HTML элемент | Показать |
$("p.intro") | Выбрать все элементы <p> с классом "intro" | Показать |
$("p:first") | Выбрать первый элемент <p> | Показать |
$("ul li:first") | Выбрать первый элемент <li> первого списка <ul> | Показать |
$("ul li:first-child") | Выбрать первый элемент <li> каждого списка <ul> | Показать |
$("[href]") | Выбрать все элементы с атрибутом href | Показать |
$("a[target='_blank']") | Выбрать все элементы <a> со значением атрибута target равным "_blank" | Показать |
$("a[target!='_blank']") | Выбрать все элементы <a> со значением атрибута target НЕ равным "_blank" | Показать |
$(":button") | Выбрать все элементы <button> и <input> с типом type="button" | Показать |
$("tr:even") | Выбрать все четные элементы <tr> | Показать |
$("tr:odd") | Выбрать все нечетные элементы <tr> | Показать |
Функции в Отдельном Файле
Если Ваш веб-сайт содержит много страниц, и Вы хотите, чтобы Ваши функции jQuery было проще обслуживать, можно вставить Ваши функции jQuery в отдельный .js файл.
Когда jQuery демонстрируется в постах сайта, функции добавляются непосредственно в раздел <head>. Однако, иногда более предпочтительно разместить их в отдельный файл, например так (используйте атрибут src, чтобы сослаться на .js файл):
Пример
<script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>