Барака Обаму еще не избрали президентом Соединенных Штатов, свиной грипп не охватил, а Майкл Джексон был еще жив … когда была выпущена jQuery 1.3. Это, конечно, заставляет это казаться давным-давно. Поэтому неудивительно, что за это время команда jQuery создала множество замечательных новых функций и улучшений для версии 1.4 библиотеки.
Теперь, когда jQuery 1.4 был в дикой природе в течение нескольких месяцев, и мы видели релизы 1.4.1 и 1.4.2, я хочу пролить свет на функции, которые меня больше всего порадовали. Это не каталог всего нового в ветке 1.4.x (для этого вы должны проверить примечания к выпуску); скорее, это список моих любимых: те, которые я начал активно использовать, или те, которые, я думаю, показывают наибольшее обещание.
Прежде чем мы углубимся в глубину, давайте рассмотрим пару забавных, новых (и, возможно, некоторых, скажем, давно назревших) методов API. Во-первых, delay действия. На форуме jQuery должно быть несколько сотен вопросов: «Как я могу поместить задержку в мою цепочку анимации?». Ответы были довольно уродливыми — вы могли бы подделать это с помощью animate , или настроить таймер JavaScript, или … какой-то другой ужасный обходной путь. , Но не более того! Метод delay принимает обычный параметр продолжительности jQuery (то есть количество миллисекунд или одну из строк 'fast' или 'slow' ) и просто ждет, прежде чем перейти к следующей команде:
$ ('p') .slideUp () .delay (2000) .slideDown ();
Сладкий. Далее, любимый инструмент для сгибания toggleClass , toggleClass , получил аккуратное обновление: вы можете указать несколько имен class (разделенных пробелом) для переключения. Если class уже существует в элементе, он будет удален, а если он не существует, он будет добавлен. Этот может серьезно очистить вашу навигацию или код меню аккордеона.
И, наконец, еще пара полезных ярлыков, которые помогут улучшить читаемость ваших цепочек jQuery: first и last . Они являются частью категории обхода методов jQuery и отфильтровывают все, кроме первого или последнего элемента вашего выбора:
$ ('p') .first () .addClass ('первый абзац') .end () .last () .addClass ('последний абзац');
first метод — это просто псевдоним для eq(0) , а last — псевдоним для eq(-1) . Э-э, что это? Минус один? Да. Еще одним удобным дополнением является возможность подавать отрицательное число в eq чтобы указать позицию, начиная с конца выбора, а не с начала.
Если вы jQuery1.4.2-min.js файл jQuery1.4.2-min.js в свой старый проект, вы, скорее всего, обнаружите, что все продолжает работать, что может привести к подозрению, что нет ничего нового, достойного вашего внимания. Но есть пара фантастических трюков, которые отлично дополняют ваш пояс с инструментами jQuery.
Все мы знаем, что лучшая часть jQuery — это его способность объединять действия. Поэтому немного удивительно, что одно из самых классных дополнений в 1.4, быстрое создание элементов, предназначено для уменьшения количества цепочек при создании элементов DOM с нуля:
$ ('<div />', {id: 'myDiv', css: {backgroundColor: 'blue', отступы: '5px'}, html: '<strong> My Div </ strong>', click: function ( ) {alert ('clicked me!')}}). appendTo ('body');
Новый параметр, после нашей строки селектора конструкции, является объектом, содержащим детали, которые мы хотели бы применить к новым элементам. Это в форме знакомого литерала объекта — но с точки зрения его содержания, это довольно своеобразно. Мы можем указать любой атрибут, который мы хотим добавить к элементам, а также указать несколько свойств и команд jQuery, которые будут применяться автоматически.
Выше мы добавили свойства css и html и добавили ограничитель щелчка : ни один из них не является атрибутом для элемента div . jQuery использует некоторые смарты для внутренней обработки и применяет правильные результаты (ищите в исходном коде вхождение attrFn если вы заинтересованы в обнаружении всего, что вы можете указать).
Второе большое изменение, на которое вы хотите обратить внимание, — это возможность устанавливать значения с помощью функций. Эта способность была раньше (например, в функции attr ), но теперь она везде! css , attr , val , html , append , wrap , addClass … большинство методов — там, где это имеет смысл — теперь принимают функцию для установки их значений:
$ ('div'). html (function (i) {return 'Это число div' + i;});
И если этого недостаточно, есть второй компонент, который делает сеттеры еще лучше: многие сеттерские функции также получают текущее значение элемента, которое можно использовать внутри вашей функции без необходимости повторного выбора элемента:
$ ('a'). attr ('href', function (i, current) {return current + '? linkid =' + i;});
Здесь мы добавили значение строки запроса в конец каждой ссылки на странице — очень кратко и элегантно.
Новый выпуск не был бы очень увлекательным, если бы не дали несколько новых команд для игры, поэтому давайте пройдемся по некоторым важным дополнениям API.
До jQuery 1.4 для выбора подмножества братьев и сестер обычно требовалось тщательное сцепление или потенциально запутанный метод slice . Чтобы помочь с этим, у нас теперь есть методы groovy nextUntil и prevUntil которые позволяют нам выбирать все узлы-братья из текущего выделения в некоторую указанную конечную точку.
В следующем примере мы first выберем элемент с id , затем каждый из его следующих братьев и сестер вплоть до (но исключая) брата с id secondLast . Мы также включили необязательный второй параметр, который дополнительно фильтрует выбор. #first результатом является то, что мы выбрали все родственные элементы div между #first и #secondLast :
$ ('# first') .nextUntil ('# secondLast', 'div') .css ('background-color', 'red');
prevUntil работает точно так же, за исключением того, что он выбирает элементы, которые появляются до текущего выделения, а не после. Еще один новый метод в той же категории — это метод parentsUntil . parentsUntil будет проходить через DOM от выбранного элемента до тех пор, пока не достигнет предка, совпадающего с переданной строкой селектора.
Придерживаясь новых методов обхода, был добавлен метод has, чтобы соответствовать его аналогу фильтра селектора. Существующий фильтр :has принимает строку селектора и возвращает только те элементы, чьи дочерние элементы соответствуют этому селектору:
$ ( 'Р: имеет (.warning)') addClass ( 'предупреждение родителем.');
В jQuery 1.4 у нас теперь есть метод для решения той же задачи в наших цепочках jQuery:
. $ ( 'Р') имеет ( "предупреждение ') addClass (' предупреждение-родителя).
Последний новый метод, который мы рассмотрим — это фантастически полезная команда unwrap . Путевой партнер wrap , unwrap удалит родителей определенного набора элементов, оставляя только сами элементы. Например, если на вашей странице есть несколько ссылок, содержащих изображения, то команда $('a img').unwrap(); удалит окружающие теги ссылки, оставив только изображения на странице.
jQuery скрывает много ужасно сложного JavaScript, необходимого для выполнения кросс-браузерной манипуляции с DOM, но при этом часто заставляют людей поверить, что он пытается заменить JavaScript. Ничто не может быть дальше от истины: конечно, вы можете спотыкаться, добавляя простые эффекты только с помощью jQuery, но на каком-то этапе вам придется прикусить пулю и довести до конца свои JavaScript-ошибки.
JQuery 1.4 представляет множество дополнительных соглашений и расширенных функций, которые наверняка заставят поклонника JavaScript опытных улыбаться. Мы уже видели один с быстрой конструкцией элемента. Аналогичным образом можно связать несколько обработчиков событий с различными функциями одним литералом объекта:
$ ('p'). bind ({mousemove: function (e) {$ (this) .text ('перемещено в:' + e.pageX + ':' + e.pageY);}, mouseout: function () {$ (this) .text ('отошел.');}, нажмите: function () {$ (this) .unbind ('mousemove mouseout');}});
Как и быстрое конструирование элементов, эта техника позволяет обойти необходимость в цепочках. Я уверен, что некоторые пользователи jQuery (такие как я) будут любить это, в то время как другие будут ненавидеть это.
live функциональность была тщательно пересмотрена и, наконец, работает так, как вы ожидаете: для всех событий. Это также было дополнено новым методом для работы с делегированием событий: delegate . delegate — это способ присоединить обработчики событий к элементу как при его вызове, так и в любое время в будущем, когда элементы соответствуют селектору.
Звучит очень похоже на live , не так ли? Да, но есть несколько ключевых отличий. Во-первых, метод delegate присоединяется к выбранному вами элементу, тогда как live отправляет события в специальный контейнер. Благодаря определению элемента, с которым он связан, код становится более читабельным и более эффективным. В приведенном ниже примере мы будем связывать любые текущие или будущие элементы div внутри элемента #container :
$ ('# container'). делегат ('div', 'mousemove', function (e) {$ (this) .text ('Перемещено в:' + e.pageX + ',' + e.pageY);} );
Другое преимущество delegate состоит в том, что, в отличие от live , у него нет проблем с привязкой к элементам, которые были выбраны с помощью методов обхода jQuery.
Хорошо, двигаясь дальше. Если вы изо всех сил пытались понять концепцию области видимости в JavaScript (или изо всех сил пытались объяснить это коллеге), есть несколько новых методов, которые могут вам помочь. proxy метод — большое волшебство для людей, которые боятся замыканий (или тех, кто думает, что они создают нечитаемый код). Теперь вы можете привязать ваши обработчики событий к указанному объекту, так что this в обработчике будет ссылаться на этот объект, а не на элемент, вызвавший событие. В приведенном ниже примере мы связываем метод controller.update с обработчиком click абзаца. Когда он вызывается, this будет объект controller а не элемент DOM:
$ ('p') .click ($. proxy (controller, 'update')) .mouseout (function () {// "this" - это элемент абзаца - как обычно $ (this) .text ('удалено). ');}); var controller = {clicks: 0, update: function (event) {// "this" - это объект контроллера - закрытие не требуется! this.clicks ++; $ (event.target) .text ('Количество кликов:' + this.clicks); }};
Если вам понравился прокси, он вам понравится: jQuery 1.4 дает нам возможность указать необязательный параметр в запросах Ajax, чтобы установить контекст для функций обратного вызова:
$ .ajax ({url: 'reset.html', context: controller, complete: function () {// "this" - это объект контроллера! this.clicks = 0;}});
Вы также можете установить контекст как элемент DOM, чтобы внутри функций обратного вызова вы могли писать код, подобный $(this).fadeIn() и автоматически применять его к $(this).fadeIn() элементу.
Как я сказал в начале, в версиях 1.4 гораздо больше, чем несколько функций, которые я здесь изложил. Если вы еще этого не сделали, зайдите на новый сайт API и посмотрите примечания к выпуску 1.4, 1.4.1 и 1.4.2, чтобы убедиться, что нет никаких самородков jQuery gold, которые вы ‘ мы пропустили.
Совершенно очевидно, что команда и сообщество jQuery, конечно, не провели последний год, сидя на своих руках. Они были непреодолимой силой кодирования — они принесли огромный прирост производительности и добавили множество интересных новых функций.
Но какими бы блестящими и блестящими они ни были, все будет напрасно, если вы оставите его пылящимся на CDN. Пришло время добавить этот файл JavaScript в ваш следующий проект и посмотреть, что вы можете сделать.