{ Web-Farmer } (θ)

Hi Folk,

Nowadays, lots of us use jQuery for front-end development and found the bad practice.

i.e. 

<div> Programming Language </div>

<ul id="language">

  <li>Basic</li>

  <li>C++</li>

  <li>Cobol</li>

  <li>Java</li>

  <li>Pearl</li>

  <li>Python</li>

  <li>PHP</li>

  <li>Ruby</li>

  <li>Scala</li>

</ul>

//Bad practice

//Give yellow background to Basic 

 1)  $("#language").children(": first").css({"background-color":"yellow"});

//Change Basic to Q-Basic

 2)  $("#language").children(":first").html("Q-Basic");

 //Adding new language to list

 3)  $("#language").append("<li>Cold Fusion</li>");

//Good practice

//Cache the language element

   var lngObj = $("#language");

   //Cache the first children so that it can be reused later on...

   var firstChild = lngObj.children(":first"); //There are plenty of ways to get First children..!!

   1) PLUS 2)

   //This is called chaining(calling more than one methods on single object)

   firstChild.css({"background-color":"yellow"}).html("Q-Basic");

 3) lngObj.append("<li>Cold Fusion</li>");

//Why it is important

Everytime whenever Jquery selector is created, it needs to traverse/Scan the DOM to find out reference to that element and it costs processing and time so degrade the speed.

Twitter had an issue in past for non responsive UI because of above.

This matters when there are thousand of elements in DOM..!!!!

Currently, I needed to abort the jQuery ajax request based upon certain conditions. My app uses plenty of $.post(). $.post() is actually an abstract of $.ajax(). And what $.post() lacks is we cant specify other settings like attach error handler !!

It is cumbersome to translate those $.post() into $.ajax(). If I do that then I can specify “beforeSend”  an ajax event inside $.ajax(). What “beforeSend” takes as arguments is jQueryXmlHttpRequest(jqXHR) object as first argument and setting as second argument. The setting here is the same as setting provided to $.ajax() method.

i.e.

$.ajax(  {

beforeSend:function(jqXHR,setting)

{

//check the url or other conditional checks

if(setting.url == "my restricted url")

//Abort request

jqXHR.abort();

// OR

return false;

}

});

We can either specify abort() or return false to abort above ajax request.

It takes lots of work to do for each ajax handler and that is not feasible.

So jQuery’s global ajax event handlers come for rescue. They acts as a hook for existing ajax handler.No matters whether it is $.ajax() or $.post() or $.get() or something else.

I used .ajaxSend() to act as a wrapper for all existing ajax call across the app. It attaches a function to be called before sending ajax request.

$(document).ajaxSend(function(e,jqXHR,setting)

{

//check the url or other conditional checks

if(setting.url == "my restricted url")

jqXHR.abort();//abort request

});

We can also achieve same result using jQuery.ajaxPrefilter() but which requires jquery 1.5.

That’s all..

As web is growing rapidly, speed became the vital part of today’s web.

So “java-script”  is on rescue.  Javascript is faster and executes on client side(i.e. web browsers).

the advent of web 2.0, Javascript is getting more popular nowadays. And its community is growing a light speed.

What basic things you should know before getting start A,B,C,D of jQuery  are

1) Javascripts

javascript language specifications i.e. datatypes, variables,functions,objects,closures.. I guess thats enough!!

2) CSS (Cascade Style sheets)

3) HTML (Hyper text markup language)

4) DOM (Document Object Model)

DOM is a structural representation of a document.

For instant, you have created simple html page with some tables inside it. So when it is rendered by the browser,  it now becomes the part of DOM. All the html elements including table,tr,td are a part of DOM. Javascript works  with DOM to add,update, delete a specific part of web page.