Your SlideShare is downloading. ×
jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery

663

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
663
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×