20 полезных методов jQuery
1. after() / before()
Иногда вы хотите вставить новый элемент в DOM, но не знаете подходящих функций append()и prepend()не подходят, ивы не хотите добавлять дополнительные селекторы классов или id. Возможно эти 2 функции — то что вам нужно! Они позволяют добавлять элементы в DOMперед или после другого элемента таким образом, что они становятся соседями.
$('#child').after($('<p />')).text('This becomes a sibling of #child')); $('#child').before($('<p />')).text('Same here, but this is go about #child'));
То же самое вы можете делать, если вы работаете напрямую с элементом, который вы хотите вставить. Просто используйте для этого функции indertAfter() и insertBefore()
$('<p>I\'ll be a sibling of #child</p>').insertAfter($('#child'));
2. change()
Метод change() это обработчик событий, например как click() или hover(). Событие change()срабатывает для текстовых полей(textarea), полей ввода(input) и выпадающих списков(select box). Это событие срабатывает, когда значение нашей цели изменено. Но, это событие отличается от событий focusOut() или blur()тем, что оно запускается, когда значение элемента изменено, а не тогда, когда элемент теряет фокус.
Событие change()идеально подходит для валидации полей в браузере. Оно гораздо лучше blur(), потому что вы не будете перепроверять поля, даже если пользователь ничего не изменил.
$('input[type=text]').change(function () { switch (this.id) { /* код для проверки */ } });
3. Контекст
Контекст может быть как параметром, так и свойством jQuery. Когда вы выбираете элемент, вы можете передать второй параметр в функцию jQuery. Этот параметр, контекст, обычно DOM-элемент, который ограничивает возвращаемые функцией элементы до тех, которые соответствуют селектору, и являются дочерними контексту. Объяснение может быть слегка непонятным, потому просто посмотрите на код.
<p>Hello World</p> <div id="wrap"> <p>Hello World</p> </div>
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();
Вы спросите, где это вообще используется? Это может использоваться в функциях-обработчиках событий. Вы можете запускать обработчик события,в зависимости от контекста.
$('ul#options li').click(function () { $('a', this) . . . });
4 data() / removeData()
Вы когда-нибудь хотели хранить немного информации об элементе? Вы можете легко это делать используя метод data(). Чтобы установить значение, вы можете передать 2 параметра, пару ключ-значение, или один объект.
$('#wrap').data('myKey', 'myValue'); $('#container').data({ myOtherKey : 'myOtherValue', year : 2010 });
Чтобы получить данные, просто вызовите этот метод с ключем, данные по которому вам нужны, в качестве параметра
$('#container').data('myOtherKey'); //returns 'myOtherValue' $('#container').data('year'); //returns 2010
Чтобы получить все данные относящиеся к элементу ,вызовите этот метод без параметров, вам вернется объект с ключами и значениями, которые вы присваивали.
Если вы хотите удалить пару ключ/значение, то вызовите метод removeData() и передайте ему нужный ключ
$('#container').removeData('myOtherKey');
5. queue() / dequeue()
Функции queue()и dequeue()связаны с анимацией. Очередь — это список анимаций, которые будут применены к элементу. По умолчанию, очередь элемента будем называть 'fx'.
<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>
$('#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 мы устанавливаем очередь анимаций. Заметьте последний вызов функции animateBox, он будет вызывать повотр. Когда мы кликаем на #reset текущая анимация заканчивается, Все что мы делаем здесь с jQuery — присваиваем очереди 'fx' пустой массив, таким образом мы опустошили очередь. А что происходит при когда мы кликаем #add? Во первых, мы вызываем функцию queue() для слоя, тем самым мы добавляем функцию, переданную в качестве параметра, в конец очереди. Так как мы не передали первый параметр, то используется очередь 'fx'. В этой функции мы анимимруем слой и вызываем dequeue() для него, что удаляет текущую функцию из очереди и продолжает очередь. Очередь снова повторяется, но эта функция больще не вызывается.
6. delay()
Когда вы используете цепочку анимаций, вы можете использовать функцию delay()для добавления паузы между анимациями. Параметр этого метода — количество миллисекунд.
$('div').hide().delay(2000).show(); // div будет скрыт в течение 2 секунд.
7 bind(), unbind(), live(), and die()
Знаете ли вы, что когда вы добавляете обработчик клика на элемент, например так...
$('#el').click(function () { /*******/ });
то на самао деле вы используете обертку для метода bind()?Чтобы непосредственно использовать метод bind()? вы должны передавать ему тип события в качестве первого параметра, и функцию-обработчик вторым параметром.
Если вы используете много событий, то можете распеделять их по категориям. Для этого просто добавьте точку, после имени события, и допишите необходимое пространство имен.
$('#el').bind('click', function () { /*******/ }); $('#el').bind('click.toolbarEvents', function () { /*******/ }); //
Вы также можете использовать одну функцию для обработки нескольких событий одновременно. Для этого надо написать имена событий, разделяя их пробелами. Если вы хотите сделать эффект, который бы срабатывал при наведении, то можете использовать подобный код:
$('#el').bind('mouseover mouseout', function () { /*******/ });
Вы также можете передавать данные в функции, просто добавляя третий параметр, но его нужно записывать вторым
$('#el').bind('click', { status : 'user-ready' }, function () { switch(event.data.status) { /********/ } });
Рано или поздно вы увидите, что обработчики событий которые вы установили с помощью функции bind()(или ее оберток) не срабатывают для вставленных элементов. В подобных случаях нужно использовать метод live(); это метод добавляет обработчики событий для существующих и вставленных в будущем элементов.
$('.toggle').live(function () { /* code */ $('<span>Enable Beta Features</span>').appendTo($('#optionsPanel')); /* more code */ });
Чтобы удалить обработчики событий назначенные функцией bind(), используйте метод unbind(). Если вы не передадите параметр этому методу, то он удалит все обработчики событий. Мы можете передать тип событий, чтобы удалить все обработчики событий этого типа. Чтобы удалить обработчики из какого-либо пространства имен, просто добавьте его после события, или напишите только имя пространства имен. Если вы хотите удалить только одну функцию, передайте ее имя в качестве второго параметра.
$('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
ВЫ можете использовать методы bind()/unbiind() с функциями переданными анонимно.
$('p').bind('click', function (event) { $('p').unbind(event); } );
Вы не можете использоыввать unbind() для обработчиков назначенных методом live(), используте вместоunbind()метод die().
$('span').die(); // removes all $('span').die('mouseover'); // removes all mouseovers $('span').die('mouseover', fn); // remove that one handler
8. eq
Если вам нужен определенный элемент из множества, то вы моете передать индекс этого элемента в метод eq()и получить один объект.
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() в ваших селекторах. Предыдущий пример может быть записан так:
$('p:eq(1)').addClass('emphasis');
9. get()
Когда вы получаете множество элементов, jQuery возвращает их как объекты jQuery, и вас есть доступ ко всем его свойствам. Если вы хотите использовать просто DOM-элементы, вы должны использовать методget().
Вы можете указывать индекс, чтобы получить один элемент.
alert( $('p') ); // [object Object] - the jquery object alert( $('p').get(1) ); // [object HTMLParagraphElement]
10. grep()
Если вы не знакомы с Unix/Linux, вы, возможно не слышали этого термина. В терминалах grep — это утилита для поиска по тексту, но в jQuery мы можем использовать этот метод для поиска в массивах элемнтов. Grep — это не метод коллекции, возвращаемой jQuery. Вы передаете первый параметр — массив, и второй параметр — функция производящая фильтрацию. В свою очередь, эта функция принимает 2 параметра — элемент из массива и его индекс. Эта функция фильтр должна выполнится и возвратить true или false. По умолчанию, все элемента массива, для которых функция возвращает true останутся в массиве. Вы можете также добавить в функцию-фильтр третий параметр, чтобы инвертировать результат — то есть оставлять элементы, для которых функция возвращает false.
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, предоставляет много псевдо-селекторв, облегчая выбор необходимых элементов. Посмотрите интересный пример:
$(':animated'); // возвращает все элементы, анимираованные сейчас $(':contains(me)'); // возвращает все элементы с текстом me $(':empty'); // возвращает все элементы без дочерних узлов и текста $(':parent'); // возвращает все элементы с дочерними узлами ли текстом $('li:even'); // возвращает все четные элементы (в данном случае, <li>) $('li:odd'); // есть предположения? $(':header'); // возвращает все h1 - h6s. $('li:gt(4)'); // возвращает все элементы с индексом, большим чем данное число $('li:lt(4)'); // возвращает все элементы с индексом, меньшим чем данное число $(':only-child');
На самом деле псевдо-селекторов гораздо больit чем здесь представлено.
12. isArray() / isEmptyObject() / isFunction() / isPlainObject()
Иногда вам необходимо быть уверенным в том, что параметр переданный в функцию нужного типа. С данными функциями проверить это очень легко. Вот три функции, названия которых говорят сами за себя:
$.isArray([1, 2, 3]); // true $.isEmptyObject({}); // true $.isFunction(function () { /****/ }); // true Сдежующая функция <code>isPlainObject()</code> возвращает true если переданный параметр был создан припомощи конструкци сощдания объекта <code>{}</code> или при помощи <code>new Object()</code> 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() может делать это.
var ps = $('p'); $.isArray(ps); //false; ps = $.makeArray(ps); $.isArray(ps); //true;
14. map()
Метод map()приблизительно похож на метод grep(). Как вы можете заметите, он принимает один параметр — функцию. Эта функция принимает 2 параметра — индекс текущего элемента и сам элемент. Вот что происходит: функция, которую вы передаете, будет запущена раз для всех элементов коллекции.Значение возвращаемое этой функцией будет присвоено элементу, для которого она вызывается.
$('ul#nav li a').map(function() { return $(this).attr('title'); });
15. parseJSON()
Если вы используете методы $.post или $.get или еще в каких то ситуациях работаете со JSON-строками, функция parseJSON()покажется вам полезной. Эта функция если возможно использует встроененый в брацзер парсер, что положительно влияет на скорость.
$.post('somePage.php', function (data) { /*****/ data = $.parseJSON(data); /*****/ });
16. proxy()
Еси у вас есть функция-свойство объекта, и эта функция использует другие свойства объекта, то вы не можете вызывать эту функцию из других и и быть уверены в правильности результатов. Чтобы понять о чем речь — посмотрите пример.
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()
$('#test').click($.proxy(person.meet, person)); // также можно сделать $.proxy(person, "meet")
Первый параметр это функции — метод, который необходимо запустить, второй — контекст, в котором эта функция должна быть запущена.
17. replaceAll(), replaceWith()
Если вы хотите заменить одни DOM-элементы другими, то вот вам способ, как это сделать.
Можно использовать replaceAll()для всех выбранных и созданных элементов, передавая селектор для элементов, которые мы хотим заменить. В этом примере все элементы с классом <span>"error"</span> будут заменены созданным элементом <code>span</span>.
$('<span>The error has been corrected</span>').replaceAll('.error');
В методе replaceWith()просто перевернуты селекторы: сначала передается селектор элемента который необходимо заменить.
$('.error').replaceWith('<span>The error has been corrected</span>');
Также можно передавать в эти методы функции, которые возвращают коллекцию элементов или HTML-строку.
18. serialize() / serializeArray()
Метод serialize() нужен для преобразования значений элементов формы в строку.
<form> <input type="text" name="name" value="John Doe" /> <input type="text" name="url" value="http://www.example.com" /> </form>
console.log($('form').serialize()); // logs : name=John+Doe&url=http://www.example.com
Можно использовать serializeArray()чтобы преобразовать значения из формы в массив:
console.log($('form').serializeArray()); // logs : [{ name : 'name', value : 'John Doe'} , { name : 'url', value : 'http://www.example.com' } ]
19. siblings()
Наверно вы уже догадались что делает метод siblings(); он возвращает коллекцию родствееных элементов из:
<div> . . . </div> <p> . . . </p> <span> . . . </span> <pre lang="javascript" escaped="true">$('p').siblings(); // <div>, <span>
20. wrap() / wrapAll() / wrapInner()
Эти три функции позволяют легко обернуть одни элементы в другие. Во-первых, я отмечу, что все три принимают один и тот же параметр : элемент (который является строкой HTML, CSS селектором, объект jQuery или элементом DOM) или функцию, которая возвращает элемент.
Метод wrap() обертывает каждый элемент коллекции:
$('p').wrap('<div />'); // все параметры обернуты сейчас в div.warning
wrapAll() обернет все элементы вокруг первого элемента коллекции, а это означает, что элементы коллекции будут перенесены на новое место в DOM: они выстраиваются на месте первого найденного элемента в коллекции:
HTML, до
<p> <span> . . . </span> <span> . . . </span> <span> . . . </span> </p> <p> <span> . . . </span> <span> . . . </span> <span> . . . </span> </p>
$('.moveMe').wrapAll(document.createElement('div'));
HTML, после:
<p> <span> . . . </span> <div> <span> . . . </span> <span> . . . </span> <span> . . . </span> <span> . . . </span> </div> </p> <p> <span> . . . </span> </p>
И, наконец, wrapInner() оборачивает все элементы внутри данным элементом:
HTML, до:
<p> <span> . . . </span> <span> . . . </span> </p> <pre lang="javascript" escaped="true">$('p').wrapInner($('<div />'));
HTML, после:
<p> <div> <span> . . . </span> <span> . . . </span> </div> </p>