вторник, 15 декабря 2009 г.

jQuery tips. Часть 1. 11 моментов о которых необходимо знать

jQuery сейчас один из самых популярных javascript фреймворков, который радует нас своей простой и легкостью в использовании.

Хочу начать серию статей в которых расскажу про секреты и особенности 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 комментария:

  1. Очень интересный пост. Хочется продолжения.

    ОтветитьУдалить
  2. Рад, что пост смог помочь не только мне :).

    ОтветитьУдалить
  3. Да, отличная статья. Спасибо!!!

    ОтветитьУдалить