5 полезных методов jQuery API, о которых вы могли не знать

В статье я расскажу о пяти методах jQuery, которые я нашел для себя полезными и о которых, по моим наблюдениям, мало кто знает.

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

jQuery.grep() ^[1]

jQuery.grep(array, function(elementOfArray, indexInArray) [, invert]) — как можно догадаться с названия, метод фильтрует элементы массива полагаясь на результат функции (оригинальный массив не изменяется). У jQuery также есть похожий метод .filter() ^[2] который служит для фильтрации набора найденных элементов.

Пример

Нужно выбрать из массива только числа кратные 3:

var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
console.log($.grep(arr, function(el){
    return el % 3 === 0
}));
// [3, 6, 9, 12, 15] 

.map() ^[3]

.map( callback(index, domElement) ) — метод полезен тем, что дает возможность без написания циклов сделать преобразования над выбранными элементами или массивом (для массивов нужно использовать jQuery.map() ^[4]).
Если функция возвращает null или undefined, то элемент будет проигнорирован.

Пример

Выведем адреса всех ссылок на странице:

var links = $('a').map(function(el){ 
    return this.href;
}).get().join("n");
console.log(links);

jQuery.proxy() ^[5]

jQuery.proxy( function, context ) — может быть полезным, если нужно передать callback но установить для него свой контекст (значение переменной this).

Пример

var myObj = {
    message: 'hello',
    alertMessage: function(){
        // переменная this ссылается на объект myObj, 
        // а не на элемент, по которому кликнули
        alert(this.message);
        return false;
    }
};

$('a').click($.proxy(myObj.alertMessage, myObj));

.prop() ^[6]

.prop( propertyName, value ) — этот метод появился в версии 1.6 и я использую его примерно с того же времени. Но решил упомянуть здесь потому, что многие ошибочно используют метод .attr() ^[7] для доступа к свойствам элементов и модификации их значений.
Дело в том, что с версии 1.6 .attr() работает непосредственно с атрибутом элемента и в некоторых случаях результат не совсем ожидаемый.
Например, если мы хотим узнать состояние чекбокса, то .attr() может выдать его значение по умолчанию (которое видно в исходниках HTML страницы). В этом случае нам нужно использовать метод .prop() — он вернет текущее значение свойства элемента.

Пример

Инвертируем все чекбоксы на странице:

$('input').prop('checked', function(el, oldVal){
    return !oldVal;
});

.serializeArray() ^[8]

.serializeArray() — очень простой способ сеарилизации данных формы в виде массива или строки (в этом случае используйте .serialize() ^[9]). Метод возвращает массив, который потом например можно через ajax передать на сервер.

Пример

var arr = $('#myForm').serializeArray();
// в arr будет массив объектов {name: "field-name", value: "field-value"}

Автор: utf