Learning jquery fourth edition [ebook], Study notes of Web Design and Development

Download Learning jquery fourth edition [ebook] and more Study notes Web Design and Development in PDF only on Docsity!

Learning jQuery

Fourth Edition

Better interaction, design, and web development with

simple JavaScript techniques

Jonathan Chaffer

Karl Swedberg

BIRMINGHAM - MUMBAI

Credits

Authors Jonathan Chaffer Karl Swedberg

Reviewers Kaiser Ahmed Carlos Estebes Alex Libby Natalie MacLees

Acquisition Editor Rukhsana Khambatta

Lead Technical Editor Dayan Hyames

Technical Editors Veena Pagare Zafeer Rais Kaustubh S. Mayekar

Project Coordinator Leena Purkait

Proofreader Paul Hindle

Indexer Monica Ajmera Mehta

Graphics Ronak Dhruv Abhinash Sahu

Production Coordinator Aditi Gajjar

Cover Work Aditi Gajjar

How we run the project and how you use the code is fundamentally very different from most open source projects—and most JavaScript libraries. The jQuery project and community is incredibly knowledgeable; we understand what makes jQuery a different programming experience and do our best to pass that knowledge on to fellow users.

The jQuery community isn't something that you can read about to understand; it's something that you actually have to participate in for it to fully sink in. I hope that you'll have the opportunity to partake in it. Come join us in our forums, mailing lists, and blogs and let us help guide through the experience of getting to know jQuery better.

For me, jQuery is much more than a block of code. It's the sum of total experiences that have transpired over the years in order to make the library happen. The considerable ups and downs and the struggle of development together with the excitement of seeing it grow and succeed. Growing close with its users and fellow team members, understanding them and trying to grow and adapt.

When I first saw this book talk about jQuery and discuss it like a unified tool, as opposed to the experiences that it's come to encapsulate for me, I was taken aback and excited. Seeing how others learn, understand, and mold jQuery to fit them is much of what makes the project so exhilarating.

I'm not the only one who enjoys jQuery on a level that is far different from a normal tool-user relationship. I don't know if I can properly encapsulate why this is, but I've seen it time and time again—the singular moment when a user's face lights up with the realization of just how much jQuery will help them.

There is a specific moment where it just clicks for a jQuery user when they realize that this tool that they were using was in fact much more than just a simple tool all along—and suddenly their understanding of how to write dynamic web applications completely shifts. It's an incredible thing and absolutely my favorite part of the jQuery project.

I hope you'll have the opportunity to experience this sensation as well.

John Resig Creator of jQuery

About the Authors

Jonathan Chaffer is a member of Rapid Development Group, a web development

firm located in Grand Rapids, Michigan. His work there includes overseeing and implementing projects in a wide variety of technologies, with an emphasis in PHP, MySQL, and JavaScript. He also leads on-site training seminars on the jQuery framework for web developers.

In the open source community, he has been very active in the Drupal CMS project, which has adopted jQuery as its JavaScript framework of choice. He is the creator of the Content Construction Kit, a popular module for managing structured content on Drupal sites. He is also responsible for major overhauls of Drupal's menu system and developer API reference.

He lives in Grand Rapids with his wife, Jennifer.

I would like to thank Jenny for her tireless enthusiasm and support, Karl for the motivation to continue writing when the spirit is weak, and the Ars Technica community for constant inspiration toward technical excellence. In addition, I'd like to thank Mike Henry and the Twisted Pixel team for producing consistently entertaining distractions in between writing sessions.

About the Reviewers

Alex Libby works in IT support. He has been involved in supporting end users

for the last 15 years in a variety of different environments and currently works as a Technical Analyst supporting a medium-sized SharePoint estate for an international parts distributor based in the U.K. Although Alex gets to play with different technologies in his day job, his first true love has always been with the open source movement, and in particular experimenting with CSS3, HTML5, and jQuery. To date, Alex has written several books for Packt Publishing, including one on HTML5 Video and another on jQuery Tools.

Carlos Estebes is the founder of Ehxioz (http://ehxioz.com/), a Los

Angeles-based software development startup that specializes in developing modern web applications and utilizing the latest web development technologies and methodologies. He has over 10 years of web development experience and holds a B.Sc. in Computer Science from California State University, Los Angeles.

He previously collaborated with Packt Publishing as a technical reviewer in the third edition of Learning jQuery and jQuery Hotshot.

Kaiser Ahmed is a professional web developer. He gained his B.Sc. from Khulna

University of Engineering and Technology (KUET) and M.Sc. in Computer Science and Engineering from United International University, Dhaka. He is also a co-founder of CyberXpress.Net Inc. (www.cyberxpress.net) based in Bangladesh.

He has been working as a Senior Software Developer at Krembo Interactive and D1SH.COM CORP., Canada, for the last 2 years.

He has a wide breadth of technical skills, Internet knowledge, and experience across the spectrum of online development in the service of building and improving online properties for multiple clients. He enjoys creating site architecture and infrastructure, backend development using open source toolsets (PHP, MySQL, Apache, Linux, and others (that is, LAMP), frontend development with CSS and HTML/XHTML.

I want to thank my loving wife, Maria Akther, for her great support.

Natalie MacLees is a frontend web developer and UI designer, and is the

founder and principal of the interactive agency Purple Pen Productions. In 2012, she published jQuery for Designers with Packt Publishing. She founded and runs the jQuery LA Users' Group, and together with Noel Saw, she heads up the Southern California WordPress User's Group, organizing WordPress meetups, help sessions, and workshops. She makes her online home at nataliemac.com.

Table of Contents

Table of Contents

Table of Contents

Table of Contents

Table of Contents

• Preface
• Chapter 1: Getting Started
  • What jQuery does
  • Why jQuery works well
  • Making our first jQuery-powered web page
    • Downloading jQuery
    • Deciding on the version of jQuery to use
    • Setting up jQuery in an HTML document
    • Adding our jQuery code
      • Finding the poem text
      • Injecting the new class
      • Executing the code
    • The finished product
  • Plain JavaScript versus jQuery
  • Using development tools
    • Chrome Developer Tools
  • Summary
• Chapter 2: Selecting Elements
  • Understanding the DOM
  • Using the $() function
  • CSS selectors
    • Styling list-item levels
  • Attribute selectors
    • Styling links
  • Custom selectors
    • Styling alternate rows
    • Finding elements based on textual content
    • Form selectors
  • DOM traversal methods [ ii ]
    • Styling specific cells
    • Chaining
  • Accessing DOM elements
  • Summary
    • Further reading
  • Exercises
• Chapter 3: Handling Events
  • Performing tasks on page load
    • Timing of code execution
    • Handling multiple scripts on one page
    • Alternate syntax for .ready()
    • Passing an argument to the .ready() callback
  • Handling simple events
    • A simple style switcher
    • Enabling the other buttons
    • Making use of the event handler context
    • Consolidating code using the event context
    • Shorthand events
    • Showing and hiding advanced features
  • Event propagation
    • The journey of an event
    • Side effects of event bubbling
  • Altering the journey – the event object
    • Event targets
    • Stopping event propagation
    • Preventing default actions
    • Delegating events
    • Using built-in event-delegation capabilities
  • Removing an event handler
    • Giving namespaces to event handlers
    • Rebinding events
  • Simulating user interaction
    • Reacting to keyboard events
  • Summary
    • Further reading
  • Exercises
• Chapter 4: Styling and Animating
  • Modifying CSS with inline properties
    • Setting computed style-property values
    • Using vendor-specific style properties [ iii ]
  • Hiding and showing elements
  • Effects and duration
    • Speeding in
    • Fading in and fading out
    • Sliding up and sliding down
    • Toggling visibility
  • Creating custom animations
    • Building effects by hand
    • Animating multiple properties at once
      • Positioning with CSS
  • Simultaneous versus queued effects
    • Working with a single set of elements
      • Bypassing the queue
      • Queuing effects manually
    • Working with multiple sets of elements
      • Queuing with callbacks
    • In a nutshell
  • Summary
    • Further reading
  • Exercises
• Chapter 5: Manipulating the DOM
  • Manipulating attributes and properties
    • Non-class attributes
      • Value callbacks
    • DOM element properties
    • The value of form controls
  • DOM tree manipulation
    • The $() function revisited
    • Creating new elements
    • Inserting new elements
    • Moving elements
    • Wrapping elements
      • Explicit iteration
    • Using inverted insertion methods
  • Copying elements
    • Cloning for pull quotes
  • Content getter and setter methods
  • DOM manipulation methods in a nutshell
  • Summary
    • Further reading
  • Exercises
• Chapter 6: Sending Data with Ajax [ iv ]
  • Loading data on demand
    • Appending HTML
    • Working with JavaScript objects
      • Retrieving JSON
      • Using global jQuery functions
      • Executing a script
    • Loading an XML document
  • Choosing a data format
  • Passing data to the server
    • Performing a GET request
    • Performing a POST request
    • Serializing a form
  • Delivering different content for Ajax requests
  • Keeping an eye on the request
  • Error handling
  • Ajax and events
  • Security limitations
    • Using JSONP for remote data
  • Exploring additional options
    • The low-level Ajax method
    • Modifying default options
    • Loading parts of an HTML page
  • Summary
    • Further reading
  • Exercises
• Chapter 7: Using Plugins
  • Finding plugins and help
  • Using a plugin
    • Downloading and referencing the Cycle plugin
    • Calling a plugin method
    • Specifying plugin method parameters
    • Modifying parameter defaults
  • Other types of plugins
    • Custom selectors
    • Global function plugins
  • The jQuery UI plugin library
    • Effects
      • Color animations
      • Class animations
      • Advanced easing
      • Additional effects [ v ]
    • Interaction components
    • Widgets
    • jQuery UI ThemeRoller
  • The jQuery Mobile plugin library
    • HTML5 custom data attributes
    • Mobile navigation
    • Delivering multiple pages in one document
    • Interactive elements
      • List views
      • Toolbar buttons
    • Advanced features
  • Summary
  • Exercises
• Chapter 8: Developing Plugins
  • Using the dollar ($) alias in plugins
  • Adding new global functions
    • Adding multiple functions
      • Extending the global jQuery object
      • Isolating functions within namespaces
  • Adding jQuery object methods
    • Object method context
    • Implicit iteration
    • Enabling method chaining
  • Providing flexible method parameters
    • The options object
    • Default parameter values
    • Callback functions
    • Customizable defaults
  • Creating plugins with the jQuery UI widget factory
    • Creating a widget
    • Destroying widgets
    • Enabling and disabling widgets
    • Accepting widget options
    • Adding submethods
    • Triggering widget events
  • Plugin design recommendations
    • Distributing a plugin
  • Summary
  • Exercises
• Chapter 9: Advanced Selectors and Traversing [ vi ]
  • Selecting and traversing revisited
    • Dynamic table filtering
    • Striping table rows
    • Combining filtering and striping
    • More selectors and traversal methods
  • Customizing and optimizing selectors
    • Writing a custom selector plugin
    • Selector performance
      • The Sizzle selector implementation
      • Testing selector speed
  • DOM traversal under the hood
    • jQuery object properties
    • The DOM element stack
    • Writing a DOM traversal method plugin
    • DOM traversal performance
      • Improving performance using chaining
      • Improving performance with caching
  • Summary
    • Further reading
  • Exercises
• Chapter 10: Advanced Events
  • Revisiting events
    • Loading additional pages of data
    • Displaying data on hovering
  • Event delegation
    • Using jQuery's delegation capabilities
    • Choosing a delegation scope
    • Delegating early
  • Defining custom events
    • Infinite scrolling
    • Custom event parameters
  • Throttling events
    • Other ways to perform throttling
  • Extending events
    • More about special events
  • Summary
  • Further reading
  • Exercises
• Chapter 11: Advanced Effects [ vii ]
  • Animation revisited
  • Observing and interrupting animations
    • Determining the animation state
    • Halting a running animation
      • Caution when halting animations
  • Using global effect properties
    • Disabling all effects
    • Defining effect durations
  • Multiproperty easing
  • Using deferred objects
    • Animation promises
  • Taking fine-grained control of animations
  • Summary
    • Further reading
  • Exercises
• Chapter 12: Advanced DOM Manipulation
  • Sorting table rows
    • Sorting tables on the server
    • Sorting tables using Ajax
    • Sorting tables within the browser
  • Moving and inserting elements revisited
    • Adding links around existing text
    • Sorting simple JavaScript arrays
    • Sorting DOM elements
  • Storing data alongside DOM elements
    • Performing additional precomputation
    • Storing non-string data
    • Alternating sort directions
  • Using HTML5 custom data attributes
  • Sorting and building rows with JSON
    • Modifying the JSON object
    • Rebuilding content on demand
  • Revisiting attribute manipulation
    • Using shorthand element-creation syntax
    • DOM manipulation hooks
      • Writing a CSS hook
  • Summary
    • Further reading
  • Exercises