techmaddy.com » 2009

Archive for May, 2009

jQuery, New Age JS Library

Sunday, May 3rd, 2009

jQuery – The new age JS library

We”ll take two scenario’’s to test the power of jQuery. The first one is, we have an table displayed in a page which has more rows added in it. When the user clicks on a button, the rows(alternate) style should be changed. If we use the normal javascript and DOM functions, then we”ll be using the className attribute to change the class name of the each row in a particular. The code may look like the following.

The First Scenario

			var trCollection = tblElement.getElementsByTagName("tr");
			for(i=0;i<trCollection.length;i++) {
				if(i%2 == 0)
					trCollection[i].className = ''myEvenRow'';
				}

The above code may take time in case of MSIE

, When the number of rows is about more than 100(We can have a try

). But the same logic with the jQuery can be implemented like the following and it”ll definitely gives you less execution time. The code snippet for jQuery will be like the following.

			$("table tr:nth-child(even)").addClass("myEvenRow");

isn’t simple to use and fast in execution, Yes it made a sense when the rows are more.

The Second Scenario

When we have an grid view and the user does the operation based on the selected record using a checkbox or radio option, it’’s always painful for the developers to give a Check All/UnCheck All,

, which i really hate when the user selects the option of display records in 100 and you have an check all and uncheck all.

Here goes my stone age code(js)

		var trColl = document.getElementsByName("checkboxesName");
		for(i=0;i&amp;lt;trColl.length;i++)
			trColl[i].checked = true;

Lovely jQuery Code

		$(''input[name=checkboxesName]'').attr(''checked'', true);

It really made huge difference when i had more # of checkboxes in the page. I tried increasing from 300 to 3000 elements to check, it made a huge difference in the execution time in MSIE 8.0, but FF i was not able to see the big difference, We can even try with timers in both the method of execution.

jQuery is really rocking and still i”m a baby in jQuery, will update you all soon with some other topics.