LA.NET [EN]

In the last posts, we’ve started introducing JQuery. As we’ve seen, we start by getting a valid reference to a “JQuery object” that wraps one or more of the existing DOM nodes and then we can invoke one of several methods for interacting with those nodes.

This  means that the first thing you need to understand in order to use JQuery is how to get a reference to one or more existing DOM nodes (in future  posts, we’ll see that we can also create new DOM methods through the jQuery method). JQuery is extremely flexible and allows you to select elements through its selector syntax, which is based on the well known CSS selector.

In practice, this  means that you can use any of the known CSS selectors to get a JQuery object that wraps the matching DOM elements. The most interesting characteristic of this feature is that it doesn’t depend on the browser. In other words, even though the browser might not recognize a specific CSS selector, if it’s supported by the CSS standard, then JQuery will be able to understand it! Pretty cool, right?

Today, we’re going to start with the basic selectors and leave the more advanced ones for future posts. Take a look at the following HTML (we’ll be using it for showing how to use the basic selectors):

<h1 class=”title”>Getting started with selectors</h1>
<p>There are several kind of selectors. Here are some of the most use:</p>
<ul>
  <li>you can select by tag</li>
  <li id="selectByID">you can select by ID</li>
  <li class="something">you can select by class name</li>
  <li>you can select by by attribute</li>
  <li>you can select by attribute with value</li>
</ul>
<div>
  <p>This is a paragraph inside a div</p>
</div>

Now, let’s suppose we want to select and hide all li elements defined on this page. How can we do that? It’s really simple with JQuery:

$(”li”).hide(500).show(200);

The previous snippet returns a JQuery object which wraps all li elements defined on the page.And how can we select all elements that have the something class applied to them? Again,really easy with JQuery:

$(”.something”)

The returned JQuery object will only wrap a single li (because that’s the only element which has that class applied to it). And what about getting all li elements with the class something? Yes,like CSS selectors, JQuery selectors let you specify a more specific rule:

$(”li.something”)

And how about getting all paragraphs placed inside a div. Yes, that’s also really easy with JQuery:

$(”div p”)

Really easy, right? Notice that you can mix selectors until you’re happy with the final result ( for instance, what do you think this selector does: div p.test span).

Another interesting thing you can do is getting elements which have attributes applied to them. For instance, suppose you want to wrap all the elements that have a class applied to them. Here’s how you can do that:

$(”[class]”)

In this case, you’ll end up with a JQuery object that wraps the h1 and li elements which have the class defined. Oh, and you can also wrap elements that:

• have an attribute that start with a specific value.  For instance, a[href^=http://] is a good way of getting all HTTP links ;
• have an attribute that end with a specific value. The syntax is  similar to the previous example, but you use the $ instead of the ^ symbol;
• have an attribute which contains a specific text.  Once again, really similar to the previous example, but in this case, you’ll use the * character (ex.: get all inputs that have the string hi can be achieved through the selector input[value*=hi]);
• have an attribute with a specific value. I guess that the simplest example of this is getting all text inputs from a page: input[type=text].

And I guess we’ve talked about enough selectors for one day 🙂 We’ll keep looking at selectors in the next posts. Keep tuned for more.