От Автора: Итак, вы уже немножко порезвились с jQuery, начинаете приобретать мастерство, и вам это действительно нравится! Вы готовы поднять свои знания jQuery до второго уровня? Сегодня я покажу двадцать функций и свойств, которых вы, вероятно, до этого не видели!
1. after() / before()
Иногда вам нужно вставить что-нибудь в DOM, но у вас нет хороших зацепок, при помощи которых можно это сделать; append() или prepend() не позволяют идти напрямик, а вы не хотите добавлять лишний элемент или id. Две эти функции могли бы стать тем, что нужно. Они позволяют вам вставлять элементы в DOM прямо перед, или после выбранного элемента таким образом, что новый элемент помещается на тот же уровень.
|
1 2 |
$('#child').after($('<p />')).text('This becomes a sibling of #child')); $('#child').before($('<p />')).text('Same here, but this is go about #child')); |
Также это можно сделать, если вы работаете непосредственно с тем элементом, который хотите вставить; просто используйте функции insertAfter() или insertBefore.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее|
1 |
$('<p>I\'ll be a sibling of #child</p>').insertAfter($('#child')); |
2. change()
Метод change() – это обработчик событий, прямо как click() или hover(). Событие change – для текстовых областей, полей ввода и окон выбора, и оно сработает, когда изменится значение целевого элемента; заметьте, это не то же самое, что обработчики событий focusOut() или blur(), которые запускаются, когда элемент теряет фокус, независимо от того, изменено его значение или нет.
Событие change() безупречно для валидации данных на клиентской стороне; это гораздо лучше, чем blur(), потому что вы не будете заново выполнять проверку полей, если пользователь не изменит значение.
|
1 2 3 4 5 |
$('input[type=text]').change(function () { switch (this.id) { /* some validation code here */ } }); |
3. Context
Context – это и параметр, и свойство в jQuery. При обработке элементов вы можете передать его в функцию jQuery как второй параметр. Этот параметр — контекст, обычно является элементом DOM, и он ограничивает элементы, сопоставляющиеся вашему селектору, дочерними элементами контекста. Возможно, вы немного сбиты с толку, поэтому посмотрите вот этот пример:
|
1 2 3 4 |
<p class="hello">Hello World</p> <div id="wrap"> <p class="hello">Hello World</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
var hi1 = $('.hello'), hi2 = $('.hello', $('#wrap').get(0)); console.group('hi1'); console.log("Number of elements in collection:", hi1.length); console.log("Context of the collection:", hi1.context); console.groupEnd(); console.group('hi2'); console.log("Number of elements in collection:", hi2.length); console.log("Context of the collection:", hi2.context); console.groupEnd(); |
Итак, где это может быть полезным? Одна из таких ситуаций может возникать внутри функции обработчика событий. Если вам необходимо получить дочерний элемент внутри источника события, вы можете передавать его свойство this в качестве контекста:
|
1 2 3 |
$('ul#options li').click(function () { $('a', this) . . . }); |
4. data() / removeData()
Вы когда-нибудь имели необходимость хранить дополнительную информацию об элементе? С помощью метода data() можно легко это сделать. Чтобы установить значение, вы можете передать два параметра (ключ и значение) или всего один (объект).
|
1 2 |
$('#wrap').data('myKey', 'myValue'); $('#container').data({ myOtherKey : 'myOtherValue', year : 2010 }); |
Чтобы получить обратно свои данные, просто вызовите метод с ключом значения, которое вам нужно.
|
1 2 |
$('#container').data('myOtherKey'); //returns 'myOtherValue' $('#container').data('year'); //returns 2010 |
Чтобы получить все данные, которые соотносятся с элементом, вызовите метод data() безо всяких параметров; вы получите объект, содержащий все ключи и значения, которые вы назначали этому элементу.
Если хотите удалить пару ключ/значение после того, как добавили ее к элементу, просто вызовите removeData(), передавая надлежащий ключ.
|
1 |
$('#container').removeData('myOtherKey'); |
5. queue() / dequeue()
Функции queue() и dequeue() касаются анимации. Очередь (queue) – это список анимации, выполняемой для элемента; по умолчанию очередь элемента называется ‘fx.’ Давайте рассмотрим ситуацию:
HTML
|
1 2 3 4 5 6 |
<ul> <li id="start">Start Animating</li> <li id="reset">Stop Animating</li> <li id="add">Add to Queue</li> </ul> <div style="width:150px; height:150px; background:#ececec;"></div> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$('#start').click(animateBox); $('#reset').click(function() { $('div').queue('fx', []); }); $('#add').click(function() { $('div').queue( function(){ $(this).animate({ height : '-=25'}, 2000); $(this).dequeue(); }); }); function animateBox() { $('div').slideUp(2000) .slideDown(2000) .hide(2000) .show(2000, animateBox); } |
Итак, вот что происходит: в функции animateBox мы настраиваем очередь анимации; обратите внимание, что последняя запись снова обращается к функции, так что она будет постоянно повторять очередь. Когда мы щелкаем li#start, вызывается эта функция и очередь начинает работать. Когда мы щелкаем li#reset, текущая анимация заканчивается, и мы должны остановить анимацию div. Чтобы сделать это на jQuery, очередь с названием ‘fx’ (помните, очередь по умолчанию) устанавливается в пустой массив; по существу, мы очищаем очередь. А что происходит, когда мы щелкаем li#add? Сначала, мы вызываем функцию queue() на div’е; свойство this, используемое в функции, передается вместе с ней в конец очереди; так как мы не указывали очередь как первый параметр, используется стандартное название ‘fx’. Внутри этой функции мы анимируем div, а затем вызываем dequeue() на div’е, с тем, чтобы удалить этот шаг из очереди и продолжить обработку; таким образом, очередь будет повторяться, но эта функция уже не будет ее частью.
6. delay()
Находясь в цепочке анимации, вы можете использовать метод delay(), чтобы приостанавливать анимацию на некоторый срок; время передается как параметр в миллисекундах.
|
1 |
$('div').hide().delay(2000).show(); // div will stay hidden for 2 seconds before showing. |
7. bind(), unbind(), live(), and die()
Знаете ли вы, что когда добавляете обработчик щелчка к элементу вроде этого. . .
|
1 |
$('#el').click(function () { /*******/ }); |
. . . в действительности вы просто используете оболочку для метода bind()? Чтобы использовать сам метод bind(), вы можете передать тип события в качестве первого параметра, а затем функцию в качестве второго.
Если вы используете много событий, можете распределить их по категориям с помощью пространства имен; просто поставьте точку после названия события и добавьте свое пространство имен.
|
1 2 |
$('#el').bind('click', function () { /*******/ }); $('#el').bind('click.toolbarEvents', function () { /*******/ }); // namespaced |
Также вы можете назначить одинаковую функцию нескольким событиям одновременно, разделяя их названия пробелами. Так, если бы вы захотели сделать эффект hover, то могли бы начать таким образом:
|
1 |
$('#el').bind('mouseover mouseout', function () { /*******/ }); |
Также возможно передавать данные функции, путем добавления третьего параметра (во вторую позицию).
|
1 2 3 4 5 |
$('#el').bind('click', { status : 'user-ready' }, function () { switch(event.data.status) { /********/ } }); |
Рано или поздно окажется, что вы вставляете элемент в DOM посредством обработчика события; однако вскоре вы обнаружите, что обработчики событий, которые вы уже сделали при помощи функции bind или её оболочек, не работают для вновь вставленных элементов. В подобных случаях, вам придется использовать метод live() (или delegate); это позволит добавлять обработчики события в соответствующие вставленные элементы.
|
1 2 3 4 5 |
$('.toggle').live(function () { /* code */ $('<span class="toggle">Enable Beta Features</span>').appendTo($('#optionsPanel')); /* more code */ }); |
Чтобы удалить обработчики событий, созданные при помощи bind(), используйте метод unbind(). Если вы не передадите ему никаких параметров, он удалит все обработчики; вы можете передать тип события, чтобы удалить только обработчики событий этого типа; чтобы удалить события из конкретного пространства имен, добавьте пространство имен или используйте его отдельно. Если хотите просто удалить определенную функцию, передайте соответственно ее имя как второй параметр.
|
1 2 3 4 5 |
$('button').unbind(); // removes all $('button').unbind('click'); // removes all clicks $('button').unbind('.toolbarEvents'); // removes all events from the toolbarEvents namespace $('button').unbind('click.toolbarEvents'); // removes all clicks from the toolbarEvents namespace $('button').unbind('click', myFunction); // removes that one handler |
Заметьте, что вы можете назначать/удалять обработчики событий в функциях переданных анонимно; эти методы работают только с именами функций.
Если вы пытаетесь удалить обработчик события изнутри функции, вызванной событием, просто передайте unbind() ссылку на объект-событие.
|
1 2 3 |
$('p').bind('click', function (event) { $('p').unbind(event); } ); |
Вы не можете использовать unbind() для обработчиков событий созданных функцией live(); для этого используется функция die(). В отсутствие параметров она удаляет все live-обработчики событий из всей совокупности элементов; также ей можно передать тип события, или тип события и имя функции обработчика.
|
1 2 3 |
$('span').die(); // removes all $('span').die('mouseover'); // removes all mouseovers $('span').die('mouseover', fn); // remove that one handler |
Теперь вы владеете мощью и гибкостью механизма событий jQuery!
Вам также следует изучить метод delegate(), так как он может иметь значительные преимущества в производительности перед методом live().
8. eq()
Если вы ищете определенный элемент внутри набора элементов, вы можете передать его индекс в метод eq() и получить единственный элемент jQuery. Передача отрицательного индекса означает отсчет в обратном направлении с конца набора.
|
1 2 3 |
var ps = $('p'); console.log(ps.length); // logs 3; ps.eq(1).addClass('emphasis'); // just adds the class to the second item (index in zero-based) |
Также вы можете использовать :eq() в своих селекторах; так что предыдущий пример мог бы выглядеть вот так:
|
1 |
$('p:eq(1)').addClass('emphasis'); |
9. get()
Получая совокупность элементов, jQuery возвращает их как объект jQuery, так что вы имеете доступ ко всем методам. Если же вам нужны просто «сырые» (raw) элементы DOM, можно использовать метод get().
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееВы можете задать индекс, чтобы получить единственный элемент.
|
1 2 |
alert( $('p') ); // [object Object] - the jquery object alert( $('p').get(1) ); // [object HTMLParagraphElement] |
10. grep()
Если вы не знакомы с программными оболочками (shells) Unix/Linux, то могли и не слышать термин grep. В терминале — это утилита текстового поиска; но здесь, в jQuery, мы используем ее, чтобы фильтровать массив элементов. Это не метод коллекций jQuery; вы передаете массив в качестве первого параметра и функцию фильтрации как второй параметр. Функция фильтрации принимает два параметра: элемент из массива и его индекс. Она должна выполнить свою работу и вернуть значения true или false. По умолчанию, все элементы, для которых было возвращено значение true, будут попадать в результаты фильтрации. Вы так же можете добавить третий параметр, булево выражение, чтобы инвертировать результаты и выбрать элементы, для которых функция фильтрации вернула false.
|
1 2 3 4 5 6 7 8 9 |
var nums = '1,2,3,4,5,6,7,8,9,10'.split(','); nums = $.grep(nums, function(num, index) { // num = the current value for the item in the array // index = the index of the item in the array return num > 5; // returns a boolean }); console.log(nums) // 6,7,8,9,10 |
11. Псевдоселекторы
Sizzle, движок CSS-селекторов внутри jQuery, предлагает несколько псевдоселекторов для облегчения работы по отбору нужных вам элементов. Смотрите, это интересно:
|
1 2 3 4 5 6 7 8 9 10 |
$(':animated'); // returns all elements currently animating $(':contains(me)'); // returns all elements with the text 'me' $(':empty'); // returns all elements with no child nodes or text $(':parent'); // returns all elements with child nodes or text $('li:even'); // returns all even-index elements (in this case, <li>s) $('li:odd'); // can you guess? $(':header'); // returns all h1 - h6s. $('li:gt(4)'); // returns all elements with an (zero-based) index greater than the given number $('li:lt(4)'); // returns all element with an index less than the given number $(':only-child'); // returns all . . . well, it should be obvious |
Конечно, есть и другие, но эти — уникальные.
12. isArray() / isEmptyObject() / isFunction() / isPlainObject()
Иногда вам нужно удостовериться, что параметр, переданный функции, был правильного типа; эти функции позволяют легко это сделать. Первые три сами в достаточной степени себя поясняют:
|
1 2 3 |
$.isArray([1, 2, 3]); // returns true $.isEmptyObject({}); // returns true $.isFunction(function () { /****/ }); // returns true |
Следующий пример не настолько ясен; isPlainObject() возвратит true, если переданный параметр был создан как объектная константа, или с помощью new Object().
|
1 2 3 4 5 6 7 |
function Person(name) { this.name = name return this; } $.isPlainObject({})); // returns true $.isPlainObject(new Object()); // returns true $.isPlainObject(new Person()); // returns false |
13. makeArray()
Когда вы создаете коллекцию элементов DOM при помощи jQuery, вы получаете объект jQuery; в некоторых ситуациях вы бы предпочли, чтобы это был массив или обычные элементы DOM; функция makeArray() именно это и может сделать.
|
1 2 3 4 |
var ps = $('p'); $.isArray(ps); //returns false; ps = $.makeArray(ps); $.isArray(ps); // returns true; |
14. map()
Метод map() отдаленно похож на grep(). Как вы могли бы предположить, он принимает один параметр, функцию. Эта функция может иметь два параметра: индекс текущего элемента и сам элемент. Вот что происходит: функция, которую вы передаете, будут выполняться один раз для каждого элемента в коллекции; и каждое значение, возвращаемое этой функцией, будет заменять элемент коллекции, который ей передается в качестве аргумента.
|
1 2 3 4 |
$('ul#nav li a').map(function() { return $(this).attr('title'); }); // now the collection is the link titles // this could be the beginning of a tooltip plugin. |
15. parseJSON()
Если вы пользуетесь $.post или $.get — и в прочих ситуациях при работе со строками JSON – вы найдете полезной функцию parseJSON. Хотя конечно лучше, если ваша функция использует встроенный в браузеры парсер JSON, когда он есть (что, очевидно, будет побыстрее).
|
1 2 3 4 5 |
$.post('somePage.php', function (data) { /*****/ data = $.parseJSON(data); /*****/ }); |
16. proxy()
Если у вас есть функция — свойство объекта, и она использует другие свойства объекта, вы не можете вызвать такую функцию изнутри других функций и получать правильные результаты. Я знаю, что это сбивает с толку, поэтому давайте рассмотрим остроумный пример:
|
1 2 3 4 5 6 7 8 |
var person = { name : "Andrew", meet : function () { alert('Hi! My name is ' + this.name); } }; person.meet(); $('#test').click(person.meet); |
Сама по себе person.meet() будет выводить правильные данные; но когда она вызывается обработчиком события, она будет выдавать “Hi! My name is undefined.”. Это произойдет по тому, что функция не вызывается в правильном контексте. Чтобы это исправить, можно использовать функцию proxy():
|
1 2 |
$('#test').click($.proxy(person.meet, person)); // we could also do $.proxy(person, "meet") |
Первый параметр функции proxy – это метод, который необходимо запустить; второй – это контекст, в котором мы должны его запустить. В другом случае, мы можем первым параметром передать контекст, а имя метода как строку – вторым. Теперь вы обнаружите, что наша функция выдает сигналы (alerts) правильно.
17. replaceAll() / replaceWith()
Если вам необходимо заменить одни элементы DOM на другие, то вот как это сделать. Мы можем вызвать replaceAll() на элементах коллекций или вновь созданных элементах, указывая селектор тех элементов, которые мы хотели бы заменить. В этом примере все элементы класса error будут заменены созданным нами span.
|
1 |
$('<span class="fixed">The error has been corrected</span>').replaceAll('.error'); |
Метод replaceWith() просто меняет селекторы местами; т.е. сначала мы ищем то, что хотим заменить:
|
1 |
$('.error').replaceWith('<span class="fixed">The error has been corrected</span>'); |
Также вы можете передавать этим двум методам функции в качестве аргументов, которые будут возвращать элементы или строки HTML.
18. serialize() / serializeArray()
Метод serialize() – то, что нужно для кодирования значений в формах в строку.
HTML
|
1 2 3 4 |
<form> <input type="text" name="name" value="John Doe" /> <input type="text" name="url" value="//www.example.com" /> </form> |
JavaScript
|
1 |
console.log($('form').serialize()); // logs : name=John+Doe&url=http%3A%2F%2Fwww.example.com |
Так же можно использовать serializeArray(), чтобы преобразовывать значения в формах в массив объектов вместо строки.
|
1 2 |
console.log($('form').serializeArray()); // logs : [{ name : 'name', value : 'John Doe'} , { name : 'url', value : '//www.example.com' } ] |
19. siblings()
Возможно, вы можете догадаться, что делает метод siblings(); он возвращает коллекцию элементов того же уровня, что и каждый элемент исходной коллекции:
|
1 2 3 |
<div> . . . </div> <p> . . . </p> <span> . . . </span> |
|
1 |
$('p').siblings(); // returns <div>, <span> |
20. wrap() / wrapAll() / wrapInner()
Три этих функции облегчают обертывание одних элементов в другие. Прежде всего, я упомяну, что все три метода принимают один и тот же параметр: либо элемент (который может быть задан HTML-строкой, CSS-селектором, объектом jQuery или элементом DOM), либо функция, которая возвращает элемент.
Метод wrap() обертывает каждый элемент коллекции в указанный элемент:
|
1 |
$('p').wrap('<div class="warning" />'); // all paragraphs are now wrapped in a div.warning |
WrapAll() обернет в один элемент все элементы коллекции; это означает, что элементы коллекции будут перемещены в DOM на новое место; они будут собраны вместе с первым элементом в коллекции и далее будут обернуты:
HTML, до:
|
1 2 3 4 5 6 7 8 9 10 |
<p> <span> . . . </span> <span class="moveMe"> . . . </span> <span class="moveMe"> . . . </span> </p> <p> <span> . . . </span> <span class="moveMe"> . . . </span> <span class="moveMe"> . . . </span> </p> |
JavaScript
|
1 |
$('.moveMe').wrapAll(document.createElement('div')); |
HTML, после:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<p> <span> . . . </span> <div> <span class="moveMe"> . . . </span> <span class="moveMe"> . . . </span> <span class="moveMe"> . . . </span> <span class="moveMe"> . . . </span> </div> </p> <p> <span> . . . </span> </p> |
В заключении, функция wrapInner обертывает все содержимое каждого элемента коллекции указанным в параметре элементом:
HTML, до:
|
1 2 3 4 |
<p> <span> . . . </span> <span> . . . </span> </p> |
JavaScript:
|
1 |
$('p').wrapInner($('<div />')); |
HTML, после:
|
1 2 3 4 5 6 |
<p> <div> <span> . . . </span> <span> . . . </span> </div> </p> |
Заключение
Ну что ж, теперь у вас есть более двадцати новых методов jQuery, с которыми можно проиграться в своем следующем проекте; получайте удовольствие!
Автор: Andrew Burgess
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Источник: //net.tutsplus.com
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
JavaScript. Полное руководство
Изучите самый популярный язык разработки и станьте высокооплачиваемым профи
Подробнее
Комментарии (2)