GBin1 Online example helps you better understand jquery features (i)

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

You have to admit, in recent years jquery in the foreground development class library stand out, more and more popular, as long as you do Web-related applications or web development, certainly more or less use of related functions. In recent Google Trends, we can see that since 2008, the use of the JQuery class library has grown at a geometric level, far from the rest of the JS class library behind, there are pictures as evidence:

In fact, jquery has become the most popular desktop JavaScript class library. And with the release of jquery Mobile, the mobile end will also show a strong development strength.

One of the most important reasons why jquery is so popular is the development of the community, where thousands of developers are involved in the innovative development of jquery, making jquery more powerful and more effective, and the development of Plug-ins makes the development of jquery show the momentum Many of the top jquery developers have made jquery a great success today.

In today's article, we present an example of the main features of jquery, along with demos, code, and online debugging, in the hope of helping you to actually understand and learn about jquery's capabilities.

Here use Jsfiddle to run the demo, you can easily view, javascript,css,html code, and can debug online

jquery processing CSS

Use the. css () method

Using jquery to process CSS is very handy to help you dynamically implement the interface design, for example, to achieve a zebra effect, in jquery we use the. css method to handle CSS-related operations, such as font, color, location, and so on.

Use the. addclass () and. Removeclass () method

Directly using the. CSS () method to deal with simple CSS is convenient, if you need to deal with complex CSS we'd better keep the CSS in an ID or class, and then call jquery's. addclass () or. Removeclass () method to process, This code is clearer and simpler.

Use the. Toggleclass () method

Toggleclass () can help you quickly switch the effects of CSS, in this example, you can click "Run CSS Demo" To switch applications and not apply CSS effect.

jquery handles effects and animations

Use the. Animate () method

Using jquery can quickly help us deal with effects and animations, and you can apply animation effects to elements in the DOM, such as moving, morphing, and so on. We typically use the. Animate () method to perform animation effects. Also offers a number of options to help you set related options, such as speed, callback method, etc.

Use the. Stop () method

In the animation process, if you need to terminate the animation, we can use the Stop () method, as follows:

Using the SetInterval () and Clearinterval () methods

In the animation implementation, we often need to take advantage of the Setinerval () method, which can help you to invoke the animation loop, we can use this to achieve an infinite loop animation effect. At the same time we can use Clearinterval () to clear the loop effect, as follows:

Using the settimeout () and cleartimeout () methods

Similar to the SetInterval () method, there is a settimout () method that allows you to delay an operation while using Cleartimeout () to terminate the delay operation.

Use the. Slidetoggle () and Fadetoggle () methods

Similar to. Toggleclass (), we can also use the Slidetoggle () and Fadetoggle () methods to control slide and fade, as follows:

Use the. Delay () method

The delay () method of jquery can produce the effect of a similar settimeout () method, as we have described in previous jquery code encyclopedia articles, the Hide () and show () methods must be taken with parameters.

Note that the above JS Code, hide () and show () method must take parameters, otherwise the following writing does not work:

$ (' #demo '). Show (). Delay. Hide ();

Please refer to: How to use Hide (), delay () and show () in chained operation?

Source: GBin1 Online example helps you better understand jquery features (i)