Изучение PHP. Запись 4 (Знакомство с jQuery)

Продолжаю свое знакомство с jQuery.

Еще одна важная особенность jQuery в общем состоит в том, что даже над только что созданным html-элементом, даже если он не вставлен в документ (не выводится на экран при загрузке страницы) уже можно применять абсолютно весь арсенал jQuery: задавать css стили, помещать внутрь другие элементы, перемещаться по их иерархической структуре и т.д.

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

.append(), .prepend()

Эти функции отвечают за вставку их аргумента в html-элементы объекта jQuery, вызвавшего её:

var newElems = $("<div class='dcell'></div>")
     .append("<img src='lily.png'/>")
     .append("<label for='lily'>Лилии:</lаbеl>”)
     .append("<input name='lily' value='0' required />");
newElems.cee("border", "thick solid red");
$('#row1').append(newElems); 

Особенностью данных методов является то, что они всегда возвращают объект jQuery с теми же элементами, что и изначально вызвавший их объект. В результате, вышеприведенный код, при вызове метода .append() всегда будет вставлять новые элементы именно внутрь div-а с классом dcell (а не рекурсивно в div, потом в img, потом в label и т.д.).

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

$('#row1').append(newElems);
$('#row2').prepend(newElems);

В результате этого кода элемент newElems будет находиться только внутри элемента c id "row2";

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

$('#row1').append(newElems);
$('#row2').prepend(newElems.clone() );

Функция clone(), к слову, создает элемент с таким же содержимым, что и оригинал.

wrapAll()

Не буду тут долго описывать эту функцию - она оборачивает элементом, указанным в аргументе, все элементы находящиеся в jQuery. Обращу внимание лишь на единственный, но очень важный нюанс - элементы в объекте jQuery обязательно должны быть сестринскими! Иначе метод обернет элемент вокруг только первого элемента в объекте, а остальные подтянет к нему сделав сестринскими!

Коротко по методам удаления данных:

remove() - удаляет элементы и все данные внутри них безвозвратно;
detach () - удаляет элемент, но все данные сохранятся в результирующем объекте (их в дальнейшем можно будет вставить в документ повторно);
empty () - оставит сам элемент, но удалит безвозвратно всю информацию, хранящуюся в нем;
unwrap () - Противоположен предыдущей - удалит родительские элементы (только родительские, не предков) всех элементов в объекте jQuery, таким образом сместив содержимое на уровень выше.