Category Archives: javascript

Выборка DOM-элементов по селекторам

Постоянно забываю запись всех атрибут селекторов для jquery. Памятка с примерами использования: 1. Элемент с атрибутом [A] Выбирает все элементы с атрибутом. Пример:

$( "checkbox[checked]" )

1	$( "checkbox[checked]" )

Выбрать все чекбоксы с атрибутом «checked». 2. Элемент с атрибутом A, равным B [A=B] Пример:

$( "input[name='my-name']" )

1	$( "input[name='my-name']" )

Выбрать все инпуты с атрибутом «name», равным «my-name». 3. Элемент с атрибутом A, не равным …

	arraysAreEqual: function( Arr1, Arr2 )
	{
		var equal = ( Arr1.length == Arr2.length );
		if ( equal )
		{
			$.each( Arr1, function ( key, val ) {
				if ( $.inArray( val, Arr2 ) == -1 )
				{
					equal = false;
					return false;
				}
			} );
		}
		return equal;
	},

arraysAreEqual: function( Arr1, Arr2 )

{

var equal = ( Arr1.length == Arr2.length );

if ( equal )

{

$.each( Arr1, function ( key, val ) {

if ( $.inArray( val, Arr2 ) == -1 )

{

equal = false;

return false;

}

} );

}

return equal;

Greasemonkey-скрипт для Redmine

Redmine, конечно, настраиваемый и гибкий, но иногда очень не удобный. Захотелось сделать кнопочку «Взять в работу», которая появлялась бы на странице тикета. Делать плагин долго, просто подключить яваскрипт в шаблон — плохо, проблемы при обновлении Redmine. В итоге решил написать Greasemonkey-скрипт:

// ==UserScript==
// @name           Redmine Ticket
// @namespace      hc
// @include        [урл к Redmine]/issues/*
// ==/UserScript==
var tt = document.createElement('DIV');
tt.innerHTML = "<script>\
var linkInWork = '<a href=\"javascript:void(0);\" onclick=\"setInWork(); return false;\" class=\"icon\">In work</a>';\
$A( $$( '#content .contextual a.icon-del' ) ).each( function( Elem ) {\
	Elem.insert( {'after': linkInWork} );\
});\
function setInWork()\
{\
	var t = $('loggedas').innerHTML;\
	var userId = /\\/users\\/([0-9]*)/.exec(t);\
	if ( userId !== null ) {\
		userId = userId[1];\
	}\
	var statusValue = 2;\
	setSelectOptionSelected( 'issue_assigned_to_id', userId );\
	setSelectOptionSelected( 'issue_status_id', statusValue );\
	$('issue-form').submit();\
}\
function setSelectOptionSelected( SelId, Value )\
{\
	var sel = $( SelId );\
	$A( sel.options ).find( function( option, index ) {\
	   if( option.value == Value ) {\
			sel.selectedIndex = index;\
	   }\
	});\
}\
</script>";

document.getElementById('content').appendChild(tt);

// ==UserScript==

// @name Redmine Ticket

// @namespace hc

// @include [урл к Redmine]/issues/*

// ==/UserScript==

var tt = document.createElement('DIV');

tt.innerHTML = "<script>\

var linkInWork = '<a href=\"javascript:void(0);\" onclick=\"setInWork(); return false;\" class=\"icon\">In work</a>';\

$A( $$( '#content .contextual a.icon-del' ) ).each( function( Elem ) {\

Elem.insert( {'after': linkInWork} );\

});\

function setInWork()\

var t = $('loggedas').innerHTML;\

var userId = /\\/users\\/([0-9]*)/.exec(t);\

if ( userId !== null ) {\

userId = userId[1];\

var statusValue = 2;\

setSelectOptionSelected( 'issue_assigned_to_id', userId );\

setSelectOptionSelected( 'issue_status_id', statusValue );\

$('issue-form').submit();\

function setSelectOptionSelected( SelId, Value )\

var sel = $( SelId );\

$A( sel.options ).find( function( option, index ) {\

if( option.value == Value ) {\

sel.selectedIndex = index;\

});\

</script>";

document.getElementById('content').appendChild(tt);

Добавляет ссылки «In work» в список ссылок вверху и внизу страницы.

Как написать плагин для jQuery

Перепечатка статьи, ссылка на оригинал в конце статьи. За последнее время было много просьб рассказать о том, как написать свой собственный плагин к jQuery. Идя навстречу пожеланиям трудящихся бескрайних полей Интернета – выполняю эти просьбы… Для того, чтобы лучше понять принципы, поставим себе какую-нибудь несложную задачу, имеющую хотя бы минимальную практическую пользу. Давайте вместе напишем …

Увеличиваем скорость загрузки сайта используя lazy-load изображений

http://habrahabr.ru/blogs/client_side_optimization/87083/

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

$parentElem = $( '#myComment' ).parents( '.specialClass' );

1	$parentElem = $( '#myComment' ).parents( '.specialClass' );

Найти ближайший предыдущий элемент с заданным классом в jQuery

UPD: Речь про элементы- «братья» текущего. Чтобы выбрать ближайший предыдущий камент, имеющий класс specialClass:

$prevSpecial= $( '#myComment' ).prevAll( '.specialClass:first' );

1	$prevSpecial= $( '#myComment' ).prevAll( '.specialClass:first' );

SWFObject — для размещения flash-объектов на странице

Отличная библиотечка, про которую все конечно знают. Предназначена для размещения flash-объектов на странице при помощи javascript или улучшить javascript’ом отображение размещённого с помощью html-тегов flash-контента. страничка на Google-code документация на русском

Основы ООП на Javascript

Объект представляет собой экземпляр класса. Javascript — это объектно-ориентированный язык, но в нём нет классов, а вместо наследования на основе классов используется наследование на основе прототипов.

Вычисление посещённых ссылок пользователя с помощью Javascript и DOM Level 2

Для этого нам нужен метод объекта window — getComputedStyle. В ИЕ как всегда всё непросто — у него есть свойство currentStyle элемента.