1. © 2012, Mike Murach & Associates, Inc.
Chapter 7
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

2. © 2012, Mike Murach & Associates, Inc.
Objectives
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

3. Objectives (continued)
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

4. The jQuery web site at www.jQuery.com
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

5. © 2012, Mike Murach & Associates, Inc.
What jQuery offers
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

6. The user interface for the FAQs application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

7. The JavaScript for the FAQs application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

8. The JavaScript for the FAQs application (cont.)
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

9. The jQuery for the FAQs application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

10. The FAQs application as a jQuery UI accordion
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

11. The HTML for a jQuery UI accordion
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

12. The JavaScript code for the jQuery UI accordion
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

13. Some typical plugin functions
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

14. © 2012, Mike Murach & Associates, Inc.
Terms
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

15. The syntax for a jQuery selector
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

16. The HTML for the selected elements
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

17. How to select elements by element, id, and class
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

18. How to select elements by relationship
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

19. How to code multiple selectors
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

20. The syntax for calling a jQuery method
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

21. Examples that call jQuery methods
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

22. The syntax for a jQuery event method
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

23. How to code an event handler for the ready event
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

24. An event handler for the click event of all h2 elements
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

25. © 2012, Mike Murach & Associates, Inc.
Terms
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

26. The user interface for the Email List application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

27. The HTML for the Email List application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

28. The HTML for the Email List application (cont.)
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

29. The jQuery for the Email List application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

30. The jQuery for the Email List application (cont.)
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

31. Some of the most useful jQuery selectors
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

32. Examples that use jQuery selectors
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

33. A summary of the most useful jQuery methods
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

34. Examples that use jQuery methods
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

35. Some of the most useful jQuery event methods
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

36. Examples that use jQuery event methods
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

37. Other event methods that you should be aware of
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

38. How to store an event handler in a variable
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

39. How to attach an event handler to an event
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

40. How to remove an event handler from an event
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

41. © 2012, Mike Murach & Associates, Inc.
How to trigger an event
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

42. The FAQs application in a browser
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

43. The HTML for the FAQs application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

44. The HTML for the FAQs application (cont.)
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

45. The jQuery for the FAQs application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

46. The user interface for the Image Swap application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

47. The HTML for the Image Swap application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

48. The CSS for the li elements
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

49. The JavaScript for the Image Swap application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

50. Three images with the middle image rolled over
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

51. The HTML for the Image Rollover application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

52. The JavaScript for the Image Rollover application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

53. Exercise 7-3: Develop a Book List application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

54. Extra 7-1: Develop an Expand/Collapse app
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

55. Extra 7-2: Develop an Image Gallery application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

56. Short 7-1: Modify the Future Value application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.

57. Short 7-2: Create a FAQS Rollover application
Murach's JavaScript and jQuery, C7
© 2012, Mike Murach & Associates, Inc.