-moz-box-shadow:50px 50px 50px #FF4500;
-moz-transform:rotate(90deg);


background:none repeat scroll 0 0 #DDDDDD;
height:100px;
left:200px;
padding:10px;
position:absolute;
top:100px;
width:300px;

А вот и баг нашелся

Все очень просто: при ошибке, например, загрузки данных с сервера вылазит маленькое окошечко с сообщением о том что произошла ошибка. Примерно так как на Хабре. Сообщение держиться 5 секунд после чего исчезает. Если на него не навести мышку, если навести то снова появляеться даже если уже наполовину исчезло. Если на него кликнуть то будет держаться пока не кликнеш еще раз. Если сообщения два второе становиться под первое. К сожелению изза дизайна сайта тут положение высчитываеться вврху экрана и если проскролить чуток то оно чуть сползет, поэтому лучше всего смотриться в абсолютным позиционированием контента. Такое позиционирование есть если для создания сраницы исользовался UI.Layout, так что нужно откорректировать top и left.

	function showMessage(text, error){
		var clicked = false;
		var self = $("<div/>",{
			css:{
				width : "200px",
				height : "60px",
				background : error ? "#ED6060" : "#60ED60",
				position : "relative",
				zIndex : 10,
				textAlign : "center",
				lineHeight : "60px",
				display : "none",
			},
			text : text,
			click : function(){
				clicked = !clicked;
			},
			mouseover : function(){
				self.stop(true, true).fadeIn("slow");
			},
			mouseout : function(){
			if (!clicked){
				self.stop(true, true).fadeOut("slow").queue(function(){
					self.remove();
				});
 			}
		}})
		.appendTo("body")
		.fadeIn("slow")
		.delay(5000)
		.fadeOut("slow")
		.queue(function(){
			self.remove();
		});
	}

Ну и на последок как водиться примерчик.

Сегодня днем, когда качал новую тему для jQueryUI, заметил каку-то рекламку, меня она немного насторожила, я присмотрелся, и не зря мне предложили enlarge your penis size naturally only for 20$. Там было написано "Bring ThemeRoller into any page: Get the ThemeRoller Firefox Bookmarklet!", и что вы себе думаете это работает всего за 20$ я увеличил свой член на 4 сантиметра, но только в FireFox'e. После добавления в закладки и запуска, эта штука создает небольшой поп-апчик, в котором можно менять настройки текущей темы или даже саму тему.

Результат можно посмотреть прямо на этой странице, добавьте этот линк в закладки и запустите, а вот календарик для просмотра эффекта

Но меня как всегда волнует вопрос "как это работает?". Начинаем препарировать:

(function() {
    if (!/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
        alert('Sorry, due to security restrictions, this tool only works in Firefox');
        return false;
    }
    ;
    if (window.jquitr) {
        jquitr.addThemeRoller();
    } else {
        jquitr = {};
        jquitr.s = document.createElement('script');
        jquitr.s.src = 'http://jqueryui.com/themeroller/developertool/developertool.js.php';
        document.getElementsByTagName('head')[0].appendChild(jquitr.s);
    }
})();

Сам линк простой как три копейки: если фаерфокс то создает на странице новый скрипт. Какой?

if(!window.jquitr){jquitr = {};}
jquitr.trString = '';
jquitr.s1 =document.createElement('script');
jquitr.s2 =document.createElement('script');
jquitr.s1.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');
jquitr.s2.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js');
document.getElementsByTagName('head')[0].appendChild(jquitr.s1);
document.getElementsByTagName('head')[0].appendChild(jquitr.s2);
//once jq and ui are loaded...
jquitr.s1.onload = function(){
	jquitr.s2.onload = function(){
		jquitr.addThemeRoller();
	}
}
//add dev tool to page
jquitr.addThemeRoller = function(){
	if(jQuery('#inline_themeroller').size() > 0){
		jQuery('#inline_themeroller').fadeIn();
	}
	else {
		jQuery('<div id="inline_themeroller" style="display: none; position: fixed; background: #111; top: 25px; right: 25px; padding: 22px 0 15px 4px;width: 245px;height:400px; -webkit-border-radius: 6px; -moz-border-radius: 6px; z-index: 9999999;">'+
			'<a href="#" class="closeTR" style="font-family: Verdana, sans-serif; font-size: 10px; display: block; position: absolute; right: 0; top: 2px; text-align: right; background: url(http://jqueryui.com/themeroller/developertool/icon_bookmarklet_close.gif) 0 2px no-repeat; width: 16px;height: 16px; color: #fff; text-decoration: none;" title="Close ThemeRoller"></a>'+
			'<iframe name="trApp" src="http://jqueryui.com/themeroller/developertool/appinterface.php" style="background: transparent; overflow: auto; width: 240px;height:100%;border: 0;" frameborder="0" ></iframe>'+
			'</div>')
			.appendTo('body')
			.draggable({
				start: function(){
					jQuery('<div id="div_cover" />').appendTo('#inline_themeroller').css({width: jQuery(this).width(), height: jQuery(this).height(), position: 'absolute', top: 0, left:0});
				},
				stop: function(){
					jQuery('#div_cover').remove();
				},
				opacity: 0.6,
				cursor: 'move'
			})
			.resizable({
				start: function(){
					jQuery(this).find('iframe').hide();
				},
				stop: function(){
					jQuery(this).find('iframe').show();
				},
				handles: 's'
			})
			.find('a.closeTR').click(function(){
				jquitr.closeThemeRoller();
			})
			.end()
			.find('.ui-resizable-s').css({
				background: 'url(http://jqueryui.com/themeroller/developertool/icon_bookmarklet_dragger.gif) 50% 50% no-repeat',
				border: 'none',
				height: '14px',
				dipslay: 'block',
				cursor: 'resize-s',
				bottom: '-3px'
			})
			.end()
			.css('cursor', 'move')
			.fadeIn();
		}
		jquitr.reloadCSS();		
}
//close dev tool
jquitr.closeThemeRoller = function(){
	jQuery('#inline_themeroller').fadeOut();
};
//get current url hash
jquitr.getHash = function(){
	var currSrc = window.location.hash;
	if(currSrc.indexOf('#') > -1){currSrc = currSrc.split('#')[1];}
	return currSrc;
};
//recursive reload call
jquitr.reloadCSS = function(){
	var currSrc = jquitr.getHash();
	if(jquitr.trString != currSrc && currSrc != ''){
		jquitr.trString = currSrc;
		var cssLink = '<link href="http://jqueryui.com/themeroller/css/parseTheme.css.php?'+ currSrc +'" type="text/css" rel="Stylesheet" />';
		//works for both 1.6 final and early rc's
		if( jQuery("link[href*=parseTheme.css.php], link[href=ui.theme.css]").size() > 0){
			jQuery("link[href*=parseTheme.css.php]:last, link[href=ui.theme.css]:last").eq(0).after(cssLink);
		}
		else {
			jQuery("head").append(cssLink);
		}
		if( jQuery("link[href*=parseTheme.css.php]").size() > 3){
			jQuery("link[href*=parseTheme.css.php]:first").remove();
		}
	}
	setTimeout(jquitr.reloadCSS, 1000);
}

В двух словах он загружает jQuery и jQueryUI (нах они, ведь и так есть, наверное). Большая половина кода загружает iframe с красивенькими табами и еще одной копией jQuery и jQueryUI (фак, их уже три!!!), так же она управляет самим поп-апом (ресайз, драг, анимация). Удивляет то что iframe имеет расширение .php , хотя может это для маскировки.

Теперь вернемся к скрипту, оставшаяся меньшая половина делает магию. Как вы знаете iframe не имеет доступа к странице, то есть напрямую ей управлять не может, он имеет доступ только к window.location.hash, это та часть URL которая называется якорь (anchor). Так вот когда я в iframe выбираю тему или меняю какой-то параметр текущей, он записывает в урл моего сайта нечто вроде

#ffDefault=Segoe+UI%2C+Arial%2C+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=333333&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=25&borderColorHeader=333333&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=000000&bgTextureContent=05_inset_soft.png&bgImgOpacityContent=25&borderColorContent=666666&fcContent=ffffff&iconColorContent=cccccc&bgColorDefault=555555&bgTextureDefault=02_glass.png&bgImgOpacityDefault=20&borderColorDefault=666666&fcDefault=eeeeee&iconColorDefault=cccccc&bgColorHover=0078a3&bgTextureHover=02_glass.png&bgImgOpacityHover=40&borderColorHover=59b4d4&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=f58400&bgTextureActive=05_inset_soft.png&bgImgOpacityActive=30&borderColorActive=ffaf0f&fcActive=ffffff&iconColorActive=222222&bgColorHighlight=eeeeee&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=80&borderColorHighlight=cccccc&fcHighlight=2e7db2&iconColorHighlight=4b8e0b&bgColorError=ffc73d&bgTextureError=02_glass.png&bgImgOpacityError=40&borderColorError=ffb73d&fcError=111111&iconColorError=a83300&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&cornerRadiusShadow=8px

Тут уже его мониторит скрипт который по setTimeout каждую секунду проверяет не изменился ли window.location.hash и если да, то передает всю эту строку другому скрипту, который знает как из этой каши сделать новую тему.

Новая тема добавляется в header страницы перекрывая прошлую. Единственное маленькое НО, если вы как я вставляли CSS файлы в средину страницы, непосредственно перед их использованием, то это нихера работать не будет. Надо чтобы старые файлы находились выше по коду чем новые. Именно поэтому мне сегодня пришлось поправить десяток статей и обновить шкурку вордпресса, так что если найдете какие-нибудь баги, не стесняйтесь пишите в каменты.

Непонятным осталось только одно - зачем эта штука хранить 3 последние загруженные темы ?! Что-то я не заметил механизма отката изменений...

Когда-то давно, когда только вышла первая бэтка YUI-Ext которая сейчас переросла в огромный фреймворк Ext JS, я увидел насколько красивыми могут быть лайауты ;) (кто знает как красиво перевести это слово, согласно контексту, милости прошу в каменты). Я скачал эту бэтку, сырую как подвал, открыл исходники блога Jack'a Slocum'a, потому что документации еще не было и наваял небольшой сайтик который НЕ стал моим блогом, как задумывалось, но перевернул мое отношение к javascript'y.

Работая в Инкоме, я хотел вернутся к этой красоте и простоте, но этот фреймворк идеально подходит для создания бизнес приложений с нуля и никаким боком не касался моего тогдашнего проекта - Киевстара. Раз выпало потрогать свежую версию Ext JS 2.3, когда к нам пришел проект от ГАИшников на создание веб-морды для базы данных угона. Куски того что получилось можно наблюдать тут и тут

А недавно я столкнулся с одним очень интересным дополнением к jQuery UI и как вы поняли это был jQuery UI.Layout Plug-in, который позволяет делать лайауты похожие на Ext JS. Конечно в силу молодости UI.Layout глючная и не много функциональная, но подает большие надежды. Под "не многофункциональностью" я понимаю отсутствие всяких всяких красивых плюшечек (табиков, кнопочек, менюшечек, панелек) как в Ext JS. Хотя это ведб не лайауты, а виджеты, правильно? UI.Layout интегрирована с табами (их даже можно сортировать) и аккордеоном из jQuery UI, а также есть пример создания кнопок для открывания (стрелочка) и удерживания (кнопка) блока. Это уже хорошо :)

Вот пример плагина на стандартных настройках, без какого либа дополнительного CSS, больше примеров вы сможете посмотреть на сайте плагина.

Updated 17.08.10

К сожалению все потуги авторов зарелизить версию 1.3 тщетны :( Плагин сейчас находиться в версии 1.3RC29.4. Но не смотря на это плагин очень приятен в использовании. Он поддерживает возможность создавать неограниченного количество вложенных лайаутов, на каждую анимацию есть по два call-back'a в начале и в конце события, в следующей версии будет I18N, зачатки которой уже есть сейчас, 78 настроек (включая call-back) для каждого блока, возможность сохранения состояния в куках и многое другое.

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

Идея была хорошая, реализация - гавно. Сидел писал... Разруливал грабли.

Началось все с чертовой верстки, ее как обычно не понял IE, но там особых проблем не возникло, кое-что через скрипт поправил.

Первой неприятной граблей было отсутствие в jQuery поддержки колесика мишки, но плагин на этот случай нашелся очень быстро. Обожаю jQuery за огромное количество плагинов! И не смотря на то что плагин небольшой это уже давало лишний код и лишнюю зависимость для моего плагина. Не айс :(

Второй граблей стал ползунок, на него надо было натянуть drag. Тоесть перетаскивание, писать самому этот гемор я не решился, мне не настолько не хуй делать. Откуда взять драг? Правильно из jQuery UI. Примастырил я его довольно легко, благо там все просто. Оказалось еще два дополнительных файла (core и draggable) и килобайты лишнего кода. Мне это очень не понравилось, но ничего поделать я не мог.

Этот же ползунок надо было перемещать под мышку при клике на полоску прокрутки. Как мудак, почти целый день втыкал в формулу зависимости высоты ползунка от длинны текста, координат ползунка на полосе прокрутки и пытался сместить его на половину его высоты вверх чтобы он попадал на мышку центром. Потом только понял что то координата ползунка не зависит от длины полоски и ничего смещать не надо, она зависит от места куда кликнули. Как тока понял все быстро срослось. О чем я написал прошлую заметку

Ок, ползунок стал куда ему требовалось теперь надо было из скрипта активировать событие drag. Поначалу даже не знал с чего начать, пробовал вызывать события mousedown и mousemove по очереди, потом вызвать их оба сразу, никаких результатов. Полез в код UI разбираться. От туда как-то вытащил событие "mousedown.draggable", попытался его вызвать через trigger, получил ошибку о зациклившейся рекурсии. Долго ругался. Гуглил. Узнал что так можно было делать еще в версии 1.5.3, а теперь это перекрыли. Авторы советуют использовать плагин симуляции пользователя. Долго ругался на дополнительный код, хотел из него что-то удалить, плюнул, поставил. Ура! Заработало. Потом уже во время написания статьи и проверки в IE и других браузерах оказалось что работает этот чудо-плагин тока в FireFox'e. Н у и хуй с ним, всеравно в оригинальном плагине так не работало.

Пока гуглил решение проблемы с drag'ом нашел плагин который реализовывает этот же функционал и вроде как гибче в настройках. Поставил, легче не стало, зато кода вроде уменьшилось и не надо использовать весь UI. В общем оставил в коде закомментированным кусок для подключения плагина. кто хочет может ебаться.

Так я похоже уже всех замариновал пиздежом не по теме. Выкладываю рабочий пример. Цацкайтесь.

Будет настроение буду доделывать... Уберу чертов плагин симуляции, всеравно не пашет... Потом там есть бага, когда сначала кликнул на полосу прокрутки, а потом на стрелку вверх, ползунок чуть вниз зъезжает. Посмотрим может не лень будет.

Добавлено 04.06.09 в 2 ночи. После 2 часов дебага обнаружил что плагин симуляции пользователя корректно работает только если виджет расположен на первом экране, то есть сама страницы с виждетом не проскроллена. После чего все воспоминания про плагин были выкинуты из кода. Застрелите меня.

Добавлено 05.06.09 в 12 ночи. Наконец-то доделал. Теперь скроллинг полностью имитирует поведение виндового скроллинга. И его можно применять не только к отдельному элементу но и ко всей странице.

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

Размер моего плагина (не сжатым) 6 424 байт, а размер оригинального 23 076. При этом размер всех подключаемых js файлов (сжатых) у jquery 91 725, а у mootools 96 157 байт.

Добавлено 06.06.09 в 20:00. Добавлена поддержка IE 7 & 8. В IE 6 неправильно возвращается свойство scrollHeight, поэтому скроллинг глючит.

Скачать сие чудо с примерами работы можно отсюда DOWNLOAD LINK

Итак начну с начала, мне понадобиться скрипт который инициализирует Google Gears, он написан самим Google и является единственным официальным способом запустить Google Gears, и jQuery UI для создания модального диалога из прошлой статьи. Скрипт создаёт фабрику объектов с которой я буду работать дальше, хотя там и так подробно описано в комментариях. Дальше логика такая - нужно создать новый "склад" и передать все отобранные для кеширования файлы, обновляя после каждого файла ползунок загрузки. Поехали:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>GoogleGears local store setup</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="ui/ui.core.js" type="text/javascript"></script>
<script src="ui/ui.resizable.js" type="text/javascript"></script>
<script src="ui/ui.draggable.js" type="text/javascript"></script>
<script src="ui/ui.dialog.js" type="text/javascript"></script>
<script src="ui/ui.progressbar.js" type="text/javascript"></script>
<script src="http://code.google.com/intl/ru/apis/gears/gears_init.js" type="text/javascript"></script>


<link href="themes/smoothness/ui.core.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.theme.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.resizable.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.dialog.css" type="text/css" rel="stylesheet" />
<link href="themes/smoothness/ui.progressbar.css" type="text/css" rel="stylesheet" />
<style>
.ui-progressbar-indicator{
	line-height:40px;
	position:absolute;
	text-indent:-20px;
	left:50%;
}
</style>
<script type="text/javascript">
if(!window.console)
	console = {info:function(){}};


jQuery().ready(function($){
	// определяю все с чем буду работать
	var 
	localServer, // сервер
	localStore, // хранилище
	counter = 0, // итератор файлов
	percent = 0, // текущий процент
	store = "myStore", // имя хранилища
	filesToCapture = [  ], // список файлов


	// диалог 
	dialog = $("<div/>")
		// с параметрами но на этот раз без кнопки
		.dialog({modal:true,title:"Заголовок",overlay:{backgroundColor:'#000',opacity: 0.5}})
		// и без крестика
		.parent().find(".ui-dialog-titlebar-close").hide().end().end(),


	// с цифровым индикатором
	indicator = $("<div/>").addClass("ui-progressbar-indicator").text("0")
		.appendTo(dialog),


	// и ползунком
	progressbar = $("<div/>")
		// обновляю значение индикатора
		.progressbar({value:0,change:function(event,ui){indicator.text(percent+"%")}})
		.appendTo(dialog);


	try {
		// пробую создать локальный сервер
		localServer = google.gears.factory.create('beta.localserver');
		window.console.info('Ready!');
		// в нем локальное хранилище
		localServer.createStore(store);
		window.console.info('Created the store');
	} catch (e) {
		// при неудаче - выходим
		window.console.info(e.message);
		return;
	}


	// открываем хранилище
	localStore = localServer.openStore(store);
	// передаем в него список файлов
	localStore.capture(filesToCapture, function (url, success, captureId) {
		counter++;
		// считаем текущий процент
		percent = Math.round(counter/filesToCapture.length*100);
		// обновляем ползунок
		progressbar.progressbar("value",percent)
		// если все файлы закешированы чистим ненужное
		if (counter == filesToCapture.length) {
			progressbar.progressbar("destroy"); 
			dialog.dialog("destroy");
			indicator.remove();
		}
		// на всякий случай пишу все в лог
		window.console.info(url + ' captured ' + (success ? 'succeeded' : 'failed'));
	});
});


</script>
</head>
<body>
</body>
</html>

Примера к сожалению не будет потому что даже если у когото из вас и установлен Google Gears, то у меня нечего особо кешировать, можете посмотреть как выглядит анимация в статье Modal Dialog и Progress Bar

Конечно же интереснее было бы использовать ManagedResourceStore с манифестом, это дает возможность иметь сразу например несколько цветовых схем сайта, но тогда бы не получилось анимировать процесс загрузки.

function DeferCall() {
	if (arguments.length == 0) {
		return null;
	}
	var args = arguments;
	var fn = null;
	if (browseris.ie5up || browseris.nav6up) {
		eval("if (typeof(" + args[0] + ")=='function') { fn=" + args[0] + "; }");
	}
	if (fn == null) { return null; }
	if (args.length == 1) {
	 return fn();
	} else if (args.length == 2) {
		return fn(args[1]);
	} else if (args.length == 3) {
		return fn(args[1], args[2]);
	} else if (args.length == 4) {
		return fn(args[1], args[2], args[3]);
	} else if (args.length == 5) {
		return fn(args[1], args[2], args[3], args[4]);
	} else if (args.length == 6) {
		return fn(args[1], args[2], args[3], args[4], args[5]);
	} else if (args.length == 7) {
		return fn(args[1], args[2], args[3], args[4], args[5], args[6]);
	} else if (args.length == 8) {
		return fn(args[1], args[2], args[3], args[4], args[5], args[6], args[7]);
	} else if (args.length == 9) {
		return fn(args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
	} else if (args.length == 10) {
		return fn(args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8], args[9]);
	} else {
		var L_TooManyDefers_Text = "Too many arguments passed to DeferCall"
		alert(L_TooManyDefers_Text);
	}
	return null;
}

А все потому что IE5.5 не поддерживает метод Function.apply .

Хотя IE6 достал уже всех, вот например Apple сделал себе такую страничку, на которой предлагает скачать что-нибудь по современние. Выглядит красиво даже в IE6, но если посмотреть код то там все перехачено вдоль и поперек.

Вот эта страничка меня натолкнула на мысль сверстать похожий "надгробничек" дляя своих целей, используя все то, что использовали разработчики Apple, только без хаков. Смотрите сами что из этого получилось

Первым я протестирую контекст, проверять буду вот таким скриптом

var start = new Date();
for(var i=0;i<1000;i++)
	$....
var stop = new Date();
console.log(stop-start)

Я не будем добавлять ничего нового к коду Google, а только попробуем собрать коллекцию li.

Вывод из первого эксперимента - сам по себе контекст это еще один поиск по DOM дереву, поэтому задавать контекст стоит только если второй запрос ограничит первый на столько что сэкономленное время будет больше чем время второго запроса, такого эффекта можно добиться например указав id родителя (не обязательного прямого) в контексте.

Второй пример покажет как лучше всего получить всех прямых потомков.

Не используйте звездочку - это не оправдано в 99.9% случаев (а в этом примере * возвращает еще и затесавшийся случайно элемент link) и не стоит без особой надобности использовать метод children - он тормозит.

В третьем примере я протестирую получение первого прямого потомка.

Не могу найти разумного объяснения почему так тормозит find, но наверное на это есть какие-то причины. А еще интересна разница в использовании eq(0) как селектора и как метода - дольше в полтора раза.

Думаю стоит отвлечся от потомков и протестировать атрибуты. Вытащим input у которых type=radio

Похоже фильтром тоже не стоит злоупотреблять, а псевдо-селекторы придуманы не только для удобства в написании

Ну и конечно надо доколупаться до классов а то было бы не честно

Магия...

Пример первый - простой, я пробую создать пустой див. В обычном JavaScript это выглядело бы как одна строка

document.createElement("div");

но сначала нужно убедиться что мы хотим создать именно пустой див

// вызываем jQuery с селектором (а точнее с фрагментом html кода), без контекста
$("<div/>");

дальше идет общая часть для обоих примеров, мы получаем наш текст в переменную string и пытаемся определить что же получили

// проверяем что мы получили html а не селектор
var html = /^[^<]*(<(.|\s)+&gt)[^>]*$|^#([\w-]+)$/.exec(string)
if(html && (html[1] || !context)){
	// это для красоты
	html = html[1];
	// проверяем что наш html просто один тэг
	var tag = /^<(\w+)\s*\/?>$/.exec(html);
	if(tag[0])
		// создаем и возвращаем новый элемент
		return document.createElement(tag[0]);
}

Было бы крайне интересно, если бы можно было передавать еще и контекст в котором нужно создать элемент, тогда можно было бы не писать .appendTo(), но к сожалению это слишком сложно и накладывает кучу ограничений.

Второй пример - сложный, нам не просто надо создать див но надо добавить к нему свойство style и текст

// вызываем jQuery
$("<div style='position:absolute;'>text</div>");

Вторая проверка из прошлого фрагмента кода не пройдена и мы должны уточнить, что же надо создать, попутно создаем вспомогательный див который будет служить нам оберткой

var div = context.createElement("div");

Приводим html к виду xhtml, это значит что если бы у нас была строка

<div style='position:absolute;'/>

то она превратилась бы в

<div style='position:absolute;'></div>

это не относиться к перечисленым тэгам

html = html.replace(/(<(\w+)[^>]*?)\/>/g, function(all, front, tag){
	return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ?
		all :
		front + "></" + tag + ">";
});

Затем нужно проверить целостность html'a если мы пытаемся создать элементы которые изначально должны быть вложены в другие, то их следует сначала вложить а потом создать.

var wrap =
	!tags.indexOf("<opt") &&
	[ 1, "<select multiple='multiple'>", "</select>" ] ||


	!tags.indexOf("<leg") &&
	[ 1, "<fieldset>", "</fieldset>" ] ||


	tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
	[ 1, "<table>", "</table>" ] ||


	!tags.indexOf("<tr") &&
	[ 2, "<table><tbody>", "</tbody></table>" ] ||


	(!tags.indexOf("<td") || !tags.indexOf("<th")) &&
	[ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] ||


	!tags.indexOf("<col") &&
	[ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] ||


	// IE не может сериализировать <link> и <script> тэги нормально
	!jQuery.support.htmlSerialize &&
	[ 1, "div<div>", "</div>" ] ||


	[ 0, "", "" ];


div.innerHTML = wrap[1] + elem + wrap[2];

Ну и естественно обертки нам не нужны, мы их отбрасываем

while ( wrap[0]-- )
	div = div.lastChild;

Если у нас было несколько элементов верхнего уровня

<div>text1</div><div>text2</div>

мы бы это все еще разбили в массив, но так как мы этого не знаем и для однородности отдачи мы все равно это делаем

array = Array.prototype.push.apply([], div.lastChild);

Статья изначально предполагалась для объяснения, почему для манипуляций с единичными элементами DOM лучше создавать пустые элементы, а потом методами jQuery добавлять им свойства.

$("<div/>").text("text")
// лучше чем ?
$("<div>text</div>")

Но в ходе написания статьи было обнаружены интересные подробности: оказывается первый вариант выполняется, чуть более чем, вдвое дольше второго

var start = new Date();
for(var i=0;i<1000;i++)
	$("<div/>").text("text")
var stop = new Date();
alert(stop-start) // 280


var start = new Date();
for(var i=0;i<1000;i++)
	$("<div>text</div>")
var stop = new Date();
alert(stop-start) // 125

Я очень сильно удивился и посмотрел код метода .text() он попутно успевает вызвать метод .empty(), который очень широким жестом удаляет всех потомков текущей ноды. Теория начала с треском проваливаться, но не все методы используют .empty() и я составил табличку, какой метод, сколько времени выполняеться и картина снова стала меня радовать.

Хочу обратить ваше внимание на то что .css() это частный случай для .attr() поэтому работает чуть дольше, но лучше отображает суть происходящего.

Эксперимент доказал, что если требуеться создавать пустой элемент (по большей части это касаеться дивов), то всетаки лучше параметры передавать потом в методах. Это экономит до 50% времени.

ЗЫ: Я уже знаю что в каментах будут писать о том, что это экономия на спичках, но эта статья из большой и чистой теории и я никого не принуждаю так делать - делайте как удобнее.