jQuery / Dom elements

after(content) — вставляет контент после каждого элемента из выборки, т.е. если вы встречаете строку $(“p”).after(“<hr />”), читайте её как «после каждого параграфа будет вставлена линия»
insertAfter(element) — вставляет элементы из выборки после каждого элемента переданного в качестве аргумента, т.е. если вы встречаете строку
$(“<hr />”).insertAfter(“p”) – читайте её как «линия будет вставлена после каждого параграфа»

— Хм, а я разницы не увидел! — тут всё легко, присмотритесь:
$(“после чего добавляем”).after(“что добавляем”)
$(“что добавляем”).insertAfter(“после чего добавляем”)

before(content) — вставляет контент перед каждым элементом из выборки
insertBefore(element) — вставляет элементы из выборки перед каждым элементом переданным в качестве аргумента
append(content) — вставляет контент в конец каждого элемента из выборки, т.е. строку кода $(“p”).append(“<hr />”), следует читать как «в конец каждого параграфа будет добавлена линия»
appendTo(element) — вставляет выбранный контент в конец каждого элемента переданного в качестве аргумента: $(“<hr />”).appendTo(“p”) — «линия будет добавлена в конец каждого параграфа»

Опять про разницу:
$(“куда добавляем”).append(“что добавляем”)
$(“что добавляем”).appendTo(“куда добавляем”)
prepend(content) — вставляет контент в начало каждого элемента из выборки
prependTo(element) — вставляет выбранный контент в начало каждого элемента переданного в качестве аргумента
<!–more–>
replaceWith(content) – заменяет найденные элементы новым содержимым
replaceAll(target) – вставляет контент в замен найденному
$(“что”).replaceWith(“на что меняем”)
$(“что”).replaceAll(“вместо чего”)

wrap(element) – оборачиваем каждый найденный элемент новым элементом, т.е. мы конфеты из коробки заворачиваем в фантики
wrapAll(element) – оборачивает найденные элементы новым элементом, мы берём все конфеты, и заворачиваем в один большой фантик
wrapInner(element) – оборачивает контент каждого найденного элемента новым элементом, берём конфеты, убираем фантики, заворачиваем в свой фантик, и сверху заворачиваем в родной фантик
unwrap() – удаляет родительский элемент у найденных элементов, фантики вон

clone(withDataAndEvents) – клонирует выбранные элементы, для дальнейшей вставки копий назад в DOM, позволяет так же копировать и обработчики событий
detach() – удаляет элемент из DOM, но при этом сохраняет все данные о нём в jQuery, следует использовать, если надо удалить элемент, а потом вернуть его обратно
empty() – удаляет текст и дочерние DOM элементы
remove() – удаляет элемент из DOM, насовсем
html() – вернёт HTML заданного элемента
html(newHtml) – заменит HTML в заданном элементе

text() – вернёт текст заданного элемента, если внутри элемента будут другие HTML тэги, то вернётся сборная солянка из текста всех элементов
text(newText) – заменит текст внутри выбранных элементов, при попытке вставить таким образом HTML, будет получен текст, где тэги будут приведены к HTML entities:
$(“div”).text(“Some <strong>text</strong>”)
&gt;&gt; Some &lt;strong&gt;text&lt;/strong&gt;

offset() – вернёт позицию DOM элемента относительно document’а, данные будут получены в виде объекта: { top: 10, left: 30 }
offset({ top: 10, left: 30 }) – устанавливаем расположение DOM элемента по указанным координатам
position() – вернёт позицию DOM элемента относительно родительского элемента
height() – возвращает высоту элемента за вычетом отступов и границ; если у нас несколько элементов в выборке, вернётся первый; значение, в отличии от метода
css(‘height’), возвращается без указания единиц измерения
height(height) — устанавливает высоту всех элементов в выборке, если значение высоты передано без указания единиц измерения, то это будут px
// в качестве памятки, взято из мануала
$(window).height(); // высота окна
$(document).height(); // высота HTML документа

width() и width(width) – ведут себя аналогично методу height(), но работают с шириной элемента
Методы height() и width() не изменяют своего поведения в зависимости от выбранной блочной модели, т.е. они всегда возвращают параметры области внутри margin, padding и border’а элемента.
innerHeight() и innerWidth() – вернут соответственно высоту и ширину элемента, включая padding
outerHeight() и outerWidth() – вернут высоту и ширину элемента, включая padding и border
outerHeight(true) и outerWidth(true) – высота и ширина, включая padding, border и margin

scrollLeft() – возвращает значение «проскроленности» по горизонтали первого элемента из выборки
scrollLeft(value) – устанавливает значение горизонтального скрола для каждого элемента из выборки
scrollTop() – возвращает значение «проскроленности» по вертикали первого элемента из выборки
scrollTop(value) – устанавливает значение вертикального скрола для каждого элемента из выборки
Значение scrollTop и scrollLeft поддаются анимации и не работают для спрятанных элементов DOM

<a href=”anton.shevchuk.name” title=”Source” target=”_blank”></a>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: