Документ представляет собой вводный материал по jQuery и его применению в разработке богатых пользовательских интерфейсов (RIA). Он охватывает основные понятия, такие как селекторы, обработка событий, анимация и возможность интеграции с ASP.NET MVC. Также обсуждаются преимущества jQuery, его легкость в освоении и возможности для расширения через плагины.

1. TulaDev.NETjQueryкак путь к RIA Rich User Interface на основе jQuery + jQueryUI + MVC + HTML5Андрей КулешовCodemasters InternationalSenior C# Developer, Team Leadakuleshov@codereign.net | http://www.codemastersintl.com/Blogs/Andrey-Kuleshov

2. Что будет:Понятия Rich User Interface и RIAjQueryкак средство работы с UIВведение в библиотеку. Понятие селекторовОбработка событий. Анимация в jQueryjQuery UI как библиотека пользовательских элементов на стороне клиентаAjax в jQuery. Взаимодействие с ASP.NET MVCРасширяемость jQuery. Обзор существующих плагинов

3. Rich User InterfaceElaborate, having complex formatting, multimedia, or depth of interaction(Продуманный, имеющий сложное форматирование, мультимедиа или глубину взаимодействия с пользователем

4. Изначально начал появляться на десктопных приложениях

5. Начал активно внедряться в Web c появлением Flash технологии

6. Однако сейчас наступил период, когда возможностей самих браузеров становится достаточноjQueryJQuery отделяет поведение от структуры HTMLФункция $(aka jQuery() function) возвращает:а) JavaScript –объект, содержащий массив DOM-элементов б) в том порядке, в каком они были найдены в документев) Соответствующих переданному селекторуг) этот объект известен как wrapper или wrapped setБольшинство методов объекта-обертки возвращают ту же самую группу элементов => возможно объединение в цепь вызовов

7. Преимущества jQuery Не пытается создать свой новый язык или вариант языка, но использует комбинацию CSS, HTML и классического JavaScript

8. Легковесный (минимизированная сжатая версия – 29 кб)

9. Легкий для изучения

10. Большое количество готовых плагинов

11. Легко расширяемый

12. Поддерживается Microsoft (IntelliSense, CDN)

13. Большое количество обучающих материалов

14. Помогает писать Unobstrutive JavaScriptСобытие $(document).ready() В классическом JavaScript проблематично запустить какой-то код после загрузки документа – нет единой событийной модели

15. jQueryреализует для этого кросс-браузерное событие ready

16. В основе jQueryлежит selector engine (Sizzle)

17. Может быть использован для выборки элементов по:- имени (идентификатору);- атрибутам;- позиции; Многократно перегруженный оператор $() используется как для осуществления выборки, так и для создания новых элементовСелекторы

18. Разнообразие селекторовВсе параграфы$("p")Все ссылки, находящиеся внутри параграфов и имеющие класс someClass$("p a.someClass")$("ul.someList > li > a")Все ссылкивнутри элементов списка, если сам список имеет класс someClass$("a[href*='http://tuladev.net']")Все ссылкина TulaDev.NETВсе span-элементы, имеющие класс, начинающийся на «some»$("span[class^='some']")Все span-элементы, имеющие хоть какой-нибудь класс$("span[class]")

19. ДемоПростые селекторы

20. События в jQuery.click(handler), .dblclick(handler), .mousein(handler) – упрощение синтаксиса

21. .bind(‘eventname’, handler) - .unbind(‘eventname’, handler)- через него реализуются все одномоментные связывания- события обрабатываются лишь для тех элементов, которые уже присутствуют в DOM на момент вызова

22. .live(‘eventname’, handler) – .die(‘eventname’, handler)- работают для всех элементов, включая динамически добавленные- используют «всплывание» события до уровня корня дерева элементов

23. .delegate( selector, eventType, handler ) - используют «всплывание» до уровня элемента, на котором были вызваныДемоjQuery events

24. Анимация в jQuery.fadeIn, .fadeOut

25. .animate $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. });

26. ДемоАнимация

27. jQueryUI обширная библиотека контролов

28. кроссбраузерность (почти всегда)

29. только client-sideДемоjQuery UIhttp://jqueryUI.com/demos

30. jQuery + Ajax + MvcHTML vsJSON

31. Способы получения контента с сервера

32. PartialResultvsJsonResult{ "firstName": "Иван", "lastName": "Иванов", "address": { "streetAddress": "Московское ш., 101, кв.101", "city": "Ленинград", "postalCode": 101101 }, "phoneNumbers": [ "812 123-1234", "916 123-4567" ]}

33. ДемоАнимация

34. Вопросы?Внимательно слушаю Андрей КулешовCodemasters InternationalSenior C# Developer, Team Leadakuleshov@codereign.net | http://www.codemastersintl.com/Blogs/Andrey-Kuleshov

35. ИсточникиjQuery documentationhttp://docs.jquery.com/jQuery UIhttp://jqueryui.com/demos/What You, as an ASP.NET Developer, Need to Know About jQueryGill Cleerenhttp://msteched.comАндрей КулешовCodemasters InternationalSenior C# Developer, Team Leadakuleshov@codereign.net | http://www.codemastersintl.com/Blogs/Andrey-Kuleshov