ШРИ: 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’).h...
Работа с DOM    $(<h1/>, {!        style: text-align: center,!        html: $(<span/>, {!            style: color: red,!  ...
AJAX     $.ajax({!      !type: POST,!      !dataType: json,!      !url: /registered/main.pl,!      !data: {!      ! !name:...
События     $(‘.b-alert-button’).click(function(){!       !alert(‘button pressed’);!     });!     !     !     $(window).re...
jQuery API                  api.jquery.com	12                jqapi.ru
13
Селекторы     •  Базовые     •  Иерархия     •  Базовые фильтры     •  Фильтры по содержимому     •  Фильтры видимости    ...
Базовые     •  #id     •  element     •  .class, .class.class     •  *     •  selector1, selector215
Иерархия     •  ancestor descendant     •  parent > child     •  prev + next     •  prev ~ siblings16
Базовые фильтры                         •  :eq(index)     •  :first                         •  :gt(index)     •  :last    ...
Фильтры по содержимому     •  :contains(text)     •  :empty     •  :has(selector)     •  :parent18
Фильтры видимости     •  :hidden     •  :visible19
Фильтры потомков     •  :nth-child(expr)     •  :first-child     •  :last-child     •  :only-child20
Фильтры атрибутов     •  [attribute]     •  [attribute=value]     •  [attribute!=value]     •  [attribute^=value]     •  [...
Фильтры элементов формы     •  :input     •  :text     •  :password     •  :radio     •  :checkbox     •  :submit     •  :...
Фильтры состояний элементов формы     •  :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) {!       ! !aler...
Сокращения     •  $.load     •  $.get     •  $.getJSON     •  $.getScript     •  $.post33
Глобальные обработчики ajax      события     •  $.ajaxComplete     •  $.ajaxError     •  $.ajaxSend     •  $.ajaxStart    ...
Сериализация     <form>!       !<input type=“text” name=“name” value=“Aleksey”/>!       !<input type=“text” name=“surname”...
Сериализация     •  $.serialize     •  $.serializeArray     •  $.param36
События     •  Загрузка страницы     •  Обработка событий     •  Сокращения     •  Объект события     •  jQuery special ev...
Загрузка страницы     $(document).ready(function(){ /* ... */ });!     !     $(function(){ /* ... */ });!38
Обработка событий     •  $.bind / $.unbind     •  $.one     •  $.trigger     •  $.triggerHandler     •  $.live / $.die    ...
Сокращения                    •  $.focus     •  $.blur                    •  $.focusin     •  $.change                    ...
Сокращения                   •  $.mousedown     •  $.load                   •  $.mouseup     •  $.unload                  ...
Объект события     Нормализирует:     •  target     •  relatedTarget     •  pageX     •  pageY     •  which     •  metaKey...
jQuery special events     Домашнее задание:     Напишите плагин для jQuery, позволяющий     добавить обработчик события на...
Эффекты     •  Базовые     •  Скольжение (Sliding)     •  Исчезновение (Fading)     •  Произвольные анимации     •  Настро...
Базовые     •  $.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” />!                                                        ...
Класс     •  $.addClass     •  $.hasClass     •  $.removeClass     •  $.toggleClass53
HTML, текст     •  $.html     •  $.text54
Значение     •  $.val55
CSS     •  CSS     •  Позиционирование     •  Высота и ширина56
CSS     •  $.css57
Позиционирование     •  $.offset     •  $.offsetParent     •  $.position     •  $.scrollTop     •  $.scrollLeft58
Высота и ширина     •  $.height     •  $.width     •  $.innerHeight     •  $.innerWidth     •  $.outerHeight     •  $.oute...
Перемещение по выборке     •  Фильтрование     •  Перемещение по дереву     •  Прочее60
Фильтрование     •  $.eq     •  $.first     •  $.last     •  $.has     •  $.filter     •  $.is     •  $.map     •  $.not  ...
Перемещение по дереву                        •  $.offsetParent     •  $.children      •  $.parent     •  $.closest       •...
Прочее     •  $.add     •  $.andSelf     •  $.contents     •  $.end63
Манипуляции     •  Вставка внутрь     •  Вставка снаружи     •  Оборачивание     •  Замена     •  Удаление     •  Копирова...
Вставка внутрь     •  $.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                            ...
Callbacks     •  cb.add(callbacks)     •  cb.disable()     •  cb.empty()     •  cb.fire(arguments)     •  cb.fired()     •...
Callbacks     function fn1( value ){!         console.log( value );!     }!     !     function fn2( value ){!         fn1(...
Утилиты     •  Определение браузера и возможностей     •  Базовые операции     •  Функции для работы с data     •  Операци...
Определение браузера      и возможностей     •  $.support     •  $.browser     •  $.browser.version     •  $.boxModel75
Базовые операции     •  $.each           •  $.merge     •  $.extend         •  $.noop     •  $.grep           •  $.proxy  ...
Функции для работы с data     •  $.queue     •  $.clearQueue     •  $.dequeue     •  $.data     •  $.removeData77
Операции проверки     •  $.type     •  $.isArray     •  $.isEmptyObject     •  $.isFunction     •  $.isPlainObject     •  ...
Рекомендации79
Рекомендации     •  Chainability     •  Кеширование     •  Использование API     •  Плагины80
Chainability      $(‘.b-block’).html(‘<span class=“b-block__inner”></span>’);!      !      $(‘.b-block’).find(‘.b-block__i...
Chainability      $(‘.b-block’).html(‘<span class=“b-block__inner”></span>’);!      !      $(‘.b-block’).find(‘.b-block__i...
Chainability      $(‘.b-block’)!       !.html(‘<span class=“b-block__inner”></span>’)!       !.find(‘.b-block__inner’)!   ...
Кеширование     $(‘b-action’)!       !.mouseenter(function(){!       ! !$(‘b-signal’).addClass(‘b-signal_mode_mouseenter’)...
Кеширование     $(‘b-action’)!       !.mouseenter(function(){!       ! !$(‘b-signal’).addClass(‘b-signal_mode_mouseenter’)...
Кеширование     var bSignal = $(‘b-signal’);!     !     $(‘b-action’)!       !.mouseenter(function(){!       ! !bSignal.ad...
Использование API     !     document.onclick = function(e) {!       !...!     };!     !     $(function() {!       !...!   ...
Использование API     $(‘.jsbanner’).each(function() {!       !var externalScript = document.createElement(‘script’);!    ...
Плагины89
Инструменты     FireQuery – must have90
FireQuery91
Бережной Алексей     разработчик интерфейсов     collapsus@yandex-team.ruСпасибо!
Алексей Бережной — «jQuery»
Upcoming SlideShare
Loading in...5
×

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

6,997

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,997
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. ШРИ: jQueryАлексей Бережнойразработчик интерфейсов
  2. 2. jQuery 1.0 – 2006 год3
  3. 3. Спустя 6 лет и ~44 версий4
  4. 4. 5 clck.ru/2WaK4
  5. 5. 6
  6. 6. Для чего нужен jQuery •  Работа с DOM •  AJAX •  События7
  7. 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
  8. 8. Работа с DOM $(<h1/>, {! style: text-align: center,! html: $(<span/>, {! style: color: red,! html: Я })})! .append( в ШРИ)! .prependTo(body);!9
  9. 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
  10. 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
  11. 11. jQuery API api.jquery.com 12 jqapi.ru
  12. 12. 13
  13. 13. Селекторы •  Базовые •  Иерархия •  Базовые фильтры •  Фильтры по содержимому •  Фильтры видимости •  Фильтры потомков •  Фильтры атрибутов •  Фильтры элементов формы14
  14. 14. Базовые •  #id •  element •  .class, .class.class •  * •  selector1, selector215
  15. 15. Иерархия •  ancestor descendant •  parent > child •  prev + next •  prev ~ siblings16
  16. 16. Базовые фильтры •  :eq(index) •  :first •  :gt(index) •  :last •  :lt(index) •  :not(selector) •  :header •  :even •  :animated •  :odd •  :focus17
  17. 17. Фильтры по содержимому •  :contains(text) •  :empty •  :has(selector) •  :parent18
  18. 18. Фильтры видимости •  :hidden •  :visible19
  19. 19. Фильтры потомков •  :nth-child(expr) •  :first-child •  :last-child •  :only-child20
  20. 20. Фильтры атрибутов •  [attribute] •  [attribute=value] •  [attribute!=value] •  [attribute^=value] •  [attribute$=value] •  [attribute*=value] •  [attribute|=value] •  [attribute~=value] •  [attribute][attribute2]21
  21. 21. Фильтры элементов формы •  :input •  :text •  :password •  :radio •  :checkbox •  :submit •  :image •  :reset •  :button22 •  :file
  22. 22. Фильтры состояний элементов формы •  :enabled •  :disabled •  :checked •  :selected23
  23. 23. Не нужно писать сложные селекторы!24
  24. 24. Ядро •  jQuery( selector [ , context ] ) •  jQuery( html ) •  jQuery( callback )25
  25. 25. Ядро26
  26. 26. jQuery( selector [ , context ] ) $(‘div.foo’);! ! $(‘div.foo’, this); // ~ $(this).find(‘div.foo’)! !27
  27. 27. jQuery( html ) $(<p class=”b-block">My <em>new</em> text</p>)! !.appendTo(body);!28
  28. 28. jQuery( callback ) $(function(){! !// Document is ready! });!29
  29. 29. AJAX •  Низкоуровневый интерфейс •  Сокращения •  Глобальные обработчики ajax события •  Сериализация30
  30. 30. Низкоуровневый интерфейс •  jQuery.ajax( url, [settings] ) •  jQuery.ajaxSetup( settings )31
  31. 31. jQuery.ajax( url, [settings] ) $.ajax({! !url: ajax/test.html,! !success: function(data) {! ! !alert(Load was performed.);! !}! });!32
  32. 32. Сокращения •  $.load •  $.get •  $.getJSON •  $.getScript •  $.post33
  33. 33. Глобальные обработчики ajax события •  $.ajaxComplete •  $.ajaxError •  $.ajaxSend •  $.ajaxStart •  $.ajaxStop •  $.ajaxSuccess34
  34. 34. Сериализация <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
  35. 35. Сериализация •  $.serialize •  $.serializeArray •  $.param36
  36. 36. События •  Загрузка страницы •  Обработка событий •  Сокращения •  Объект события •  jQuery special events37
  37. 37. Загрузка страницы $(document).ready(function(){ /* ... */ });! ! $(function(){ /* ... */ });!38
  38. 38. Обработка событий •  $.bind / $.unbind •  $.one •  $.trigger •  $.triggerHandler •  $.live / $.die •  $.delegate / $.undelegate •  $.on / $.off39
  39. 39. Сокращения •  $.focus •  $.blur •  $.focusin •  $.change •  $.focusout •  $.click •  $.keydown •  $.dbclick •  $.keypress •  $.error •  $.keyup40
  40. 40. Сокращения •  $.mousedown •  $.load •  $.mouseup •  $.unload •  $.mouseenter •  $.resize •  $.mouseleave •  $.scroll •  $.mousemove •  $.select •  $.mouseout •  $.submit •  $.mouseover41
  41. 41. Объект события Нормализирует: •  target •  relatedTarget •  pageX •  pageY •  which •  metaKey var e = $.Event(‘keydown’, { keyCode: 64 });! ! $(‘body’).trigger( e );!42
  42. 42. jQuery special events Домашнее задание: Напишите плагин для jQuery, позволяющий добавить обработчик события на DOM- элемент, срабатывающий на: •  нажатие только левой кнопки мыши •  тройное нажатие43
  43. 43. Эффекты •  Базовые •  Скольжение (Sliding) •  Исчезновение (Fading) •  Произвольные анимации •  Настройки44
  44. 44. Базовые •  $.show •  $.hide •  $.toggle45
  45. 45. Скольжение (Sliding) •  $.slideDown •  $.slideUp •  $.slideToggle46
  46. 46. Исчезновение (Fading) •  $.fadeIn •  $.fadeOut •  $.fadeTo •  $.fadeToggle47
  47. 47. Произвольные анимации •  $.animate •  $.stop •  $.delay48
  48. 48. Настройки •  $.fx.off •  $.fx.interval49
  49. 49. Атрибуты •  Атрибуты •  Класс •  HTML, текст •  Значение50
  50. 50. Атрибуты •  $.attr •  $.removeAttr •  $.prop •  $.removeProp51
  51. 51. $.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
  52. 52. Класс •  $.addClass •  $.hasClass •  $.removeClass •  $.toggleClass53
  53. 53. HTML, текст •  $.html •  $.text54
  54. 54. Значение •  $.val55
  55. 55. CSS •  CSS •  Позиционирование •  Высота и ширина56
  56. 56. CSS •  $.css57
  57. 57. Позиционирование •  $.offset •  $.offsetParent •  $.position •  $.scrollTop •  $.scrollLeft58
  58. 58. Высота и ширина •  $.height •  $.width •  $.innerHeight •  $.innerWidth •  $.outerHeight •  $.outerWidth59
  59. 59. Перемещение по выборке •  Фильтрование •  Перемещение по дереву •  Прочее60
  60. 60. Фильтрование •  $.eq •  $.first •  $.last •  $.has •  $.filter •  $.is •  $.map •  $.not •  $.slice61
  61. 61. Перемещение по дереву •  $.offsetParent •  $.children •  $.parent •  $.closest •  $.parents •  $.find •  $.parentsUntil •  $.next •  $.prev •  $.nextAll •  $.prevAll •  $.nextUntil •  $.prevUntil •  $.siblings62
  62. 62. Прочее •  $.add •  $.andSelf •  $.contents •  $.end63
  63. 63. Манипуляции •  Вставка внутрь •  Вставка снаружи •  Оборачивание •  Замена •  Удаление •  Копирование64
  64. 64. Вставка внутрь •  $.append •  $.appendTo •  $.prepend •  $.prependTo65
  65. 65. Вставка снаружи •  $.after •  $.before •  $.insertAfter •  $.insertBefore66
  66. 66. Оборачивание •  $.unwrap •  $.wrap •  $.wrapAll •  $.wrapInner67
  67. 67. Замена •  $.replaceWith •  $.replaceAll68
  68. 68. Удаление •  $.detach •  $.empty •  $.remove69
  69. 69. Копирование •  $.clone70
  70. 70. 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
  71. 71. 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)
  72. 72. 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
  73. 73. Утилиты •  Определение браузера и возможностей •  Базовые операции •  Функции для работы с data •  Операции проверки74
  74. 74. Определение браузера и возможностей •  $.support •  $.browser •  $.browser.version •  $.boxModel75
  75. 75. Базовые операции •  $.each •  $.merge •  $.extend •  $.noop •  $.grep •  $.proxy •  $.makeArray •  $.unique •  $.map •  $.trim •  $.inArray •  $.parseJSON76
  76. 76. Функции для работы с data •  $.queue •  $.clearQueue •  $.dequeue •  $.data •  $.removeData77
  77. 77. Операции проверки •  $.type •  $.isArray •  $.isEmptyObject •  $.isFunction •  $.isPlainObject •  $.isWindow •  $.isNumeric78
  78. 78. Рекомендации79
  79. 79. Рекомендации •  Chainability •  Кеширование •  Использование API •  Плагины80
  80. 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
  81. 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
  82. 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
  83. 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
  84. 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
  85. 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
  86. 86. Использование API ! document.onclick = function(e) {! !...! };! ! $(function() {! !...! });! ! ! $(document).ready(function() {! !var promoItem = document.getElementById(‘promo-item’);! !! !...! ! });!87
  87. 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
  88. 88. Плагины89
  89. 89. Инструменты FireQuery – must have90
  90. 90. FireQuery91
  91. 91. Бережной Алексей разработчик интерфейсов collapsus@yandex-team.ruСпасибо!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×