JQuery - Tips: Difference between revisions
More actions
No edit summary  | 
				No edit summary  | 
				||
| (19 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 ==  | ||
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.  | '''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:radio", document.forms[0]);  | |||
3. Live Event Handlers  |  $("a").hide();  | ||
Set an event handler for any element that matches a selector, even if it gets added to the DOM after the initial page load:  |  $("a").show();  | ||
$('button.someClass').live('click', someFunction);  | |||
<br/>'''5. Check element exists'''  | |||
 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 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}}";