More actions
No edit summary |
|||
(4 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
<accesscontrol>Main:MyGroup</accesscontrol> | |||
[[Category:Miscellaneous]] | |||
== JQuery Tips == | == JQuery Tips == | ||
'''1. Optimize performance of complex selectors'''<br> | |||
var subset = $(""); | '''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''' | ||
$("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''' | |||
$("a").hide(); | $("a").hide(); | ||
$("a").show(); | |||
<br>'''5. Check element exists''' | |||
<br/>'''5. Check element exists''' | |||
if ($("#someDiv").length) {} | if ($("#someDiv").length) {} | ||
<br>'''6. Back to top button/link''' | |||
<br/>'''6. Back to top button/link''' | |||
$('#top').click(function() { | $('#top').click(function() { | ||
$(document).scrollTo(0,500); } | |||
<br> | |||
<br>'''7. Change width of item on many browser''' | <br/><br/>'''7. Change width of item on many browser''' | ||
$('#input:text[name=QUESTION.Q12.1]).width(500); | $('#input:text[name=QUESTION.Q12.1]).width(500); | ||
<br> | |||
var error_message = "The error was happened" | <br/><br/>var error_message = "The error was happened" var oldCheck = questioncheck; questioncheck = function() { | ||
var oldCheck = questioncheck; | |||
questioncheck = function() | |||
//QUESTION.Label1 | //QUESTION.Label1 | ||
if (checkLength("QUESTION.Label1",5)){ | |||
ErrorMessages.getInstance().clearErrorMessages(); | |||
ErrorMessages.getInstance().showErrorMessage(error_message); | |||
return; | |||
} | |||
} | } | ||
function checkLength(objname,maxlength) | function checkLength(objname,maxlength) { | ||
var ao=$("input:text[name="+objname+"]"); | var ao=$("input:text[name="+objname+"]"); | ||
if (ao.val().length>maxlength) | |||
return true; | |||
return false | |||
} | |||
<br> | }<br/><br/>'''8. Get value of question in javascript'''<br/>from_Q8= "{{Q8[0].value}}"; | ||
<br>''' | |||
from_Q8= "{{Q8[0].value}}"; |
Latest revision as of 09: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}}";