jQuery управление элементами

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

Для просмотра всех методов по управлению элементами на jQuery читайте http://api.jquery.com/category/manipulation/

Получение и установка информации для элементов

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

$.fn.html
Получает или устанавливает содержимое html

$.fn.text
Получает или устанавливает текст; содержимое HTML будет вырезано

$.fn.attr
Получает или устанавливает значение заданного атрибута

$.fn.width
Получает или устанавливает ширину в пикселях первого элемента выборки как целое значение

$.fn.height
Получает или устанавливает высоту в пикселях первого элемента выборки как целое значение

$.fn.position
Получает объект, с информацией о позиции для первого элемента выборки, относительно его родителя. Этот метод является getter-ом.

$.fn.val
Получает или устанавливает значение элементов формы

// пример изменения HTML элемента
$('#myDiv p:first')
    .html('Новый<strong>первый</strong> параграф!');

Перемещение, копирование и удаление элементов

Существует много методов по перемещинию объекта внутри DOM. Обычно используется два подхода:

1) поместить выбранный элемент относительно другого элемента

2) поместить элемент относительно выбранного элемента

Например, в jQuery существуют методы $.fn.insertAfter и $.fn.after. Метод $.fn.insertAfter помещает выбранный элемент после элемента, который передан в качестве аргумента, а метод $.fn.after помещает элемент после выбранного элемента. Вот несколько аналогичных методов: $.fn.insertBefore и $.fn.before; $.fn.appendTo и $.fn.append; $.fn.prependTo и $.fn.prepend.

Какой из этих двух методов вам нужен, будет зависеть от того, какие элементы вы уже выбрали, и нужно ли вам хранить ссылки на элементы, которые вы добавляете на страницу. Если вам нужна ссылка на элемент, то используйте первый метод – помещайте выбранные элементы относительно других, и вам будет возвращен элемент, который вы поместили. В этом случае вам понадобятся методы $.fn.insertAfter, $.fn.insertBefore, $.fn.appendTo, и $.fn.prependTo.

// пример перемещения элементов разными методами

// первый элемент спискаа перемещаем в конец
var $li = $('#myList li:first').appendTo('#myList');

// ту же задачу решаем другим методом
$('#myList').append($('#myList li:first'));

// заметим, что мы не можем обратиться к элементу списка, который был перемещен
// поскольку нам возвращается весь список

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

Когда вы используете метод, такой как $.fn.appendTo, то вы перемещаете элемент, но вместо этого иногда требуется сделать копию элемента. В этом случае следует использовать метод $.fn.clone first.

// пример копирования элемента

// копируем первый элемент списка в конец списка
$('#myList li:first').clone().appendTo('#myList');

Замечание.

Если вам нужно скопировать связанные с элементом данные и события, то не забудьте передать в качестве аргумента метода $.fn.clone значение true.

Удаление элементов

Существует два метода удаления элементов: $.fn.remove и $.fn.detach. Если вам нужно полностью удалить элемент со страницы – используйте метод $.fn.remove. Хотя этот метод и возвращаает вам удаленный элемент, но если вы снова добавите его на страницу, он уже не будет содержать связанные с ним данные и события.

Если вам нужно оставить данные и события связанные с элементом, то используйте метод $.fn.detach. Также как и метод $.fn.remove, $.fn.detach возвращает вам удаленные элементы, но кроме того он сохраняет данные и события связанные с элементами, поэтому вы можете снова добавить удаленные элементы на страницу.

Замечание.

Метод $.fn.detach очень полезен, если вы производите много операций с элементом. В этом случае удобно убрать элемент со страницы методом $.fn.detach, сделать необходимые операции с элементом и затем снова восстановить его на странице. Это избавляет от тяжелых DOM операций, необходимых для поддержания данных и событий элемента.

Если вам нужно оставить элемент на странице, но при этом удалить его содержимое, то вы можете воспользоваться методом $.fn.empty, для того чтобы очистить HTML содержимое элемента.

Создание новых элементов

jQuery предоставляет простой и элегантный метод для создания новых элементов – метод $(), который также испольуется для выборки элементов.

// пример создания новых элементов

$('<p>Это новый параграф</p>');
$('<li class="new">новый элемент списка</li>');
// пример создания нового элемента с атрибутами

$('<a/>', { 
    html : 'Это <strong>новая</strong> ссылка',
    'class' : 'new',
    href : 'foo.html'
});

Заметим, что в объекте атрибутов, во втором аргументе название class написано с кавычками, а два других – text и href, – без кавычек. Название свойства обычно передается без кавычек, если только это не зарезервированное слово (в данном случае это слово class).

Когда вы создаете новый элемент, то он не сразу добавляется на страницу. Существует несколько способов добавления элемента на страницу, после того как он создан.

// пример добавления нового элемента на страницу

var $myNewElement = $('<p>Новый элемент</p>');
$myNewElement.appendTo('#content');

$myNewElement.insertAfter('ul:last'); // после этого p будет удален из #content!
$('ul').last().after($myNewElement.clone()); // клонируем p, теперь их будет 2

Собственно говоря, вам не нужно хранить созданный элемент в переменной, вы можете вызвать метод чтобы добавить элемент на страницу сразу после $(). Однако в большинстве случаев вам понадобится ссылка на элемент, который вы добавили, чтобы не выбирать его снова.

Вы даже можете одновременно создать и добавить элемент на страницу, но помните, что в этом случае вы не получите ссылку на добавленный элемент.

// пример одновременного создания и добавления элемента на страницу

$('ul').append('<li>list item</li>');

Замечание

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

var myItems = [], $myList = $('#myList');

for (var i=0; i<100; i++) {
myItems.push('<li>item ' + i + '</li>');
}

$myList.append(myItems.join(''));

Работа с атрибутами

jQuery имеет широкие возможности для работы с атрибутами. Основные действия с атрибутами очевидны, но метод $.fn.attr позволяет делать более сложные операции.

// пример изменения одного атрибута

$('#myDiv a:first').attr('href', 'newDestination.html');
// пример изменения нескольких атрибутов

$('#myDiv a:first').attr({
    href : 'newDestination.html',
    rel : 'super-special'
});
// пример использования функции для определения нового значения атрибута

$('#myDiv a:first').attr({
    rel : 'super-special',
    href : function() { 
        return '/new/' + $(this).attr('href');
    }
});

$('#myDiv a:first').attr('href', function() {
    return '/new/' + $(this).attr('href');
});

источник

Читайте также: