jQuery is JavaScript library or JavaScript framework that emphasizes interaction between JavaScript and HTML, excellent support for Ajax application and other JavaScript features quick and easy. It was released in January 2006 by John Resig. In the trend Rich Internet Application ( RIA ) and responsive web pages ( Web 2.0 ), jQuery become more important to create dynamic and responsive web application.

In this discussion, Basic Learning jQuery, we will learn how to create basic dynamic web pages with jQuery and how jQuery works. If want to use jQuery, no installation is required, we just place jQuery on our site. Then, link in our web pages to jQuery library with script tag. See detail how to add JavaScript library in our web page at Basic Learning JavaScript.

jQuery harnesses the power of Cascading Style Sheets ( CSS ) and XPath selectors to let us quickly and easily access elements or groups of elements in the Document Object Model ( DOM ). Get more detail about DOM at Basic Learning HTML : Document Object Model – DOM. And the most advantage if we use jQuery, jQuery place a high priority to make sure our code will work in across all major modern browser.

In the first discussion, we will learn how to select element with jQuery and how to manipulation element html. We can use type of selector : CSS, XPath or custom. One of the most powerful aspect of jQuery is it’s ability to make DOM traversal easy. Here are some examples of what selectors can do. To collect a group of elements, we can use the simple syntax, such as “$(selector)” or “jQuery(selector)”.

The $() function is an alias for jQuery() function with returns a specila JavaScript object containing an array of the DOM element that match the selector. For example in this discussion, we will manipulation of html elements with jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<html>
<head>
<title>Basic Learning jQuery</title>
<script src="jquery.js" type="text/javascript" src="jquery.js"></script>
</head>
<body>
<h1>Basic Learning jQuery as Title</h1>
<div>
	<span>
             This is sample paragrah 1.
	</span>
 
        This is sample paragrah 2.
        This is sample paragrah 3.
        This is sample paragrah 4.
</div>
        This is sample paragrah 5.
 
</body>
</html>

We recommend to use Mozilla Firefox with Firebug plugin that provides a debugging and inspection environment for web development. Let’s use jQuery to find the “h1″ element in our example document above. Type “jQuery(‘h1’)” in the Firebug console and what happens ..? see screenshot more detail …

Basic jQuery Selector

When we executed / run command on the console, Firebug always prints a representation of the return value to the screen. In this case, when we execute “jQuery(‘h1’)”, it returned an object with a length property set to 1. So, how to set or manipulate it ..? Let’s type “jQuery(‘h1’).css(”color”, “red”);” and see what happens when we execute this command ..?

Manipulate DOM with jQuery

With the code above, we will manipulate css style of “h1″ element, in this case font color of h1 element will change to red. See next article, how to manipulate DOM with jQuery.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • Slashdot
  • Technorati
  • YahooMyWeb