JavaScript, как и CSS, обладает функционалом, позволяющим обращаться к HTML элементам для преобразования контента страниц. В CSS это достигается путём написания селекторов. В JavaScript существует несколько способов организации данного функционала, и вот один из них:
Var primaryHeadings = document.getElementsByTagName("h1");
Данный код извлекает все заголовки h1 и, грубо говоря, помещает их в переменную primaryHeadings. Если на странице присутствует несколько заголовков, то все они будут помещены в массив.
Var ou812 = document.getElementById("eddie");
Данный код выбирает элемент с id = “eddie”.
Var guitars = document.getElementsByClassName("axes");
Также мы можем выбирать элементы по названию их классов.
Добавим немного SizzleРазличного рода JavaScript фрэймворки, предоставляют собственные возможности составления селекторов. Одним из самых успешных был Sizzle, который в последствии преобразился в jQuery. В отличие от своего потомка, Sizzle мог только работать с DOM и манипулировать им. Если вам не нужен весь остальной функционал jQuery, то и сегодня вы можете скачать Sizzle как отдельную библиотеку.
С развитием данных библиотек написание селекторов значительно сократилось и преобразилось:
$("#dave").css()
Данный код извлекает html элемент с id=”dave” и позволяет работать с его css стилями.
Sizzle - это не единственная JavaScript библиотека для манипуляции html кодом. Также существуют и другие варианты, к примеру rangy . Однако, по моему мнению, всё выше перечисленное устарело перед тем, что ждёт вас дальше в этой статье.
Новый уровень JavaScriptМногие разработчики настолько часто начали пользоваться jQuery, что даже не заметили кардинальных изменений в самом JavaScript.
“JavaScript Selector API” - это официальная часть спецификации HTML5, она может быть использована и при написании XHTML страниц. Новый синтаксис очень прост:
Document.querySelector("#eddie")
Данный код является абсолютно эквивалентным document.getElementById("eddie"). Не впечатляет? Что насчёт этого:
Document.querySelector("#eddie h1 + p")
Новый функционал позволяет манипулировать DOM-ом, используя сложные CSS выражения.
Метод querySelector извлекает только первый попавшийся элемент. Для извлечения всех необходимо воспользоваться querySelectorAll:
Var hiFrets = document.querySelectorAll("table#frets tr:nth-child(3)")
Данный код извлекает каждую третью строку из таблицы с id=”frets”.
Несколько очень важных моментовСуществует несколько ограничений, о которых вы должны знать, если будете использовать метод querySelector / All:
Не все браузеры поддерживают новый функционал. Если вам важно, чтоб код работал на IE6-7, то лучше пользоваться библиотеками, которые могут манипулировать DOM-ом: Sizzle или jQuery.
Селекторы должны быть составлены очень аккуратно, иначе браузеры их не поймут, и выше перечисленные методы вернут null. В общем, будьте очень осторожны, особенно при использовании селекторов CSS3.
В отличии от getElementsByTagName, метод querySelectorAll возвращает статический список извлечённых элементов в том виде, в которым они находятся на странице в данный момент времени. Это значит, что при внесении каких-либо динамических изменений в код (добавление, удаление элементов через JavaScript), необходимо будет заново воспользоваться методом querySelectorAll.
Попробуйте новый функционал, чтоб избавиться от необходимости загружать различного рода библиотеки.
jQuery - это Javascript библиотека, которая упрощает работу с DOM, событиями, CSS и AJAX, а также позволяет легко создавать анимации. Главная особенность jQuery - это кроссбраузерность (да, и Internet Explorer 6 тоже:).Слоган jQuery звучит так: "Write less, do more", что в переводе на русский означает "Пиши меньше, делай больше" (или "Тише едешь - дальше будешь" :). Эти слова идеально подходят к описанию этой библиотеки и полностью себя оправдывают.
Первые шаги с jQueryДля начала Вам понадобится скачать одноименную библиотеку. Сделать это можно на официальном сайте jQuery . После этого следует подключить jQuery к Вашей HTML страничке. Сделать это можно с помощью добавления тега script в head документа:
Подключаем jQuery
После этого Вы уже можете начинать использовать jQuery.
Селекторы в jQueryПришло время рассказать о селекторах. Селекторы в jQuery - это те же самые селекторы CSS, только модифицированные. Модифицированные они потому, что программисты jQuery добавили много полезных селекторов для удобного поиска нужных элементов.
Рассмотрим пример кода:
Пример 1Параграф 1
Параграф 2
Параграф 3
// здесь будет ваш javascript код
Примеры получения каждого элемента документа:
$(document.body) - элемент body
$("div") - селектор возвращает все элементы div
$("p") или $("div p") - все параграфы p (3 штуки)
$("div > p") - возвращает параграфы, которые являются непосредственными дочерними нодами элемента div
$("p:first") - параграф №1
$("#pEl") или $("p#pEl") - возвратит параграф с идентификатором (id) "pEl"
$("p.second") - возратит параграф с классом "second"
$("p:eq(1)") - возвратит параграф с индексом 1 (индексы начинаются с 0, возвратится параграф №2)
$("p:last") - возвратит последний параграф
$("p.third#third") - возвратит параграф №3
Обратите внимание как легко найти нужный нам элемент. Забудьте про document.getElementById("id") и document.getElementsByTagName("p"), они нам больше не понадобятся.
Пример 2Рассмотрим более сильные возможности jQuery. Для этого нарисуем таблицу
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
| Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 |
В этом примере я использовал селектор ":odd", который выбирает все нечетные элементы и применил его к рядкам таблицы (тегам tr). ":even" в свою очередь выбирает четные (0, 2, 4, ...).
И так нам надо выбрать все нечетные рядки таблицы, но мы не хотим чтобы первый рядок, который является хедером (элементы th) менял свой цвет и полосы начинались с третьего рядка. В этом случае нам пригодится селектор ":not(selector)". Используется он так:
$("table tr:not(:first):odd") - выбираем все четные элементы tr кроме первого
Вот исходный javascript:
$("button").toggle(function() {
$("table tr:not(:first):odd").css("background", "#eee");
// 1-е нажатие, проставляем серый фон
},function() {
$("table tr:not(:first)").css("background", "none");
// 2-е нажатие, убираем фон со всех tr
});
На сайте jQuery в разделе селекторов есть отдельный подраздел, посвященный работе с формами. Селекторы предоставляют удобную работату с чекбоксами, кнопками, полями ввода и так далее. Нарисуем форму.
На этом уроке мы познакомимся с селекторами элементов формы, которые будем использовать в качестве аргумента функции jQuery("селектор") для выбора элементов.
Назначение селекторов элементов формыСелекторы элементов формы предназначены для выбора элементов в зависимости от:
- их типа (значения атрибута type) - :button , :checkbox , :file , :image , :password , :radio , :reset , :submit , :text .
- того, является ли их тег input , textarea , select или button - :input .
- того, находится ли элемент в фокусе или нет - :focus .
- того, находятся ли элементы в активном состоянии (:enabled) или не активном (:disabled).
- того, находятся ли элементы option в состоянии selected или нет - :selected .
- того, находятся ли элементы checkbox , select и radio в состоянии selected или нет - :checked .
:button - выбирает все элементы button и элементы с type="button" . Селектор $(":button") эквивалентен $("button, input") .
Селектор:button не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию: $("селектор").filter(":button");
Например, выбрать все элементы button или элементы с type="button" , которые расположены внутри формы:
Обновить данные $("form:button"); //или с помощью метода filter $("form *").filter(":button");
:checkbox - выбирает все элементы с type="checkbox" . Селектор $(":checkbox") эквивалентен $("") .
Перед селектором:checkbox как и перед селекторами псевдоклассов (т.е. теми которые начинаются со знака " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если перед знаком " : " ничего не указывать, то подразумевается использование универсального селектора (*). Другими словами, $(":checkbox") эквивалент $("*:checkbox") . Но более правильно в этом случае вместо * использовать тег input: $("input:checkbox") .
Селектор:checkbox не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию: $("input");
Например, выбрать все элементы input , которые имеют атрибут type="checkbox" , т.е. являются флаговыми кнопками:
$("input:checkbox"); //или с помощью селектора атрибута $("input");
:checked - выбирает все элементы с состоянием checked или selected . Селектор:checked предназначен для элементов checkbox , select и кнопок radio .
Linux Windows Chrome Firefox Значение 1 Значение 2 Значение 3
:disabled - выбирает все элементы, которые отключены (disabled).
Перед селектором:disabled как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":disabled") эквивалентен $("*:disabled") . Но в этом случае более правильно вместо " * " использовать тега input: $("input:disabled") .
Селектор:disabled отличается от селектора атрибута . Селектор:disabled проверяет логическое значение (истина/ложь) свойства disabled элемента, в то время как селектор атрибута просто проверяет наличие атрибута disabled у элемента.
Селектор:disabled можно использовать только для выбора HTML-элементов, которые поддерживают атрибут disabled: , , , , и .
$("input:disabled");
:enabled - выбирает все элементы, которые включены (enabled).
Перед селектором:enabled как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":enabled") эквивалентен $("*:enabled") . Но более правильно в этом случае вместо " * " использовать тег input: $("input:enabled") .
Селектор:enabled отличается от:not() . Селектор:enabled выбирает элементы, у которых логическое свойство disabled имеет значение false . В то время как:not() выбирает элементы, у которых атрибут disabled не установлен.
Селектор:enabled можно использовать только для выбора HTML-элементов, которые поддерживают атрибут disabled: , , , , , и .
$("input:enabled");
:file - выбирает все элементы с type="file" . Селектор:file эквивалентен .
Перед селектором:file как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":file") эквивалент $("*:file") . Но более правильно в таких случаях вместо " * " использовать тег input: $("input:file") .
Селектор:file не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте селектор атрибута .
$("input:file"); // $("input");
:focus - выбирает элемент, находящийся в фокусе.
Перед селектором:focus как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":focus") эквивалентен $("*:focus") . Если Вам необходимо получить текущий элемент, находящийся в фокусе, то воспользуйтесь следующим кодом: $(document.activeElement) . Данный способ получает элемент, минуя его поиск в DOM-дереве.
:image - выбирает все элементы с type="image" . Селектор:image эквивалентен .
Селектор:image не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте .
$("input:image"); // $("input");
:input - выбирает все элементы input , textarea , select и button в документе. Т.е. он выбирает все элементы управления формы.
Селектор:input не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию: $("селектор").filter(":input");
Параметр 1 Параметр 2 $("*:input"); // $("form *).filter(":input");
:password - выбирает все элементы с type="password" . Селектор:password" эквивалентен .
Перед селектором:password как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":password") эквивалентен $("*:password") . Но более правильно в таких случаях вместо " * " использовать тега input: $("input:password") .
Селектор:password не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте .
$("*:password"); // $("");
:radio - выбирает все элементы с type="radio" . Селектор:radio эквивалентен .
Перед селектором:radio как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":radio") эквивалентен $("*:radio") . Но более правильно этом случае вместо " * " использовать тег input: $("input:radio") .
Селектор:radio не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте .
$(":radio"); // $("");
:reset - выбирает все элементы с type="reset" . Селектор:reset эквивалентен .
Селектор:reset не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте .
$(":reset"); // $("");
:selected - выбирает все элементы, которые находятся в состоянии selected . Селектор:selected работает только с элементами option и не работает с элементами checkbox и radio . Для работы с последними используйте селектор:checked .
Селектор:selected не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию: $("селектор").filter(":selected");
Цветы Кустарники Деревья Земля Трава $(":selected"); // $("*").filter(":selected");
:submit - выбирает все элементы с type="submit" . Селектор:submit предназначен для элементов button или input .
Селектор:submit не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте input, button
$(":submit"); // $("input,button");
:text - выбирает все элементы с type="text" .
jQuery функция $(":text") позволяет нам выбрать элементы . Перед селектором:text как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":text") эквивалентен $("*:text") . Но более правильно этом случае вместо " * " использовать тег input: $("input:text") .
Начиная с версии jQuery 1.5.2, селектор:input также выбирает элементы input , у которых не указан атрибут type (в этом случае подразумевается, что элемент имеет type="text").
Разницу между $(":text") и $("") продемонстрируем на следующем примере:
$("").is(""); // false $("").is(":text"); // true
Селектор:text не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() , получена не будет. Для увеличения производительности запроса в современных браузерах, используйте .
$(":text"); // $("input");
JQuery селекторы являются одним из наиболее важных частей библиотеки JQuery.
JQuery селекторыJQuery селекторы позволяют выбирать и манипулировать HTML-элемент (ы).
JQuery селекторы используются для "найти" (или выберите) HTML элементы, основанные на их имя, ID, классы, типы, атрибуты, значения атрибутов и многое другое. Он основан на существующих CSS селекторов , а кроме того, у него есть некоторые собственные селекторы.
Все селекторы в JQuery начинаются с знака доллара и скобки: $ ().
Элемент выбораСелектор JQuery элемент выбирает элементы на основе имени элемента.
Вы можете выбрать все элементы
На странице, как это:
пример
Когда пользователь нажимает на кнопку, все
Элементы будут скрыты:
#id SelectorСелектор #id JQuery использует атрибут идентификатор HTML-тега, чтобы найти определенный элемент.
Идентификатор должен быть уникальным в пределах страницы, так что вы должны использовать селектор #ID, если вы хотите, чтобы найти единственный, уникальный элемент.
Чтобы найти элемент с определенным идентификатором, написать хэш-символ, за которым следует идентификатор HTML-элемента:
пример
Когда пользователь нажимает на кнопку, элемент с идентификатором = "тест" будут скрыты:
.class SelectorСелектор класса Jquery находит элементы с определенным классом.
Чтобы найти элементы с определенным классом, написать период символа, за которым следует имя класса:
пример
Когда пользователь нажимает на кнопку, элементы с классом = "тест" будут скрыты:
Другие примеры JQuery селекторы| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all Elements with class="intro" |
Try it |
| $("p:first") | Selects the first Element |
Try it |
| $("ul li:first") | Selects the first |
Try it |
| $("ul li:first-child") | Selects the first |
Try it |
| $("") | Selects all elements with an href attribute | Try it |
| $("a") | Selects all elements with a target attribute value equal to "_blank" | Try it |
| $("a") | Selects all elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all elements and elements of type="button" | Try it |
| $("tr:even") | Selects all even | |
| Try it | ||
| $("tr:odd") | Selects all odd | |
| Try it |
Если ваш сайт содержит много страниц, и вы хотите, чтобы ваши функции Jquery будет легко поддерживать, вы можете поместить свои функции JQuery в отдельный файл.js.
