Шпоры по JS
← Назад в записки веб-программиста
Шпоры по JS
Мой набор 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 } );