Tips & Tricks: JQuery: Write Less, Do More (Part 1)

JQuery is currently frequently used in web development. Now a day’s it is a basic arsenal for a web developer. Though there are thousands of site and tutorial for learning jQuery I want to write something about jQuery through my own style. In this part we try to be familiar with jQuery and learn the basics of jQuery.

Now what is jQuery? It is a javascript library; usually it reduces the javascript programming. In jQuery which I achieve by writing a line of code if I want to achieve the same thing with javascript I must write more code than jQuery. Hope fully it is easy to learn jQuery and there is huge resource in web. So let’s learn how to start with jQuery.

Add jQuery library to your page

If you use VS 2010 as your IDE you have already the library file in your Scripts folder under your web project. Just drag ‘jquery-1.4.1.js’ file in your source code file’s head section. You are now ready for use jQuery. For other cases you can download the latest version of jQuery library from the link http://docs.jquery.com/Downloading_jQuery and use it in your project. The next section we will try to familiar with some selector of jQuery.

Basic Example

<title>Learn Jquery</title>

$(document).ready(function () {

$("button").click(function () {

$("p").hide();

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<p>This is another line</p>

<p>All line will be hide if you click button</p>

<button>Click Me</button>

</body>

</html>

This example will hide the entire paragraph element when click the ‘Click Me’ button. Let’s take a deeper look in the code.

This two line is use to include the jQuery library in the code and intelligence support for visual studio.

All jQuery code wrapped in the line:

$(document).ready(function () {

});

But what is ‘$’? Actually the heart of jQuery is the function jQuery. And jQuery = $. You can use jQuery instead of ‘$’. Though you can write jQuery without that line but it is good practice. This line means that all action taken after the document fully loaded.

$("button").click(function () {

$("p").hide();

});

When click the button find all ‘p’ element on the document and hide them. Little bit easy huh. So what is the basic principal follow to write jQuery?

Basic syntax: $(selector).action()

A dollar sign to define jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

Some common selector of jQuery

There are various types of jQuery selector. They are as:

Element selectors
Attribute selectors
CSS selectors

In this section we will see some common jQuery selector. For these purpose let’s take an example page which contain some html element. The page is like:

<body>

<div>

</div>

<h1>This is another div which has an id</h1>

</div>

<p>This is also a div which has css class</p>

</div>

<p> Fruits</p>

<p>Fruits of Bangladesh</p>

<a href="#">Mango</a>

<a href="#">Jack Fruit</a>

<a href="#">Water Melon</a>

</div>

<p>Flower</p>

<a href="#">Night Queen</a>

<a href="#">Jasmeen</a>

</div>

<p>This is jQuery Selector</p>

<li>Element Selector</li>

<li>Attribute Selector</li>

<li>CSS Selector</li>

</ul>

</body>

Element Selector

$("div") select all div of the document
$("div.section") select all div which has class ‘section’
$("div#menu") select all div which has id ‘menu’
$("div#menu p") select all <p> of the div which have an id ‘menu’. The better way to do that is $("p","#menu"). Because the previous way search the item from the beginning of the document and the letter way just search the item form the given DOM element
$("div#menu > p") select all direct paragraph of div which div has id ‘menu’. For our document it is select <p> Fruits</p> and <p>Flower</p> but it not select <p>Fruits of Bangladesh</p> because it is not direct child of ‘div#menu’
$("body *") select all body element
$("a:even") select all even anchor of the document
$("a:odd") select all odd anchor of the document
$("a:contains('Mango')").wrap("<b></b>") select all anchor tag which contain text ‘Mango’ and wrap the anchor in a bold tag

This is some of thousands. If you want to learn more please visit

http://api.jquery.com/category/selectors/

Attribute Selector

jQuery also filter elements using attribute. The basic syntax to select element by attribute is as $(“[attribute name]”). Some examples are given below:

$("[id]") select all elements which has attribute id
$("[href]") select all elements which has href attribute
$("[href ='#']") select all elements which has href attribute and the value of attribute is equal to “#”
$("[href!= '#']") select all elements which has href attribute and the value of attribute is not equal to “#”
$("[href ^='#']") select all elements which has href attribute and the value of attribute exactly start with “#”
$("[href $='#']") select all elements which has href attribute and the value of attribute exactly end with “#”
$("[href *='#']") select all elements which has href attribute and the value of attribute contains “#”
$("a:contains('Mango')").attr("href","http://www.google.com") select the anchor that contains ‘Mango’ and set the href attribute to ‘http://www.google.com’

In the last section we try to discuss some commonly used jQuery API like attr().

CSS Selectors

CSS selector usually used to change the css property of html element. This selector use jQuery API .css().

$("a").css("display", "block") this line select all anchor tag and set its display property to block.

In the next part we will try to learn some frequently used event function of jQuery.

Tips & Tricks

Wednesday, July 20, 2011

JQuery: Write Less, Do More (Part 1)

1 comment: