Difference between revisions of "JQuery - Tips"

From Catglobe Wiki
Jump to: navigation, search
 
Line 2: Line 2:
 
[[Category:Miscellaneous]]
 
[[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'''<br>
 
 
  $("a").hide();
 
  $("a").hide();
  $("a").show();
+
$("a").show();
<br>'''5. Check element exists'''<br>
+
 
 +
<br/>'''5. Check element exists'''
 +
 
 
  if ($("#someDiv").length) {}
 
  if ($("#someDiv").length) {}
<br>'''6. Back to top button/link'''<br>
+
 
 +
<br/>'''6. Back to top button/link'''
 +
 
 
  $('#top').click(function() {   
 
  $('#top').click(function() {   
  $(document).scrollTo(0,500);  }
+
$(document).scrollTo(0,500);  }
<br>
+
 
<br>'''7. Change width of item on many browser'''<br>
+
<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>
 
  
  
<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)){
+
  if (checkLength("QUESTION.Label1",5)){
      ErrorMessages.getInstance().clearErrorMessages();
+
    ErrorMessages.getInstance().clearErrorMessages();
      ErrorMessages.getInstance().showErrorMessage(error_message);
+
    ErrorMessages.getInstance().showErrorMessage(error_message);
      return;
+
    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)
+
  if (ao.val().length>maxlength)
      return true;
+
    return true;
  return false
+
  return false
}
+
 
<br>
+
}<br/><br/>'''8. Get value of question in javascript'''<br/>from_Q8= "{{Q8[0].value}}";
<br>'''8. Get value of question in javascript'''<br>
 
from_Q8= "{{Q8[0].value}}";
 

Latest revision as of 11: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}}";