[jQuery] Selectors

When you work with JavaScript, the most important and frequently used task is to get the reference of DOM elements. In general, you can use “document.getElementById()” function but you might want to select elements in different ways such as the class name or the tag name.

jQuery provides CSS style selectors. As a web developer, you already know some CSS syntax and you can just expand this to jQuery.  

 

1. What are jQuery Selectors?

jQuery selectors allow developers to easily identify any set of DOM elements with the familiar CSS syntax.

  • Selector Method

         jQuery(selector) or $(selector)

  •  Basic syntax:

        $(selector).methodName();

  • Many of the jQuery operations can also be chained:

         $(selector).method1().method2().method3();

 

2. Types of jQuery Selectors

There are three categories of jQuery selectors:

  • Basic CSS selectors: element, id, or class
  • Positional selectors
  • Custom jQuery selectors

The Basic Selectors are used to find elements within the DOM. The Positional and Custom Selectors are “filter selectors” as they filter a set of elements.

The list of selectors are exhaustive. Please refer to the jQuery web site for the full list. Here I will show some tips to use selectors more effectively.

 

3. Selector Caching

Rather than selecting an element every time you need it, select it when the page is loaded.

function showMsg() {
    $('#warningMsg').text('Errors during processing...');
    $('#warningMsg').show();
}
function hideMsg() {
    $('#warningMsg').hide();
}

Modify the code like this:

var msgDiv = $('#warningMsg');
function showMsg() {
     msgDiv.text('Errors during processing...');
     msgDiv.show();
}
function hideMsg() {
     msgDiv.hide();
}

It will work faster.

 

4. Chaining

In jQuery, method chaining is a very common and useful trick.

function showMsg() {
    msgDiv.text('Errors during processing...').show();
}

Chaining methods wherever applicable. The code becomes shorter and more readable.

 

5. Use $(this) for Target Element

In callback functions or event handlers, use $(this) to select the target element.

The following code is a toggle button.

$('#myBtn').click(function () {
   $('#myBtn').removeClass('btn-warning').addClass('btn-info');
});

The better code can be:

$('#myBtn').click(function () {
    $(this).removeClass('btn-warning').addClass('btn-info');
});

this‘ is a DOM object so you need to wrap it with $() to create an jQuery object.

 

6. Selecting Elements inside an Element

They are a couple of ways to select elements inside an element.

// get all sections in the "body"
var bodyElement = $('#body');
var sections = $('section', bodyElement);
sections.each(function (index) {
    $(this).html('Section ' + index);
});

It is good but there is another way too: Use find().

$('#body').find('section').each(function (index) {
    $(this).html('Section ' + index);
});

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s