Селекторы jQuery

Селекторы jQuery - одна из самых важных частей библиотеки jQuery.

Селекторы jQuery

Селекторы jQuery позволяют Вам выбирать и управлять элементом (ами) HTML.

Селекторы jQuery используются, чтобы "найти" (или выбрать) элементы HTML на основе их идентификаторов, классов, типов, атрибутов, значений атрибутов и других признаков. Они основаны на существующих CSS Селекторах, и кроме того, существуют некоторые собственные селекторы.

Все селекторы в jQuery начинаются со знака доллара и круглых скобок: $().

Селектор элемента

jQuery селектор элемента выбирает элементы на основании имени элемента.

Можно выбрать все элементы <p> на странице следующим образом:

$("p")

Пример

Когда пользователь щелкает по кнопке, все <p> элементы будут скрыты:

Пример

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

Попробуйте сами »

#id Селектор

jQuery селектор #id использует атрибут идентификатора HTML-тэга, чтобы найти определенный элемент.

Идентификатор должен быть уникальным в пределах страницы, таким образом, следует использовать #id селектор, когда Вы хотите найти единственный, уникальный элемент.

Чтобы найти элемент с определенным идентификатором, напишите символ хеша, сопровождаемый идентификатором элемента:

$("#test")

Пример

Когда пользователь щелкает по кнопке, элемент с идентификатором "test" будет скрыт:

Пример

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

Попробуйте сами »

Селектор .class

jQuery селектор класса находит элементы с определенным классом.

Чтобы найти элементы с определенным классом, напишите символ точки, сопровождаемый именем класса:

$(".test")

Пример

Когда пользователь щелкнет по кнопке, элементы с классом "test" будут скрыты:

Пример

$(document).ready(function(){
  $("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 файл):

Пример

<head>
<script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

Далее: jQuery метод stop()

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)