Шпаргалка Jquery

grigoriev
1058

Подгрузка скрипта только после загрузки документа

$(document).ready(function(){
  //здесь будут наши скрипты 
});
//ИЛИ
$(function(){
  //наши скрипты
});

Важно: если выбрать с помощью JQ объект на странице которого нет( ну например тег a) то JQ не возвратит ошибку. Для jq объект будет, но длина коллекции объекта будет 0 (length 0). Для проверки наличия элемента следует делать так: var x = $('a') if(x.length>0)

Идентификаторы и классы Jquery

$('#mydiv') получим элемент с id #mydiv
$('.mydiv') получим элемент с классом #mydiv
$('div')получим все дивы
$('div.mydiv')получим все элементы с классом mydiv

Иерархия элементов Jquery

$('div h1') все h1 внутри div
$('div').find('h1') все h1 внутри div
$('div > h1') все h1 внутри div, где h1 потомок div
$('div, h1') все div и h1
$('h1 + img') все картинки после h1
$('#mydiv').prev() элемент, который стоит перед элем. с ид mydiv
$('#mydiv').next()элемент, который стоит после элем. с ид mydiv
$('*')все элементы на странице
$('span > *')все элементы на странице которые потомки span
$('span').children() все потомки span
$('span').parent() все предки span
$('span').parents() все предки span
$('span').parents('a') все предки span, которые a

Фильтрация элементов Jquery

$('a:first') первая ссылка
$('a:last') последняя ссылка
$('div:not(.mydiv)') див без класса mydiv
$('a:even') четнные ссылки
$('а:odd') нечетные ссылки
$('a:eq(4)') ссылка по счёту 4
$('a:gt(4)') ссылка с индексом больше 4
$('a:lt(4)') ссылка с индексом меньше 4
$(':header')получим все заголовки документа
$('div:contains("мой текст")')вернёт див с текстом "мой текст"
$('div:empty')получим пустые дивы
$('div:has(a)')див содержащий ссылки
$('span').filter('.myclass')спан содержащий класс myclass
$('div:hidden')получим скрытые дивы
$('div:visible')полчим видимые дивы
$("div[style]") все блоки с атрибутом style
$("div[title = 'abc']") все блоки с атрибутом title "abc"
$("div[title != 'abc']") все блоки с атрибутом title без "abc"
$("div[title ^= 'ab']")блоки с атрибутом title который начинается с "ab"
$("div[title $= 'bc']")блоки с атрибутом title который заканчивается на "bc"
$("div[title *= 'xz']")блоки с атрибутом title в котором есть "xz"

Работа с формами

$(":text")инпуты с атрибутом тип text
$(":radio")инпуты с атрибутом тип text radio
$("input:enabled")включенные инпуты
$("input:checked")выбранные чекбоксы
$("form select option:selected")активные блоки select
$("form :radio[name=abc]:checked").val()выбираем активный радибютон с значением abc и получаем его значение
$("form :checkbox:checked")выбираем все активные чекбоксы

Стили Jquery

myelem.css({'background': red, 'border': '1px solid #000'})задаём элем. стиль
myelem.addClass('myclass')К элементу добавит myclass
if(myelem.hasClass('myclass'))Проверяет существует ли myclass
myelem.removeClass('myclass')Удаляет myclass
myelem.toggleClass('myclass') Создаёт если существует, если нет то удаляет
myelem.attr('class', 'myclass')У элемента создаётся атрибут myclass
myelem.removeAttr('myclass')Удаляет атрибут myclass
myelem.html("Мой текст")вставляет в елемент текст или html код
alert(myelem.html())выводит в аллерт значение элемента
alert($('input').val())выводит в аллерт значение элемента формы
myelem.after("<div>мой блок</div>")добавит перед элементом див с текстом мой блок
myelem.before("<div>мой блок</div>")добавит после элемента див с текстом мой блок
myelem.append("<div>мой блок</div>")добавить в начало иерархии
myelem.prepend("<div>мой блок</div>")
myelem.wrap("<div>мой блок</div>")оборачиваем элем. в тег
myelem.empty()очищаем значение элем.
elem.remove()удаляем значение элем.

Расположение элементов

offset() или offset().top, offset().left возвращает положение дом элемента в документе, данные выводятся как объект: { top: 20, left: 20 } или только top и left
offset({ top: 20, left: 20 }) задаёт положение элемента дом по заданным координатам

«Прокрутка» элементов

scrollLeft()вернёт значение «прокрученности» по горизонтали первого выбранного элем.
scrollLeft(val)задаёт величину горизонтальной прокрутки для каждого заданного элемента
scrollTop()вернёт значение «прокрученности» по вертикали первого выбранного элем.
scrollTop(val)задаёт величину вертикальной прокрутки для каждого заданного элемента

Работа с массивами и циклами

size()показывает число элементов в выборке
$().each()выводит цикл

Пример

/*вывод кол-ва элементов в обёрнутом наборе*/
alert($('.topmenu a').size());
$('.topmenu a').each(function(){
/*перебор всех элементов 'a' в меню по очереди и вывод их высоты*/
alert($(this).css('height'));
/*вывод по очереди текста из теге Li*/
alert($(this).html());
});

События Jquery

События мыши

.click() отслеживает clik по элементу или запускает это действие
.dblclick() отслеживает двойной click по элементу или запускает это действие
.hover() отслеживает наведения или уход курсора с элемента
.mousedown() отслеживает нажатия клавиши мышки или запускает это действие
.mouseup() отслеживает поднятия клавиши мышки или запускает это действие
.mouseenter() отслеживает появления курсора в области элемента или запускает это действие
.mouseleave() отслеживает ухода курсора из области элемента или запускает это действие.
.mousemove() отслеживает передвижения курсора в области элемента или запускает это действие
.mouseout() отслеживает выход курсора из области элемента или запускает это действие
.mouseover() отслеживает появления курсора в области элемента или запускает это действие
.toggle() Поочереди исполняет одну из двух или более установленных функций при click по элементу

Действия клавиатуры

.keydown() отслеживает переход клавиши клавиатуры в нажатое состояние или запускает это действие
.keyup() отслеживает возвращение клавиши клавиатуры в отнажатое состояние или запускает это действие
.keypress() отслеживает ввод символа с клавиатуры или запускает это действие

События формы

.focus() Задаётся обработчик получения фокуса или запусикает это событие
.blur() Задаётся обработчик потери фокуса или запускает это событие
.focusin() Задаётся обработчик получения фокуса самим элементом или одним из его дочерних
.focusout() Задаётся обработчик потери фокуса самим элементом или одним из его дочерних
.select() Задаётся обработчик выделения текста или запускает это событие
.submit() Задаётся обработчик отсылки формы или запускает это событие
.change() Задаётсяа обработчик изменения элемента формы или запускает это событие

События загрузки страницы

.ready() отслеживает готовность дерева дом
.load() отслеживает завершение загрузки элемента
.unload() Задаётся обработчик выхода со страницы.

События браузера

.error() выдаёт ошибку при загрузке элемента, если тот отсутствует
.resize() отслеживает изменения размеров окна браузера или запускает это действие
.scroll() отслеживает "проскроленность" элементов документа или запускает это действие
$('li').click(function(event){
 console.log(this);
});
//делает див box то видимым то невидимым
//при нажатии на див button
$('#button').click(function(){
 $('#box').toggle();
});

Важно: console.log(this) возвратит DOM элемент тега li и мы не сможем к нему обратиться через jquery. Для того что бы нам возвращался элемент не DOM а JQ нужно писать console.log($(this))

Отмена действий

//Действия по умолчанию
$('a').on('click', function(event){
  event.preventDefault();
//для отмены перехода по ссылке раскоментир.
//console.log();
});

//Всплытия пузырька
$('*').on('click', function(event){
  event.stopPropagation();
});

Анимация Jquery

show( ) показывает выбранный блок
hide( ) скрывает выбранный блок
toggle( ) переключение между show/hide
slideDown( speed, callback ) выдвигает блок вниз тоесть увеличивает высоту от 0 до 100%
slideUp( speed, callback ) задвигает блок вверх тоесть уменьшает высоту от 100% до 0
slideToggle( speed, callback ) переключение между slideDown/slideUp
fadeIn( speed, callback ) показывает блок за счёт изменения прозрачности
fadeOut( speed, callback ) скрывает блок за счёт изменения прозрачности
fadeTo( speed, opacity, callback ) изменяет прозрачность блока до заданного значения
fadeToggle( speed, callback ) переключение между fadeIn/fadeOut
//animate( properties, [ duration ], [ easing ], [ callback ] )
$("#buttonAppend").click(function(){
        //$("li").hide();
        //$("li").toggle();
        //$("li").animate({opacity: 0.5, height: '+=50'}, 3000);
        $("li").animate({opacity: 0.5}, 1000).animate({height: '+=50'}, 1000);
});

$("#buttonSlideDown").click(function(elem){
        //$("select").slideDown(5000);
        $("li").fadeIn(5000);
});

$("#buttonSlideUp").click(function(elem){
        //$("select").slideUp(5000);
        $("li").fadeOut(5000);
});
        

Пример анимации Jquery

посмотреть click css
DEMO

Поделиться: