jQuery tips. Советы и уловки - JQuery - Web-программирование - Каталог статей

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

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

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

Code

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

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

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

Code (CSS)

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 настолько крут, что легко справляется с экранированием символов.
Рассмотрим следующий пример.

Code

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

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

Code

<div id="jquery_escape_html"><script>alert('hi!');</script></div>

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

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

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

Code

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

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

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

Code

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 окне.

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

Code

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

События

Пространство имен при работе с событиями

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

Code

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

При необходимости пользуйтесь своими типами событий

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

Code

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

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

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

Code

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

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

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

Code

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

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

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

Code

$(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

Code (HTML)

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>

Code

<a id="top" style="cursor:hand;cursor:pointer">Вверх!</a>

Javascript

Code (Javascript)

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

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

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

Code

// клонируем элемент с идентификатором "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 являются одной из самых сильных сторон. Используя их, можно не только выбрать необходимые элементы, но и проверить уже имеющийся элемент на соответствие селектору.

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

Code

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

P.S.

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

Автор: SMiGL

Источник: www.Night-Fairy-Tales.com