В статье я расскажу о пяти методах jQuery, которые я нашел для себя полезными и о которых, по моим наблюдениям, мало кто знает.
Я с jQuery работаю уже около двух лет, но до недавнего времени не использовал эти методы, так как и без них можно обойтись. Но с ними может быть на много легче.
jQuery.grep()
jQuery.grep(array, function(elementOfArray, indexInArray) [, invert]) — как можно догадаться с названия, метод фильтрует элементы массива полагаясь на результат функции (оригинальный массив не изменяется). У jQuery также есть похожий метод .filter() который служит для фильтрации набора найденных элементов.
Пример
Нужно выбрать из массива только числа кратные 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()
.map( callback(index, domElement) ) — метод полезен тем, что дает возможность без написания циклов сделать преобразования над выбранными элементами или массивом (для массивов нужно использовать jQuery.map()).
Если функция возвращает null или undefined, то элемент будет проигнорирован.
Пример
Выведем адреса всех ссылок на странице:
var links = $('a').map(function(el){
return this.href;
}).get().join("n");
console.log(links);
jQuery.proxy()
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()
.prop( propertyName, value ) — этот метод появился в версии 1.6 и я использую его примерно с того же времени. Но решил упомянуть здесь потому, что многие ошибочно используют метод .attr() для доступа к свойствам элементов и модификации их значений.
Дело в том, что с версии 1.6 .attr() работает непосредственно с атрибутом элемента и в некоторых случаях результат не совсем ожидаемый.
Например, если мы хотим узнать состояние чекбокса, то .attr() может выдать его значение по умолчанию (которое видно в исходниках HTML страницы). В этом случае нам нужно использовать метод .prop() — он вернет текущее значение свойства элемента.
Пример
Инвертируем все чекбоксы на странице:
$('input').prop('checked', function(el, oldVal){
return !oldVal;
});
.serializeArray()
.serializeArray() — очень простой способ сеарилизации данных формы в виде массива или строки (в этом случае используйте .serialize()). Метод возвращает массив, который потом например можно через ajax передать на сервер.
Пример
var arr = $('#myForm').serializeArray();
// в arr будет массив объектов {name: "field-name", value: "field-value"}
Автор: utf
