Введение в jQuery: Селекторы

После того как в предыдущей статье Введение в jQuery Начало, мы рассмотрели как подключить и создать свой первый скрипт в jQuery , в нашей сегодняшней статье мы рассмотрим более конкретные примеры.
Для того чтобы использовать всю силу инструментария jQuery нужно в первую очередь определиться к чему его применить. Выбрать нужный нам элемент.
Весь HTML документ состоит из элементов, часто называемых тегами. Вот с ними-то мы и будем работать, будем воздействовать на них силами jQuery.
Когда речь заходит о том, как соединить HTML документ и JavaScript, часто мы вспоминаем про DOM (Document Object Model). Объектная модель документа позволяет Java Script’у работать с содержимым веб-страницы.
Допустим , есть некий блок внутри нашей страницы, обозначенный элементом div:
<div id="newBlock">Hello!</div>
Для того чтобы работать с тегами в JS существует getElementById:
var Element = document.getElementById("newBlock");
var ElementBody = Element.InerHTML; /* получаем содержимое элемента */
var ElementCSSClass = Element.className; /* получаем имя класса CSS оно равно newBlockCSS */
/* и далее */

К слову, кроме getElementById существует ещё getElementsByClassName, getElementsByTagName и другие методы.
Но вернёмся к нашим баранам, то есть к jQuery. Слово Селектор отсылает нас к английскому select – выбирать. Так как же выбирать элементы методами jQuery?
Всё зависит от того , на основе каких параметров (атрибутов), Вы собираетесь это делать. Самый простой распространенный способ – использовать id элемента:
$("div#newBlock")
.click(
function()
{
alert('Вы нажали на блок DIV с параметром ID = newBlock!');
}
);
}
);

Конструкция div#newBlock и есть наш метод выбора элемента – селекция тега DIV с ID newBlock. Как Вы видите , если речь идет об id тега, мы будем использовать знак решетки. Если речь идет о классе , используется точка
$("div.newBlockCSS");
В этом случае будет выбран элемент в котором. Class и ID распространенные маркеры тегов , но бывают и более специализированные параметры. Посмотрим , например, на ссылку:
<a name="mainPage" href="http://weblomaster.ru" rel="nofollow">Вернуться на главную</a>
У ссылки нет ни класса, ни ID . Но Вы можете использовать произвольные параметры в jQuery таким образом:
$( "a[name='mainPage']" );
/* или */
$( "a[rel='nofollow']" );

Конструкция следующая: тег > название параметра > искомое значение.

Опубликовано 27.11.2014 в 21:43 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: HTML, jQuery · Теги: