Статьи

Выпущено jQuery 1.4: 15 новых функций, которые вы должны знать

Март 17, 2019

JQuery 1.4 был недавно выпущен. Это был не просто релиз поддержки, как некоторые предполагали; Есть много новых функций, улучшений и улучшений производительности, включенных в 1.4! В этом посте рассматриваются новые функции и улучшения, которые могут оказаться полезными для вас.

Вы можете скачать jQuery 1.4 прямо сейчас, здесь: http://code.jquery.com/jquery-1.4.js

1. Передача атрибутов в jQuery (…)

В версии 1.4 jQuery поддерживал добавление атрибутов в коллекцию элементов с помощью полезного метода attr , которому можно передавать как имя и значение атрибута, так и объект, указывающий несколько атрибутов. В jQuery 1.4 добавлена ​​поддержка передачи объекта атрибутов в качестве второго аргумента самой функции jQuery при создании элемента.

Допустим, вам нужно создать элемент привязки с несколькими атрибутами. С 1.4 это так просто, как: 

  jQuery ('<a/>', {
     id: 'foo',
     href: 'http://google.com',
     название: «Стань гуглером»,
     rel: 'external',
     текст: "Перейти в Google!"
 });

Возможно, вы заметили атрибут « text » — вам, вероятно, будет интересно, что он там делает, ведь для якорей нет атрибута « text »! Ну, jQuery 1.4 использует свои собственные методы, когда вы передаете определенные атрибуты. Таким образом, указанный выше атрибут «text» заставит jQuery вызвать метод « .text() », передав «Go to Google!» в качестве единственного аргумента.

Лучший пример этого в действии: 

  jQuery ('<div />', {
     id: 'foo',
     CSS: {
         Вес шрифта: 700,
         цвет: «зеленый»
     },
     click: function () {
         alert («На Foo нажали!»);
     }
 });

Идентификатор «id» добавляется как обычный атрибут, но свойства «css» и «click» инициируют вызов каждого соответствующего метода. Приведенный выше код до выпуска 1.4 был бы написан так: 

  JQuery ( '<DIV />')
     .attr ('id', 'foo')
     .css ({
         Вес шрифта: 700,
         цвет: «зеленый»
     })
     .click (функция () {
         alert («На Foo нажали!»);
     });

Узнайте больше о jQuery (…)

2. Все «пока»!

Три новых метода были добавлены в арсенал обхода DOM в 1.4: « nextUntil », « prevUntil » и « parentsUntil ». Каждый из этих методов будет проходить через DOM в определенном направлении, пока пройденный селектор не будет удовлетворен. Итак, допустим, у вас есть список фруктов:

1
2
3
4
5
6
7
8
9
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
 
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

Вы хотите выбрать все элементы после «Apple», но вы хотите остановить, как только вы достигнете «Клубника». Это не может быть проще: 

  jQuery ('ul li: содержит (Apple)'). nextUntil (': содержит (Pear)');
 // Выбираем банан, виноград, клубнику

Узнайте больше о: prevUntil , nextUntil , родителейUntil

3. Связывание нескольких обработчиков событий

Вместо того чтобы связывать воедино несколько методов привязки событий, вы можете объединить их все в один вызов, например: 

  JQuery ( '# Foo) .bind ({
     click: function () {
         // сделай что-нибудь
     },
     mouseover: function () {
         // сделай что-нибудь
     },
     mouseout: function () {
         // сделай что-нибудь
     }
 })

Это также работает с » .one() «.

Узнайте больше о .bind (…)

4. Индивидуальное смягчение

Вместо того, чтобы просто определять одну функцию замедления для отдельной анимации, теперь вы можете определить разные функции замедления для каждого свойства, которое вы анимируете. jQuery включает в себя две функции замедления: колебание (по умолчанию) и линейное. Для других вам нужно скачать их отдельно !

Чтобы указать функцию замедления для каждого свойства, просто определите свойство как массив, причем первое значение — это то, к чему вы хотите анимировать это свойство, а второе — функция смягчения, которую нужно использовать: 

  JQuery ( '# Foo'). одушевленные ({
     осталось: 500,
     top: [500, 'easeOutBounce']
 }, 2000);

Смотрите этот код в действии!

Вы также можете определить функции ослабления для каждого свойства в необязательном объекте параметров как пары имя-значение свойства в объекте «specialEasing»: 

  JQuery ( '# Foo'). одушевленные ({
     осталось: 500,
     верх: 500
 }, {
     продолжительность: 2000 г.
     specialEasing: {
         top: 'easeOutBounce'
     }
 });

Эта новая особенность была его идеей!

Узнайте больше об ослаблении недвижимости

5. Новые живые события!

В jQuery 1.4 добавлена ​​поддержка делегирования событий « submit », « change », « focus » и « blur ». В jQuery мы используем метод .live() для делегирования событий. Это полезно, когда вам нужно зарегистрировать обработчики событий на многих элементах и ​​когда со временем могут быть добавлены новые элементы (использование « .live() » обходится дешевле, чем повторная привязка постоянно).

Но будь осторожен! Вы должны использовать имена событий « focusin » и « focusout », если хотите делегировать события «focus» и «blur»! 

  jQuery ('input'). live ('focusin', function () {
     // сделать что-то с этим
 });

6. Управление контекстом функции

jQuery 1.4 предоставляет новую функцию « proxy » в пространстве имен jQuery. Эта функция принимает два аргумента: либо «область действия» и имя метода, либо функция и предполагаемая область действия. Ключевое слово JavaScript «this» может быть довольно сложно удержать. Иногда вы не захотите, чтобы это был элемент, а объект, который вы ранее создали.

Например, здесь у нас есть объект « app », который имеет два свойства, метод « clickHandler » и объект config: 

  var app = {
     config: {
         clickMessage: «Привет!»
     },
     clickHandler: function () {
         оповещения (this.config.clickMessage);
     }
 };

Метод « clickHandler », когда app.clickHandler() как « app.clickHandler() », будет иметь « app » в качестве контекста, что означает, что ключевое слово « this » разрешит ему доступ к « app ». Это работает довольно хорошо, если мы просто позвоним: 

  app.clickHandler ();  // "Здравствуй!"  предупрежден

Давайте попробуем связать его как обработчик событий: 

  jQuery ('a'). bind ('click', app.clickHandler);

Когда мы нажимаем на якорь, он не работает (ничего не предупреждено). Это потому, что jQuery (и большинство нормальных моделей событий) по умолчанию устанавливает контекст обработчика в качестве целевого элемента, то есть элемент, по которому только что щелкнули, будет доступен через « this ». Но мы не хотим этого, мы хотим, чтобы для « this » было установлено « app ». Достижение этого в jQuery 1.4 не может быть проще: 

  JQuery ( 'а'). Bind (
     «Нажмите»,
     jQuery.proxy (приложение, «clickHandler»)
 );

Теперь всякий раз, когда якорь нажимается, «Привет!» будет предупрежден!

Прокси-функция возвращает «обернутую» версию вашей функции, с « this », установленным в любое this вами значение. Это полезно и в других контекстах, таких как передача обратных вызовов другим методам jQuery или плагинам.

Узнайте больше о jQuery.proxy

7. Задержка очереди анимации

Теперь вы можете добавить задержку в ваши очереди анимации. Фактически, это работает в любой очереди, но наиболее распространенный вариант использования, вероятно, будет с очередью «fx». Это позволяет вам делать паузу между анимациями, не связываясь с обратными вызовами и вызовами « setTimeout ». Первый аргумент » .delay() » — это количество миллисекунд, на которые вы хотите отложить. 

  JQuery ( '# Foo')
     .slideDown () // Скользить вниз
     .delay (200) // Ничего не делать в течение 200 мс
     .fadeIn ();  // Fade in

Если вы хотите отложить очередь, отличную от очереди по умолчанию «fx», то вам нужно передать имя очереди в качестве второго аргумента в « .delay() ».

Подробнее о .delay(…)

8. Проверьте, есть ли у элемента что-то

jQuery 1.4 позволяет легко проверить, является ли элемент (или коллекция) » .has() » чем-то. Это программный эквивалент фильтра выбора jQuery » :has() «. Этот метод выберет все элементы в текущей коллекции, которые содержат хотя бы один элемент, соответствующий переданному селектору. 

  JQuery ( 'DIV') имеет ( 'уль').

Это выберет все элементы DIV, которые содержат элементы UL. В этой ситуации вы, вероятно, просто использовали бы фильтр выбора (» :has() «), но этот метод все еще полезен, когда вам нужно фильтровать коллекцию программным способом.

jQuery 1.4 также раскрывает функцию « contains » в пространстве имен jQuery. Это функция низкого уровня, которая принимает два узла DOM. Он вернет логическое значение, указывающее, содержится ли второй элемент в первом элементе. Например 

  jQuery.contains (document.documentElement, document.body);
 // Возвращает true - <body> находится внутри <html>

Узнайте больше о: .has(…) , jQuery.contains(…)

9. Разверните элементы!

У нас уже был метод » .wrap() «. В jQuery 1.4 добавлен метод .unwrap() который делает все наоборот. Если мы примем следующую структуру DOM:

1
2
3
<div>
    <p>Foo</p>
</div>

Мы можем развернуть элемент абзаца так: 

  JQuery ( 'р') Развертка ().

В результате структура DOM будет:

1
<p>Foo</p>

По сути, этот метод просто удаляет родителя любого элемента.

Подробнее о .unwrap(…)

10. Удалить элементы без удаления данных

Новый .detach() позволяет удалять элементы из DOM, так же, как и метод .remove() . Основное отличие этого нового метода заключается в том, что он не уничтожает данные, хранящиеся в jQuery для этого элемента. Это включает в себя данные, добавленные через » .data() » и любые обработчики событий, добавленные через систему событий jQuery.

Это может быть полезно, когда вам нужно удалить элемент из DOM, но вы знаете, что вам нужно будет добавить его обратно на более позднем этапе. Его обработчики событий и любые другие данные сохранятся. 

  var foo = jQuery ('# foo');

 // Привязать важный обработчик события
 foo.click (функция () {
     предупреждение ( 'Foo!');
 });

 foo.detach ();  // Удалить его из DOM

 //… делать вещи

 foo.appendTo ( 'тело');  // Добавить его обратно в DOM

 foo.click ();  // оповещения "Foo!"

Узнайте больше о .detach(…)

11. Улучшения индекса (…)

В jQuery 1.4 есть два новых способа использования метода .index() . Ранее вы могли передавать только элемент в качестве аргумента и ожидали, что будет возвращено число, указывающее индекс этого элемента в текущей коллекции.

Передача без аргументов теперь возвращает индекс элемента среди его братьев и сестер. Итак, предполагая следующую структуру DOM:

1
2
3
4
5
6
7
8
9
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
 
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

При щелчке по элементу списка вы хотите узнать индекс элемента, по которому щелкнули, среди всех остальных элементов списка. Это так просто, как: 

  JQuery ( 'ли'). нажмите (функция () {
     alert (jQuery (this) .index ());
 });

jQuery 1.4 также позволяет вам указывать селектор в качестве первого аргумента для « .index() », что даст вам индекс текущего элемента среди коллекции, созданной из этого селектора.

Вы должны заметить, что этот метод возвращает целое число и возвращает -1, если переданный селектор / элемент не может быть найден в документе.

Подробнее о .index(…)

12. Методы манипулирования DOM принимают обратные вызовы

Большинство методов манипулирования DOM теперь поддерживают передачу функции в качестве единственного аргумента (или второго, в случае » .css() » & » .attr() «). Эта функция будет запускаться на каждом элементе в коллекции, чтобы определить, что следует использовать в качестве реального значения для этого метода.

Следующие методы имеют эту возможность:

В функции обратного вызова вы будете иметь доступ к текущему элементу в коллекции через « this », а его индекс — через первый аргумент. 

  JQuery ( 'Li'). HTML (функция (я) {
     return 'Индекс этого элемента списка:' + i;
 });

Кроме того, с некоторыми из вышеперечисленных методов вы также получите второй аргумент. Если вы вызываете метод установки (например, « .html() » или « .attr('href) »), у вас будет доступ к текущему значению. Например 

  jQuery ('a'). attr ('href', function (i, currentHref) {
     return currentHref + '? foo = bar';
 });

Как видите, с помощью методов » .css() » и » .attr() » вы передадите функцию в качестве второго аргумента, поскольку первый будет использоваться для именования свойства, которое вы хотите изменить: 

  jQuery ('li'). css ('color', function (i, currentCssColor) {
     вернуть я% 2?  'красно синий';
 });

13. Определите тип объекта

jQuery 1.4 добавляет две новые вспомогательные функции (хранящиеся непосредственно в пространстве имен jQuery), которые помогают вам определить, с каким типом объекта вы имеете дело.

Во-первых, есть « isEmptyObject », эта функция возвращает логическое значение, указывающее, является ли переданный объект пустым (без свойств — прямого и унаследованного). Во-вторых, есть « isPlainObject », который возвращает логическое значение, указывающее, является ли переданный объект простым объектом JavaScript, то есть созданным с помощью « {} » или « new Object() ». 

  jQuery.isEmptyObject ({});  // правда
 jQuery.isEmptyObject ({Foo: 1});  // ложный

 jQuery.isPlainObject ({});  // правда
 jQuery.isPlainObject (окно);  // ложный 
 jQuery.isPlainObject (JQuery ());  // ложный

Узнайте больше о: isPlainObject(…) , isEmptyObject(…)

14. Ближайшие (…) улучшения

.closest() » .closest() » в jQuery теперь принимает массив селекторов. Это полезно, когда вы хотите пройти по предкам элемента, ища (более одного) ближайших элементов с определенными характеристиками.

Кроме того, теперь он принимает контекст в качестве второго аргумента, что означает, что вы можете контролировать, насколько далеко или насколько близко вы хотите, чтобы DOM проходил. Оба из этих улучшений учитывают редкие случаи использования, но они используются внутри с большим эффектом!

Узнайте больше о .closest(…)

15. Новые события! focusIn и focusOut

Как уже упоминалось, для делегирования событий «focus» и «blur» необходимо использовать эти новые события, называемые «focusin» и «focusout». Эти события позволяют вам действовать, когда элемент или его потомок получает фокус. 

  JQuery ( 'форма')
     .focusin (функция () {
         JQuery (это) .addClass ( 'сосредоточены');
     });
     .focusout (функция () {
         JQuery (это) .removeClass ( 'сосредоточены');
     });

Следует также отметить, что оба эти события не распространяются («пузырь»); они захвачены. Это означает, что самый внешний (предковый) элемент будет запущен перед причинным «целевым» элементом.

Узнайте больше о focusIn и focusOut .

Наслаждайтесь jQuery 1.4, самой ожидаемой, самой многофункциональной и самой эффективной версией jQuery!

Ну вот и все! Я пытался осветить изменения, которые, как мне кажется, повлияют на вас!

Если вы еще этого не сделали, вам стоит посетить « 14 дней jQuery », потрясающее онлайн-событие, посвященное выпуску jQuery 1.4, и четвертый день рождения jQuery!

И не забудьте проверить новую документацию API !

Написать Плюс Учебник

Знаете ли вы, что вы можете заработать до 600 долларов за написание учебника PLUS и / или скринкаст для нас? Мы ищем подробные и хорошо написанные учебники по HTML, CSS, PHP и JavaScript. Если у вас есть такая возможность, пожалуйста, свяжитесь с Джеффри по адресу [email protected].

Обратите внимание, что фактическая компенсация будет зависеть от качества окончательного урока и скринкаста.

Написать ПЛЮС учебник
  • Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке.
35
Share: