Top jQuery Tips & Tricks for Programmers

Top jQuery Tips & Tricks for Programmers

Following are few very useful jQuery Tips and Tricks for all jQuery developers. I am sharing these as I think they will be very useful to you.
Disclaimer: I have not written all of the below code but have collected from various sources from Internet.

1. Optimize performance of complex selectors

Query a subset of the DOM when using complex selectors drastically improves performance:

var subset = $("");
$("input[value^='']", subset);

2. Set Context and improve the performance

On the core jQuery function, specify the context parameter when. Specifying the context parameter allows jQuery to start from a deeper branch in the DOM, rather than from the DOM root. Given a large enough DOM, specifying the context parameter should translate to performance gains.

$("input:radio", document.forms[0]);

3. Live Event Handlers

Set an event handler for any element that matches a selector, even if it gets added to the DOM after the initial page load:

$('button.someClass').live('click', someFunction);

This allows you to load content via ajax, or add them via javascript and have the event handlers get set up properly for those elements automatically.

Likewise, to stop the live event handling:

$('button.someClass').die('click', someFunction);

These live event handlers have a few limitations compared to regular events, but they work great for the majority of cases. Live event will work starting from jQuery 1.3

4. Checking the Index

jQuery has .index but it is a pain to use as you need the list of elements and pass in the element you want the index of

var index = e.g $('#ul>li').index( liDomObject );

The following is easier:

if you want to know the index of an element within a set, e.g. list items within a unordered list:

$("ul > li").click(function ()
{    var index = $(this).prevAll().length;});

5. Use jQuery data method

jQuery’s data() method is useful and not well known. It allows you to bind data to DOM elements without modifying the DOM.

6. Fadeout Slideup effect to remove an element

Combine more than one effects in jQuery to animate and remove an element from DOM.

$("#myButton").click(function() {
$("#myDiv").fadeTo("slow", 0.01, function(){ //fade
$(this).slideUp("slow", function() { //slide up
$(this).remove(); //then remove from the DOM
});
});
});

7. Checking if an element exists

Use following snippet to check whether an element exists or not.

if ($("#someDiv").length) {
//hooray!!! it exists...}

8. Add dynamically created elements into the DOM

Use following code snippet to create a DIV dynamically and add it into the DOM.
Further Reading: Dynamically Add/Remove rows in HTML table using JavaScript

var newDiv = $('');newDiv.attr("id","myNewDiv").appendTo("body");

9. Line breaks and chainability

Instead of doing:

$("a").hide().addClass().fadeIn().hide();

You can increase readability like so:

$("a").hide().addClass().fadeIn().hide();

10. Creating custom selectors

$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});
$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});

11. Cloning an object in jQuery

Use .clone() method of jQuery to clone any DOM object in JavaScript.

// Clone the DIVvar cloned = $('#somediv').clone();

jQuery’s clone() method does not clone a JavaScript object. To clone JavaScript object, use following code.

// Shallow copyvar newObject = jQuery.extend({}, oldObject);
// Deep copyvar newObject = jQuery.extend(true, {}, oldObject);

12. Test if something is hidden using jQuery

We use .hide(), .show() methods in jquery to change the visibility of an element. Use following code to check the whether an element is visible or not.

if($(element).is(":visible") == "true") {
//The element is Visible}

13. Alternate way of Document Ready

//Instead of$(document).ready(function() {
//document ready
});
//Use
$(function(){
//document ready}
);

14. Selecting an element with . (period) in its ID

Use backslash in the selector to select the element having period in its ID.

$("#Address\\.Street").text("Enter this field");

15. Counting immediate child elements

If you want to count all the DIVs present in the element #foo

//jQuery code to count child elements$("#foo > div").size()

16. Make an element to “FLASH”

jQuery.fn.flash = function( color, duration ){
var current = this.css( 'color' );
this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
this.animate( { color: current }, duration / 2 );
}
//Then use the above function as:
$( '#importantElement' ).flash( '255,0,0', 1000 );

17. Center an element on the Screen

jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
//Use the above function as:$(element).center();

18. Getting Parent DIV using closest

If you want to find the wrapping DIV element (regardless of the ID on that DIV) then you’ll want this jQuery selector:

$("#searchBox").closest("div");

19. Disable right-click contextual menu

There’s many Javascript snippets available to disable right-click contextual menu, but JQuery makes things a lot easier:

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

20. Get mouse cursor x and y axis

This script will display the x and y value – the coordinate of the mouse pointer.

$().mousemove(function(e){
//display the x and y axis values inside the P element
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

Related Posts


12 thoughts on “Top jQuery Tips & Tricks for Programmers

  1. Tereasa Glenna

    Wonderful blog! I found it while searching on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Cheers

    Reply
  2. Ray Groote

    I simply want to tell you that I am newbie to blogs and certainly liked your blog. More than likely I’m want to bookmark your website . You absolutely come with good articles and reviews. Many thanks for revealing your web site.

    Reply
  3. kore dizileri izle

    Actually necessary article admin great 1 i bookmarked your website sheet see you in upcoming blog put up.

    Reply
  4. Guy

    Great publish admin! i bookmarked your world-wide-web web site. i’ll search ahead should you could have an e-mail record adding.

    Reply
  5. Betty Lamkin

    Thanks for your your content – really interesting. We love our Kindle and the best site for tips and tricks is coolkindles.

    Reply
  6. Andres Musitano

    I was suggested this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my trouble. You are wonderful! Thanks!Nice blog here! Also your web site loads up fast! What web host are you using? Can I get your affiliate link to your host? I wish my website loaded up as quickly as yours lol

    Reply
  7. Brinda Hargrove

    Thanks a ton for this – love the info and agree with your perspective. However many others will not, so thanks for speaking up. Nice blog, well done!

    Reply
  8. Donnette Firkins

    I just want to say I’m beginner to weblog and certainly liked your website. More than likely I’m want to bookmark your website . You definitely have superb article content. Appreciate it for revealing your web page.

    Reply
  9. Rosemarie Vasudevan

    After failing last month, I’m determined to finish my 1 thing this week. It’s a growth chart for my youngest. Many thanks for that fun challenge!

    Reply
  10. Harvard University Admissions Requirements For Undergraduates

    You completed certain fine points there. I did a search on the subject and found most folks will consent with your blog.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*