jQuery

920 views
874 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
920
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery

  1. 1. jQuery Язык JavaScript Алексей Бованенко 7 апреля 2009 г.
  2. 2. Что это? • Библиотека JavaScript • http://www.jquery.com • Использование CSS селекторов 7 апреля 2009 г.
  3. 3. Начало • <script type= “text/javascript” src= “jquery.js” ></script> 7 апреля 2009 г.
  4. 4. Селекторы • $(obj) - jQuery селектор • $ - класс • $( ) - создание нового объекта 7 апреля 2009 г.
  5. 5. Селекторы (уточнение) • Вложенные элементы • $(«p a») • Элементы с определенным классом • $(«div.selectedElement») 7 апреля 2009 г.
  6. 6. Селекторы (уточнение) • $(«body > div») • $(«a[href^=http://]») • $(«a[href$=pdf]») • $(«a[href*=links]») 7 апреля 2009 г.
  7. 7. Первая программа • window.onload=function(){ alert(“Hello, world!”); } • $(document).ready(function() { alert(“Hello, world!”); } ); 7 апреля 2009 г.
  8. 8. Добавление обработчика события • $(document).ready(function(){ $(«a»).click(function(event){ alert(«Clicked!»); }); }); 7 апреля 2009 г.
  9. 9. Отмена действия по умолчанию • $(document).ready(function(){ $(«a»).click(function(event){ alert(«Clicked!»); event.preventDefault(); }); }); 7 апреля 2009 г.
  10. 10. Работа с CSS классами • $(«a»).addClass(«selected»); • $(«a»).removeClass(«selected»); 7 апреля 2009 г.
  11. 11. Пример таблицы • $(«table tr:nth-child(even)»).addClass(«selected»); • CSS3 селектор • nth-child 7 апреля 2009 г.
  12. 12. Код/CSS • <style> .selected{ font-weight:bold; color:red; background-color:gray; } </style> 7 апреля 2009 г.
  13. 13. Код/javascript • <script type=quot;text/javascriptquot; src=quot;jquery.jsquot;></script> <script type=quot;text/javascriptquot;> $(document).ready(function(){ $(quot;table tr:nth-child(even)quot;).addClass(quot;selectedquot;); }); </script> 7 апреля 2009 г.
  14. 14. Использование эффектов • $(«a»).click(function(event){ event.preventDefault(); $(this).hide(«slow»); }); 7 апреля 2009 г.
  15. 15. Использование эффектов (продолжение) • $(«div.fadeoutclass»).fadeOut() 7 апреля 2009 г.
  16. 16. Изменение содержимого • $(«#elementId»).html(«New value») • $(«#elementId»)[0].innerHTML= «New value» 7 апреля 2009 г.
  17. 17. Изменение содержимого (продолжение) • $(«div»).html(«New value») • var divs=$(«div»); for(i=0;i<divs.length;++i) divs[i].innerHTML= «New value» 7 апреля 2009 г.
  18. 18. Использование цепочек 7 апреля 2009 г.
  19. 19. Builder • Каждый метод jQuery возвращает сам измененный объект • $(«a»).filter(«.clickme»).click(function(){$(this).hide(); return false;}).end(); 7 апреля 2009 г.
  20. 20. Создание элементов 7 апреля 2009 г.
  21. 21. Создание нового элемента • Создание элемента • $(«<p>It’s a new element») • Добавление в DOM-модель • $(«<p>It’s a new element»).insertAfter(«#targetId») • $(«<p>It’s a new element»).appendTo(«#targetId») 7 апреля 2009 г.
  22. 22. Атрибуты 7 апреля 2009 г.
  23. 23. Получение значения • $(«div#out»).attr(«class») 7 апреля 2009 г.
  24. 24. Установка значения • $(«div#out»).attr(«class», «selected») 7 апреля 2009 г.
  25. 25. Обработка событий 7 апреля 2009 г.
  26. 26. Обработка событий mouseover, mouseout • $(document).ready(function(){ $(quot;body > divquot;).hover( function(){ $(quot;#outquot;).addClass(quot;selectedquot;); }, function(){ $(quot;#outquot;).removeClass(quot;selectedquot;); }); }); • <div id=quot;outquot;>...</div> 7 апреля 2009 г.
  27. 27. Вариант обработки событий mouseover, mouseout • $(document).ready(function(){ $(quot;body > divquot;).bind('mouseover', function(){ $(quot;#outquot;).addClass(quot;selectedquot;); }) .bind('mouseout', function(){ $(quot;#outquot;).removeClass(quot;selectedquot;); }); }); • <div id=quot;outquot;>...</div> 7 апреля 2009 г.
  28. 28. Обработка click • $(quot;#closequot;).toggle( function(event){ event.preventDefault(); $(quot;#outquot;).hide(quot;slowquot;); $(quot;#closequot;).text(quot;Showquot;); }, function(event){ event.preventDefault(); $(quot;#outquot;).show(quot;slowquot;); $(quot;#closequot;).text(quot;Hidequot;); }); 7 апреля 2009 г.
  29. 29. Конец Спасибо за внимание e-mail: a.bovanenko@gmail.com 7 апреля 2009 г.

×