/ Scripts & jquery / Основы jquery

Основы jquery

HIT

16.06.2015

6047

Материалы касающиеся синтаксиса библиотеки jquery.

Памятка по JQuery
! Полезная статья
Еще одна полезная статья
И еще одна
Толковый сайт по JavaScript

Рекомендации по валидности jQuery:

  1. Пишем jQuery вместо $
  2. В атрибутах указываем одиночные кавычки
  3. Не забываем в конце ставить ;
  4. function(e), разобраться с этим моментом

Вызов простого alert для тестовых целей

alert( 'Привет, Мир!' );

$(document).ready — код начнёт выполняться сразу после того, как будет готов DOM, за исключением картинок.

$(window).load — код, написанный внутри такой конструкции, начнёт работу когда будет готов весь DOM включая изображения. 

Добавить / удалить класс объекта

<script type="text/javascript">
$('.object').addClass('animated fadeInRight');
$('.object').removeClass('summary');
</script>

Включение/отключение (при повторном нажатии)  класса

<script type="text/javascript">
$('#footer-open').click(function() {
$('#footer').toggleClass('open3'); 
});
</script>

Замена содержимого элемента

<div id="footer-open" >Открыть <i class="fa fa-arrow-up"></i></div>

<script type="text/javascript">
$("#footer-open").toggle(
function () {$("#footer-open").html('Закрыть <i class="fa fa-arrow-down"></i>');},
function () {$("#footer-open").html('Открыть <i class="fa fa-arrow-up"></i>');}
);
</script>
Если заменить .html на .text, то любое содержание будет передаваться в виде текста

Очистить содержимое блока

$(".slidesjs-next.slidesjs-navigation, .slidesjs-previous.slidesjs-navigation").empty();

Вставляем элемент в указанное место
В примере (LIVE) ниже: после img (изображения) находящегося в div class=img-zoom добавить span с иконкой

$('.img-zoom img').after(function() {
return '<span><i class="fa fa-arrows"></i></span>';
});

Вставка содержимого внутрь элемента. В примере ниже: 1. если класс один из прописанных, то внутрь помещается div=label 2. если класс такой-то, то внутрь помещается p.

Приведенный скрипт работает в тандеме, т.е. 1 создает контейнер, а второй наполняет его.

Разница между .prepend и .append, первый вставляет вначале существующего содержимого, второй — в конце.
$('.tag-new, .tag-sale, .tag-hit').prepend('<div class="label"></div>');
$('.tag-new .label').append('<p class="new">NEW</p>');

Удаление элемента, удаление атрибута элемента

$('.mslink').remove();
$(".newsBlock").removeAttr("title")

Временной интервал для какой либо функции

setTimeout(function () {  // Ваш скрипт  }, 1000);

setTimeout срабатывает один раз в отличие от setInterval. Чтобы повторить setTimeout можно сделать так:

setTimeout(function run() {
	jQuery('#banner1').addClass('banner-visible'); 
	setTimeout(function () { jQuery('#banner1').removeClass('banner-visible'); }, 10000);

	setTimeout(run, 15000);
}, 5000);

Данная функция будет показывать/скрывать баннер, и снова повторять действие.

Скорость эффекта функции

$('.hentry').show(200);

Выборка элементов

Здесь подробно описаны селекторы и фильтры jquery

Выберутся все элементы с классом .hentry, кроме элементов с классом .tag-remix

$('.hentry:not(.tag-remix)')

выберутся все элементы с классом .hentry, кроме элементов которые содержат внутри элементы с классом .tag-remix

$('.hentry:not(:has(.tag-remix))')

Находим все ссылки содержащие в себе img, ищем только в границах элемента с классом area
Метод wrap оборачивает выбранные элементы в прописанный тег

$(".area").find('a:has(img)').wrap( "<div class='img-zoom'></div>" );

Обратная функция — unwrap
Предположим у нас есть элементы span в области hovergallery и нам нужно «очистить» их от лишних тегов p

$(".hovergallery p span").unwrap();

Также существуют функции:
.wrapAll / .unwrapAll — обертывание всех элементов. !Особенность в том, что скрипт при объединении перемещает элементы.
.wrapInner / .unwrapInner — обертывание элементов по отдельности внутри.

Примеры:

$('h2.woocommerce-loop-product__title, .woocommerce-product-details__short-description').unwrapALL('<div> </div>');

$('h2.woocommerce-loop-product__title, .woocommerce-product-details__short-description').unwrapInner('<div> </div>');

Текущий элемент — элемент на который мы непосредственно оказываем действие в данный момент времени

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

$('#tag-list div').click(function() {
	$('#tag-list div').css({ 'background-color': "rgb(12, 48, 75)" }) 
	$(this).css({ 'background-color': "rgb(0, 127, 80)" })  
}); 

При нажатии на элемент, кроме текущего сделать действие

$('#tag-list div').not(this).click(function() {  
	$('.hentry').show();
});

При наведении на элемент действие оказывается на тег содержащийся внутри текущего элемента

$('.img-zoom').mouseover(function() {$(this).find('span').show(); });
$('.img-zoom').mouseout(function() {$('.img-zoom span').hide(); });

Родители-потомки

Спрятать div в котором содержится класс hentry (но кроме тех у которых также содержится класс tag-landing)

$('.hentry:not(.tag-landing)').parent('div').hide();

Спрятать div который содержится в элементе с класс hentry (но кроме элементов у которых также содержится класс tag-landing)

$('.hentry').not('.tag-woocommerce').children('div').hide();
Здесь также продемонстрировано 2 различных метода исключения элементов селектором :not(.tag-landing) и функцией .not(‘.tag-woocommerce’), или можно еще так: $( «p» ).not( $( «div p.selected» ) ); или так, с порядковым номером: $( «p» ).not( $( «#selected» )[ 0 ] );

Цикл jquery (+ переменная)

Предположим у нас есть несколько элементов с классом telbox (убедитесь что элементы в DOM располагаются по порядку!). Изначально все элементы .telbox скрыты, кроме первого.
Также у нас есть кнопка .plus-bt при нажатии на которую должен появляться каждый следующий элемент .telbox.
Здесь основную функцию выполняет переменная num.

$(document).ready(function($){
	var num=1;
	$(".plus-bt").click(function(){
		$(".telbox").eq(num).show(); // действие над текущим элементом
		num++;// увеличиваем переменную на 1 
	});
});
Подробнее изучить переменные

Переменные созданные в функции существуют только в пределах этой функции, в другой функции можно создавать переменные с теми же названиями.
Переменные назначаются так (paramsString — название переменной): var paramsString = location.search;
В alert переменные вставляются без кавычек: alert( paramsString );

Ссылки

Селектор ссылки с атрибутом href — a[href]
Cелектор ссылки с хэшем — a[href*=#]
Cелектор ссылки с rel=»gallery» — a[rel=gallery]

Находим все ссылки без хэша и без класса fancybox

$("a[href]").not("a[href*=#], a.fancybox")

События для обновленных ajax’ом элементов

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

$(document).ready(function () {
	$("body").on("click", ".remove-button", function () {
		$(this).parent().remove(); //любая функция
	});
});

Ключевым элементом метода является селектор body, к которому мы привязываем событие.

События

$(document).ready(function() { Функция }); — стандартное событие по окончании загрузки страницы.
$(document).ajaxComplete(function() { Функция }); — событие после срабатывания ajax
$(document).bind(‘ready ajaxComplete’, function(){ Функция }); — событие и по загрузке страницы и по срабатыванию ajax

.trigger

Триггер — это специальный обработчик, который запускается не пользователем, а наступлением определенного события или действием. В jQuery триггеры прикрепляются к селектору и запускают функцию.

Например, .click () — это событие, прикрепленное к селектору. И так же вызывает функцию.
Вот только .click () начнет выполнение только при клике, а триггер выполнится и будет ждать только своего запуска определенным событием. Например, тем же click.

Для работы с тригеррами в jQuery имеются следующие функции:
.bind ( eventType, {eventData}, handler (eventObject) ) — добавляет обработчик событий;
.one ( eventType, {eventData}, handler (eventObject) ) — добавляет обработчик событий, который сработает лишь раз;
.unbind ( eventType, handler (eventObject) ) — удаляет все обработчики событий с элемента;
.trigger ( eventType, [extraParameters] ) — вызывает обработчики событий;
.triggerHandler ( eventType, [extraParameters] ) — вызывает обработчики событий, без вызова события браузера.

Читать подробнее про триггеры.

Меняем атрибуты объекта

У различных тегов есть разные наборы атрибутов, например у изображения src, title, alt, у ссылки href, также можно использовать любые пользовательские атрибуты, например: data-original.

С помощью java script можно легко манипулировать данными атрибутами.

Заменить атрибут ссылки при нажатии на нее

$('#filter-clear').click(function() {
	$(this).attr('href', '#ссылка'); 
});

Тоже самое только с переменной

var x = location.origin; 
 
$('#filter-clear').click(function() {
	$(this).attr('href', x); 
});
// Открывать pdf в отдельной вкладке
$(document).ready(function(){
    $('a[href*=".pdf"]').attr('target', '_blank');
});

Условия

Варианты условий:

var emptyElement = $('#test').is(':empty');
if (emptyElement == true) {
    alert('Элемент пустой!');
}
$('*').each(function() {
    if ($(this).text() == "") {
        $(this).css('border', 'solid 3px green');
    }
});

Проверка фокуса на поле

$(document).ready(function() {
		
	$("#area_input").focus(function() {
		$('#discount').hide('slow');       
		//return false;
	});

	$('#area_input').blur(function(){
		if( !$(this).val() ) { // если поле не заполнено
			$('#discount').show('slow');
		}
	});
		
});

При фокусе скрываем div#discount. Если поле заполняется, то div больше не появится, но если поле не заполнено и фокус с него убран, то div появится снова. Если нужно чтобы div скрывался при фокусе в не зависимости от заполненности нужно убрать проверку (!$(this).val()).

Данную проверка и метод применимы в мобильной версии. При фокусе на поле происходит уменьшение экрана по вертикали за счет появления клавиатуры и некоторые блоки (например с position:absolute) могут некрасиво появляться на экране. А данным методом их можно скрывать в момент заполнения.

Отладка скриптов в браузере на лету

В браузере можно исполнять скрипты онлайн. Просто вводим команду jQuery во вкладке Console (Chrome, DevTools).

Информация передающаяся функциям внутри

Во многих плагинах есть события (event) к которым можно привязать дополнительные функции (callback) и при этом в них передается ряд параметров, которые могут пригодится внутри этих функций. Пример: owl.carousel.js. Каждое событие передает полезную информацию внутри объекта события:

$('.owl-carousel').owlCarousel({
    onDragged: callback
});
function callback(event) {
    ...
}

Вот такие данные передаются в объекте event у owl.carousel.js:

function callback(event) {
    // Provided by the core
    var element   = event.target;         // DOM element, in this example .owl-carousel
    var name      = event.type;           // Name of the event, in this example dragged
    var namespace = event.namespace;      // Namespace of the event, in this example owl.carousel
    var items     = event.item.count;     // Number of items
    var item      = event.item.index;     // Position of the current item
    // Provided by the navigation plugin
    var pages     = event.page.count;     // Number of pages
    var page      = event.page.index;     // Position of the current page
    var size      = event.page.size;      // Number of items per page
}
[site-socialshare]
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Основы jquery
Особенности excerpt
Рекомендации для васОсобенности excerptOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.