This is my second posts about jQuery Tips and Tricks. If you missed my first post, you might want to read it now useful and handy jQuery Tips and Tricks. This time, I found some performance tuning, element manipulations tips and tricks that I believe will able to help you develop a more effective and efficient jQuery script. Enjoy!
To avoid conflict when you are using multiple libraries in a website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign. Using jQuery with other libraries
var $j = jQuery.noConflict();
$j('#myDiv').hide();
It return the number of elements that are selected by jQuery selector. Using length method will return the size of array which is equal to the number of selected objects.
$('.someClass').length;
There are advantages to let Google host jQuery. Some of us may not know, it actually provides better caching, increase parallelism and decreased latency compared with hosting it locally. Find out more about it: 3 reasons why you should let google host jQuery for you
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
//Code to be inserted in this area
});
</script>
/* the best way (fastest and most efficient implementation) */
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//This is more like it!
});
</script>
jQuery provides us 3 ways to determine if a checkbox is checked. How to check if checkbox is checked
// First way
$('#checkBox').attr('checked');
// Second way
$('#edit-checkbox-id').is(':checked');
// Third way
$("[:checkbox]:checked").each(
function() {
// Insert code here
}
);
// To disable
$('.someElement').attr('disabled', 'disabled');
// To enable
$('.someElement').removeAttr('disabled');
// OR you can set attr to ""
$('.someElement').attr('disabled', '');
Selecting an element using ID is faster than selecting classname. jQuery Performance Analysis of selectors.
update: apparently, jQuery 1.3 has a big improvement on this. So, I guess this tips only suitable for old browsers and jQuery 1.2 or below. Thanks Karl for the information.
/* ID */
$("#myid").html();
/* is faster than class*/
$(".myclass").html();
If you use a classname, the jQuery will perform better if you attached the element to the class name. A good practise when selecting a class:
$("ul.myclass");
/* is faster than this*/
$(".myclass");
Debugging javascript script can be extremely time consuming. So, if you running out of ideas what is causing the errors, you can use this free online tool JSLint
This will disable all jQuery animations if it's set to true.
jQuery.fx.off = true;
If you used the fadeIn effect in ie6 before, you probably able to notice how urgly it looks. The text doesn't render the way it should. To solve this, you need to remove the filter attribute
// This causes this text glich
$("#message").fadeIn();
// This will fix it
$("#message").removeAttr("filter");
/* Method 1 */
if (jQuery) {
// jQuery is loaded
} else {
// jQuery is not loaded
}
/* Method 2 */
if (typeof jQuery == 'undefined') {
// jQuery is not loaded
} else {
// jQuery is loaded
}
This trick is pretty simple and good for usability. If links are linking to external website, an image will be displayed next to the link. Dynamically add an icon for external links
$(document).ready(function() {
$('#extlinks a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after('
');
});
I hope this list will able to help you. If you have some tips and tricks that you want to share with all of us. Please leave in comment. : ) Thanks!
Reference
jquery-howto.blogspot.com
How
to Decrease Server Issues from Web Hosting Search
learningjquery.com
The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.
Buy wholesale computers directly from China at DHgate.com
Discover the tools to build your e-Commerce Site with Netfirms
Recent Comments