Изучение PHP. Запись 4 (Знакомство с jQuery)
Primary tabs
Продолжаю свое знакомство с 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, таким образом сместив содержимое на уровень выше.
- Voronve's blog
- Log in to post comments
- 4187 reads