O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

jQuery & JavaScript Video How-To

Video Description

Skip the reading and learn by watching!

Short, clear videos show you visually how to build dynamic web pages with jQuery and JavaScript.

jQuery & JavaScript Video How-To is a series of short, 2- to 5-minute how-to videos that walk the learner through a specific task or technique related to creating effects, animations, lists, complex forms, and more to build a great user interface for any device. Adapted from the book Sams Teach Yourself jQuery and JavaScript in 24 Hours, each video is self-contained and focused entirely on one particular task. The learner can either go through the videos in sequence or jump into a particular task, see how something is done, and then jump out again.

Skill Level

  • Beginner
  • Intermediate

Just a couple minutes is all you need to learn how to...

  • Create a Project
  • Create a Dynamic Web Page with jQuery and JavaScript
  • Debug HTML Using the HTML Inspector
  • Edit HTML Element Values in the DOM Inspector
  • Edit the CSS Layout
  • Use the JavaScript Debugger
  • Use Container Elements to Group and Style
  • Create HTML Tables
  • Add Forms to Web Pages
  • Apply Text Styles via CSS
  • Add Backgrounds via CSS
  • Add Borders to HTML Elements
  • Use CSS to Lay Out Web Page Components
  • Implement JavaScript and jQuery
  • Use jQuery and JavaScript to Access DOM Elements
  • Apply if Conditional Logic in JavaScript
  • Create JavaScript Functions
  • Manipulate Strings in JavaScript
  • Create and Manipulate Arrays
  • Create and Use Custom Objects
  • Use JavaScript to Access DOM Objects
  • Use jQuery to Access DOM Objects
  • Use the jQuery .map() and .each() Methods to Navigate, Access, and Manipulate the DOM Elements
  • Use jQuery to Traverse the DOM
  • Add Event Handlers to DOM Objects via JavaScript
  • Add Event Handlers using jQuery
  • Trigger Events Manually In JavaScript
  • Trigger Events Manually in jQuery
  • Get Screen, Browser, Mouse, and Element Info Using jQuery and JavaScript
  • Dynamically Manipulate Web Page Elements
  • Dynamically Rearrange Page Elements
  • Get and Set Cookies
  • Create Simple Timers and Dialogs
  • Use Show and Hide Animations to Create an Expand/Collapse Element
  • Use Fade Animation to Implement an Image Selection Effect
  • Use Sliding Animation to Implement a Dynamic Menu
  • Use a Resize Animation to Create a Simple Image Gallery Viewer
  • Create a Simple Paper Airplane App with jQuery Animation
  • Access and Manipulate Form Element Data
  • Add Dynamic Flow Control to Forms
  • Add Animated Elements to Improve User Experience
  • Validate Web Forms Using jQuery
  • Add a Slider-Based Image Gallery
  • Create an Interactive Table with Sorting and Filtering
  • Add a Dynamic Tree View with Expanding and Collapsing Branches
  • Add Dynamic Dialogs Using Overlays in jQuery and JavaScript
  • Create a Dynamic Graphic Equalizer with Simple jQuery and CSS
  • Create Dynamic Sparklines with Simple jQuery, JavaScript, and CSS
  • Send an AJAX Response from jQuery
  • Handle Login Request Successes and Failures
  • Handle JSON Response Data
  • Handle XML/HTML Response Data
  • Update Server Data from jQuery Using AJAX
  • Add Facebook Elements to Your Web Pages
  • Add Google Maps to a Web Page
  • Add Custom Google Search to a Web Page
  • Add Twitter Elements to a Web Page
  • Add a Flickr Stream
  • Add jQuery UI to Your Project
  • Apply jQuery UI Selectors Based on Data Values
  • Use jQuery UI to Position Images on a Web Page
  • Add jQuery UI Effects
  • Apply Easing to Class Transitions
  • Apply Effects to jQuery Visibility Transitions
  • Add Effects to Animations
  • Add Draggable Images to a Web Page
  • Apply Drag and Drop to a Web Page
  • Create Resizable Elements
  • Create Selectable Sets
  • Implement Sortable Elements
  • Build Your First jQuery Mobile Web Page
  • Implement a Mobile Web Page with Multiple Links
  • Add Navbars to Mobile Web Pages
  • Add Dialogs to Mobile Web Pages
  • Add a Grid Layout to a Mobile Page
  • Add Listviews to a Mobile Page
  • Use Toggles and Switches Allows Users to Manipulate Elements

Table of Contents

  1. Learn How To...
    1. Create a Project 00:02:05
    2. Create a Dynamic Web Page with jQuery and JavaScript 00:03:52
    3. Debug HTML Using the HTML Inspector 00:03:48
    4. Edit HTML Element Values in the DOM Inspector 00:02:01
    5. Edit the CSS Layout 00:02:48
    6. Use the JavaScript Debugger 00:03:48
    7. Use Container Elements to Group and Style 00:01:50
    8. Create HTML Tables 00:03:06
    9. Add Forms to Web Pages 00:02:33
    10. Apply Text Styles via CSS 00:03:55
    11. Add Backgrounds via CSS 00:03:23
    12. Add Borders to HTML Elements 00:01:54
    13. Use CSS to Lay Out Web Page Components 00:03:03
    14. Implement JavaScript and jQuery 00:02:18
    15. Use jQuery and JavaScript to Access DOM Elements 00:01:50
    16. Apply if Conditional Logic in JavaScript 00:01:55
    17. Create JavaScript Functions 00:01:56
    18. Manipulate Strings in JavaScript 00:01:53
    19. Create and Manipulate Arrays 00:01:35
    20. Create and Use Custom Objects 00:01:39
    21. Use JavaScript to Access DOM Objects 00:02:59
    22. Use jQuery to Access DOM Objects 00:02:48
    23. Use the jQuery .map() and .each() Methods to Navigate, Access, and Manipulate the DOM Elements 00:02:37
    24. Use jQuery to Traverse the DOM 00:02:17
    25. Add Event Handlers to DOM Objects via JavaScript 00:02:36
    26. Add Event Handlers using jQuery 00:02:19
    27. Trigger Events Manually In JavaScript 00:02:25
    28. Trigger Events Manually in jQuery 00:02:17
    29. Get Screen, Browser, Mouse, and Element Info Using jQuery and JavaScript 00:02:43
    30. Dynamically Manipulate Web Page Elements 00:02:16
    31. Dynamically Rearrange Page Elements 00:02:26
    32. Get and Set Cookies 00:02:10
    33. Create Simple Timers and Dialogs 00:01:25
    34. Use Show and Hide Animations to Create an Expand/Collapse Element 00:01:44
    35. Use Fade Animation to Implement an Image Selection Effect 00:01:42
    36. Use Sliding Animation to Implement a Dynamic Menu 00:01:59
    37. Use a Resize Animation to Create a Simple Image Gallery Viewer 00:01:18
    38. Create a Simple Paper Airplane App with jQuery Animation 00:02:34
    39. Access and Manipulate Form Element Data 00:03:30
    40. Add Dynamic Flow Control to Forms 00:02:36
    41. Add Animated Elements to Improve User Experience 00:03:42
    42. Validate Web Forms Using jQuery 00:03:17
    43. Add a Slider-Based Image Gallery 00:03:11
    44. Create an Interactive Table with Sorting and Filtering 00:03:20
    45. Add a Dynamic Tree View with Expanding and Collapsing Branches 00:01:56
    46. Add Dynamic Dialogs Using Overlays in jQuery and JavaScript 00:01:44
    47. Create a Dynamic Graphic Equalizer with Simple jQuery and CSS 00:01:59
    48. Create Dynamic Sparklines with Simple jQuery, JavaScript, and CSS 00:02:04
    49. Send an AJAX Response from jQuery 00:02:20
    50. Handle Login Request Successes and Failures 00:03:06
    51. Handle JSON Response Data 00:01:51
    52. Handle XML/HTML Response Data 00:02:09
    53. Update Server Data from jQuery Using AJAX 00:03:31
    54. Add Facebook Elements to Your Web Pages 00:02:11
    55. Add Google Maps to a Web Page 00:02:57
    56. Add Custom Google Search to a Web Page 00:02:09
    57. Add Twitter Elements to a Web Page 00:01:51
    58. Add a Flickr Stream 00:01:55
    59. Add jQuery UI to Your Project 00:02:10
    60. Apply jQuery UI Selectors Based on Data Values 00:01:31
    61. Use jQuery UI to Position Images on a Web Page 00:01:21
    62. Add jQuery UI Effects 00:02:36
    63. Apply Easing to Class Transitions 00:01:19
    64. Apply Effects to jQuery Visibility Transitions 00:01:41
    65. Add Effects to Animations 00:02:25
    66. Add Draggable Images to a Web Page 00:02:00
    67. Apply Drag and Drop to a Web Page 00:02:47
    68. Create Resizable Elements 00:02:25
    69. Create Selectable Sets 00:02:14
    70. Implement Sortable Elements 00:02:34
    71. Build Your First jQuery Mobile Web Page 00:03:19
    72. Implement a Mobile Web Page with Multiple Links 00:03:26
    73. Add Navbars to Mobile Web Pages 00:01:37
    74. Add Dialogs to Mobile Web Pages 00:02:15
    75. Add a Grid Layout to a Mobile Page 00:02:16
    76. Add Listviews to a Mobile Page 00:01:20
    77. Use Toggles and Switches Allows Users to Manipulate Elements 00:02:14