jQuery Best Practices for Legacy and Today

jQuery Course Outline

• jQuery Fundamentals

  • Traversing HTML with the jQuery() function
  • Utilise CSS selector engine
  • Matching nodes by element name, ID, class, position, content, behaviour and context
  • Chaining calls to the jQuery() function
  • Best Practises
  • Supporting Legacy applications

• Manipulating the Document Object Model (DOM) for Cross-Browser DHTML

  Adding and replacing content with jQuery

  • Updating, adding and deleting element content
  • Inserting nodes into the DOM and manipulating parents and siblings

  Dynamically assigning CSS properties

  • Adding and removing CSS rules and classes
  • Controlling element size and position

  Creating accessible, unobtrusive JavaScript

  • Assigning event handlers programmatically

• Animating Web Pages with jQuery Effects

  Enhancing pages with animations

  • Controlling visibility with .hide(), .show() and .toggle()
  • Combining animations and responding to callbacks
  • Leveraging object literals to control animations
  • Developing custom animations with .animate()

• Building Responsive Pages with Ajax

  Updating page components asynchronously

  • Downloading HTML with the .load() method
  • Calling web services with .get() and .post()
  • Replacing callbacks with chained deferred objects

  Converting serialized server data to HTML

  • Retrieving JSON with .getJSON()

• Designing User-Friendly Forms

  Exploring jQuery tools for forms manipulation

  • Selecting and setting focus on the first element
  • Utilising focus and blur events/li>
  • Providing real-time feedback via keyboard events
  • Integrating a validation plugin

• Extending jQuery with Plugins

  Integrating popular plugins

  • Leveraging contributions from the jQuery community
  • Extracting embedded data from semantic HTML
  • Manipulating images with slideshows

  Developing jQuery plugins

  • Conforming to best practises and naming conventions
  • Handling multiple elements
  • Enabling method chaining
  • Aliasing $ to avoid namespace conflicts
  • Consuming object literals to override defaults

• Creating Sophisticated User Interfaces with jQuery UI

  Integrating widgets for highly interactive web applications

  • Optimising screen real estate with accordions and tabs
  • Adding resizable, floating windows with dialog
  • Providing input assistance with autocomplete

  Implementing effects

  • Creating colour animations with .animate()
  • Leveraging complex animation easings and effects
  • Building drag-and-drop user interfaces