Алексей Бережной — «jQuery»
Upcoming SlideShare
Loading in...5
×
 

Алексей Бережной — «jQuery»

on

  • 7,087 views

 

Statistics

Views

Total Views
7,087
Views on SlideShare
1,030
Embed Views
6,057

Actions

Likes
1
Downloads
11
Comments
0

7 Embeds 6,057

http://events.yandex.ru 4110
http://tech.yandex.ru 1824
https://tech.yandex.ru 117
http://events.lynx.yandex.ru 3
http://events.yandex.ru. 1
http://localhost 1
http://news.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Алексей Бережной — «jQuery» Алексей Бережной — «jQuery» Presentation Transcript

  • ШРИ: jQueryАлексей Бережнойразработчик интерфейсов
  • jQuery 1.0 – 2006 год3
  • Спустя 6 лет и ~44 версий4
  • 5 clck.ru/2WaK4
  • 6
  • Для чего нужен jQuery •  Работа с DOM •  AJAX •  События7
  • Работа с DOM $(‘.b-page .b-block’).eq(2).addClass(‘b-block_mode_blue’);! ! ! $(‘.b-block’).find(‘.b-block2’).hide();! ! ! $(‘.b-text-block’).text(‘hello world!’).css(‘color’, ‘red’);! ! ! $(‘.b-block’).add(‘.b-block2’).html(‘<b>Bold</b>’);! ! !8
  • Работа с DOM $(<h1/>, {! style: text-align: center,! html: $(<span/>, {! style: color: red,! html: Я })})! .append( в ШРИ)! .prependTo(body);!9
  • AJAX $.ajax({! !type: POST,! !dataType: json,! !url: /registered/main.pl,! !data: {! ! !name: ’Aleksey Berezhnoy’,! ! !company: ’Yandex’,! ! !position: ’UI developer’! !},! !success: function(data){! ! !console.log(’request success’);! !},! !error: function(e){! ! !console.log(’Outch!’);! !}! }!10
  • События $(‘.b-alert-button’).click(function(){! !alert(‘button pressed’);! });! ! ! $(window).resize(function(){! !console.log($(this).width(), $(this).height());! });! ! ! $(‘*’).hover(showHideBeautifulTooltip);! ! ! $(‘.b-input’).on(‘blur change’, validateInputValue);!11
  • jQuery API api.jquery.com 12 jqapi.ru
  • 13
  • Селекторы •  Базовые •  Иерархия •  Базовые фильтры •  Фильтры по содержимому •  Фильтры видимости •  Фильтры потомков •  Фильтры атрибутов •  Фильтры элементов формы14
  • Базовые •  #id •  element •  .class, .class.class •  * •  selector1, selector215
  • Иерархия •  ancestor descendant •  parent > child •  prev + next •  prev ~ siblings16
  • Базовые фильтры •  :eq(index) •  :first •  :gt(index) •  :last •  :lt(index) •  :not(selector) •  :header •  :even •  :animated •  :odd •  :focus17
  • Фильтры по содержимому •  :contains(text) •  :empty •  :has(selector) •  :parent18
  • Фильтры видимости •  :hidden •  :visible19
  • Фильтры потомков •  :nth-child(expr) •  :first-child •  :last-child •  :only-child20
  • Фильтры атрибутов •  [attribute] •  [attribute=value] •  [attribute!=value] •  [attribute^=value] •  [attribute$=value] •  [attribute*=value] •  [attribute|=value] •  [attribute~=value] •  [attribute][attribute2]21
  • Фильтры элементов формы •  :input •  :text •  :password •  :radio •  :checkbox •  :submit •  :image •  :reset •  :button22 •  :file
  • Фильтры состояний элементов формы •  :enabled •  :disabled •  :checked •  :selected23
  • Не нужно писать сложные селекторы!24
  • Ядро •  jQuery( selector [ , context ] ) •  jQuery( html ) •  jQuery( callback )25
  • Ядро26
  • jQuery( selector [ , context ] ) $(‘div.foo’);! ! $(‘div.foo’, this); // ~ $(this).find(‘div.foo’)! !27
  • jQuery( html ) $(<p class=”b-block">My <em>new</em> text</p>)! !.appendTo(body);!28
  • jQuery( callback ) $(function(){! !// Document is ready! });!29
  • AJAX •  Низкоуровневый интерфейс •  Сокращения •  Глобальные обработчики ajax события •  Сериализация30
  • Низкоуровневый интерфейс •  jQuery.ajax( url, [settings] ) •  jQuery.ajaxSetup( settings )31
  • jQuery.ajax( url, [settings] ) $.ajax({! !url: ajax/test.html,! !success: function(data) {! ! !alert(Load was performed.);! !}! });!32
  • Сокращения •  $.load •  $.get •  $.getJSON •  $.getScript •  $.post33
  • Глобальные обработчики ajax события •  $.ajaxComplete •  $.ajaxError •  $.ajaxSend •  $.ajaxStart •  $.ajaxStop •  $.ajaxSuccess34
  • Сериализация <form>! !<input type=“text” name=“name” value=“Aleksey”/>! !<input type=“text” name=“surname” value=“Berezhnoy”/>! !<input type=“text” name=“position” value=“UI developer”/>! !<input type=“hidden” name=“key” value=“42”/>! </form>! ! ! {! !name: Aleksey,! !surname: Berezhnoy,! !position: UI developer,! !key: 42! }! ! ! "name=Aleksey&surname=Berezhnoy&position=UI+developer&key=42"!35
  • Сериализация •  $.serialize •  $.serializeArray •  $.param36
  • События •  Загрузка страницы •  Обработка событий •  Сокращения •  Объект события •  jQuery special events37
  • Загрузка страницы $(document).ready(function(){ /* ... */ });! ! $(function(){ /* ... */ });!38
  • Обработка событий •  $.bind / $.unbind •  $.one •  $.trigger •  $.triggerHandler •  $.live / $.die •  $.delegate / $.undelegate •  $.on / $.off39
  • Сокращения •  $.focus •  $.blur •  $.focusin •  $.change •  $.focusout •  $.click •  $.keydown •  $.dbclick •  $.keypress •  $.error •  $.keyup40
  • Сокращения •  $.mousedown •  $.load •  $.mouseup •  $.unload •  $.mouseenter •  $.resize •  $.mouseleave •  $.scroll •  $.mousemove •  $.select •  $.mouseout •  $.submit •  $.mouseover41
  • Объект события Нормализирует: •  target •  relatedTarget •  pageX •  pageY •  which •  metaKey var e = $.Event(‘keydown’, { keyCode: 64 });! ! $(‘body’).trigger( e );!42
  • jQuery special events Домашнее задание: Напишите плагин для jQuery, позволяющий добавить обработчик события на DOM- элемент, срабатывающий на: •  нажатие только левой кнопки мыши •  тройное нажатие43
  • Эффекты •  Базовые •  Скольжение (Sliding) •  Исчезновение (Fading) •  Произвольные анимации •  Настройки44
  • Базовые •  $.show •  $.hide •  $.toggle45
  • Скольжение (Sliding) •  $.slideDown •  $.slideUp •  $.slideToggle46
  • Исчезновение (Fading) •  $.fadeIn •  $.fadeOut •  $.fadeTo •  $.fadeToggle47
  • Произвольные анимации •  $.animate •  $.stop •  $.delay48
  • Настройки •  $.fx.off •  $.fx.interval49
  • Атрибуты •  Атрибуты •  Класс •  HTML, текст •  Значение50
  • Атрибуты •  $.attr •  $.removeAttr •  $.prop •  $.removeProp51
  • $.attr vs $.prop <input type=“checkbox” checked=“checked” />! true  (Boolean)  Изменится  с  состоянием   elem.checked   чекбокса     true  (Boolean)  Изменится  с  состоянием   $(elem).prop("checked")   чекбокса     "checked"  (String)  Начальное  состояние   elem.getA8ribute("checked")   чекбокса,  не  меняется   $(elem).a8r("checked")  (1.6)     "checked"  (String)  Начальное  состояние     чекбокса,  не  меняется     $(elem).a8r("checked")  (1.6.1+)     "checked"  (String)  Изменится  с  состоянием     чекбокса   $(elem).a8r("checked")  (pre-­‐1.6)     true  (Boolean)  Изменится  с  состоянием     чекбокса  52 clck.ru/2j90t
  • Класс •  $.addClass •  $.hasClass •  $.removeClass •  $.toggleClass53
  • HTML, текст •  $.html •  $.text54
  • Значение •  $.val55
  • CSS •  CSS •  Позиционирование •  Высота и ширина56
  • CSS •  $.css57
  • Позиционирование •  $.offset •  $.offsetParent •  $.position •  $.scrollTop •  $.scrollLeft58
  • Высота и ширина •  $.height •  $.width •  $.innerHeight •  $.innerWidth •  $.outerHeight •  $.outerWidth59
  • Перемещение по выборке •  Фильтрование •  Перемещение по дереву •  Прочее60
  • Фильтрование •  $.eq •  $.first •  $.last •  $.has •  $.filter •  $.is •  $.map •  $.not •  $.slice61
  • Перемещение по дереву •  $.offsetParent •  $.children •  $.parent •  $.closest •  $.parents •  $.find •  $.parentsUntil •  $.next •  $.prev •  $.nextAll •  $.prevAll •  $.nextUntil •  $.prevUntil •  $.siblings62
  • Прочее •  $.add •  $.andSelf •  $.contents •  $.end63
  • Манипуляции •  Вставка внутрь •  Вставка снаружи •  Оборачивание •  Замена •  Удаление •  Копирование64
  • Вставка внутрь •  $.append •  $.appendTo •  $.prepend •  $.prependTo65
  • Вставка снаружи •  $.after •  $.before •  $.insertAfter •  $.insertBefore66
  • Оборачивание •  $.unwrap •  $.wrap •  $.wrapAll •  $.wrapInner67
  • Замена •  $.replaceWith •  $.replaceAll68
  • Удаление •  $.detach •  $.empty •  $.remove69
  • Копирование •  $.clone70
  • Deffered •  def.always •  def.progress •  def.done •  def.reject •  def.fail •  def.rejectWith •  def.isRejected •  def.resolve •  def.isResolved •  defresolveWith •  def.notify •  def.state •  def.notifyWith •  def.then •  def.pipe •  def.promise71
  • Callbacks •  cb.add(callbacks) •  cb.disable() •  cb.empty() •  cb.fire(arguments) •  cb.fired() •  cb.fireWith([context] [, args]) •  $.Callbacks •  cb.has(callback) •  cb.lock() •  cb.locked()72 •  cb.remove(callbacks)
  • Callbacks function fn1( value ){! console.log( value );! }! ! function fn2( value ){! fn1("fn2 says:" + value);! return false;! }! ! var callbacks = $.Callbacks();! ! callbacks.add( fn1 );! callbacks.fire( "foo!" ); // foo!! ! callbacks.add( fn2 );! callbacks.fire( "bar!" ); // bar!, fn2 says: bar!!73
  • Утилиты •  Определение браузера и возможностей •  Базовые операции •  Функции для работы с data •  Операции проверки74
  • Определение браузера и возможностей •  $.support •  $.browser •  $.browser.version •  $.boxModel75
  • Базовые операции •  $.each •  $.merge •  $.extend •  $.noop •  $.grep •  $.proxy •  $.makeArray •  $.unique •  $.map •  $.trim •  $.inArray •  $.parseJSON76
  • Функции для работы с data •  $.queue •  $.clearQueue •  $.dequeue •  $.data •  $.removeData77
  • Операции проверки •  $.type •  $.isArray •  $.isEmptyObject •  $.isFunction •  $.isPlainObject •  $.isWindow •  $.isNumeric78
  • Рекомендации79
  • Рекомендации •  Chainability •  Кеширование •  Использование API •  Плагины80
  • Chainability $(‘.b-block’).html(‘<span class=“b-block__inner”></span>’);! ! $(‘.b-block’).find(‘.b-block__inner’).css(‘color’, ‘blue’);! ! $(‘.b-block’).find(‘.b-block__inner’).text(‘hello’);! ! $(‘.b-block’).css(‘background’, ‘green’);! ! $(‘.b-block’).click(function(){! !console.log(‘b-block clicked’);! });!81
  • Chainability $(‘.b-block’).html(‘<span class=“b-block__inner”></span>’);! ! $(‘.b-block’).find(‘.b-block__inner’).css(‘color’, ‘blue’);! ! $(‘.b-block’).find(‘.b-block__inner’).text(‘hello’);! ! $(‘.b-block’).css(‘background’, ‘green’);! ! $(‘.b-block’).click(function(){! !console.log(‘b-block clicked’);! });!82
  • Chainability $(‘.b-block’)! !.html(‘<span class=“b-block__inner”></span>’)! !.find(‘.b-block__inner’)! ! !.css(‘color’, ‘blue’)! ! !.text(‘hello’)! ! !.end() // а вот и end! !.css(‘background’, ‘green’)! !.click(function(){! ! !console.log(‘b-block clicked’);! !});!83
  • Кеширование $(‘b-action’)! !.mouseenter(function(){! ! !$(‘b-signal’).addClass(‘b-signal_mode_mouseenter’);! !})! !.mouseleave(function(){! ! !$(‘b-signal’).addClass(‘b-signal_mode_mouseleave’);! !})! !.click(function(){! ! !$(‘b-signal’).addClass(‘b-signal_mode_click’);! !});! ! ! ! ! !84
  • Кеширование $(‘b-action’)! !.mouseenter(function(){! ! !$(‘b-signal’).addClass(‘b-signal_mode_mouseenter’);! !})! !.mouseleave(function(){! ! !$(‘b-signal’).addClass(‘b-signal_mode_mouseleave’);! !})! !.click(function(){! ! !$(‘b-signal’).addClass(‘b-signal_mode_click’);! !});! ! ! ! ! !85
  • Кеширование var bSignal = $(‘b-signal’);! ! $(‘b-action’)! !.mouseenter(function(){! ! !bSignal.addClass(‘b-signal_mode_mouseenter’);! !})! !.mouseleave(function(){! ! !bSignal.addClass(‘b-signal_mode_mouseleave’);! !})! !.click(function(){! ! !bSignal.addClass(‘b-signal_mode_click’);! !});! ! ! ! ! !86
  • Использование API ! document.onclick = function(e) {! !...! };! ! $(function() {! !...! });! ! ! $(document).ready(function() {! !var promoItem = document.getElementById(‘promo-item’);! !! !...! ! });!87
  • Использование API $(‘.jsbanner’).each(function() {! !var externalScript = document.createElement(‘script’);! ! !externalScript.type = ‘text/javascript’;! ! !externalScript.onreadystatechange = function () {! ! !if (this.readyState == loaded’) {! ! ! !onLoadScript.apply(this);! ! !}! !}! ! !externalScript.onload = onLoadScript;! ! !var path = this.getAttribute(path);! !if(path) {! ! !externalScript.src = path;! ! !this.appendChild(externalScript);! !}! });!88
  • Плагины89
  • Инструменты FireQuery – must have90
  • FireQuery91
  • Бережной Алексей разработчик интерфейсов collapsus@yandex-team.ruСпасибо!