Learning jQuery is Fun : jQuery Quick Tutorial – Part 1 : Selectors

 

Recently i have seen too much hype about jQuery. I looked into the same and on first sight, i am impressed really with the framework and functionality. Some of the functionality which i had taken 3 to 4 days can be completed even in half day without need of testing in each browser. Quite useful.

jQuery is JavaScript Library which aids developer to play with JavaScript quickly. There are many features covered in the library which are tested on IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome. It has around 19KB of footprint.

Not really useful comparison but you can still look into the http://javascriptant.com/articles/24/javascript-libraries-by-comparison (Comparison of various JavaScript libraries). You cannot dig into this to choose which library you should use. It is depend on what kind of features you require what way.

If you wanted to started with jQuery, you can jump into the http://docs.jquery.com/Main_Page after reading this article. This document is great help to start with and to understand the concepts.

Lets start with jQuery basics. Once you gone through this, you can refer any jQuery book or the above tutorial for complete understanding.

Before starting, let me explain the most fundamental sign (not movie) of jQuery. Let me present you guys the sign of master library jQuery and it is : $ ( Prototype Framework Guys: Huh!! we have searched it 😀 ) 

In JavaScript, we are using document.getElementById to get the element which we want. And then we operate upon it. The same functionality is used by $. But if getElementById is DROP then $ is full RIVER. In every statement of jQuery, you will see $ sign. From now on, don’t just think that $ is money, it can be jQuery too. (poor joke, isn’t it 🙂

There are many parts of learning jQuery. Let us take overview of one by one quickly.

1. Selectors: Help you to select the element(s) from the page. It could be one element or array of elements

$( expression, context ) will be used to select element(s). There are many type of expression supported by jQuery to easily select what we want. expression will be string with quotes.

Following are the type of selection we can make with the jQuery. For more, you can visit the jQuery docs.

Basic Selectors

• Suppose you want to select all the div present in the page, you will write $(“div”), same way for td, its $(“td”)
• If you want element with some ID, remember the CSS stuff. In CSS when you make class with # sign, it will apply to element contain that ID. Concept is similar here. jQuery uses CSS selector the same way. So you can write $(“#ManishPansiniya”) and it will return element with id=”ManishPansiniya”. (Sry for my marketing :P)
• Same way, remember CSS for class. You put . (dot) before class and apply that class to any element to enable the style written in class. Here if you want to find elements which has some class value, you must use .(dot) before that. Suppose you wanted to find elements with “red” class style throughout page, use $(“.red”). Please don’t forget to put quotes as i miss it every time. Why the hell Quote is there, can’t they make this without quote :).
• You can mix two or more selector and make your own selector. Wonderful, isn’t it. Let me think, why can’t we do it with Hollywood Actresses (LOL just kidding). So you can write like $(“div ,p, span”) and it will return array of all div+p+span tag elements. You can also specify the id/class with the tag. e.g. $(“p.manish”). It will return all <p> tag with “manish” class. Interesting!!!. For more selector, goto Selectors

Index Filters

With index filters, you can select the tags with specified index or indexing function. And index filter will be specified by : (Colon) sign. Actually all the filters will be specified by : (Colon)

• If you need to select first element from the array for certain tag, you can query like $(“tr:first”). This will return first <tr> from the page. Same way $(“tr:last”), $(“tr:even”), $(“tr:odd”) work. You are pretty smart to understand these. Huh!!!.
• There are some function index also, which provides array of elements for criteria known as eq,lt,gt. For example $(“tr:eq(2)”) gives second tr from the page. $(“tr:lt(4)”) provides tr less than 4. Similar way gt works.

Content Filters

With this filter you can query page using content in query. There are four type of content selector. Now, you are more smart ( I am not saying that you are over smart. again poor joke 😐 ) to understand the same from name. it is :Contains(text), :empty, :has(selector), :parent.  example of each is in order.. $(“div:contains(‘Manish’)”), $(“div:empty”), $(“div:has(p)”, $(“div:parent”) returns all div contains manish, all div which are empty, all div which has p tag, and last all div which are parents, accordingly.

Visibility Filters

Simplest filters of all. I am not going in detail. Filters are $(“div:hidden”) and $(“div:visible”)

Attribute Filters

With attribute filters, you can query html page with the tags with provided attribute criteria. Attribute criteria is provided in [ ] (Square brackets. Please note that in function filters or in attribute filters, you are using “ (Quotes) anywhere. You can query for input tag which has text attribute equal to Manish. At some places, you can see @ sign for attribute but it is deprecated from version 1.2 and removed from 1.3. Sometime I think that my mind is also deprecated and will be removed soon :P.

• $(“div[id]”) returns all div on the page with id attribute.
• $(“div[id=’Manish’]”) returns div with id=Manish. Here you need to provide quotes. same way $(“div[id!=’Manish’]”)
• There are 3 more attribute filter which has blood relation 🙂 with regular expression. If you are aware of ^, $ and * sign, it would be easy to understand. If you are not aware, then i will make it easy for you :P. If i write ^Manish, then it will return all the words started with Manish. If I write $Manish, it will return words end with Manish. and * is for contains. That means *Manish can find words which cotains Manish, no matter at which position. Same funda will be used in $(“input[name^=’btn’]”), $(“input[name$=’btn’]”),$(“input[name*=’btn’]”)

Above are important filters and notes to understand how selector works. Generally selectors are used to select elements from the page and then manipulate the appearance of that element. There are still some selector left. I have specifically not included that here. To understand those is homework for you. For more selectors, you know already, go to Selectors

For example, $(“p”).css(“color”,”red”) when executed, change the color of all paragraph to red. Single line, big impact. Powerful concept!!!

Hope, you like the article and i am awaiting your feedback (only positive feedback is allowed :)) to get motivation for the next part. lol.