Jquery learning 11.3.4

Simple animation effects can be achieved through jquery's show () and hide.

$ (Document). Ready (function (){ $ ("A"). Toggle (function (){ $ (". Stuff"). Hide ('low '); }, Function (){ $ (". Stuff"). Show ('fast '); }); })

The effect of the toggle () method is to switch the visible state of the element. That is, if the element is visible, switch to hidden. If the element is hidden, switch to visible.

Example:

$ (Function (){
$ ("# Content"). Toggle ();
})

<P id = "content" style = "display: none"> This is invisible. </P>

When there is a click event, the visible status switch in another region can be written as follows:

$ (Document). Ready (function (){
$ ("# Test"). Click (
Function (){
$ ("# Content"). Toggle ();
}
);
});

<P id = "test"> <input type = "button" value = "Click here"/> </P>
<P id = "content" style = "display: none"> when you click "Click here", the content here will be switched between hide and display. </P>

The following describes how to use the toggle (FN, FN) method. The result is that the function is called after each click. If a matching element is clicked, the specified first function is triggered, when you click the same element again, the specified second function is triggered. If there are more functions, it is triggered again until the last one. The subsequent clicks repeatedly call these functions. Note that the function of clicking to trigger the call of a function does not need to be used. Click (FN). I made an error when I started to operate this function.

Example:

$ (Document). Ready (function (){
$ ("# Test"). Toggle (function (){
$ ("# Content"). Hide ('low ');
}, Function (){
$ ("# Content"). Show ('fast ');
});
});

<P id = "test"> <input type = "button" value = "Click here"/> </P>
<P id = "content" style = "display: none"> when you click "Click here", the content here will be switched between hide and display. </P>

 

With animate (), you can create any animation, such as fade-in and fade-out slides.

$ (Document). Ready (function (){ $ ("A"). Toggle (function (){ $ (". Stuff"). animate ({Height: 'hide ', opacity: 'hide'}, 'low '); }, Function (){ $ (". Stuff"). animate ({Height: 'show', opacity: 'show'}, 'low '); }); });

Animate (Params, speed, easing, callback)

A function used to create a custom animation. The key to this function is to specify the animation form and result style attribute object. Each attribute in this object represents a changeable style attribute (such as "height", "TOP", or "opacity ").

The value of each attribute indicates the animation ends when the style attribute is reached. If it is a value, the style property will gradually change from the current value to the specified value. If a string value such as "hide", "show", or "toggle" is used, the default animation format is called for this attribute.

Returned value: jquery parameter:

• Params (hash): a set of style attributes and their values that are used as animation attributes and final values.
• Speed (string | Number): (optional) string with one of the three predefined speeds ("slow", "normal", or "fast ") or a millisecond value (for example, 1000) indicating the animation duration.
• Easing (string): (optional) Name of the erased effect to be used (supported by the plug-in ).
• Callback (function): (optional) function executed when the animation is completed

 

Example:

$("p").animate({ height: 'toggle', opacity: 'toggle' },   "slow"); 

Example:

$("p").animate({ left: 50, opacity: 'show' },   500); 

Example:

An example of using the "erase" function to provide different animation styles. It is valid only when a plug-in can provide this "erasure" function (only the "linear" function is provided by default in the jquery library.

$("p").animate({ opacity: 'show' }, "slow",   "easein"); 

 

Ready (FN)

Code:

 

JS Code

1. $ (Document). Ready (function (){
2. // Your code here...
3. });

 

$(document).ready(function(){  // Your code here...})；

Function: it can greatly improve the response speed of Web applications. By using this method, you can call the function you bind immediately when the Dom is ready to read and manipulate, and 99.99% of JavaScript functions need to be executed at that moment.

 

BIND (type, [data], FN)

Code:

 

JS Code

1. $ ("P"). BIND ("click", function (){
2. Alert ($ (this). Text ());
3. });

 

$("p").bind("click", function(){  alert( $(this).text() );}); 

Purpose: bind an event processor function to a specific event that matches an element (such as click. It serves as an event listener.

 

Toggle (FN, FN)

Code:

 

JS Code

1. $ ("TD"). Toggle (
2. Function (){
3. $ (This). addclass ("selected ");
4. },
5. Function (){
6. $ (This). removeclass ("selected ");
7. }
8. );

 

$("td").toggle(  function () {    $(this).addClass("selected");  },  function () {    $(this).removeClass("selected");  });

Purpose: Switch the function to be called each time you click. If a matching element is clicked, the specified first function is triggered. When the same element is clicked again, the specified second function is triggered. A very interesting function may be used to dynamically implement some functions. Events such as click (), focus (), and keydown () are not mentioned here. They are commonly used in development .)

 

Jquery appearance

 

Addclass (class) and removeclass (class)

Code:

 

JS Code

1. $ (". Stripe TR"). Mouseover (function (){
2. $ (This). addclass ("over") ;}). mouseout (function (){
3. $ (This). removeclass ("over ");})
4. });

 

$(".stripe tr").mouseover(function(){                 $(this).addClass("over");}).mouseout(function(){                $(this).removeClass("over");})});

You can also write it as follows:

 

JS Code

1. $ (". Stripe TR"). Mouseover (function () {$ (this). addclass ("over ")});
2. $ (". Stripe TR"). mouseout (function () {$ (this). removeclass ("over ")});

 

$(".stripe tr").mouseover(function() { $(this).addClass("over") });$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

 

Purpose: add or remove styles for the specified elements to achieve dynamic style effects. The code for moving the two-color table with the mouse in the above example

 

CSS (name, value)

Code:

$("p").css("color","red");

Purpose: set the value of a style attribute in the matching element. This personal feeling is a bit similar to the above addclass (class.

 

Slide (), hide (), fadein (), fadeout (), slideup (), slidedown ()

Code:

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

 

Purpose: several commonly used dynamic effects functions provided by jquery. You can also add the parameter show (speed, [callback]) to show all matching elements in an elegant animation, and trigger a callback function after the display is complete.