jQuery
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery

on

  • 1,480 views

 

Statistics

Views

Total Views
1,480
Views on SlideShare
1,480
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

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 Presentation 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 г.