Задача, которая очень часто встает перед начинающими разработчиками javascript это выбор элемента на веб-странице по его атрибуту id.
Предположим, что у нас есть код на странице.
Содержимое блока.
Каким образом можно выбрать элемент с id=»elem» и произвести с ним ряд каких-то действий?
Здесь есть несколько вариантов решения проблемы. Давайте их сейчас рассмотрим.
Вариант 1. Воспользоваться методом Javascript getElementById.
Есть способ, как можно обратиться к элементу по его id используя «чистый» javascript код, без использования каких-то сторонних библиотек. Этот способ заключается в использовании метода ggetElementById(«id_элемента»). Таким образом мы обращаемся к нужному нам элементу по его id.
Давайте посмотрим, как это работает на простом примере.
Содержимое блока. alert(document.getElementById("elem").innerHTML);
Обратите внимание, что эти строки кода (скрипт) находится ниже самого элемента. Это обязательное условие работы этого скрипта, т.к. код Javascript выполняется по мере загрузки страницы. Если расположить код выше, то мы будем обращаться к элементу на странице, который еще не подгрузился, т.е. его в коде, на момент выполнения скрипта, еще не будет. Есть способы, как этого можно избежать, но это выходит за рамки данной статьи.
В итоге, если все правильно работает, мы получим всплывающее окно. В этом окне будет выводиться текст, который находится внутри блока div.
Давайте теперь посмотрим, как можно решить эту задачу другим способом.
Вариант 2. С помощью библиотеки Jquery.
Второй вариант выбора элемента по его id, заключается в использовании библиотеки Jquery. На практике, в современных скриптах, чаще всего пользуются именно этим способом. Он намного более удобен и легче запоминается.
Для того, чтобы обратиться к элементу по его id нужно воспользоваться конструкцией:
$("#elem")
Здесь elem – имя, которое содержится в атрибуте id.
Т.к. мы будем использовать стороннюю библиотеку Javascript, которая называется Jquery, то эту библиотеку нужно сначала подключить.
Добавляется она в разделе , одним из способов, как это можно сделать, нужно добавить следующую строку кода:
Чтобы библиотека могла подгрузиться должно быть соединение с Интернет.
Содержимое блока. alert($("#elem").html());
Сам скрипт, как и в предыдущем примере, должен находиться ниже по коду того элемента, с которым вы хотите взаимодействовать.
Таким образом, мы с вами разобрали два способа, как можно выбрать элемент на веб-странице по его атрибуту id и взаимодействовать с ним. Выбирайте тот способ, который вам подходит, и используйте его на практике.
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.
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 в разделе селекторов есть отдельный подраздел, посвященный работе с формами. Селекторы предоставляют удобную работату с чекбоксами, кнопками, полями ввода и так далее. Нарисуем форму.
