Хочу начать серию статей в которых расскажу про секреты и особенности jQuery. Одни из них помогут вам упростить процесс программирования, другие покажут как повысить производительность или как воспользоваться многогранностью jQuery.
Определяем тип браузера
Сразу вспомнились мои первые робкие шаги в веб программировании и то, сколько недовольства возникало при одной мысли о том, что html,css и javascript необходимо проверять в разных браузерах, а в случае с IE и в разных версиях :(. Используя jQuery сам процесс определения типа браузера стал очень прост и удобен.
$.browser.safari //Safari browser
$.browser.opera //Opera browser
$.browser.msie //IE browser
$.browser.mozilla //FireFox browser
if ($.browser.mozilla) {
alert('ОоО. Так держать!');
}
Так же вы можете узнать версию браузера
$.browser.version
Проверка на конфликтность
jQuery в качестве упрощенного обращения использует переменную "$". Но как же быть, если данную переменную использует другой фреймворк? Для того чтобы определить, конфликтует ли использование данной переменной, нужно вызвать функцию
jQuery.noConflict();
Например, если конфликт имеет место, то чтобы задать выбор всех дивов, вместо конструкции $('div'), вам необходимо будет использовать jQuery('div').
В случае написание своих скриптов вы можете воспользоваться следующей конструкцией
$jq=jQuery.noConflict();
$jq('div');
Такое решение в большинстве случаев избавит вас от возможных проблем при конфликтах.
Создание html элемента
Очень простой функционал, но действительно необходимый :).
var newDiv = $(''); //Создание div элемента
newDiv.attr("id","myNewDiv").appendTo("body"); //Добавление на страницу
Изменение текста в элементе
Таких способом можно не только изменить текст, но и поломать разметку, будьте осторожны при использования данного функционала.
var el = $('#id');
el.html(el.html().replace(/mytext/ig, ""));
Проверяем существования элемента
Чтобы не допускать ошибок в коде, перед работой с элементами, необходимо проверять их наличие и обрабатывать ситуацию когда они отсутствуют.
if ($('#author').length) {
//ура. существует
} else {
// :(. отсутствует
}
Получаем значение элемента
Используя javascript код, для того чтобы получить значение элемента "select" вам понадобится выбрать сам элемент, перебрать дочерние и определить какой же элемент выбран. В jQuery данная задача решается одной строчкой
var value = $('#author').val(); // возвращает значение
$('#author').val(value); // устанавливает значение
Запоминание данных в элементе
Для хранения данных в элементах управления можно использовать функцию data. Детальную информацию вы сможете найти на сайте разработчиков.
$("#formComment").data("myData", { name : "my name", description : "my description"}); //Сохранение данных в элемент с идентификатором "formComment"
var myData = $("#formComment").data("myData"); //Получение данных
$("#formComment").removeData("myData"); //удаление данных
Сбор данных
Вот вы написали скрипты для асинхронной отправки данных на сервер, сбор данных сделали через выбор необходимых элементов и выбор из них значений. Но тут оказалось, что должны быть другие поля для заполнения. Как избежать дополнительной работы?
Разработчики jQuery добавили в свой арсенал "тяжелой артиллерии" функции по сбору данных с элементов ввода. Используя функции serialize, serializeArray вам не потребуется собирать данные вручную.
HTML
...
<form id="commentform" method="post" >
<input type="text" name="author"/><br/>
<input type="text" name="email" value=""/></br>
<input type="text" name="url" value=""/></br>
<textarea rows="10" cols="100%" name="comment"/></br>
<input type="submit" value="Submit Comment" name="submit"/>
</form>
...
Javascript
var str = $("#commentform").serialize(); //Строка. Результат "email=emailData&url=urlData&comment=commentData"
var array = $("#commentform").serializeArray(); //Массив значений. Результат "[{ name:"email", value:"emailData" }, { name:"url", value:"urlData" }, {name:"comment", value:"commentData"}]"
Есть одно маленькое ограничение, данные с элемента <input type="file"/> не собираются!
Работа с обработчиками событий: bind и unbind
Для добавления обработчиков событий можете воспользоваться функциями bind и unbind.
function send_ajax_submit(){
//ваш код
}
$("form").bind("submit", send_ajax_submit); //Добавляет обработчик send_ajax_submit на событие "submit"
$("form").unbind("submit", send_ajax_submit); //Удаляет обработчик send_ajax_submit с события "submit"
Для прерывания процесса "всплывания" события и отмены действий по умолчанию вы можете воспользоваться следующими функциями
function send_ajax_submit(){
event.preventDefault(); //отменяет действие по умолчанию. Для данного примера отменит отправку данных с формы.
event.stopPropagation(); //прерывает процесс "всплывания" события
return false; //прерывает процесс "всплывания" события и отменяет действие по умолчанию, т.е. заменяет event.preventDefault() и event.stopPropagation().
}
В случае, если вы определяете несколько событий, можно воспользоваться интересным решением от Keegan Watkins. Добавляем следующий скрипт
(function($) {
// Keep a copy of the old methods
$.fn._bind = $.fn.bind;
$.fn._unbind = $.fn.unbind;
// Redefine $().bind()
$.fn.bind = function( type, data, fn ) {
// If only a map of handlers was passed...
return (arguments.length === 1) ?
this.each(function(key, node) {
// Iterate over the map...
$.each(type, function(event, handler) {
event == "unload" ?
// ... using $.fn.one() for "unload" events...
$(this).one(event, handler) :
// ... and $.event.add() for others
jQuery.event.add( this, event, handler );
});
}) :
// Otherwise, use the existing implementation as of 1.3.2,
// with slight syntactic modifications
this.each(function(key, node) {
type == "unload" ?
// Use $.fn.one() for "unload" events...
$(this).one(type, fn) :
// ... and $.event.add() for others
jQuery.event.add( this, type, fn || data, fn && data );
});
};
// Redefine $().unbind()
$.fn.unbind = function(type, fn) {
// If only a map of handlers was passed...
return (arguments.length === 1)
this.each(function(){
// Iterate over the map...
$.each(type, function(event, handler) {
// ... and unbind each using event.remove()
jQuery.event.remove( this, event, handler );
});
}) :
// Otherwise, use the existing implementation as of 1.3.2,
// copied verbatim
this.each(function(){
jQuery.event.remove( this, type, fn );
});
};
})(jQuery);
А в своем коде используем следующий синтаксис
//Добавляем обработчики событий
$("#myID").bind({
click : function(e) {
//обработчик события click
},
mouseover : mouseoverHandler,
mouseout : mouseoutHandler
});
function mouseoverHandler(e) {
//обработчик события mouseover
}
function mouseoutHandler(e) {
//обработчик события mouseout
}
//Удаляем обработчики событий
$("#myID").unbind({
mouseover : mouseoverHandler,
mouseout : mouseoutHandler
});
Работа с массивами
Стандартные средства javascript по работе с массивами не всегда удовлетворяют потребности, а порой даже по разному себя ведут
Определяем количество элементов
//количество элементов
$('element').size();
Преобразования выборки элементов в массив
var arr = $("div").get();
Перебор элементов массива
var arr = ["Запад", "Север", "Восток", "Юг"];
jQuery.each(arr, function() {
//работа с элементом массива
var value = this;
});
Фильтрация элементов массива
var arr = [1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1];
arr = jQuery.grep(arr, function(n, i){
//n - текущий элемент
//i - номер элемента
return n > i;
});
//результат [1, 9, 3, 8, 6, 9]
Обработка элементов массива
var arr = [ "a", "b", "c", "d", "e" ]
arr = jQuery.map(arr, function(n, i){
// n - элемент массива
// i - индекс элемента в массиве
return (n.toUpperCase() + i);
});
//результат [ "A0", "B1", "C2", "D3", "E4" ]
Поиск вхождения элемента
var arr = [4, "Pete", 8, "John"];
var index = jQuery.inArray("John", arr); // Если элемент не найден то возвращается значение -1
//результат index = 3
Объединения массивов
$.merge([0,1,"a"],["a",3,4]);
//результат [0,1,"a","a",3,4]
Является ли объект массивом
$.isArray([]);
Отключаем контекстное меню
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
Работает в : Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.
3 коммент.: