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 Essentials

Book Description

Optimize and implement the features of JQuery to build and maintain your websites with minimum hassle

About This Book

  • Build dynamic websites efficiently without any performance issues
  • Learn to use existing jQuery plugins and or write your own for your websites
  • This is the most up-to-date book on the market at the moment, packed with detailed explanations and real-world examples

Who This Book Is For

Whether you are a beginner or an experienced developer who is looking for quick answers, you will find what you need in this book.

What You Will Learn

  • Quickly find and modify HTML DOM elements
  • Use animation to add flair to your site
  • Create your own events to decouple your application
  • Measure the performance of your website’s JavaScript
  • Write unit tests to ensure that your application is behaving correctly
  • Use plugins to to save reinventing the wheel and enhance your site quickly
  • Use client-side validation on forms to prevent your users from sending bad data to your application
  • Write your own jQuery plugins in order to encapsulate your company’s business logic

In Detail

JQuery is still the most popular JavaScript library. It is used in over 60% of the top websites on the Internet. It was written to make DOM manipulation (so, moving things around a web page) easier for developers. It acts through JavaScript to ascribe HTML elements to the DOM attributes. Because it is a library of predefined functions, all you need to start using jQuery is a working knowledge of the syntax and a reference for the functions available to you.

This practical guide shows you how to make the most of jQuery to boost the performance of your websites and applications. We start off with a quick glance through the basics of JQuery, followed by the explanation of JQuery selectors, filters, and DOM element manipulation. After this, you will learn how events and animations can be used to create and design beautiful and user-friendly sites. Next, you will be familiarized with Ajax functions to help you send and receive data from your server. Finally, we’ll walk you through using built-in plugins and eventually create your own plugins for your websites.

By the end of this book, you will be able to to build robust and efficient websites successfully using JQuery.

Style and approach

This book takes a fast but thorough walk through jQuery. The goal is to get you writing fast and efficient jQuery quickly. It uses easy-to-read, jargon-free text and lots of ready-to-use code examples.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. jQuery Essentials
    1. Table of Contents
    2. jQuery Essentials
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. jQuery Part by Part
      1. Life before jQuery
      2. Why was jQuery created?
      3. The major components of jQuery
        1. The DOM selection
        2. DOM manipulation
        3. Events
        4. Form
        5. CSS and animation
        6. Ajax
        7. Helpers
      4. Why are there two maintained versions of jQuery?
      5. The difference between minified and un-minified versions
      6. What is a content delivery network?
      7. Summary
    9. 2. jQuery Selectors and Filters
      1. jQuery selectors
        1. The chapter code
        2. Protocol-relative URLs
        3. The jQuery object
      2. Creating selectors
        1. ID selectors
        2. Class selectors
        3. Tag selectors
        4. Combining selectors
        5. Descendent selectors
        6. Attribute selectors
      3. Creating basic filter selectors
        1. Content filters
      4. Using chaining to quickly and neatly continue queries
      5. Summary
    10. 3. Manipulating the DOM
      1. Dimensions and positions
        1. Examples
        2. Developer tools
        3. Reading the size of the screen and elements
      2. Classes and styles
        1. The JSON object
        2. Behavior classes
      3. Attributes and properties
        1. Keeping images proportional
        2. Removing attributes and properties
      4. Summary
    11. 4. Events
      1. The ready event
      2. Hooking events
      3. Unhooking events
      4. Namespacing events
        1. The event handler
        2. The event object
          1. event.target
          2. event.relatedTarget
          3. event.type
          4. event.which
          5. event.metaKey
          6. event.pageX and event.pageY
          7. event.originalEvent
      5. Passing data to an event
      6. Event shorthand methods
      7. Creating your own events
      8. Triggering events
      9. The death of the .live() and .die() methods
      10. Looking deeper at .on()
      11. Summary
    12. 5. Making Your Site Snazzy with jQuery
      1. The importance of animations
      2. Hiding and showing elements
        1. .fadeOut()
        2. .fadeIn()
        3. .fadeToggle()
      3. Sliding elements around
        1. .slideUp()
        2. .slideDown()
        3. .slideToggle()
      4. Creating custom effects
        1. .animate()
        2. .delay()
        3. .queue(), .dequeue(), and .clearQueue()
        4. .stop() and .finish()
        5. jQuery.fx.interval and jQuery.fx.off
      5. Using effects correctly
      6. Summary
    13. 6. Better Forms with jQuery
      1. Employing form methods
        1. .submit()
        2. .focus()
        3. .blur()
        4. .focusin() and .focusout()
        5. .change()
        6. .select()
      2. Tooltips
      3. Placeholder
      4. Enabling and disabling elements
      5. Validation
      6. Filtering out unwanted characters
      7. Summary
    14. 7. Talking to Your Server
      1. Before jQuery
      2. How jQuery helps us
        1. Loading HTML – .load()
        2. Loading JSON Data – .getJSON()
      3. Loading and executing JavaScript – getScript()
        1. Reading and writing data: jQuery.get() and .jQuery.post()
      4. Helper methods
        1. Creating query data – $.param()
        2. Creating query data from a form – .serialize()
        3. Creating an object from form data – .serializeArray()
      5. Ajax events
        1. When an Ajax request begins – .ajaxStart()
        2. When an Ajax request completes – .ajaxStop()
        3. When an Ajax request sends data – .ajaxSend()
        4. When an Ajax request fails – .ajaxError()
        5. When an Ajax request succeeds – .ajaxSuccess()
        6. When an Ajax request finishes – .ajaxComplete()
      6. Summary
    15. 8. Writing Code that You can Read Later
      1. Separation of concerns
      2. Breaking code into logical units
      3. Using events to decouple code
      4. Using unit tests
        1. Why write unit tests at all?
      5. Summary
    16. 9. Faster jQuery
      1. Writing performance tests
        1. Measuring jQuery
      2. jQuery selectors
        1. Using IDs over other selectors
        2. Caching your selectors
        3. Optimizing selectors
          1. Right to left
          2. Reducing overly specific selectors
          3. Narrowing your search
        4. Other jQuery optimizations
          1. Updating to the latest version
          2. Using the correct version of jQuery
          3. Don't use deprecated methods
          4. Using preventDefault() when appropriate
          5. Never modify the DOM in a loop
      3. jQuery isn't always the answer
        1. Using document.getElementById
        2. Using CSS
      4. Summary
    17. 10. Benefiting from the Work of Others with Plugins
      1. Finding plugins
      2. Installing plugins
        1. Updating a plugin
        2. Uninstalling plugins
        3. Adding a plugin
      3. jQuery UI
        1. jQuery UI Interactions
        2. jQuery UI widgets
        3. The jQuery UI widget factory
        4. Writing your own plugin
          1. Prep work
          2. The plugin
          3. Best practices
            1. Preserve chaining
            2. Use an IIFE
            3. Add only one function to jQuery
            4. Let the user theme it
            5. Test, test, test
            6. Document it
            7. Minify it
      4. Summary
    18. Index