Selecting DOM elements and Events with JQuery

Continuing with JQuery(refer previous posts on JQuery Introduction to JQuery and Watermark textbox with JQuery) , today I thought to write down a small article about selecting DOM elements and events in JQuery. This will show the power of JQuery, how easily you can play with the DOM elements on a webpage. JQuery uses CSS 3.0 syntax to select single or multiple elements.

Using CSS syntax means,

  • Select elements by ID
  • Select elements by CSS class
  • Select elements by attribute filter

Let’s take simple examples to understand what I mean,

Select element by ID, let’s say you have a paragraph tag on your page and its Id is “P1”.

To apply a background color change on this paragraph tag only we need to write down the following line of code,

Similarly if we want to apply style sheet on textboxes on our page which are having using some specific stylesheet class we can do that in the following manner,

Same way if we want to apply a style on all of paragraphs on our page we will do like this,

You can see how easy it is to play with DOM elements with JQuery. You can not only apply stylesheets but also can append DOM elements at runtime. Let’s look at the simple example how we are appending DIV tags at runtime and calculating the number of DIV tags.

In the above example we are appending DIV tags on click of button.  You can see how easy it is to append DOM elements with a single line of code. This is the beauty of JQuery.

Event handling in JQuery is quite easy. Before looking into next example of JQuery events, we will go through few features of JQuery events,

  • Classic Javascript event handling vary between browsers
  • JQuery event model for all supported browsers
  • JQuery event handlers take a function as parameter
  • JQuery provides easy mechanism for binding and unbinding events
  • JQuery provide common model for event handlers
    • The ‘this’ pointer always equals the element the event fired on
    • An event object is always passed as a parameter
    • Event object is a cross-browser  ‘normalized’
  • JQuery provides chain-ability

Lets look at the example below.

In the above example what I did is that I created a table which shows result of a football tournament. When page gets loaded it will show plain table without any formatting. I placed a button above the table and on its register events with the button click event. You can see we are performing number of functions on click event and all are join together. Although it makes the code bit complex but it’s a quite handy feature of JQuery. Once you click the button you can see that table header and rows color gets change. Here we use the CSS 3.0 to put functionality on our page. Like to add color on header row we put  $(#table1>thead>tr”).css({“background” : “green”, “color” : “white”});

Similarly we change the table row colors to blue. Now you will see that there rows with gray color. If you look into this line  $(#table1>tbody>tr:even”).css({ “background”: “gray”, “color”: “white” })  you will see that for even rows of the table we put gray color. And for even rows we add a click function as well. In which we are fetching the first column value and showing it in alert.

There are number of built-in functions provided by JQuery(you can find more on JQuery site), which reduce the number of line of codes and makes our JavaScript more readable. Have a look at simple example below which is using toggle function of JQuery. I added the classic JavaScript function as well which Hide/Visible the paragraph. So that you can compare how easy it is to work with JQuery.


I am sure this post will be very handy to understand the basic concepts of JQuery.


Tagged with: , , ,