Изучаем jQuery. Часть 3. Выборка элементов
Доброго времени суток. Мы продолжаем изучать jQuery. Так мы с Вами уже умеем подключать jQuery к проекту, познакомились с основами jQuery. А сегодня мы остановимся на выборке элементов. Выборка элементов — это один из основных принципов jQuery. Без понятия о выборе элемента дальше изучать jQuery нет смысла. Так, что не пропускайте эту статью, хоть в ней и будет много кода (но простого).
Для того, чтобы совершить какое-либо действие над элементом прежде необходимо выбрать этот элемент. Выборка элементов в jQuery выполняется также как и в CSS. Т.е. обладая базовыми знаниями CSS Вы с легкостью можете выбирать элементы в jQuery с помощью селекторов.
Результатом выборки элементов я буду называть выборка или набор. Дальше Вы поймете почему.
Для дальнейшего изучения приемов выборки элементов мы возьмем html код из первой статьи:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <title>Изучаем jQuery</title> </head>< <body> <div id="wrapper"> <div id="header">Header</div> <div id="content"> Content </div> <div id="sidebar">Sidebar</div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
и немного изменим его.
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="content"> <p>Content</p> <p> Test </p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
1. Выбор элемента по тегу
Для того, что бы выбрать элемент по тегу, например тегу p:
$('p');
Таким образом, мы выбрали все элементы с тегом p.
Проверим:
В файл script.js вставляем следующий код:
$(function(){ $('p').css("background-color","red"); });
Что мы сделали: первое мы использовали событие загрузки страницы $(function()){ и второе мы выбрали элементы с тегом p $(‘p’) и третье, для проверки, к элементам из выборки мы добавили CSS свойство backgroun-color: red.
Проверяем, что у нас получилось, открываем нашу страницу в браузере и видим:
Т.о. мы можем выбирать элементы по тегу $(‘<название тега>’).
$(‘div’) — выбор всех div
$(‘a’) — выбор всех ссылок
и т. п.
2. Выбор элемента по id
Для того, чтобы отбирать элементы по id используется обозначение как и в CSS. Например мы хотим выбрать элемент с id равным header. Для этого используем следующий код:
$('#header');
Проверим:
В файл script.js вставляем следующий код:
$(function(){ $('#header').css("background-color","green"); });
Смотрим, что получилось:
Как видите в предыдущем скрине header был красным. А теперь зеленый.
3. Выборка элемента по классу
Выбор элемента по классу аналогичен выбору элементы по классу в CSS. Например мы хотим выбрать элемент с class равным content. Для этого используем следующий код:
$('.content')
Давайте проверим. В файл script.js вставляем следующий код:
$(function(){ $('.content').css("background-color","green"); });
И посмотрим, что получилось:
4. Выборка вложенных элементов
Как и в CSS мы можем выбирать вложенные элементы. Например мы хотим выбрать элемент с тегом span, который находиться в элементе с id равным sidebar. Для этого используем следующий код:
$('#sidebar span');
Проверим. В файл script.js вставляем следующий код:
$(function(){ $('#sidebar span').css("background-color","green"); });
Т.е. фон в sidebar должен стать зеленым.
5. Выбор следующего тега
Не всегда удается выбрать однозначно элемент по его свойствам (class, тегу и др.). Но мы можем однозначно выбрать предыдущий элемент. В jQuery есть способ выбора следующего элемента. Например мы хотим выбрать элемент с тегом p в котором содержится надпись Test и которых находиться после тега с class равным content. Для этого мы используем следующий код:
$('.content+p');
Проверим. В файл script.js вставляем следующий код:
$(function(){ $('.content+p').css("background-color","green"); });
Посмотрим, что получилось.
6. Выбор дочернего элемента
Допустим мы хотим выбрать все div, которые являются прямым потомком div с id равным wrapper. Для этого используется следующая конструкция:
$('#wrapper>div');
Учтите, что в этом случае в выборку попадут, только прямые потомки. Например, если у нас есть код:
<div id='wrapper'> <div>...</div> <p><div>...</div></p> </div>
То при нашей выборке в набор попадет первый div, а вот второй div, который заключен в теги p в набор не попадет (он не является прямым потомком div с id равным wrapper)
7. Выбор элементов по значению атрибутов
Если же мы хотим выбрать элемент по значению, то в jQuery используется следующая конструкция:
$('<название тега или класса>[<атрибут>=<значение>]');
Например у нас есть div c id равным header, у этого div есть атрибут align со значением center. Для того, что бы выбрать данный элемент пишем следующий код:
$('div[align=center]');
Т.е. атрибут и его значение пишем в квадратных скобках.
8. Выбор элементов по начальному значению атрибутов
Допустим у нас есть следующий html код:
<div> <a href='<a href="http://web-programming.com.ua/">http://web-programming.com.ua</a>'> Все о Веб программировании </a> <a href='#'></a> </div>
И нам необходимо вы брать только первый элемент с тегом а (ссылку адрес, которой начинается с http)
Для этого в jQuery используется следующая конструкция:
$('a[href^=http]');
Т.е. выборка элемента осуществляется так же как и в пункте 7, только перед знаком равно ставим знак ^.
9. Выбор элементов по конечному значению атрибутов
Например у нас есть множество ссылок на документы с расширением txt. И мы хотим выбрать их. Выборка элементов происходит таким же образом как и в предыдущем пункте, только в этом случае перед знаком равно ставим знак $.
$('a[href$=.txt]');
10. Выбор элементов по значению атрибутов в любом месте
Допустим у нас есть следующий код:
<img src="URL" alt="Изучаем jQuery. Выбор элемента по тегу"> <img src="URL" alt="Изучаем jQuery. Выбо элемета по id"> <img src="URL" alt="Изучаем jQuery. Выбор элемекнта по class"> <img src="URL" alt="web программирование">
И мы хотим выбрать первые три картинки. Видим, что у них в атрибуте alt есть общее — jQuery.
Тогда пишем следующий код, для выбора необходимых картинок:
$('img*=jQuery');
Т.е. выборка элементов происходит также, как и в пунктах 8 и 9, только перед знаком равно ставится *.
Мы с Вами рассмотрели основные методы выбора элементов. От правильности выбора элемента зависит скорость выполнения Вашего скрипта, а также правильная работоспособность. А на этом пока все. В следующей статье мы рассмотрим фильтры, которые помогают сузить набор выбранных элементов, что повысит эффективность вашего jQuery скрипта.
[…] выбрать элемент Вы можете прочитать в моей статье «Изучаем jQuery. Часть 3. Выборка элементов», а чтобы более точно отобрать элементы можно […]