|
|
| Line 1: |
Line 1: |
| − | *** under contruction
| |
| − |
| |
| − | 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 | | 1. Optimize performance of complex selectors |
| − | | + | var subset = $(""); |
| − | Query a subset of the DOM when using complex selectors drastically improves performance:
| + | $("input[value^='']", subset); |
| − | view source
| |
| − | print?
| |
| − | 1 var subset = $("");
| |
| − | 2 $("input[value^='']", subset);
| |
| | 2. Set Context and improve the performance | | 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. | | 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. |
| − | view source
| + | $("input:radio", document.forms[0]); |
| − | print?
| |
| − | 1 $("input:radio", document.forms[0]);
| |
| | 3. Live Event Handlers | | 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: | | Set an event handler for any element that matches a selector, even if it gets added to the DOM after the initial page load: |
| − | view source
| + | $('button.someClass').live('click', someFunction); |
| − | print?
| |
| − | 1 $('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:
| |
| − | view source
| |
| − | print?
| |
| − | 1 $('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
| |
| − | view source
| |
| − | print?
| |
| − | 1 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:
| |
| − | view source
| |
| − | print?
| |
| − | 1 $("ul > li").click(function ()
| |
| − | 2 {
| |
| − | 3 var index = $(this).prevAll().length;
| |
| − | 4 });
| |
| − | 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.
| |
| − | view source
| |
| − | print?
| |
| − | 1 $("#myButton").click(function() {
| |
| − | 2 $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
| |
| − | 3 $(this).slideUp("slow", function() { //slide up
| |
| − | 4 $(this).remove(); //then remove from the DOM
| |
| − | 5 });
| |
| − | 6 });
| |
| − | 7 });
| |
| − | 7. Checking if an element exists
| |
| − | | |
| − | Use following snippet to check whether an element exists or not.
| |
| − | view source
| |
| − | print?
| |
| − | 1 if ($("#someDiv").length) {
| |
| − | 2 //hooray!!! it exists...
| |
| − | 3 }
| |
| − | 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
| |
| − | view source
| |
| − | print?
| |
| − | 1 var newDiv = $('<div></div>');
| |
| − | 2 newDiv.attr("id","myNewDiv").appendTo("body");
| |
| − | 9. Line breaks and chainability
| |
| − | | |
| − | Instead of doing:
| |
| − | view source
| |
| − | print?
| |
| − | 1 $("a").hide().addClass().fadeIn().hide();
| |
| − | | |
| − | You can increase readability like so:
| |
| − | view source
| |
| − | print?
| |
| − | 1 $("a")
| |
| − | 2 .hide()
| |
| − | 3 .addClass()
| |
| − | 4 .fadeIn()
| |
| − | 5 .hide();
| |
| − | 10. Creating custom selectors
| |
| − | view source
| |
| − | print?
| |
| − | 1 $.extend($.expr[':'], {
| |
| − | 2 over100pixels: function(a) {
| |
| − | 3 return $(a).height() > 100;
| |
| − | 4 }
| |
| − | 5 });
| |
| − | 6
| |
| − | 7 $('.box:over100pixels').click(function() {
| |
| − | 8 alert('The element you clicked is over 100 pixels high');
| |
| − | 9 });
| |
| − | 11. Cloning an object in jQuery
| |
| − | | |
| − | Use .clone() method of jQuery to clone any DOM object in JavaScript.
| |
| − | view source
| |
| − | print?
| |
| − | 1 // Clone the DIV
| |
| − | 2 var cloned = $('#somediv').clone();
| |
| − | | |
| − | jQuery’s clone() method does not clone a JavaScript object. To clone JavaScript object, use following code.
| |
| − | view source
| |
| − | print?
| |
| − | 1 // Shallow copy
| |
| − | 2 var newObject = jQuery.extend({}, oldObject);
| |
| − | 3
| |
| − | 4 // Deep copy
| |
| − | 5 var 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.
| |
| − | view source
| |
| − | print?
| |
| − | 1 if($(element).is(":visible") == "true") {
| |
| − | 2 //The element is Visible
| |
| − | 3 }
| |
| − | 13. Alternate way of Document Ready
| |
| − | view source
| |
| − | print?
| |
| − | 1 //Instead of
| |
| − | 2 $(document).ready(function() {
| |
| − | 3 //document ready
| |
| − | 4 });
| |
| − | 5 //Use
| |
| − | 6 $(function(){
| |
| − | 7 //document ready
| |
| − | 8 });
| |
| − | 14. Selecting an element with . (period) in its ID
| |
| − | | |
| − | Use backslash in the selector to select the element having period in its ID.
| |
| − | view source
| |
| − | print?
| |
| − | 1 $("#Address\\.Street").text("Enter this field");
| |
| − | 15. Counting immediate child elements
| |
| − | | |
| − | If you want to count all the DIVs present in the element #foo
| |
| − | view source
| |
| − | print?
| |
| − | 01 <div id="foo">
| |
| − | 02 <div id="bar"></div>
| |
| − | 03 <div id="baz">
| |
| − | 04 <div id="biz">
| |
| − | 05 </div>
| |
| − | 06 <span><span>
| |
| − | 07 </div>
| |
| − | 08
| |
| − | 09 //jQuery code to count child elements
| |
| − | 10 $("#foo > div").size()
| |
| − | 16. Make an element to “FLASH”
| |
| − | view source
| |
| − | print?
| |
| − | 1 jQuery.fn.flash = function( color, duration )
| |
| − | 2 {
| |
| − | 3 var current = this.css( 'color' );
| |
| − | 4 this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
| |
| − | 5 this.animate( { color: current }, duration / 2 );
| |
| − | 6 }
| |
| − | 7 //Then use the above function as:
| |
| − | 8 $( '#importantElement' ).flash( '255,0,0', 1000 );
| |
| − | 17. Center an element on the Screen
| |
| − | view source
| |
| − | print?
| |
| − | 1 jQuery.fn.center = function () {
| |
| − | 2 this.css("position","absolute");
| |
| − | 3 this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
| |
| − | 4 this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
| |
| − | 5 return this;
| |
| − | 6 }
| |
| − | 7
| |
| − | 8 //Use the above function as:
| |
| − | 9 $(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:
| |
| − | view source
| |
| − | print?
| |
| − | 1 $("#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:
| |
| − | view source
| |
| − | print?
| |
| − | 1 $(document).ready(function(){
| |
| − | 2 $(document).bind("contextmenu",function(e){
| |
| − | 3 return false;
| |
| − | 4 });
| |
| − | 5 });
| |
| − | 20. Get mouse cursor x and y axis
| |
| − | | |
| − | This script will display the x and y value – the coordinate of the mouse pointer.
| |
| − | view source
| |
| − | print?
| |
| − | 1 $().mousemove(function(e){
| |
| − | 2 //display the x and y axis values inside the P element
| |
| − | 3 $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
| |
| − | 4 });
| |
| − | 5
| |
| − | 6 <p></p>
| |
