jQuery tips. Часть 2. Советы и уловки

Серия статей про jQuery немного затянулась :), как всегда какие то другие идеи вытесняют намеченные планы. Попробую осилить 2 статьи из данной серии за неделю, тем более, что и накопилось материала, и появилось немного свободного времени. В этом небольшом посте хотел рассказать про советы и уловки, которые периодически делают жизнь легче :).

Альтернативный путь Document Ready

Одной из первых функций с которой я познакомился изучая jQuery, была "$(document).ready". Есть и альтернативный вариант вызова данной функции.

$(document).ready(function() {
 //document ready
});

//Альтернативный путь, и заметьте, так короче! :)
$(function(){
 //document ready
});

Используем jQuery для разбора xml(parse xml)

Используя jQuery, вы можете с легкостью обрабатывать и манипулировать xml данными. Следующий пример демонстрирует как можно преобразовать xml данные в jQuery объект.

var jquery_xml_parse = $("<xml><title>jQuery parse xml</title><data>Xml data</data></xml>");
var data_node = $("data", jquery_xml_parse);
var result = data_node.text(); // результат "Xml data"

Экранирование символов используя jQuery

jQuery настолько крут, что легко справляется с экранированием символов. Рассмотрим следующий пример.

var htmlString = "<scr"+"ipt>alert('hi!');</scr"+"ipt>";
$("#jquery_escape_html").text(htmlString);

В результате отработки данного скрипта получим HTML

<div id="jquery_escape_html">&lt;script&gt;alert(&#39;hi!&#39;);&lt;/script&gt;</div>

А на экране будет отображен текст: "<script>alert('hi!');</script>"

Отложенная загрузка контента

Очень прикольно смотрятся сайты в которых некоторые секции загружаются динамически. jQuery позволяет делаеть такие вещи крайне просто.

$('#jquery_page_load').load('content/load_form.html', function() {
    // Код, который будет выполнен после загрузки контента
});

Открываем ссылки в новом окне

Для того чтобы ссылки открывались в popup окне добавьте на свою страницу следующий код.

jQuery('a.popup_window').live('click', function(){
    newwindow=window.open($(this).attr('href'),'','height=200,width=150');
    if (window.focus) { newwindow.focus(); }
    return false;
});

Теперь, при клике на ссылку у которой будет установлен класс "popup", страница будет открыта в popup окне.

Если вам необходимо чтобы ссылки открывались в новом табе, то воспользуйтесь следующим кодом.

jQuery('a.tab').live('click', function(){
    jQuery(this).attr("target","_blank");
    return true;
});

События

Пространство имен при работе с событиями
С версии 1.2 в событиях появилась возможность задавать пространство имен. Для добавление имени в операторе bind после имени события через точку можно указать пространство имен. Данный механизм будет удобен при работе в модулях, в случае когда необходимо удалить все обработчики событий текущего модуля. Рассмотрим это на примере

$("a").bind("click.event_tracking", function(){
  //ваш код
});

$("a").bind("click.animation", function(){
  //ваш код
});

$("a").unbind(".event_tracking");

При необходимости пользуйтесь своими типами событий
Используя jQuery можно создавать свои типы событий, которые будет привязаны к определенным DOM элементам. При использовании таких событий, код получается более чистым, и можно убрать жесткие связи между модулями.

//Добавления обработчика события "custom_event"
$("p").bind("custom_event", function(e, count) {
});

//Вызов события
$("p").trigger("custom_event", [ 5 ]);

Определяем позицию курсора

Если вам необходимо отслеживать позицию курсора, то можно воспользоваться следующим примером.

$().mousemove(function(e){  
    //Записываем координату x и y в элемент с идентификатором "cursor_position"
    $('#cursor_position').html("X: " + e.pageX + "; Y:" + e.pageY + ".");
});

Как получить координаты DOM элемента?

С помощью jQuery получить координаты DOM элемента очень просто. Используйте следующий код:

var сe = $("#сoordinate_element");
var left_offset_position = сe.offset().left; //это координата left
var top_offset_position = сe.offset().top; //это координата top
var right_offset_position = сe.offset().left+сe.width(); //это координата right
var bottom_offset_position = сe.offset().top + сe.height(); //это координата bottom

Как определить какую кнопку нажали?

Если вам необходимо отслеживать какую кнопку нажали, то воспользуйтесь следующим примером.

$(function() {
    $(document).keypress(function(e){
        //e.which содержит код нажатой кнопки
        switch(e.which){
            // "ENTER"
            case 13:
                alert('enter pressed');
            break;

            // "s"
            case 115:
                alert('s pressed');
            break;
        }
    });

});

Возврат к началу страницы

В случаях, когда материал на страницах больше чем несколько экранов, стоит задуматься о возможности перехода к началу страницы. Используя jQuery и плагин jQuery.ScrollTo реализация такого возврата занимает минимум времени.
HTML

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......  
<a id="top" style="cursor:hand;cursor:pointer">Вверх!</a>

Javascript

$('#go_top').click(function() {  
    $(document).scrollTo(0,500);  
}

Используйте клонирование для создания элементов

Для создания DOM элементов максимально используйте метод jQuery ".clone".

// клонируем элемент с идентификатором "cloneHtmlElement"
var cloned = $('#cloneHtmlElement').clone();

К сожалению, данный метод не клонирует JavaScript объекты. Для этого можно воспользоваться следующим кодом:

// Simple clone
var clone_object = jQuery.extend({}, source_object);

// Deep clone
var clone_object1 = jQuery.extend(true, {}, source_object);

Simple clone - клонирование всех свойств объекта, исключая сложные свойства.
Deep clone - рекурсивное клонирования всех свойств объекта.

Проверка элемента на соответствие

Селекторы в jQuery являются одной из самых сильных сторон. Используя их, можно не только выбрать необходимые элементы, но и проверить уже имеющийся элемент на соответствие селектору.

Возьму банальный пример, который демонстрирует всю мощь механизма. Определим является элемент видимым или нет.

if($(element).is(":visible")) {
       //элемент видимый УРА (Visible!)
}

Жизнь стала легче? :)