Материалы касающиеся синтаксиса библиотеки jquery.
Памятка по JQuery
! Полезная статья
Еще одна полезная статья
И еще одна
Толковый сайт по JavaScript
Рекомендации по валидности jQuery:
- Пишем jQuery вместо $
- В атрибутах указываем одиночные кавычки
- Не забываем в конце ставить ;
- 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>
Очистить содержимое блока
$(".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 создает контейнер, а второй наполняет его.
$('.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();
Цикл 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]