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

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

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

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

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

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

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

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

  // Щелчок на любом элементе <р> окрашивает его фон в серый цвет
  $("p").click(function { $(this).css("background-color", "gray"); });

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

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

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

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

В дополнение к этим простым методам регистрации обработчиков событий существует две специальные формы методов, которые могут иногда пригодиться. Метод hover регистрирует обработчики событий «mouseenter» и «mouseleave». Вызов hover(f,g) по своему действию аналогичен двум последовательным вызовам методов mouseenter(f) и mouseleave(g). Если методу hover передать единственный аргумент, он будет использоваться как обработчик обоих событий.

Другим специальным методом регистрации обработчиков событий является метод toggle. Этот метод регистрирует функцию обработчика события «click». Вы можете указать две или более функции обработчиков, и библиотека jQuery будет вызывать их всякий раз, когда будет возникать событие «click». Если, например, вызвать этот метод как toggle(f,g,h), функция f будет вызываться для обработки первого события «click», g– второго, h– третьего и снова f– для обработки четвертого события «click». Будьте внимательны при использовании метода toggle: как будет показано в разделе 19.5.1, этот метод может также использоваться для отображения и скрытия (т. е. для переключения видимости) выбранных элементов.

В разделе 19.4.4 мы познакомимся с другими, более обобщенными способами регистрации обработчиков событий и завершим этот раздел описанием еще одного простого и удобного способа регистрации обработчиков.

Напомню, что создавать новые элементы можно с помощью функции $, передавая ей строку с разметкой HTML и объект (во втором аргументе) с атрибутами, которые должны быть установлены во вновь созданном элементе. Второй аргумент может быть любым объектом, который допускается передавать методу attг. Но кроме того, если имя какого-либо из свойств совпадает с именем метода регистрации обработчиков событий, перечисленных выше, значение этого свойства будет интерпретироваться как функция-обработчик и зарегистрировано как обработчик данного типа события. Например:

  $("<img/>", {
   src: image_url,
   alt: image_description,
   className: "translucent_image",
   click: function { $(this).css("opacity", "50%"): }
  });

19.4.2. Обработчики событий в библиотеке jQuery

Функции обработчиков событий в примерах выше не имеют ни аргументов, ни возвращаемых значений. В целом это нормально для подобных обработчиков событий, но библиотека jQuery передает каждому обработчику событий один или более аргументов и анализирует значения, возвращаемые ими. Самое главное, что следует знать, - каждому обработчику событий библиотека jQuery передает в первом аргументе объект события. Поля этого объекта содержат дополнительную информацию о событии (такую как координаты указателя мыши). Свойства стандартного объекта Event были описаны в главе 17. Библиотека jQuery имитирует стандартный объект Event даже в броузерах (таких как IE версии 8 и ниже), не поддерживающих его, и объекты событий в библиотеке jQuery имеют одинаковые наборы полей во всех броузерах. Подробнее об этом рассказывается в разделе 19.4.3.