Событие on

$(‘#селектор’).on(‘событие мыши’, селектор, данные(литерал объекта), имя функции);

var linkVar = {message: 'linkVar text'};
var pVar = {message: 'pVar text'};

function showMessage (evt) {
 alert(evt.data.message);
}

$('a').on('mouseover', linkVar, showMessage);
$('p').on('click', pVar, showMessage);

//несколько имен событий
$(document).on('click keypress', function() {
    $('#lightbox').hide();
});

//передача объектной константы
$('#theElement').on({
    'click' : function() {
        //some action
    },
    'mouseover' : function() {
        //some action
    }
});

 Делегирование событий

$('ul').on('click', 'li', function() {
    $(this).css('color' : 'red'); // this - li
});

 

 

События мыши

События мыши

click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove

События документа/окна

load, resize, scroll, unload

События форм

submit, reset, change, focus, blur

События клавиатуры

keypress, keydown, keyup

Использование событий

$('a').click(function() {});

 Ожидание загрузки HTML-кода

$(function() {})// сокращенная запись
$(document).ready(function() {})

ready() – ожидание загрузки HTML-кода, без ожидания загрузки изображений и роликов

альтернатива – размещение скрипта перед закрывающим тегом body.(загрузка и запуск кода замедлит браузер до тех пор, пока сценарий не загрузится и не прекратит выполняться) – минус – модификация HTML по мере прогрузки скриптов, и если приложение не работает без js.

События наведения и смещения указателя мыши

$('#селектор').hover(функция1, функция2);

$('menu').hover(function(){
    $('submenu').show();
},//окончание события mouseover
    function() {
    $('submenu').hide();
}//окончание события mouseout
);//окончание события hover

 Объект события

Во время запуска события браузер записывает информацию о нем и сохраняет его в так называемом объекте события. Объект события содержит данные, собранные в момент, когда произошло событие, такие, как координаты указателя мыши по горизонтали и вертикали, элемент, который инициировал событие, была ли нажата при запуске события клавиша Shift.

$(document).click(function(evt) {
    var xPos = evt.pageX;
    var yPos = evt.pageY;
    alert('X: ' + xPos + ' Y: ' + yPos);
}); //конец события click

В каждом браузере могут быть разные свойства, общие: pageX, pageY, screenX, screenY, shiftKey, which (используется с событием нажатия клавиши для определения числового кода нажатой клавиши. Можно узнать клавишу преобразовав с помощью метода String.fromCharCode(evt.which); ), target, data.

Отмена обычного поведения событий

$('#menu').click(function(evt) {
    //some code
evt.preventDefault(); // не переходи по ссылке

// другой вариант
return false;
});

Удаление событий

$('a').mouseover(function(){
    //some action
});

$('#disable').click(function() {
    $('a').off('mouseover') // удаляет событие mouseover, или все события, если не передать аргументы
});

Остановка события (всплытие события)

Каждый из элементов-предков так же может реагировать на событие дочернего элемента.

$('#thelink').click(function(evt) {
    //some action
    evt.stopPropagation(); // останавливает событие
});

 

 

Селекторы

Селекторы
http://api.jquery.com/category/selectors/

$('#id');
$('.class');

$('#id .class');
$('parent > child');
$('tag + tag');
$('tag[attribute]');
$('tag[attribute="value"]');
$('tag[attribute^="value"]');
$('tag[attribute*="value"]');
$('tag[attribute&="value"]');

$('tag:even'); возвращает 0-2-4 элементы выборки
$('tag:odd'); возвращает 1-3-5 элементы выборки

$('tag:first');
$('tag:last');

$('tag:not(element)'); без класса element
$('tag:has(element)'); выбирает tag имеющий element
$('tag:contains(content)');

$('tag:hidden'); если не установлен visibility: invisible;
$('tag:visible');


Выборка элементов jQuery отличается от традиционной выборки getElementByTagName() или getElementById() и не понимает традиционных методов объектной модели.

Автоматические циклы

$(‘#slideshow img’).hide(); – автоматически пройдет по всем элементам выборки и к каждому из них применит функцию .hide();

Связывание функций

$('#popUp').width(300)
    .height(300)
    .text('Hi!')
    .fadeIn(1000);

Добавление содержимого на страницу

.html() –  считывает существующий HTML код только внутри первого элемента, а так же замещает текущее содержимое, но во всех элементах выборки другим HTML-кодом.

.text() – похожа на работу функции html, но не принимает HTML элементы.

.append() – добавляет HTML-код в качестве последнего дочернего элемента выбранного элемента.

.prepend() -добавляет HTML-код в качестве первого дочернего элемента выбранного элемента.

.before()

Замена и удаление выборок

.remove() – удаляет выборку

.replaceWith(value) – заменяет выборку на value

.clone() – создает клон

Установка и чтение атрибутов элемента

addClass(‘class-name’) – добавляет класс

removeClass(‘class-name’) – удаляет класс

toggleClass(‘class-name’) – добавляет или удаляет класс

Чтение и изменение свойств CSS

определение текущего значения свойства

var bgColor = $('#main').css('background-color');

$('body').css('font-size' : '200%'); // числовое знач. второго аргумента jQuery переведет в пиксели .css('padding', 100)

var baseFont = $('body').css('font-size');
baseFont = parseInt(baseFont); // вернет значение + px
$('body').css('font-size', baseFont * 2);


jQuery возвращает все цвета в rgb или rgba если есть прозрачность. Всегда все значения в пикселях.

Литерал объекта (объектная константа) – список пар свойств / значение

.css({
    'font-size' : '5em',
    'color' : 'red'
});

Чтение, установка и удаление атрибутов HTML.

.attr(); .removeAttr()

var imageFile = $('#banner img').attr('src','new/image/path');

 Работа с каждым элементом выборки

.each(function() {});

Ключевые слова this и $(this)

$(this) jQuery версия традиционному this – относится к элементу вызывающему анонимную функцию

$('a[href^=http://]').each(function(){
    var extLink = $(this).attr('href');
});