jQuery
                         Язык JavaScript




                    Алексей Бованенко

7 апреля 2009 г.
Что это?


                   •   Библиотека JavaScript

                   •   http://www.jquery.com

                   ...
Начало



                   •   <script type= “text/javascript” src= “jquery.js” ></script>




7 апреля 2009 г.
Селекторы


                   •   $(obj) - jQuery селектор

                   •   $ - класс

                   •   $( )...
Селекторы
                                                         (уточнение)

                   •   Вложенные элементы
...
Селекторы
                                               (уточнение)

                   •   $(«body > div»)

            ...
Первая программа

                   •   window.onload=function(){
                         alert(“Hello, world!”);
      ...
Добавление обработчика
                                                     события

                   •   $(document).re...
Отмена действия
                                                            по умолчанию

                   •   $(documen...
Работа с CSS классами


                   •   $(«a»).addClass(«selected»);

                   •   $(«a»).removeClass(«se...
Пример таблицы


                   •   $(«table tr:nth-child(even)»).addClass(«selected»);

                   •   CSS3 с...
Код/CSS

                   •   <style>
                       .selected{
                          font-weight:bold;
    ...
Код/javascript

                   •   <script type=quot;text/javascriptquot; src=quot;jquery.jsquot;></script>
          ...
Использование эффектов


                   •   $(«a»).click(function(event){
                            event.preventDef...
Использование эффектов
                                              (продолжение)


                   •   $(«div.fadeout...
Изменение содержимого


                   •   $(«#elementId»).html(«New value»)

                   •   $(«#elementId»)[0...
Изменение содержимого
                                            (продолжение)

                   •   $(«div»).html(«New...
Использование
                         цепочек


7 апреля 2009 г.
Builder


                   •   Каждый метод jQuery возвращает сам измененный объект

                   •   $(«a»).filter...
Создание
                   элементов


7 апреля 2009 г.
Создание нового элемента

                   •   Создание элемента

                       •   $(«<p>It’s a new element»)
...
Атрибуты



7 апреля 2009 г.
Получение значения



                   •   $(«div#out»).attr(«class»)




7 апреля 2009 г.
Установка значения



                   •   $(«div#out»).attr(«class», «selected»)




7 апреля 2009 г.
Обработка
                    событий


7 апреля 2009 г.
Обработка событий
                                                            mouseover, mouseout

                   •   ...
Вариант обработки событий
                                          mouseover, mouseout

                   •   $(document...
Обработка click

                   •   $(quot;#closequot;).toggle(
                           function(event){
          ...
Конец




                   Спасибо за внимание

                              e-mail: a.bovanenko@gmail.com
7 апреля 200...
Upcoming SlideShare
Loading in...5
×

jQuery

679

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
679
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
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 г.
  1. A particular slide catching your eye?

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

×