60. Other operations of jQuery, 60 and jQuery

60. Other operations of jQuery, 60 and jQuery

The previous article mainly introduced jQuery and some basic usage. This article mainly describes animations, common events, and some supplementary content of jQuery.

 

I. Animation

1. Basic

Show ([s, [e], [fn]) show hidden matching elements hide ([s, [e], [fn]) hide the displayed element toggle ([s], [e], [fn]). If the element is visible, switch to hidden. If the element is hidden, switch to visible.

2. Slide

SlideDown ([s], [e], [fn]) dynamically displays the slideUp ([s, [e], [fn]) dynamically hides all matching elements slideToggle ([s], [e], [fn]) by changing the height (decreasing upwards). change the visibility of all matching elements by height

3. fade in and out

FadeIn ([s], [e], [fn]) fades out of fadeOut ([s], [e], [fn]) ([[s], o, [e], [fn])-fade out to a fixed (custom) Transparency fadeToggle ([s, [e], [fn])-. fadeToggle (3000, function () {alert ("really useless 3") ;}); Switch

4. Custom Animation

Animate (p, [s], [e], [fn]) Custom Animation

5. Example

<! DOCTYPE html> View Code
 
Ii. Common events
1. Common events
Blur ([[data], fn])-lost focus ([[data], fn])-Get focus change ([data], fn]) -When the element value changes (select) click ([[data], fn])-click dblclick ([[data], fn]) -Double-click scroll ([data], fn])-scroll to submit ([[data], fn])-submit
2. Supplement
After the document tree is loaded, bind the event (in most cases) $ (document ). ready (function () {// code for binding events ....}) abbreviation: $ (function ($) {// code for binding events ....});
3. Example
<! DOCTYPE html> View Code
4. event handling
Previously bound events: 1. onclick = clickMe (); function clickMe () {} 2. ele. onclick = function () {} 3. ele. addEventListener ("click", function () {}) jQuery event binding method: 1. $ (ele ). on ("click", function () {}) 2. $ ("tbody "). delegate (". btn-warning "," click ", function () {}) event Delegate 1. version x cannot use the latest version. $ ("tbody "). on ("click ",". btn-warning ", function () {}) event Delegate
 
Iii. Plug-ins
1. jQuery. extend (object)
Add new functions under the namespace of jQuery. It is often used by plug-in developers to add new functions to jQuery.
<script>jQuery.extend({  min: function(a, b) { return a < b ? a : b; },  max: function(a, b) { return a > b ? a : b; }});jQuery.min(2,3); // => 2jQuery.max(4,5); // => 5</script>
2. jQuery. fn. extend (object)
The content of an object is merged into the jQuery prototype to provide a new jQuery instance method. JQuery. fn. extend (object)
<Script> jQuery. fn. extend ({check: function () {return this. each (function () {this. checked = true ;}) ;}, uncheck: function () {return this. each (function () {this. checked = false ;}) ;}}); // the newly added check () method can be used for jQuery objects. $ ("Input [type = 'checkbox']"). check (); </script>
3. Extensions written separately in files
(Function (jq) {jq. extend ({funcName: function (){...},});}) (jQuery); or (function (jq) {jq. fn. extend ({funcName: function (){...}})}) (jQuery );
 
Iv. jQuery API Chinese Document
In the previous article, jQuery first recognized that all jquery operations in this article are only a small part of some common operations. If you want to know other jquery operations, you can check some (jQuery API Chinese documentation) you can find a lot on Baidu.
Recommended one: http://jquery.cuishifeng.cn/
Sample: