Шпоры по JS

js jquery объекты js json js substr js setTimeout setInterval ajax клик вне блока js delegate hover click

Мой набор js\jquery функций, трюков и хитростей, собранных за период программирования в вебе. Собрал их в одной заметке с целью копирования, когда лень набирать код руками. Больше штучек на js\jquery можете найти в разделе JS\JQUERY в заметках веб-программиста. Пользуйтесь, изучайте и делитесь.

JS----------------------------------------------------------------------

Переводим объект данных в json-формат:


	var user_params = {};	//создаем объект
	user_params['login'] = 'login';	//помещаем значения
	user_params['pass'] = 'password';	//помещаем значения
	var user_params_string = JSON.stringify(user_params);	//в переменной json строка данных
	console.info(user_params_string);

Достаем данные из объекта:


	var user_params = {};	//создаем объект
	user_params['login'] = 'login';	//помещаем значения
	user_params['pass'] = 'password';	//помещаем значения
	//достаем данные:
	$.each(user_params,function(key){	
		console.info(user_params[key]);
	});

Отменяем сабмит формы при нажатии enter на активном инпуте:


	$('input').keypress(function (event) {	
		if (event.which == '13') {	//нажат enter
			event.preventDefault();
		}
	})

Замена подстроки в строке(подобие str_replace() в php):


	var str = str.replace("http://", "");

Удаление подстроки(подобие substr() в php):


	str = str.substr(1,2);	//удаляем 2 и 3 символы в строке(пропускаем 1ый символ)

Ставим таймаут в полсекунды:


	setTimeout(function(){
		//процедура
	},500);

Ставим интервал для процедуры в полсекунды:


	setInterval(function(){
		//процедура
	},500);

JQUERY----------------------------------------------------------------------

jQuery - документ загрузился, можно работать с элементами документа:


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

Стандартный аякс запрос с установкой параметров:


	$.ajax({   
		url: '/parameters.php',		//обрабатываем файл на сервере
		type: 'POST',	//методом пост
		dataType: 'html',	//на выходе хтмл
		data: {
			ajax:'ajx'	//передаем данные
		}, 
		success: function(response){ 	//результат
			console.info(response);		
		} 
	});

Скрываем блок, если кликнули вне его области:


	$('body').live('click',function(event){	//клик на общий родительский блок
		if ($(event.target).closest(".thisblock").length) return;//блоки, при нажатии на которые, не скрывать наш блок
		$(".thisblock").hide();	//иначе скрываем его
		event.stopPropagation();	
	});

Размещаем блок по центру экрана, установив его желательно сразу после <body>:


	$.fn.centered_popup = function() {
		this.css('position', 'absolute');
		this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px');	//рассчитываем отступы сверху
		this.css('left', ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px');	//рассчитываем отступы слева
	} 
	//применение: $('наш блок').centered_popup();

Возвращает true, если блок присутствует в документе:


	$('блок').val().length

Подтверждение клика по ссылке(обычно использую для удаления чего-либо):


	$('a').click(function(){
		if (confirm("Вы уверены, что хотите перейти по ссылке(удалить,покинуть и тд.)?")) {
			location.href=$(this).attr('href');
		} else {
			return false;
		}
	});

Работа с новыми элементами в документе. обычный click() не сработает. клик на новые элементы, появившиеся после загрузки страницы(body-родительский элемент,.block - новый элемент):


	$('body').delegate('.block','click',function(){
		//процедура после клика на новый элемент
	});

.hover() принимает 2 функции:


	$('header').hover(
		function(){
			// наведение на header
		},
		function(){
			// курсор покинул область header
		}
	);