Pull to refresh

5 вещей, которые вы могли не знать о jQuery

Reading time 3 min
Views 29K
Original author: David Flanagan
jQuery очень мощная библиотека, но некоторые его богатые возможности неясны, если вы не изучали исходный код jQuery и не читали книгу jQuery Pocket Reference (автор пишет my new book), вы можете не знать о них. В этой статье представлены отрывки из этой книги — 5 полезных вещей о которых вы могли не знать.

1) Вы вы не обязаны использовать $(document).ready() Если вы хотите выполнить функцию, когда документ готов для манипулированию просто передайте её в $()

2) Вы, наверное, уже знаете, что вы можете передать тэг в функцию $() для создания элемента этого типа и, что вы можете передать атрибуты объекта (в качестве второго аргумента), которые будут установлены на созданный элемент. Вторым аргументом может быть любое свойство, который вы передаете в метод attr(). Кроме того, если какое-либо свойство имеет тоже самое имя, что и событие (click, mouseover), то значение свойства используется в качестве функции обработчика данного события.
Следующий код, например, создает новый элемент, устанавливает три HTML атрибута и регистрирует функцию обработчика события(click) на нем:
var image = $("<img>", {
                  src: image_url,
                  alt: image_description,
                  className: "translucent_image",
                  click: function() {$(this).css("opacity", "50%");}
               });


3) jQuery имеет простые методы, такие как click() и change() для регистрации обработчиков событий, а также определяет более общий метод регистрации событий — bind(). Важной особенностью bind() является то, что он позволяет указать пространство имен (или нескольких имен) для обработчиков событий при их регистрации. Это позволяет определять группы обработчиков, что очень удобно, если впоследствии вы захотите вызвать или отменить регистрацию всех обработчиков в определенной группе. Пространство имен обработчиков особенно полезно для программистов, которые пишут библиотеки или модули повторно используемого jQuery кода. Пространство имен обработчиков выглядит как селектор класса в CSS.
Для привязки обработчика событий в пространстве имен, используйте имя события и пространство имен обработчика:
// Цепляем f как обработчик события mouseover в пространстве имен "myMod"
$('a').bind('mouseover.myMod', f);

Если ваш модуль зарегистрировал все события, используя пространство имен, вы можете легко отцепить их все, используя unbind():
// Отцепляем все обработчики событий mouseover, mouseout
// в пространстве имен "myMod"
$('a').unbind("mouseover.myMod mouseout.myMod");
// Отцепляем все обработчики событий в пространстве имен myMod
$('a').unbind(".myMod");

4) jQuery имеет простые методы анимации такие как fadeIn(), а также включает метод анимации общего назначения animate(). Свойство queue объекта options, которые вы отправляете в animate() определяет будет ли запланированная анимация отложена до тех пор пока не будут выполнены все предыдущие анимации. По умолчанию анимации вызываются по очереди, но вы можете отключить это, установив свойство queue в false. Анимации без очереди стартуют немедленно.
Последующие очереди анимаций будет не отложенными для анимаций без очереди. Рассмотрим следующий код:
$("img").fadeIn(500)
        .animate({"width":"+=100"},
                 {queue:false, duration:1000})
        .fadeOut(500);

Эффекты fadeIn() и fadeOut() имеют очередь, а метод animate() (который анимирует свойство width в течении 1 секунды) мы вызвали без очереди. Анимация ширины объекта начинается в тоже время, что и fadeIn(). Эффект fadeOut() начнется как только закончит выполнение эффект fadeIn()

5) jQuery вызывает события “ajaxStart” и “ajaxStop” для обозначения начала и конца сетевой активности Ajax. Когда jQuery не выполняет никаких Ajax запросов и инициализируется новый запрос, jQuery вызывает событие “ajaxStart”. Если вызываются новые запросы, но текущий запрос не выполнен, то событие “ajaxStart” не вызывается. Событие “ajaxStop” вызывается, когда последний отложенный запрос Ajax завершен и jQuery больше не проявляет сетевой активности.
Пара этих события может бы полезна для показа/скрытия анимации «Загрузка...» или иконки сетевой активности. Например:
$("#loading_animation").bind({
    ajaxStart: function() { $(this).show(); },
    ajaxStop: function() { $(this).hide(); }
});

Эти 2 события “ajaxStart” и “ajaxStop” могут быть привязаны к любому элементу страницы. jQuery вызывает их глобально.

От переводчика 2 из 5 я не знал, хотя регулярно слежу за релизами jQuery (особенно порадовала связка ajaxStart/ajaxStop), думаю все-таки стоит прочитать эту книгу. Какие ещё особенности вы можете добавить?
Tags:
Hubs:
+139
Comments 30
Comments Comments 30

Articles