JQuery - Selector

<accesscontrol>Main:MyGroup</accesscontrol>

Foreword

You have all heard about jQuery and used it somewhere in your code. However, you might not notice about the constructor of jQuery $(). Currently we just us it something like this:

$("#element_id").text("Set text for an element");

What does that mean? Just use jQuery to get an element and use text method, of course from jQuery library, to work with innerText of an DOM element.

Is it that the power of jQuery? NO.

Come back to the constructor, We have 2 things to consider here:

1. What does it return?
2. How does it work to get the elements?

Constructor

Return what?

Let's look at the code below:

/// Return only ONE object by using id
var _obj1 = $("#element_id");
/// Return all rows inside a table specify by table_id, of course under tbody tag
var _obj2 = $("#table_id>tbody>tr");

jQuery always returns a jQuery object which contains an array of elements match the SELECTOR specified in constructor:

• Always returns an object -> NEVER CHECK IF IT IS NULL OR NOT.
• if _object1.length == 0 then there is no elements match the selector.

Selector

jQuery uses selector to get the elements. The syntax is similar to CSS You can select a single element:

$("#gdEntries").css("border", "solid 1px navy");

Or select by class (.):

$(".gridalternate").css("background", "lightsteelblue ");

or from a couple of classes (, like in CSS separates multiple selectors):

$(".gridrow,.gridalternate").attr("tag", "row");

You can also select elements (plain element) and apply filters to the elements. The following selects all buttons in a document and attaches a click handler:

 
$("input:button ").click(function(event) { alert("clicked"); });

A more complex example might select all rows in a table:

$("#gdEntries>tbody>tr").css("border", "solid 1px red");

If you’re at all familiar with CSS all of this should look familiar: You can use the same syntax in CSS stylesheets (with the exception of the :button filter – jQuery adds a host of custom filters) to find elements to style. The idea is simple: Use what you already know or at least use a standard mechanism rather than a custom selector syntax. CSS is quite powerful in selecting elements on a page and given a reasonably thoughtful HTML layout should make just about any element or group of elements easily selectable.

If you’re rusty on CSS, here are a few of the common jQuery/CSS selectors types that can be applied (full list):

Selector	Example	Description
Element	$("td")	Select an HTML element tag
#id	$("#divMessage")	Select an HTML element by its id
.cssclass	$(".gridalternate")	Select HTML elements by having that css style
selector,selector	$("input:button,input:text")	Multiple comma separated selectors can be combined into a single selection.
ancestor descendant	$("#divMessage a")	A space between selectors/elements/tags finds nested elements. This syntax is similar to Css ancestor descendant syntax.
parent > child	$("p > b")	Matches all immediate children of an element or selector expression that match the right element/selector.
prev ~ siblings	$("#row_11:nth-child(2)~td")	Matches the next siblings at the sample level as the preceeding expression. Example, matches 3-nth columns of a table row. Best used as a find() or filter() against an existing jQuery instance.
:filter	$("input:button")	: applies filters to the query. jQuery support CSS 3 filters plus a number of custom filters. Examples: :not,:button,:visible,:hidden,:checked,:first,nth-child(1),:has,:is,:contains,:parent
[@attribute]	$("p[class=gridalternate]")	Selects an attribute of an element = equals string ^= startswith $= endswith = contains

Selectors can get quite sophisticated. Lets say you want to look for any cells in a table that start have an ID that starts with the value Pk:

$("#gdEntries>tbody>tr>td[id^=Pk]").width(30);

Conclusion

The most important thing to remember in this post is the SELECTOR. By understanding the selector, you can make a better code in client side with well - organized and easy to read. Selector is presenting for normal expression in css style syntax. Can you say in normal speed of this: "table>tbody>tr>td[id^=Pk]"?

The post is based on this article, Click here to get the full one.

Any contribution in this post are welcome