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

http://answers.oreilly.com/topic/2353-5-things-you-might-not-know-about-jquery/
  • Перевод
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), думаю все-таки стоит прочитать эту книгу. Какие ещё особенности вы можете добавить?
Поделиться публикацией

Похожие публикации

Комментарии 30
    +2
    Спасибо, статья очень понравилась, несмотря на то, что уже все это знал. Многие не знают про такую конструкцию:

    $('pre').css({backgroundColor:«gray», «boder-radius»:«3px», color: «black»})
    В итоге часто вижу
    $('pre').css('background-color', 'gray');
    $('pre').css('boder-radius', '3px');
    $('pre').css('color', 'black');
    А это мало того, что некрасиво, так еще и создает объект три раза.

    Самый полезный из перечисленных — третий метод. Если добавите туда же пару строчек про $.live(), будет просто отлично.
      –2
      *border-radius, наверное?
        +5
        $.live() уже не модно. $.delegate() наше все.
          0
          Подскажите, чем отличается поведение?

          $("table").delegate("td", "hover", function(){
          	$(this).toggleClass("hover");
          });
          
          $("table td").live("hover", function(){
          	$(this).toggleClass("hover");
          });
          
            +1
            Тут кажется что-то было.
              +1
              Контекст .live() идет от начала DOM-дерева, а .delegate() — от выбранного селектора
                +1
                Небольшая статья и 5 минут видео. После просмотра все станет ясно net.tutsplus.com/tutorials/javascript-ajax/quick-tip-the-difference-between-live-and-delegate/
                  +16
                  Для понимания данного различия необходимо понимать как работает live — его работа основывается на том, что все события всплывают, т.е. кликнув на любом элементе HTML странички событие всплывает вверх по дом-дереву пока не будет перехвачено каким-либо обработчиком. Таким образом когда вы пишите $(«table td»).live(«hover», function(){… }); на document (на самый верх дерева) вешается обработчик, внутри он проверяет eventTarget, если это наш «table td» то запустится ваша функция. Функция delegate позволяет вешать подобный обработчик не на document, а на элемент который находится «ближе» в дереве к необходимому элементу.

                  Метод delegate стоит так же использовать в том случае, если у нас слишком много однотипных объектов с кучей обработчиков, т.е. как пример — необходимо в таблице сделать ячейки кликабельными (или повесить hover как в примере) то вешать обычные обработчик на каждую ячейку слишком накладно, лучше на всё таблицу один.
                  0
                  +1
                  После Быстрых селекторов / Контекст тоже перешел на .delegate()
                +7
                > Вы не должны использовать $(document).ready()

                <grammar-nazi>
                Здесь «вы не должны» воспринимается как необходимость того, чтобы вы не использовали $(document).ready(). Этот оборот больше похож на английское «You mustn't». «You don't have to» лучше перевести как «вы не обязаны».
                </grammar-nazi>
                  0
                  А ещё лучше — «Не обязательно использовать …» / «Нет нужды использовать …»
                  0
                  Спасибо за статью, хотелось бы увидеть в дальнейшем статьи на эту тему.
                  0
                  В первом примере, насколько я понимаю, вместо атрибута «css» нужно изменять «style».
                    0
                    отлично! Пишите еще!
                      0
                      Лучше писать

                      jQuery(function ($) {
                      
                      });
                      


                      вместо
                      $(function () {
                      });
                      
                        0
                        Если используются другие библиотеки, претендующие на заветный бакс ($), jQuery умеет уступать.
                          +2
                          Ещё лучше вот так:
                          (function (window, document, $) {
                              var App = {
                                  init: function () {...}
                                  ...
                              };
                              $($.proxy(App.init, App));
                          }(this, this.document, this.jQuery));
                          Без заморочек со сторонними библиотекам, поюс ко всему zero-globals!
                            0
                            а можно вообще подключить серверный MooTools и писать красивый код, наслаждаясь при этом работой с ДОМ в ДжиКвери =)
                          0
                          пятый пункт использовал совместно с jquery.malsup.com/block/
                            0
                            В опере примеры не работают. Использовать нельзя.
                              0
                              Уточните пожалуйста, что именно не работает в опере? Хочу заюзать эту библиотечку…
                              У меня все прекрасно в Опере заработало.
                                0
                                Ну может я что-то не так делаю, но судя по всему на странице есть кнопки — демонстрация, ни одна из них не работает, хотя если эти кнопки для красоты то да, все работает :)
                                  0
                                  Там JS ошибки идут одна за другой когда пытаешься демонстрацияю посмотреть, возможно просто сделали так демонстрация а сама библиотека вполне хорошо работает, я не знаю.
                                    0
                                    Хмм… у меня на демо странице ни каких ошибок.
                                    А какая версия оперы?
                                    У меня 11.00 (сборка 1156)
                                    Пробовал все демки, командная строка молчит, ни одной ошибки…
                                      0
                                      Хм =) Проблема отпала сама собой, ошибки исчезли и все заработало… А вообще такие вещи слишком просто делать чтоб использовать библиотеку =) Это же один див по сути с Вашим html внутри.
                                        0
                                        Согласен, но зачем изобретать велосипед, если его кто то уже изобрел?
                                        Это же придется отрабатывать анимацию, писать стили и прочее… А тут все готово, бери и юзай :)
                                        В таких случаях, я обычно качаю подходящую библиотечку, удаляю лишнее, добавляю то что нужно и использую.
                            0
                            Эти 2 события “ajaxStart” и “ajaxStop” могут быть привязаны к любому элементу страницы. jQuery вызывает их глобально.

                            Однажды я столкнулся с проблемой. На сайте было много вызова ajax-методов и для них всех отображалась иконка лоудера — все работало великолепно пока… Однажды решили прикрутить чат, кот использует ajax запросы на сервер для проверки статуса нов сообщений и прочей мета инфы. И стал этот лоудер как новогодняя елка, да на каждй странице. Пришлось переписать c использованием jQuery.ajax: beforeSend и complete
                              +1
                              Автора оригинальной статьи поправили по поводу второго пункта. Он внёс исправления и извинился за путание читателей. azproduction внесите исправления, пожалуйста, что б новички не пугались, что у них что-то не работает.

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое