/ Сайтостроение / Scripts & jquery / Основы jquery

Основы jquery

HIT

16.06.2015

2325

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

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

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

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

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

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

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

<script type="text/javascript">
$('объект').addClass('например: animated fadeInRight');
</script>

Удалить класс из объекта

<script type="text/javascript">
$('объект').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('
'); $('h2.woocommerce-loop-product__title, .woocommerce-product-details__short-description').unwrapInner('
');

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

В примере ниже при нажатии на элемент добавляем у всех подобных элементов 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);	
});

Условия

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

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

Поделится информацией с друзьями

  • Комментарии
  • Вложения

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

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

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