Wiki-учебник по веб-технологиям: jQuery/Действия ...

Главная | Каталог |
Оглавление документа


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

Нельзя производить какие-либо действия над элементами, пока не сформировалось DOM дерево.
По этому случаю, разработчики jQuery придумали следующую конструкцию, которую необходимо использовать всегда.

$(document).ready(function(){
 
//вот здесь следует писать код
 
});

1. text()

Метод text() предназначен для получения\изменения текста из какого-либо элемента, например абзац, или заголовок:

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

В данном случае в выборку попадёт содержимое абзаца, т.е. весь текст.
Типовой прием манипулирования с выборками – запоминания в переменную:

$(document).ready(function(){
 
   var textp = $('p').text();
 
});


Теперь наш текст абзаца хранится в переменной “textp”. Выведем его на экран:

$(document).ready(function(){
 
   var textp = $('p').text();
   alert(textp);
 
});


Для того, чтобы изменить текст, нужно передать текст параметром в эту функцию.

$(document).ready(function(){
 
   var textp = $('p').text('Замененный абзац');
 
});

2. hide(), show()

Часто бывает нужно скрыть определенный контент, будь то картинка или абзац, или заголовок. Чтобы скрыть выбранный элемент, следует использовать метод hide(), в который может быть переданы 2 параметра(опционально): время исчезновения (в микросекундах, т.е. 1сек = 1000) и функция, которая будет выполнена после исчезновения:

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

В данном примере, элемент с идентификатором “example_id” исчезнет за 2 секунды

Для того, чтобы снова отобразить спрятанный элемент, следует использовать функцию show(), у которой аналогичные параметры

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

В этом примере, элемент с идентификатором “example_id” исчезнет за 2 секунды затем появится за 2 секунды.

3. Цепные функции

Те же действия можно применить в одну строчку. С помощью, так называемых «цепных функций».
$(document).ready(function(){
   $('#example_id').hide(2000).show(2000);
});

Это так же будет работать, и очень часто практикуется при написании на jquery.

4. Автоматические циклы


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

5. Изменение ширины/высоты элементов


Иногда требуется узнать или изменить ширину/высоту. Чтобы получить значение, используем следующие функции:

$(document).ready(function(){
   var wExample = $('#example_id').width();
   var hExample = $('#example_id').height();
});

В данном примере соответствующие переменные получат значение ширины и высоты элемента.

Для того, чтобы изменить их, передаем в функции нужные параметры:

$(document).ready(function(){
   $('#example_id').width(200);
   $('#example_id').height(300);
});


Или же делаем это с применением «цепных функций»:

$(document).ready(function(){
   $('#example_id').width(200).height(300);
});

6. Изменение HTML

Функция text() позволяет получить/изменить текст из выбранного элемента. Однако, если требуется получить/изменить HTML код элемента, существует функция html()
Допустим, у вас есть абзац:
<p><strong>Это жирный абзац</strong></p>

Применяя метод text() мы получим лишь «Это жирный абзац». Если применить html()
$(document).ready(function(){
   $('p').html();
});

в выборку попадёт "<p><strong>Это жирный абзац</strong></p>".
Аналогично методу text(), метод html() позволяет изменить код.

7. Плавное исчезновение/появление


Функции show() и hide() позволяют прятать и показывать элементы, но без какой- либо анимации. Функции fadeOut() и fadeIn() позволяют прятать и показывать элементы, но уже с плавной анимацией. Функции принимаю 2 параметра: время исчезновения/появления и функция, которая будет выполнена после.

$(document).ready(function(){
   $('img').fadeOut(1000).fadeIn(1000);
});

в данном примере изображение в выборке исчезнет плавно за 1 секунду, затем на следующем шаге плавно появится за 1 секунду.

Функция fadeTo() позволяет настроить степень прозрачности выбранного элемента. Принимает 3 параметра: время исчезновения, степень исчезновения и функция, которая будет выполнена после. Степень исчезновения варьируется от 0–1

$(document).ready(function(){
   $('img').fadeTo(1000,0.3).fadeTo(1000,1);
});

В данном примере изображение станет прозрачным до 0.3 за 1 секунду, а затем появится за 1 секунду.

Функции slideUp() и slideDown() позволяют плавно исчезнуть элементу(снизу вверх) и плавное появится(сверху вниз) соответственно.
$(document).ready(function(){
   $('img').slideUp(1000).slideDown(1000);
});

8. Работа с атрибутами элементов

Очень часто возникают задачи, связанные с работой над атрибутами элемента. Допустим у нас есть изображение:
<img src="http://адрес" height="100" width="200" alt="изображение 1">

При помощи функции attr возможно получить доступ к значениям конкретных атрибутов, и даже изменить их. При помощи функции removeAttr() возможно удаление конкретных атрибутов
$(document).ready(function(){
   var imgAdress = $('img').attr('src'); // переменная будет содержать адрес изображения
   var imgHeight = $('img').attr('height'); // переменная будет содержать ширину изображения
   $('img').attr('width', '400'); // изменим значение атрибута width на 400
   $('img').removeAttr('alt'); // удалим атрибут alt у изображения
});

9. Добавление/удаление класса у элемента

У любого сайта существуют CSS стили для конкретных элементов. Чтобы добавить/удалить класс к выбранному элементу в jQuery есть функции addClass() и removeClass()

Представим, что вам нужно задать стиль для вновь созданного абзаца
<p id="main">Простой абзац</p>


Также, у вас в CSS прописан следующий класс:
.tagText
{
font-family: arial;
margin-right: 20pt;
color:#ffffff 
} 


Для того, чтобы применить этот стиль к заданному абзацу, необходимо сделать следующее:
$(document).ready(function(){
   $('#main').addClass('tagText');
});

или же удалить класс, если он не нужен

$(document).ready(function(){
   $('#main').removeClass('tagText');
});

10. Работа с CSS

Функции, описанные выше, позволяют добавлять стили из CSS при помощи классов. Однако, функция css() позволяет получить доступ непосредственно к таблицам CSS 
.tagText
{
font-family: arial;
margin-right: 20pt;
color:#ffffff 
} 

для того, чтобы узнать/изменить шрифт, воспользуемся функцией css()

$(document).ready(function(){
   var textFont = $('#main').css('font-family');
});

Переменная textFont получит значение “arial”.

Для того, чтобы изменить какое-либо значение, допустим, значение цвета, необходимо через запятую после названия атрибута указать значение:
$(document).ready(function(){
   $('#main').css('color', '#ff00ff');
});


Если же необходимо изменить 2 атрибута, допустим цвет и шрифт, то тут возможны варианты. Можно применить «цепные функции»

$(document).ready(function(){
   $('#main').css('color', '#ff00ff').css('font-family');
});


Так же, возможно это делать в виде, более похожим на традиционный CSS:

$(document).ready(function(){
   $('#main').css({
      'color' : '#ff00ff',
      'font-family' : 'verdana'
   });
});

Обратите внимание, что в этом случае имя атрибута отделяется от значения, которое ему присваивается двоеточием!

Аналогичные действия возможно совершать за определенный промежуток времени, для этого следует использовать функцию animate()

$(document).ready(function(){
   $('#main').animate({
      'marginRight':'10px'
   },5000); 
});

за 5 секунд отступ справа уменьшится до 10 пикселей.

11. Добавление контента

В jQuery существуют функции, позволяющие очень гибко добавлять контент.
Предположим, у вас в DOM дереве присутствует картинка:
...
<img id="simple" src="http://адрес">
...


Для того, чтобы добавить контент ДО выбранного элемента, следует пользоваться функцией before()
$(document).ready(function(){
   $('#simple').before('<p>Абзац, добавленный до картинки, с помощью before()');
});


Для того, чтобы добавить контент ПОСЛЕ выбранного элемента, следует пользоваться функцией after()
$(document).ready(function(){
   $('#simple').after('<p>Абзац, добавленный после картинки, с помощью after()');
});

12. Перебор в цикле

Функция .each() производит обход всех элементов, содержащихся в наборе jQuery и вызывает функцию обратного вызова callback для каждого из них.
callback( [index, Element] ) – (функция) Функция, вызываемая для каждого элемента в наборе jQuery. С каждой итерацией в качестве первого параметра index ей передается индекс текущего элемента в наборе Query (начиная с 0) как индекс текущей итерации цикла. Во втором аргументе Element передается ссылка на сам DOM элемент. Контекст this вызова функции также каждый раз ссылается на текущий элемент, задействованный в данной итерации (Element == this).
// Выводить в цикле содержимое пунктов списка до тех пор,
// пока не попадется <li> с классом 'stop'.
 
$('li').each(function(i,elem) {
    if ($(this).is(".stop")) {
         alert("Остановлено на " + i + "-м пункте списка.");
         return false;
          } else {
                  alert(i + ': ' + $(elem).text());
                 });

13. Количество элементов в выборке

С помощью функции size() возможно узнать количество элементов, которое попало в выборку. Она возвращает число.
$(document).ready(function(){
   $('img').size();
});

в выборке находится количество картинок на странице

14. Доступ к конкретному элементу

С помощью функции get() возможно получить доступ к конкретному номеру элемента в выборке.
Внимание! данная функция возвращает не jQuery объект, а просто javascript объект. Будьте внимательны!

15. Клонирование элемента

Иногда возникают ситуации, когда необходимо клонировать элемент. Для этого следует использовать функцию clone()
Допустим, в DOM дереве присутствует картинка, и вам необходимо её отобразить в другой части экрана.
$(document).ready(function(){
   var Image = $('img').clone();
});

Запомним элемент в переменную, затем выведем в нужное нам место с помощью before() или after(). Для этого нужно просто передать эту переменную как параметр в скобках.

16. Выбор разнотипных элементов

Иногда необходимо произвести определенный действия (например, скрыть) разные элементы. Для этого укажем это в выборке через запятую, в ковычках
Пример:
$(document).ready(function(){
   var s = $('img, p').size(); // выбор всех изображений и абзацев
   s.hide(); // скрытие
});