More 10 jQuery and JavaScript Tips and Tricks to Improve Your Code

if($(selector)[0]){...}
// or you may use

if($(selector).length){...}

//ex. if you have this html on a page
<ul id="shopping_cart_items">
  <li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li>

  <li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li>

  <li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li>

</ul>
<pre escaped="true" lang="javascript">...
//The condition in this if statement will evaluate to true because we have two
// input fields that match the selector and the <statement> will be executed

if($('#shopping_cart_items input.in_stock')[0]){<statement>}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>
 div.button    { background:#cfd; margin:3px; width:50px;

   text-align:center; float:left; cursor:pointer;

   border:2px outset black; font-weight:bolder; }
 #sliding      { display:none; }

</style>
<script>
 
$(document).ready(function(){

// Use jQuery to change look of div once clicked and the event to 
//start off the slide effect
 $("div.button").click(function () {

   //div.button will now look like a pushed down button
   $(this).css({ borderStyle:"inset", cursor:"wait" });

   //The hidden #sliding will now slide down and use callback to start the 
   //slideup once it completes
   $('#sliding').slideDown('slow', function(){

     $('#sliding').slideUp('slow', function(){
       //once the slide up is over the callback change css for button back

       $('div.button').css({ borderStyle:"outset", cursor:"auto" });

     });
   });
 });
});

</script>

//Bind click event to a paragraph and write click coordinates to the page
$("p").bind("click", function(e){

  var str = "( " + e.pageX + ", " + e.pageY + " )";

  $("span").text("Click at coordinates: " + str);
});

 
//Binding multiple events is also simple and
$("p").bind("mouseenter mouseleave", function(e){

  //toggleClass adds the specified class if it is not present, removes 
  //the specified class if it is present.
  $(this).toggleClass("mouse-over");

});

}
function shoppingCart() {

  // Do general shopping cart stuff here...
};
 
var myShoppingCart = new shoppingCart('personalShoppingCart');

jQuery(myShoppingCart).bind('addItem', function() {
  // Custom event handling for adding items to the shopping cart...

});
 
// Trigger custom event:
jQuery(myShoppingCart).trigger('addItem');

);

$.expr[':'].mycustomselector= function(element, index, meta, stack){

    // element- is a DOM element
    // index - the current loop index in stack
    // meta - meta data about your selector
    // stack - stack of all elements to loop
 
    // Return true to include current element
    // Return false to explude current element

};
 
// Custom Selector usage:
$('.someClasses:test').doSomething();

$.expr[':'].withRel = function(element){

  var $this = $(element);
  //simply returning elements where rel is not empty
  return ($this.attr('rel') != '');

};
 
$(document).ready(function(){
//Using the custom selector is simple and the collection returned support chaining

// as illustrated here to apply some css to the returned elements
 $('a:withRel').css('background-color', 'green');

});
...
<ul>
  <li>
    <a href="#">without rel</a>

  </li>
  <li>
    <a rel="somerel" href="#">with rel</a>

  </li>
  <li>
    <a rel="" href="#">without rel</a>

  </li>
  <li>
    <a rel="nofollow" href="#">a link with rel</a>

  </li>
</ul>

<ul>
  <li><a href="home">home</a></li>
  <li><a href="home">about</a></li>

  <li><a href="home">contact</a></li>
</ul>
...
//selector select all li within the ul and then we make them clickable.

$("ul li").click(function(){
  //get the url from href attribute and launch the url
  window.location=$(this).find("a").attr("href"); return false;

});

<pre>//Define function that preloads a defined list
//of images (arguments for the function).  
 
jQuery.preloadImages = function(){

  /Loop through the images
  for(var i = 0; i<arguments.length; i++){

    jQuery("<img>").attr("src", arguments[i]);

 
  }
}
// You can use usage the script this way:
$.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");

<pre>
<pre>$(document).ready(function(){

    $(document).bind("contextmenu",function(e){
        return false;

    });
})

// Don't do it like this as it takes up unnecessary space and takes time to write

$('div.close').click(doSomething);
$('button.close').click(doSomething);

$('input.close').click(doSomething);
 
// Simply use group queries in the selector if you have to 
//apply same operation to them all
$('div.close, button.close, input.close')

    .click(doSomething);

<pre>//Separate tests into modules.

module("Module B");
 
test("some other test", function() {

  //Specify how many assertions are expected to run within a test.
  expect(2);
  //A comparison assertion, equivalent to JUnit's assertEquals.
  equals( true, false, "failing test" );

  equals( true, true, "passing test" );
});