[Translation] 25 tips to improve your jQuery-[2]

Address: http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

Directory

1. Load jQuery from Google Code
2. Use the memo form
3. Integrate all scripts and reduce them
4. Use Firebug's excellent console logging tool
5. Minimize selection through caching
6. Minimize DOM operations
7. Wrap the required content in an element when processing DOM insert operations
8. Try to use IDs instead of classes
9. provide context for the selector
10. Use method chain correctly
11. Learn to use results correctly
12. Understand event proxy
13. Use classes to store the status
14. A better way is to store the status using the built-in data () method of jQuery.
15. Write your own Selector
16. Streamline your HTML and modify it after loading the page
17. Delayed loading of content for speed and SEO considerations
18. Use the tool functions provided by jQuery
19. Use noConflict to rename the jQuery object
20. How to know that the image has been loaded
21. Always use the latest version
22. How to check whether the element exists
23. Add JS classes to your HTML attributes
24. 'false' is returned to prevent default behavior.
25. Short for ready events

16. Streamline your HTML and modify it after loading the page

This title may not be very interesting, but this technique may streamline your code, reduce the size of your code and the download time of the page, and help optimize your search engine. See the following example:

<div class="fieldOuter">    <div class="inner">        <div class="field">            This is field number 1</div>    </div>    <div class="errorBar">        <div class="icon">            </div>        <div class="message">            <span>This is an error message</span></div>    </div></div><div class="fieldOuter">    <div class="inner">        <div class="field">            This is field number 2</div>    </div>    <div class="errorBar">        <div class="icon">            </div>        <div class="message">            <span>This is an error message</span></div>    </div></div>

The above is a specific example of HTML, with a small amount of modifications made for the purpose of interpretation. I believe you will also think this code is quite ugly. If the code is very long, you will eventually form a very long and ugly page. Therefore, you can process it as follows:

<div class="field">This is field 1</div><div class="field">This is field 2</div><div class="field">This is field 3</div><div class="field">This is field 4</div><div class="field">This is field 5</div>

All you need to do is add the ugly HTML after page loading through jQuery:

$(document).ready(function() {       $('.field').before('<div class="fieldOuter"><div class="inner">');       $('.field').after('</div><div class="errorBar"><div class="icon">           </div><div class="message">           <span>This is an error message</span></div></div></div>');   });

This is not always desirable. After a page is loaded, you will see the page flashing, but under certain circumstances you have a lot of repeated HTML content, in this case, you can significantly reduce the Page code size and reduce irrelevant and repetitive tags to benefit your SEO.

17. Delayed loading of content for speed and SEO considerations

Another method is to increase the page loading speed, streamline the HTML content searched by Spiders, and use AJAX requests to load other content later after page loading, so that users can start browsing immediately, let Spider see what you want them to index.

We have used this technology on our website. The purple button in the upper part of this page will pop up three tables with the orientation and Google Map, which will double the page size. Therefore, we only need to put the HTML content into a static page. After the page is loaded, load it using the load () function:

$('#forms').load('content/headerForms.html', function() {       // Code here runs once the content has loaded       // Put all your event handlers etc. here.               }); 

I will not use this technique anywhere on the page. You must consider this. You need to have additional page requests, and some content on the page cannot be immediately presented to the user, but correct use of this technique will be helpful for optimization.

18. Use the tool functions provided by jQuery

JQuery not only has a flash effect. The author of jQuery also provides some practical methods, which fills in some defects of JacaScript.
Http://docs.jquery.com/Utilities

In particular, browser support for some common array functions is a patch. JQuery provides methods to iterate, filter, clone, merge, and remove duplicates from arrays.

Other common functions include selecting items in the drop-down list. In the traditional JavaScript method, you must use getElementById to obtain the select element and traverse its child element to find the selected element. JQuery provides an easy-to-use method:

$('#selectList').val(); 

It is worthwhile to spend time browsing jQuery documents on the official website and Some uncommon methods.

19. Use noConflict to rename the jQuery object

Most JavaScript frameworks use the $ symbol as the abbreviation. When multiple JS frameworks are used on the same page, the page is prone to conflict. Fortunately, there is a simple method. The noConflict () function returns $ control and allows you to set it to your own variable name:

var $j = jQuery.noConflict();   $j('#myDiv').hide(); 

20. How to know that the image has been loaded

This is also a problem that is not well documented (at least I did not see it when searching), but it is quite common in terms of creating a photo repository and rotating lanterns. This is easy to implement in jQuery.

All you need to do is to use the. load () method on IMG and add a callback function in it. The following example changes the property of an image src and adds a simple load function to the colleague:

$('#myImage').attr('src', 'image.jpg').load(function() {       alert('Image Loaded');   }); 

You should find that an alert will pop up once the image is loaded.

21. Always use the latest version

JQuery is still being updated, and its author John Resig has been searching for methods to improve jQuery's performance.

JQuery's current version is 1.2.6. John has declared that he is writing a new selector engine Sizzle, which may significantly improve the selector performance (4 times in Firefox ), therefore, we should keep the latest version.

[Note]
This is an article written at the end of last year, and the latest version is v.1.3.2.

22. How to check whether the element exists

You don't have to check whether the element exists on the page to use it, because jQuery does not do anything if no appropriate element is found in the DOM. However, when we need to check whether the element has been selected or how many items have been selected, you can use the length attribute:

if ($('#myDiv).length) {       // your code   } 

Simple.

23. Add JS classes to your HTML attributes

I learned this technique from Karl Swedberg, and I have been reading his book while learning jQuery.

He recently commented on this usage in my previous articles. The basic principles are as follows.

First, after jQuery is loaded, you can use the method to add the "JS" class to the HTML Tag:

$('HTML').addClass('JS');  

This only happens when javascript is valid. If you enable the JavaScript switch, you can use it to add the CSS style to the element:

.JS #myDiv{display:none;}  

Therefore, this means that when JavaScript is opened, we can hide the content, and then use jQuery to display the content as needed (for example, shrinking or expanding the content when a user clicks ), all content is displayed when JavaScript (and Spiders search) is disabled. I will use this technique later.

You can see all his articles here.

24. 'false' is returned to prevent default behavior.

This is obvious, or it may not. If you have the following habits:

<a href="#" class="popup">Click me!</a>  

Then add the following event processing:

$('popup').click(function(){       // Launch popup code   });  

When you use the above method on a long page, it may work normally. Sometimes you will notice that after clicking the link, the anchor will jump to the top of the page.

All you need to do is to stop its default behavior, or you can actually add "return false;" to the default behavior of any event. Like this:

$('popup').click(function(){       // Launch popup code       return false;   }); 

25. Short for ready events

You can enter a few characters less than $ (document). ready.
Replace:

$(document).ready(function (){       // your code   });  

You can abbreviated it:

$(function (){       // your code   });  

If you like this article, please digg it.

[Note]

Translation complete!