Наглядный пример
jQuery 1.9.1
page2page
jQuery UI
Tooltipster
Slick Js (get it now)
Вся работа с jQuery ведётся с помощью функции $. Можно использовать и полное название jQery.
$(…);
Главное научиться правильно обращаться к элементам (также как и в css), например:
$(‘.first’); — обращение к классу first
аналогичная инструкция на JavaScript:
document.getElementsByClassName(‘first’); — обращение к классу
document.getElementById(id); — обращение к id (#)
$(‘p’);
document.getElementsByTagName(‘p’); — аналог выборки тэгов ‘p’
Библиотеки скриптов можно подключить в конце тега <body>, первым из которых должен быть jQuery (только в том случае, если не используется обработчик события)
$(‘table tr:even’).css(‘background’, «red»); — окраска нечётных строчек в таблице красным цветом
$(document).ready(function(){}); — когда документ загрузится выполнить функцию
например:
$(document).ready(function(){
$(‘table tr:even’).css(‘background’, «red»);
}); — только в этом случае скрипты можно подключить в заголовке, таким образом отработает скрипт по окраске нечётных строк нашей таблицы
$(‘.btn-slide’).click(function(){
$(‘.panel’).hide();
}); — скроет панель с классом .panel при клике на кнопку с классом .btn-slide
var panel = $(‘.panel’); — создание объекта panel из класса .panel
$(‘.btn-slide’).click(function(){
if(panel.is(‘:hidden’)){ — если панель скрыта
panel.show(); — показать её
} else { — в любом другом случае
panel.hide(); — скрыть панель
}
});
пример с классом из нескольких элементов:
$(‘.set a’).click(function(){ — событие клика на класс set элемент а
if($(this).hasClass(‘active’)) { — если один из элементов выбран и он активен, тогда выполнить следующие команды
$(this).removeClass(‘active’); — удаляем класс active
$(this).siblings(‘.content’).show(); — показываем родственный класс content (который лежит на том же уровне)
} else{ — в другом случае
$(‘.set a’).removeClass(‘active’); — удаляем все классы active
$(this).addClass(‘active’); — добавляем класс active тому элементу который выбран в данный момент (по которому был произведен клик)
$(‘.content’).hide(); — прячем весь класс content
$(this).siblings(‘.content’).show(); — показываем только тот класс content по которому был клик
}
});