JQuery

На странице

• JQuery Выборка элементов
• JQuery Фильтр выбора элементов
• JQuery Методы: text, hide, show, width, heigth, html
• JQuery Методы: fadeOut, fadeIn, fadeTo, slideUp, slideDown
• JQuery Методы: attr, removeAttr, addClass, removeClass, css, animate

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

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

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

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

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

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

Что на самом деле происходит? Когда браузер пользователя обращается к нашему 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);
})