Book Image

Instant jQuery Selectors

By : Aurelio De Rosa
Book Image

Instant jQuery Selectors

By: Aurelio De Rosa

Overview of this book

jQuery's selectors is one of the most important concepts of the jQuery library. Usually, the first thing you do is to select one or more elements of a page in order to manipulate them. Therefore, to efficiently learn the usage of jQuery's selectors is one of the first steps to successfully build your website. Instant jQuery Selectors is a practical guide that will teach you how to use jQuery's selectors efficiently in order to easily select theelements of your pages to operate upon with jQuery's methods. You will go through the most common problems that you could face while developing your project and will learn how to solve them with the help of focused examples that Instant jQuery Selectors has to offer. Instant jQuery Selectors, starting from how to set up jQuery and how to choose the right version for your project, explains to you all the selectors available using a multitude of simple and practical recipes that will help you start using selectors in the right way. Reading the presented recipes you'll learn about the numerous selectors and filters of jQuery – almost 100 of them! You will see how to reuse collections, the methods to filter collections, and how to take advantage of the lesser known parameter of jQuery's constructor: context. Also, you'll discover the methods to traverse the DOM and the techniques to improve the performance of your website by just tweaking selectors. Instant jQuery Selectors is the resource to learn everything you need to know about jQuery's selectors.
Table of Contents (7 chapters)

How to have efficient selectors (Become an expert)


Throughout the book, I've given several hints to improve performances. This recipe will reinforce some of them and add other useful tips and tricks to improve the performance of your website by simply selecting elements in the right way.

How to do it...

To boost the performances, keep in mind the following points:

  1. Don't use the Universal selector (explicitly or implicitly). Never! Seriously!

  2. The best selectors are the Id, Class and Element selectors, because under the hood jQuery uses native JavaScript functions.

  3. The best performances are achieved using the ID selector.

  4. Never prepend a tag name before an id, it'll slow down the selector. For example, don't turn $('#content') into $('div#content').

  5. If your selection needs more than one selector, start with the Id selector if possible. For example, $('#content p.border').

  6. Remember to use the context parameter or the find() method when possible. For example, turn $('#content p.border') into $('p.border', '#content') or equivalently (as discussed in the Context Matters should know recipe) into $('#content').find('p.border').

  7. jQuery's selectors engine, called Sizzle, parses selectors from right to left. Therefore, to speed up your selection, be more specific on the right part and less on the left. For example, turn $('div.wrapper .border') into $('.wrapper p.border').

  8. Don't be too specific if the same set can be selected with less selectors. For example, $('#content p.border') is better than $('#content div.wrapper div p.border').

  9. If you need to use a filter, it's always better to narrow down the set of elements and then use the filter. For example, turn $(':enabled') into $('#formId').find(':enabled') or even better $('#formId').find('input:enabled').

  10. Filters such as, :button, :checkbox, :visible, :input, and others are a jQuery extension and not part of the CSS specification, so they can't take advantage of the performance provided by querySelectorAll(). To have better performance, it's better to first select elements using a pure CSS selector and then filter using filter() (that is,.filter(':input')).

  11. Filters such as, :image, :text, :password, :reset and others are a jQuery extension and not part of the CSS specification, so they can't take advantage of the performance provided by querySelectorAll(). To have better performance, it's better to select using the attribute selector. For example, turn $(':reset') into $('[type=reset]').

  12. To improve the performance of the Not Equal attribute selector in browsers that support querySelectorAll(), use the not() method. For example, turn $('.border [placeholder!=Age]') into $('.border').not('[placeholder=Age]').

  13. To improve the performance of :lt() filter in modern browsers, use the slice() method. For example, turn $('.border:lt(2)') into $('.border').slice(0, 3).

  14. To improve the performance of the :gt() filter in modern browsers, use the slice() method. For example, turn $('.border:gt(2)') into $('.border').slice(3).

  15. To improve the performance of the :has() filter in modern browsers, use the has() method. For example, turn $('div:has(p.border)') into $('div').has('p.border').