Difference between revisions of "JQuery - Tips"
(18 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | 1. Optimize performance of complex selectors | + | <accesscontrol>Main:MyGroup</accesscontrol> |
− | var subset = $(""); | + | [[Category:Miscellaneous]] |
− | $("input[value^='']", subset); | + | == JQuery Tips == |
− | <br> | + | |
− | 2. Set Context and improve the performance | + | '''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''' |
− | 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]); | + | $("a").hide(); |
− | <br> | + | $("a").show(); |
− | 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: | + | <br/>'''5. Check element exists''' |
− | $('button.someClass').live('click', someFunction); | + | |
− | <br> | + | if ($("#someDiv").length) {} |
+ | |||
+ | <br/>'''6. Back to top button/link''' | ||
+ | |||
+ | $('#top').click(function() { | ||
+ | $(document).scrollTo(0,500); } | ||
+ | |||
+ | <br/><br/>'''7. Change width of item on many browser''' | ||
+ | |||
+ | $('#input:text[name=QUESTION.Q12.1]).width(500); | ||
+ | |||
+ | |||
+ | |||
+ | <br/><br/>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 | ||
+ | |||
+ | }<br/><br/>'''8. Get value of question in javascript'''<br/>from_Q8= "{{Q8[0].value}}"; |
Latest revision as of 10:39, 23 October 2013
<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}}";