Chaining in jQuery

jQuery chaining is just like chaining in C#. The selector return its own object with the updated vals after a method or event making it simpler. This is how we write jQuery to set attribute value.
  1. $('#TxtName').addClass('abc');  
  2. $('#TxtName').attr('value','Someval');  
  3. $('#TxtName').css('display','block');  
or
  1. var objtxt= $('#TxtName');  
  2. $(objtxt).addClass('abc');  
  3. $(objtxt).attr('value','Someval');  
  4. $(objtxt).css('display','block');  
Chaining is a very powerfull feature this is how we can do it. 
  1. $('#TxtName').addClass('abc').attr('value','Someval').css('display','block');  
One line and its done. This reduce your .js file size, better perfomence (every selector used searchs the document for the match), short and readable Execution goes from left to right i.e for the above example the class abc will be then the value will be set and then the css and you can also add event.
  1. $("#TxtName").keypress(function(e) {  
  2.     alert("keypress called!");  
  3. }).mouseover(function(e) {  
  4.     alert("mouseover called!")  
  5. }).mouseout(function(e) {  
  6.     alert("mouseout called!")  
  7. });  
Ebook Download
View all
Learn
View all