Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you specific jQuery development skills and experiences that deserve developers' attention. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

We will introduce 15 tips to make your jQuery more effective, most of which are about performance improvement.

1. Try to use the latest version of the jQuery class library

A lot of innovation is used in the jQuery project. The best way to improve performance is to use the latest version of jQuery. Each new release includes optimized bug fixes. The only thing for us to do is to modify tag. Why not?

We can also use free CDN services, such as Google, to store the jQuery class library.

$('# panel') .fadeIn (function () {/ / this points to # panel $('# panel button') .click (function () {/ / this points to the button $(this). FadeOut ();})

You will encounter problems, button will disappear, not panel. Using the $.proxy method, you can write code like this:

$('# panel') .fadeIn (function () {/ / Using $.proxy to bind this: $('# panel button') .click ($.proxy (function () {/ / this points to # panel $(this). FadeOut ();}, this));})

Only in this way can it be carried out correctly. The $. Proxy method takes two parameters, your original method, and context. Read more about $.proxy in the docs here.

10. Determine whether the page is too complex

A very simple reason, about complex pages, the slower the load. You can check the contents of your page using the following code:

Console.log ($('*') .length)

The smaller the value returned by the above code, the faster the page loads. You can consider optimizing your code by removing useless and redundant elements.

11. Convert your code into a jQuery plug-in

If you have to spend some time developing a piece of jQuery code, then you can consider turning the code into a plug-in. This will help you reuse your code and effectively help you organize your code. Create a plug-in code as follows:

(function ($) {$.fn.yourPluginName = function () {/ / Your code goes here return this;};}) (jQuery)

You can read more development tutorials here.

twelve。 Set global AJAX to default

If you develop an ajax program, you definitely need a display such as "loading" to inform the user that ajax is in progress, and we can use the following code to manage it, as follows:

/ / ajaxSetup is useful for setting general defaults: $.ajaxSetup ({url:'/ ajax/', dataType: 'json'}); $.ajaxStart (function () {showIndicator (); disableButtons ();}); $.ajaxComplete (function () {hideIndicator (); enableButtons ();}); / * / / Additional methods you can use: $.ajaxStop (); $.ajaxError (); $.ajaxSuccess (); $.ajaxSend (); * /

13. Using the delay () method in animation

Chain animation is the power of jQuery. But one overlooked detail is that you can add delays between animations, as follows:

/ / This is wrong: $('# elem') .animate ({width:200}, function () {setTimeout (function () {$('# elem'). Animate ({marginTop:100});}, 2000);}); / / Do it like this: $('# elem'). Animate ({width:200}) .delay (2000). Animate ({marginTop:100})

JQuery animation helps us a lot, otherwise we have to deal with a lot of details, set timtout, deal with property values, track animation changes, and so on.

You can refer to this article: jQuery animations

14. Make rational use of the Data attribute of HTML5

The data property of HTML5 helps us insert data. Especially suitable for front-end and back-end data exchange. The data () method recently released by jQuery can effectively use the attributes of HTML5 to get data automatically. Here is an example:

To access the data, you need to call the following code:

Data ("role"); / / "page" $("# D1"). Data ("lastValue"); / / 43 $("# D1"). Data ("hidden"); / / true; $("# D1"). Data ("options"). Name;// "John"

JQuery document of data (): data () in the jQuery docs

15. Local storage and jQuery

Local storage is a super simple API. Simply add your data to the localStorage global properties:

/ / Check if "key" exists in the storage var value = $.jStorage.get ("key"); if (! value) {/ / if not-load the data from the server value = load_data_from_server (); / / and save it $.jStorage.set ("key", value);} / / Use value

But for old browsers, this is not good news. Because they don't support it. But we can use jQuery plug-ins to provide support in the event that local storage is not available. This approach makes the local storage function work properly.

The above is all about 15 jQuery development skills and experiences that developers should pay attention to, including programming technology, operating system, database, web front-end technology and so on.

These are the jQuery development skills and experiences that developers should pay attention to. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.