Изучаем jQuery. Часть 3. Выборка элементов

04.06.2013 Ромчик

Доброго времени суток. Мы продолжаем изучать 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

Изучаем jQuery. Часть 7.4 Методы манипуляции над элементами | Все о WEB программировании - 23.07.2013 в 09:01

[…] выбрать элемент Вы можете прочитать в моей статье «Изучаем jQuery. Часть 3. Выборка элементов», а чтобы более точно отобрать элементы можно […]

Ответить

Изучаем jQuery. Часть 3. Выборка элементов

04.06.2013 Ромчик

Результатом выборки элементов я буду называть выборка или набор. Дальше Вы поймете почему.

Для дальнейшего изучения приемов выборки элементов мы возьмем 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");

});

Проверяем, что у нас получилось, открываем нашу страницу в браузере и видим:

Т.о. мы можем выбирать элементы по тегу $(‘<название тега>’).

$(‘div’) — выбор всех div

$(‘a’) — выбор всех ссылок

и т. п.

2. Выбор элемента по id


$('#header');

Проверим:

В файл script.js вставляем следующий код:


$(function(){

$('#header').css("background-color","green");

});

Смотрим, что получилось:

Как видите в предыдущем скрине header был красным. А теперь зеленый.

3. Выборка элемента по классу


$('.content')

Давайте проверим. В файл script.js вставляем следующий код:


$(function(){

$('.content').css("background-color","green");

});

И посмотрим, что получилось:

4. Выборка вложенных элементов

$('#sidebar span');

Проверим. В файл script.js вставляем следующий код:

$(function(){
$('#sidebar span').css("background-color","green");
});

Т.е. фон в sidebar должен стать зеленым.

5. Выбор следующего тега

$('.content+p');

Проверим. В файл script.js вставляем следующий код:

$(function(){
$('.content+p').css("background-color","green");
});

Посмотрим, что получилось.

6. Выбор дочернего элемента

$('#wrapper>div');

Учтите, что в этом случае в выборку попадут, только прямые потомки. Например, если у нас есть код:

<div id='wrapper'>
   <div>...</div>
   <p><div>...</div></p>
</div>

7. Выбор элементов по значению атрибутов

Если же мы хотим выбрать элемент по значению, то в jQuery используется следующая конструкция:

$('<название тега или класса>[<атрибут>=<значение>]');

$('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. Выбор элементов по конечному значению атрибутов

$('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. Часть 7.4 Методы манипуляции над элементами | Все о WEB программировании - 23.07.2013 в 09:01

Ответить