simple Jquery tips

1. Loop through Elements Backwards

   We all know each() lets us easily loop through elements, but what if we need to go backwards? Here’s the trick:

$(function(){
 var reversedSet = $("li").get().reverse();
 //Use get() to return an array of elements, and then reverse it
 
 $(reversedSet).each(function(){
  //Now we can plug our reversed set right into the each function. Could it be easier?
 });
});

2. Access iFrame Elements

    Iframes aren’t the best solution to most problems, but when you do need to use one it’s very handy to know how to access the elements inside it with Javascript. jQuery’s contents() method makes this a breeze, enabling us to load the iframe’s DOM in one line like this:

$(function(){
 var iFrameDOM = $("iframe#someID").contents();  
 //Now you can use <strong>find()</strong> to         access any element in the iframe:
 

 iFrameDOM.find(".message").slideUp();   
 //Slides up all elements classed 'message' in the iframe
});

 3. Find a Selected Phrase and Manipulate It

Whether you’re looking to perform find and replace, highlight search terms, or something else, jQuery again makes it easy with html():

$(function(){            
 //First define your search string, replacement and context: 

 var phrase = "your search string";
 var replacement = "new string";
 var context = $(body);
 
 //
 context.html(
  context.html().replace('/'+phrase+'/gi', replacement);
 );
 
});   

4. Add Pseudo-Selector Support in IE

Whether or not to support IE (especially 6) is a hotly debated issue, but if you are of the “let’s-make-the-best-of-this” camp, it’s nice to know that you can add pseudo-selector support with jQuery. And we aren’t just limited to :hover, although that’s the most common: 

$(function(){
 <strong>      //ADD HOVER SUPPORT:</strong> 

function hoverOn(){ 

                    var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name 

                    $(this).addClass(currentClass + '-hover');
 }
  

function hoverOff(){ 

                          var currentClass = $(this).attr('class').split(' ')[0];   //Get first class name 

                     $(this).removeClass(currentClass + '-hover');
 } 

 $(".nav-item").hover(hoverOn,hoverOff);
 
  

                   <strong>    //ADD FIRST-CHILD SUPPORT:</strong> 

 jQuery.fn.firstChild = function(){ 

                        return this.each(function(){
    

                                 var currentClass = $(this).attr('class').split(' ')[0]; //Get first class name                                     $(this).children(":first").addClass(currentClass + '-first-child'); 

 }); 

 } 

$(".searchform").firstChild();
 

});   

5. Easily Respond to Event Data

 virtually eliminating cross-browser inconsitencies and making events much easier to respond to. jQuery passes an event parameter into all bound/triggered functions, which is commonly called e:  

$(function() {
 //We can get X/Y coordinates on click events:
 $("a").click(function(<em>e</em>){
  var clickX = e.pageX;
  var clickY = e.pageX;
 });
 
 //Or detect which key was pressed:
 $("window").keypress(function(<em>e</em>){
  var keyPressed = e.which;
 });
});