Прежде чем приступить к выполнению действий над отобранными элементами, необходимо понять следующую вещь:
Нельзя производить какие-либо действия над элементами, пока не сформировалось 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) и функция, которая будет выполнена после исчезновения:
Это так же будет работать, и очень часто практикуется при написании на jquery.
4. Автоматические циклы
Давайте задумаемся, все замечательно работает с одним элементом, однако что делать, если нужно, допустим, скрыть сразу несколько элементов с одним id.
Разработчики jQuery так же об это позаботились, и не нужно писать никаких циклов, для этого просто делаем выборку по нужному id и применяем функции. Все элементы исчезнут.
5. Изменение ширины/высоты элементов
Иногда требуется узнать или изменить ширину/высоту. Чтобы получить значение, используем следующие функции:
$(document).ready(function(){
var wExample = $('#example_id').width();
var hExample = $('#example_id').height();
});
В данном примере соответствующие переменные получат значение ширины и высоты элемента.
Для того, чтобы изменить их, передаем в функции нужные параметры:
Функция 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 параметра: время исчезновения/появления и функция, которая будет выполнена после.
в данном примере изображение в выборке исчезнет плавно за 1 секунду, затем на следующем шаге плавно появится за 1 секунду.
Функция fadeTo() позволяет настроить степень прозрачности выбранного элемента. Принимает 3 параметра: время исчезновения, степень исчезновения и функция, которая будет выполнена после. Степень исчезновения варьируется от 0–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()
Представим, что вам нужно задать стиль для вновь созданного абзаца
Функции, описанные выше, позволяют добавлять стили из CSS при помощи классов. Однако, функция css() позволяет получить доступ непосредственно к таблицам CSS
за 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() возможно узнать количество элементов, которое попало в выборку. Она возвращает число.
в выборке находится количество картинок на странице
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(); // скрытие
});