JQuery

На странице

JQuery Выборка элементов

Прежде, чем начать работать с элементом необходимо научиться его отбирать. Выборка элементов в jQuery построена также как и выборка в CSS.

Для того, чтобы понять как происходит выборка элементов в jQuery давайте рассмотрим CSS файл.

Все что идет до фигурных скобок называется селектор.

Название тега
Класс
Индентификатор

Все что записано в фигурных скобках после селектора — это свойства элемента с данным селектором.

Что на самом деле происходит? Когда браузер пользователя обращается к нашему CSS-файлу, когда он доходит до какого-то селектора, то начинает выполнять свойства соответствующие элементу с данным селектором. Например в CSS файле:

p {
 font-family: Tahoma;
 font-size:12px;
}

Теперь когда браузер дойдет до элемента

Привет

, то к нему применяться эти свойства.

Теперь давайте посмотрим как происходит выборка дочерних элементов в CSS. Например нам необходимо применить приведенные выше CSS свойства не ко всем абзацам, а к абзацам с идентификатором logo. Тогда CSS будет выглядеть следующим образом:

p #logo{
 font-family: Tahoma;
 font-size:12px;
}

а если мы хотим применить данные свойства не только к абзацам с id=”logo”, а ко всем элементам с id=”logo”, тогда наш CSS выглядит следующим образом:

#logo{
 font-family: Tahoma;
 font-size:12px;
}

Мы с Вами вспомнили, как происходит выборка элементов в CSS. Как я уже говорил выше, что выборка элементов в jQuery осуществляется по аналогии с CSS. Так если мы хотим выбрать все абзацы, то пишем следующий код:

$(“p”);

Или если нам необходимо выбрать все элементы со страницы с id=”logo”, то запишем это следующим образом:

$(“#logo”);

Аналогично мы может отобрать все элементы по классу, например class=”logo”:

$(“.logo”);

Если же мы хотим выбрать дочерние элементы, например все абзацы

имеющие идентификатор logo, то нам необходимо прописать:

$(“p #logo”);

Следующий вид выборки это выбор следующего элемента. Например, у нас есть следующий html-код:

Тест 1

Тест 2

И нам необходимо выбрать именно тег p, в котором находиться текст “Тест 2”. Как видите сделать это не так легко, используя представленные выше выборки. Но в jQuery есть специальный селектор, который позволяет упростить нам задачу. Это селектор выбора следующего элемента +. Т.е. в нашем случае мы можем привязаться к div с id=”logo” и применив данный селектор выбрать следующий элемент:

$(“#logo + p”);

Иногда возникает ситуация, когда необходимо выбрать все дочерние элементы. Для этого в jQuery есть селектор >. Например, у нас есть следующий html код:

<div id=”content”>
 <p>Привет</p>
 <p>Мы начинаем изучать jQuery</p>
 <p>И сейчас мы знакомимся с селекторами выборки элементов</p>
</div>

И нам необходимо выбрать все p, которые находятся внутри тега div id=”content” Наш код будет выглядеть следующим образом:

$(“#content > p”);

Следующий тип выборки в jQuery — это выборка элементов по значениям атрибутов. Данная выборка очень часто встречается в проектах, например для реализации выпадающего меню. Например, есть у нас html-код:

<img src="images/1.png" width="50" height="50">
<img src="images/2.png" width="50" height="50">
<img src="images/3.png" width="50" height="50">

и нам необходимо выбрать все картинки, у которых width=”50”. Тогда выборка в jQuery будет выглядеть следующим образом.

$(“img[width=50]”);

Следующий тип выборки в jQuery — это выборка по атрибутам значения, которых начинаются с какого-то условия. Например, у нас есть html-код:

<img src="images/img1.png" width="50" height="50">
<img src="images/img2.png" width="50" height="50">
<img src="images/img3.png" width="50" height="50">

и нам необходимо выбрать все картинки у которых атрибут src начинается с images/img, тогда эта выборка в jQuery осуществляется следующим образом:

$(“img[src^=images/img]”);

По аналогии мы можем сделать выборку по атрибутам значения, которых заканчиваются каким-то условием. Т.е. из предыдущего html-кода мы хотим выбрать все png картинки. Тогда выборка в jQuery будет выглядеть следующим образом:

$(“img[src$=.png]”);

Следующая выборка в jQuery — это когда необходимо выбрать по атрибуту значение которого может быть в любом месте. Из предыдущего html-кода нам необходимо выбрать все картинки в названии, которых есть слово “img”.

$(“img[src*=img]”);

Мы рассмотрели основные методы выборки элементов в jQuery, которые позволяют нам выбрать любой элемент, а затем производить над ним определенные действия. Более подробно о методах выборки в jQuery Вы можете прочитать на официальном сайте . Но выборка элементов в jQuery на этом не заканчивается и для более тонкого выбора элементов в jQuery есть фильтры выборки.

JQuery Фильтр выбора элементов

В jquery существует множество методов для фильтрации выбранных элементов, о которых Вы можете прочитать в официальной документации. А я рассмотрю только самые необходимые и часто употребляемые (на мой взгляд) фильтры.

Выбор четных элементов even

Возникает такая ситуация, когда необходимо выбрать из таблицы только четные элементы. Для этого разработчики создали специальный фильтр :even. Например у нас есть таблица:

<table id="’table’">
<tbody>
<tr>
<td>1</td>
<td>Имя 1</td>
</tr>
<tr>
<td>2</td>
<td>Имя 2</td>
</tr>
<tr>
<td>3</td>
<td>Имя 3</td>
</tr>
<tr>
<td>4</td>
<td>Имя 4</td>
</tr>
</tbody>
</table>
<pre>

И нам необходимо выбрать четные строки. Для этого выбираем необходимые элементы и накладываем на них фильтр четности. Вот, так это выглядит в jQuery:

$(‘#table tr:even’);

Таким образом мы выбрали все четные строки. Но тут будьте внимательны — все четные строки с точки зрения javascript. А в javascript отсчет начинается с 0, поэтому у нас будут выбраны первая строка в таблице и третья строка в таблице.

Выбор нечетных элементов odd

Противоположный (если можно так сказать) предыдущему фильтру является фильтр odd — выбор нечетных элементов. Предположим из таблицы нам необходимо выбрать нечетные строки. Тогда применим фильтр odd и вот так это будет выглядеть:

$(‘#table tr:odd’);

Выбор первого элемента first

Если нам необходимо выбрать только один элемент — первый, то для этих целей подойдет фильтр first. Например, из таблицы нам необходимо выбрать только первую строку, тогда выборка данного элемента будет выглядеть следующим образом:

$(‘#table tr:first’);

Выбор последнего элемента last

Для выбора последнего элемента применяется фильтр last. Например из нашей таблицы необходимо выбрать последнюю строку. Тогда наша выборка:

$(‘#table tr:last’);

Фильтр отрицания not

Данный фильтр необходим для выборки всех элементов, кроме элементов которые подходят условию. Например, у нас есть

</pre>
<div id="’1’"></div>
<div>Пример.</div>
<pre>

Нам необходимо выбрать все div, кроме тех div-ов, которые находятся внутри div-а c id=’1’. И если мы напишем:

$(‘div’);

То выберем все div, даже те которые находятся в div c id=’1’, поэтому в данном случае необходимо применить фильтр not.

$(‘div:not(#1 div)’);

И тем самым мы выберем все необходимы нам div

Выбор элемента, который содержит определенный элемент has

Иногда бывают ситуации, что необходимо выбрать элемент, который содержит внутри себя другой определенный элемент. И для этого в jquery существует фильтр has. Например, нам необходимо выбрать div из предыдущего примера, в котором есть еще div. Тогда наша выборка будет иметь следующий вид:

$(‘div:has(div)’);

Т.е. выбираем все div, а затем применяем фильтр has в котором указывем, что выбранные div в себе должны содержать другие div

Выбор элемента по содержимому

Например нам необходимо выбрать какой-то элемент по его содержимому, тогда нам на помощь приходит фильтр contains. Из приведенного выше кода нам необходимо выбрать div, в котором содержится “Пример”:

$(‘div:contains(Привет)’);

Фильтр выбора элементов без наследников empty

Бывают такие ситуации, когда необходимо из выбранных элементов оставить только те, которые не имеют наследников и ничего не содержат. Например, у нас есть html код

</pre>
<table>
<tbody>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>2</td>
</tr>
</tbody>
</table>
<pre>

И нам нужно выбрать все td у которых нет наследников.

$(‘td:empty’);

И в результате у нас будут выбран второй <td> из первого <tr> и первый <td> из второго <tr>.

Фильтр по скрытым элементам

Достаточно часто в jQuery приходиться выбирать все скрытые элементы. И для этого существует специальный фильтр hidden. Т.е. если нам необходимо выбрать все div-ы, которые на данный момент являются скрытыми, то необходимо записать следующий код:

$(‘div:hidden’);

Фильтр по видимым элементам

Противоположный по значению фильтру hidden — фильтр visible, который фильтрует все видимые элементы. Т.е. если нам необходимо выбрать все div-ы, которые в данный момент видимы.

$(‘div:visible’);

JQuery Методы: text, hide, show, width, heigth, html

После выбора необходимого элемента в jQuery мы должны произвести над ним действия. В данной статье мы и остановимся на действиях, которые можно производить над элементами при помощи jQuery.

Как Вы знаете JavaScript работает с DOM моделью страницы. Поэтому нам необходимо, что код JavaScript выполнялся только после построения модели DOM. Для этого в jQuery есть метод ready, который ждет построения DOM модели документа.

Поэтому для выполнения скрипта после построения DOM модели используйте следующую конструкцию:

$(document).ready(function(){
<код скрипта>
})

Метод text()

Метод text() необходим для получения или изменения текста элемента. Допустим у нас есть следующий html-код:

<div id='text'>
Привет.
</div>

И мы хотим получить данный текст, тогда нам необходимо выбрать элемент div с id = text и применить к нему метод text().

$(document).ready(function(){
$('#text').text();
})

Для того чтобы изменить текстовое значение элемента необходимо нашему методу text передать параметр. Например, мы хотим изменить текст в выше приведенном примере на “Добро пожаловать на сайт web-programming.com”, тогда наш код будет выглядеть следующим образом:

$(document).ready(function(){
$('#text').text('Добро пожаловать на сайт web-programming.com');
})

Метод hide()

Если нам необходимо спрятать элемент, то в jQuery существует метод hide(speed, callback). Данному методу можно передать два параметра speed — скорость исчезновения, указывается время в миллисекундах и callback — функция, которая будет выполнена после исчезновения элемента. Например, нам необходимо чтобы div с id=text (из примера выше) исчез за 2 секунды, тогда наш код будет:

$(document).ready(function(){
$('#text').hide(2000);
})

Метод show()

Противоположный метод hide — это show, если нам необходимо показать элемент. Аналогично как и метод hide, show принимает два параметра — это скорость появления и функцию, которая будет выполнена после того, как элемент появиться.

$(document).ready(function(){
$('#text').show(2000);
})

Метод width()

Для того, чтобы установить или получить ширину элемента в jQuery есть специальный метод width. Если нам необходимо получить ширину элемента div с id=text (из приведенного выше примера), то необходимо написать следующий код:

$(document).ready(function(){
$('#text').width();
})

Если же нам необходимо установить ширину, то методу width необходимо передать параметр. Если не указывать единицы измерения (%, em), то по умолчанию будет px.

$(document).ready(function(){
$('#text').width(30);
})

Метод heigth()

Для изменения или вычисления высоты элемента в jQuery используется метод heigth(). Данный метод работает по аналогии с методом width.

Метод html()

Если мы хотим получить или изменить html код элемента, то необходимо использовать метод html(). Данный метод работает по аналогии с методами heigth() и width(). Т.е. если мы нашему методу не передаем параметры, то метод вернем нам весь html код, который находиться в данном элементе. Если мы передадим параметр, то изменим html код в нашем элементе.

JQuery Методы: fadeOut, fadeIn, fadeTo, slideUp, slideDown

Метод fadeOut()

Метод fadeOut(time, function) служит для плавного исчезновения элемента (элемент меняет свою прозрачность, вплоть до полного исчезновения). В качестве параметров принимает:

time — время исчезновения
function — функция, которая будет выполнена после исчезновения элемента

Например, есть у нас html-код:

<div id='text'>
 Привет.
</div>

Мы хотим, чтоб элемент div с id=text плавно исчез. Для этого напишем следующий код:

$(document).ready(function(){
 $('#text').fadeOut(2000);
})

Метод fadeIn()

Метод fadeIn(time, function) служит для плавного появления элемента. Элемент меняет свою прозрачность до полной видимости. В качестве параметров принимает:

time — время появления
function — функция, которая будет выполнена после исчезновения элемента

$(document).ready(function(){
 $('#text').fadeIn(2000);
})

Метод fadeTo()

Метод fadeTo(time, opacity, function) — позволяет изменить степень прозрачности элемента до определенной величины. В качестве параметров принимает:

time — время изменнения
opacity — степень прозрачности от 0 до 1
function — функция, которая будет выполнена после исчезновения элемента

Пример:

$(document).ready(function(){
 $('#text').fadeTo(2000, 0.5);
})

Метод slideUp()

Метод slideUp(time, function) позволяет исчезнуть элементу путем уезжая наверх. В качестве параметров принимает:

time — время появления
function — функция, которая будет выполнена после исчезновения элемента

Пример:

$(document).ready(function(){
 $('#text').slideUp(2000);
})

Метод slideDown()

Метод slideDown(time, function) позволяет показать элемент. Элемент как бы выезжает вниз. В качестве параметров принимает:

time — время появления
function — функция, которая будет выполнена после исчезновения элемента

Пример:

$(document).ready(function(){
 $('#text').slideDown(2000);
})

JQuery Методы: attr, removeAttr, addClass, removeClass, css, animate

Я напомню, что jQuery — это фреймворк JavaScript.

На практике достаточно часто необходимо изменять различные атрибуты у html элементов, добавлять и удалять классы, просматривать и изменять различные css-свойства элементов. Для этого в jQuery есть специальные методы, которые мы и рассмотрим.

Метод attr()

Метод attr(key, value) служит для возвращения или изменения значения атрибута у элемента, где:

key — название атрибута
value — значение атрибута (если значение указано, то изменяет его, в противном случае просто возвращает)

Например, у div с id=test есть width=300px и мы хотим узнать его ширину

$(document).ready(function(){
 $('#test').attr('width');
})

Метод removeAttr()

Метод removeAttr(key) — удаляет указанный атрибут, где:

key- название атрибута

Например у нас есть div с id=test есть width=300px и мы хотим удалить данный атрибут:

$(document).ready(function(){
 $('#test').removeAttr('width');
})

Метод addClass()

Метод addClass(name) — добавляет класс к выбранному элементу с именем name. Например, добавим к div с id=test класс example:

$(document).ready(function(){
 $('#test').addClass('example');
})

Метод removeClass()

Метод removeClass(name) — удаляет класс у элемента с именем name.

Например у нас есть div с id=test и, мы хоти удалить наш класс у данного div-а:

$(document).ready(function(){
 $('#test').removeClass('example');
})

Метод css()

Метод css(name, value) — позволяет получить css свойство элемента с имененем name (если не задано вторым параметром значение данного свойства) или изменять значение css свойства с именем name на значение value (если второй параметр value задан) Например у нас есть заголовки h1 и мы хотим изменить размер шрифта до 20px, тогда:

$(document).ready(function(){
 $('h1').css('font-size',20);
})

Метод animate()

До сих пор мы рассматривали простое изменение свойств элементов, но в jQuery есть еще один замечательный метод, который позволяет изменять свойства элемента плавно, как бы анимируя его. Это метод animate(settings, time, function), где:

setting — свойства, которые будут изменять свое значение
time — время за которое данные свойства будут менять значение
function — функция, которая начнет свое выполнение после, того как произойдет изменение.

Например у нас есть div с id=test и width=1000px. Мы хотим изменить ширину данного div до 500px за 4 секунды

$(document).ready(function(){
 $('#test').animate({'width':'500px'},4000);
})

Created/Updated: 25.05.2018

Back

HOME Для Сайта JQuery

JQuery

JQuery Выборка элементов

JQuery Фильтр выбора элементов

Выбор четных элементов even

Выбор нечетных элементов odd

Выбор первого элемента first

Выбор последнего элемента last

Фильтр отрицания not

Выбор элемента, который содержит определенный элемент has

Выбор элемента по содержимому

Фильтр выбора элементов без наследников empty

Фильтр по скрытым элементам

Фильтр по видимым элементам

JQuery Методы: text, hide, show, width, heigth, html

Метод text()

Метод hide()

Метод show()

Метод width()

Метод heigth()

Метод html()

JQuery Методы: fadeOut, fadeIn, fadeTo, slideUp, slideDown

Метод fadeOut()

Метод fadeIn()

Метод fadeTo()

Метод slideUp()

Метод slideDown()

JQuery Методы: attr, removeAttr, addClass, removeClass, css, animate

Метод attr()

Метод removeAttr()

Метод addClass()

Метод removeClass()

Метод css()

Метод animate()

Для Сайта

JQuery