Шпаргалка Jquery

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

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

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

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

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

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

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

Стили Jquery

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

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

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

Пример

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

События Jquery

События мыши

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

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

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

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

$('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

//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

DEMO