|
|
| (20 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| *** under contruction
| | <accesscontrol>Main:MyGroup</accesscontrol> |
| | [[Category:Miscellaneous]] |
| | == JQuery Tips == |
|
| |
|
| 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.
| | '''1. Optimize performance of complex selectors'''<br/>var subset = $(""); $("input[value^='']", subset);''<br/><br/>'''2. Set Context and improve the performance'''<br/>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]);<br/><br/>'''3. Live Event Handlers'''<br/>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);<br/><br/>'''4. To show / hide element''' |
| 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:
| | $("a").hide(); |
| view source
| | $("a").show(); |
| print?
| |
| 1 var subset = $("");
| |
| 2 $("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.
| | <br/>'''5. Check element exists''' |
| view source
| |
| print?
| |
| 1 $("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:
| | if ($("#someDiv").length) {} |
| view source
| |
| 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.
| | <br/>'''6. Back to top button/link''' |
|
| |
|
| Likewise, to stop the live event handling:
| | $('#top').click(function() { |
| view source
| | $(document).scrollTo(0,500); } |
| 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
| | <br/><br/>'''7. Change width of item on many browser''' |
| 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
| | $('#input:text[name=QUESTION.Q12.1]).width(500); |
| 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.
| | <br/><br/>var error_message = "The error was happened" var oldCheck = questioncheck; questioncheck = function() { |
| 6. Fadeout Slideup effect to remove an element
| |
|
| |
|
| Combine more than one effects in jQuery to animate and remove an element from DOM.
| | //QUESTION.Label1 |
| view source
| | if (checkLength("QUESTION.Label1",5)){ |
| print?
| | ErrorMessages.getInstance().clearErrorMessages(); |
| 1 $("#myButton").click(function() {
| | ErrorMessages.getInstance().showErrorMessage(error_message); |
| 2 $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
| | return; |
| 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.
| | function checkLength(objname,maxlength) { |
| 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:
| | var ao=$("input:text[name="+objname+"]"); |
| view source
| | if (ao.val().length>maxlength) |
| print?
| | return true; |
| 1 $("a").hide().addClass().fadeIn().hide();
| | return false |
|
| |
|
| You can increase readability like so:
| | }<br/><br/>'''8. Get value of question in javascript'''<br/>from_Q8= "{{Q8[0].value}}"; |
| 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>
| |
<accesscontrol>Main:MyGroup</accesscontrol>
JQuery Tips
1. Optimize performance of complex selectors
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);
4. To show / hide element
$("a").hide();
$("a").show();
5. Check element exists
if ($("#someDiv").length) {}
6. Back to top button/link
$('#top').click(function() {
$(document).scrollTo(0,500); }
7. Change width of item on many browser
$('#input:text[name=QUESTION.Q12.1]).width(500);
var error_message = "The error was happened" var oldCheck = questioncheck; questioncheck = function() {
//QUESTION.Label1
if (checkLength("QUESTION.Label1",5)){
ErrorMessages.getInstance().clearErrorMessages();
ErrorMessages.getInstance().showErrorMessage(error_message);
return;
}
}
function checkLength(objname,maxlength) {
var ao=$("input:text[name="+objname+"]");
if (ao.val().length>maxlength)
return true;
return false
}
8. Get value of question in javascript
from_Q8= "{{Q8[0].value}}";
