Введение jQuery http jquery page2page ru index php5 D0 92 D0 B2 D0 B5

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/* ========= Введение в jQuery ========= */
//http://jquery.page2page.ru/index.php5/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_jQuery
/* ========= Селекторы ========= */
// http://jquery.page2page.ru/index.php5/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B
// Селекторы
$('#id') // обращение по идентификатору
$('.class') // обращение по классу
$('div') // обращение по тегу
$('.active *') // обращение ко всем элементам в классе active
$('h2, span').css('border', '1px solid #000'); // выделение сразу нескольких типов элементов
//..., короче все как в css
// Фильтры
$('p:first') // первый элемент
$('p:last') // последный элемент
$('p:eq(2)') // элемент под номером
$('*:not(h2,p)') // все элементы кроме h2 и p
$('li:odd') // четные элементы
$('li:even') // нечетные элементы
$('li:gt(2)') // элементы чей порядковый номер больше чем n
$('li:lt(2)') // элементы чей порядковый номер меньше чем n
$('*:header') // только те элементы которые являются заголовками
$('*:animated') // только те элементы которые задействованы в анимации
$('li:hidden') // скрытые элементы
$('li:visibile') // видимые элементы
$('li:lang(ru)') // фильтрация по языку
// фильтры по содержимиму
$('p:contains(далеко)') // содержит текст
$('p:empty').text('Любой текст') // пустой тег
$('h2:has(span)') // имеет внутри себя селектор
$('span:parent') // тег который имеет родителя, а ведь все имеют родителя, ???
// фильтры форм
$('input') // все поля input
$('input:button') // поле button - простая кнопка
$('input:radio') // радио-кнопка
$('input:checkbox') // чекбоксы
$('input:text') //текстовые поля для ввода
$('input:password') // поле для ввода пароля
$('input:file') // поле для загрузки файла
$('input:submit') // кнопка "Отправить"
$('input:reset') // кнопка "Сбросить"
$('input:image') // кнопка-картинка
$('input:focus') // выбранное поле (состояние фокус)
$('input:checked') // выбранный чекбокс или радио-кнопка
$('input:enabled') // доступное поле
$('input:disabled') // недоступное поле
/* ========= Работа с набором элементов ========= */
// Фильтрация набора
$("div").is(".lBlock") // проверяет, соответствует ли хотя бы один из выбранных элементов определенному условию
/* ========= События ========= */
// http://jquery.page2page.ru/index.php5/%D0%A1%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F
// DOM-дерево загружено и можно им манипулировать
jQuery(document).ready(function(){/*code*/});
$(document).ready(function(){/*code*/});
$(function(){/*code*/});
// События браузера и страницы
$(function(){/*code*/}); // готовность DOM элементов
$(window).load(function(){/*code*/}); // полная загрузка страницы, лучше не использовать
$(window).unload(function(){/*code*/}); // выход со страницы, лучше не использовать
$(window).resize(function(event){/*code*/}); // изменение размера (например, окна)
$(window).scroll(function(event){/*code*/}); // прокрутка элемента
// Базовые события
$('ul').on('click', 'li', function(){/*code*/}); // устанавливает обработчики событий на выбранные элементы страницы
$('ul').off('click', 'li'); // Удаляет с выбранных элементов страницы обработчики событий, установленные с помощью метода .on()
// События, связанные с мышью
$('button').click(function(event){/*code*/}); // клик мышью
$('button').dblclick(function(event){/*code*/}); // двойной клик мышью
$('ul li').mouseenter(function(event){/*code*/}); // наведение мыши на элемент
$('ul li').mousedown(function(event){/*code*/}); // момент нажатия мыши на элемент
$('ul li').mouseup(function(event){/*code*/}); // момент "отжатия" мыши на элемент
$('ul li').mouseover(function(event){/*code*/}); // мышь наезжает на площадь элемента
$('ul li').mouseout(function(event){/*code*/}); // мышь покидает площадь элемента
$('ul li').mousemove(function(event){/*code*/}); // движение мыши над элементом
// События клавиатуры
$('input').keydown(function(event){ console.log($(this).val()) }); // клавиша в нажатом состоянии
$('input').keyup(function(event){ console.log($(this).val()) }); // клавиша больше не в нажатом состоянии
$('input').keypress(function(event){ console.log(event.which) }); // ввод символа с клавиатуры, позволяют узнать коды символов и клавиш
/* ========= Манипуляции ========= */
// http://jquery.page2page.ru/index.php5/%D0%9C%D0%B0%D0%BD%D0%B8%D0%BF%D1%83%D0%BB%D1%8F%D1%86%D0%B8%D0%B8
//Работа с атрибутами и свойствами
var key = $(this).find('.key[data-key='55']');
key.addClass(''); // добавляет класс(ы) выбранным элементам страницы
key.removeClass(''); // удаляет заданные классы у элементов на странице
key.toggleClass(''); // добавляет или удаляет заданный класс(ы) по принципу переключателя (добавляет, если элемент не содержит класса, и удаляет, если класс есть)
key.attr("class"); // возвращает или изменяет значение атрибутов у выбранных элементов страницы.
key.val() // метод позволяет получать и изменять значения элементов форм.
//Работа с параметрами и стилями
$("div.content").offset() // возвратит координаты первого div-элемента с классом content, относительно начала страницы.
$("div.content").position() // возвратит координаты первого div-элемента с классом content, относительно ближайшего родителя с заданным позиционированием.
/* ========= Эффекты ========= */
//http://jquery.page2page.ru/index.php5/%D0%AD%D1%84%D1%84%D0%B5%D0%BA%D1%82%D1%8B
//Управление анимацией
$('html, body').animate({scrollTop: top}, 500); // выполняет заданную пользователем анимацию, с выбранными элементами. Анимация происходит за счет плавного изменения CSS-свойств у элементов.
//Стандартные анимации
$('div').show(), $('div').hide(); // мгновенно показывает/скрывает выбранные элементы, установив их css-свойство display в none, не изменяя при этом их прозрачность и размеры.