JavaScript. Подробное руководство, 6-е издание, стр. 304

<b>// Обернуть каждый элемент &lt;h1&gt; элементом &lt;i&gt;</b>

<b>$(&quot;h1&quot;).wrap(document.createElement(&quot;i&quot;)); // Результат: &lt;i&gt;&lt;h1&gt;...&lt;/h1&gt;&lt;/i&gt;</b>

<b>// Обернуть содержимое каждого элемента &lt;h1&gt;. Строковый аргумент проще в использовании.</b>

<b>$(&quot;h1&quot;).wrapInner(&quot;&lt;i/&gt;&quot;); //Результат: &lt;h1&gt;&lt;i&gt;... &lt;/i&gt;&lt;/h1&gt;</b>

<b>// Обернуть первый абзац якорем и элементом div</b>

<b>$(&quot;body&gt;p:first&quot;).wrap(&quot;&lt;a name='lead'&gt;&lt;div class='fіrst'&gt;&lt;/div&gt;&lt;/a&gt;&quot;):</b>

<b>// Обернуть все остальные абзацы другим элементом div </b>

<b>$(”body&gt;p:not(:first)&quot;).wrapAll(&quot;&lt;div class='rest' &gt;&lt;/div&gt;&quot;):</b>

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

Помимо методов вставки и замены в объекте

<b>jQuery</b>
имеются также методы удаления элементов. Метод
<b>empty()</b>
удаляет все дочерние элементы (включая текстовые узлы) из каждого выбранного элемента без изменения самого элемента. Метод
<b>remove(),</b>
напротив, удаляет из документа все выбранные элементы (и все их содержимое). Обычно метод
<b>remove()</b>
вызывается без аргументов и удаляет все элементы, находящиеся в объекте
<b>jQuery</b>
. Однако если передать методу аргумент, этот аргумент будет интерпретироваться как селектор, и удалены будут только элементы из объекта
<b>jQuery</b>
, соответствующие селектору. (Если необходимо удалить элементы из множества выбранных элементов, не удаляя их из документа, используйте метод
<b>filter()</b>
, о котором рассказывается в разделе 19.8.2.) Обратите внимание, что не требуется удалять элементы перед повторной их вставкой в документ: достаточно просто вставить их в новое местоположение, а библиотека автоматически переместит их.

Метод

<b>remove()</b>
удаляет также все обработчики событий (раздел 19.4) и другие данные (раздел 19.2.7), которые могли быть связаны с удаляемыми элементами. Метод
<b>detach()</b>
действует подобно методу
<b>remove(),</b>
но не удаляет обработчики событий и данные. Метод
<b>detach()</b>
может оказаться удобнее, когда элементы требуется удалить из документа на время и позднее вставить их обратно.

Наконец, метод

<b>unwrap()</b>
выполняет удаление элементов способом, противоположным тому, каким действует метод wrap() или
<b>wrapAll():</b>
он удаляет родительский элемент каждого выбранного элемента, не оказывая влияния на выбранные элементы и их братские элементы. То есть для каждого выбранного элемента он замещает родителя этого элемента его дочерними элементами. В отличие от методов
<b>remove()</b>
и
<b>detach(),</b>
метод
<b>unwrap()</b>
не принимает необязательный аргумент с селектором.

19.4. Обработка событий с помощью библиотеки jQuery

Как мы узнали в главе 17, одна из сложностей, связанных с обработкой событий, состоит в том, что в IE (до версии IE9) реализована модель событий, отличающаяся от модели событий в других броузерах. Чтобы решить эту проблему, в библиотеке jQuery определяется собственная унифицированная модель событий, которая одинаково работает во всех броузерах. В простейших случаях модель jQuery API оказывается проще в использовании, чем стандартная модель или модель IE. В более сложных случаях модель jQuery предоставляет более широкие возможности, чем стандартная модель. Все дополнительные подробности описываются в следующих подразделах.

19.4.1. Простые методы регистрации обработчиков событий

Библиотека jQuery определяет простые методы регистрации обработчиков для всех наиболее часто используемых событий, поддерживаемых всеми броузерами. Например, чтобы зарегистрировать обработчик события «click», достаточно просто вызвать метод

<b>click():</b>

<b>// Щелчок на любом элементе &lt;р&gt; окрашивает его фон в серый цвет </b>

<b>$(&quot;p&quot;).click(function() { $(this).css(&quot;background-color&quot;, &quot;gray&quot;); });</b>

Вызов метода объекта

<b>jQuery</b>
регистрации обработчика событий зарегистрирует указанный обработчик во всех выбранных элементах. Обычно это проще, чем регистрировать один и тот же обработчик во всех элементах по отдельности с помощью метода addEventListener() или attachEvent().

Библиотека jQuery определяет следующие простые методы регистрации обработчиков событий:

JavaScript. Подробное руководство, 6-е издание - i_034.jpg

Большая часть этих методов регистрации обработчиков наиболее часто используемых типов событий уже знакомы вам по главе 17. Тем не менее необходимо сделать несколько замечаний. События «focus» и «blur» не всплывают, в отличие от всплывающих событий «focusin» и «focusout», и библиотека jQuery гарантирует, что эти события будут работать во всех броузерах. События «mouseover» и «mouseout», наоборот, всплывают, и это часто доставляет неудобства, так как сложно определить -указатель мыши покинул интересующий нас элемент или событие было доставлено от одного из потомков. События «mouseenter» и «mouseleave» не всплывают, что решает данную проблему. Эти типы событий впервые появились в IE, но библиотека jQuery гарантирует, что они корректно будут работать во всех броузерах.

События «resize» и «unload» возбуждаются только в объекте

<b>Window</b>
, поэтому, если потребуется зарегистрировать обработчики этих типов событий, методы
<b>resіze()</b>
и
<b>unload()</b>
следует вызывать относительно
<b>$(window).</b>
Метод
<b>scroll()</b>
часто вызывается относительно
<b>$(window)</b>
, но его также можно вызывать относительно любых элементов, имеющих полосы прокрутки (например, относительно элементов, в которых CSS-атрибут
<b>overflow</b>
имеет значение «scroll» или «auto»). Метод
<b>load()</b>
может вызываться относительно
<b>$(window)</b>
, для регистрации обработчика события «load» окна, но обычно проще бывает передать свою функцию инициализации непосредственно функции
<b>$()</b>
, как показано в разделе 19.1.1. При этом метод
<b>load()</b>
с успехом можно использовать в элементах
<b>&lt;iframe&gt;</b>
и
<b>&lt;img&gt;</b>
. Обратите внимание, что при вызове метода
<b>load()</b>
с различными аргументами он также может использоваться для загрузки нового содержимого (по протоколу HTTP) в элемент (раздел 19.6.1). Метод
<b>error()</b>
можно использовать с элементами
<b>&lt;img&gt;</b>
для регистрации обработчиков неудачи загрузки изображения. Он не должен использоваться для установки свойства
<b>onerror</b>
объекта
<b>Window</b>
, описанного в разделе 14.6.