Chila jquery3_ Animation effects < 23 >

One, node substitution

$ (' BR '). Replacewhith ('

$ ('

2) Node Wrapping

$ (' P '). Wrap (' <font color=red ></font> '); Wrap each selected p element and the outer one with a font label

$ (' P '). Wrapall (' <font color=red ></font> '); Wraps a font label outside all selected elements

$ (' P '). Wrapinner (' <font color=red ></font> '); Put each of the selected p elements, which are wrapped in a font tag

3) Select multiple radio at the same time, then set the value, radio if the value is the same as set, then this radio will be selected

$ (': Radio '). Val ([' Value 1, value 2 ... ']); Even if there is only one value, you have to use the array

$ (': Radio '). Val ([' Male ', ' female ']); In the same set of radio only one can be selected, the last value in the array will be selected

4) Operation class style

$ (function () {//Exercise: Focus the highlighting of the control. The color is defined as a class style. $ ("Body *"), the selector * represents all types of controls. The background color of the element that gets focus is yellow.            $('Body *'). focus (function () {//First, select the elements on the page to register a focused event for each element (focus)                $( This). AddClass ('Bgyellow'). Siblings (). Removeclass ('Bgyellow');//adds a class style to the element when the focus is obtained, and all sibling elements remove the class style            }); //Exercise: Search box effects. Focus into the control, if the value in the text box is "Please enter a keyword",//then the text is emptied and the color is set to black. If the focus leaves the control, if the text box is a null value,//then fill the text box with "Please enter a keyword" and the color will be dimmed (gray). The color is defined as a class style.             $('#beat'). focus (function () {if($( This). val () = ='Please enter a keyword') {                    $( This). Val ("'). Removeclass ('Bggray'); }}). blur (function () {if($( This). val (). length = =0) {                    $( This). Val ('Please enter a keyword'). AddClass ('Bggray');        }            }); });

===========================================

Ii. Binding Events

$ (' #btn '). Bind (' click ', function () {alert (' clicked ')});

The first parameter is the type of event, such as Click, Focus ... such as

The second argument is the logic code that the event triggers to execute

Cancel Event

$ (' #btn '). Unbind (' click ');

parameter is the type of event that is canceled, and if not passed, all events are canceled

Third, event bubbling

$ (function () {$ ('#dv1'). Click (function (even) {alert ('Dv1'); //even.stoppropagation ();            }); $('#dv2'). Click (function () {alert ('Dv2');            }); $('#dv3'). Click (function (even) {alert ('Dv3'); //Stop Time bubblingeven.stoppropagation ();        }); });

DOM element. Stoppropagation (); Cancel Event Bubbling

Prevent the execution of an event

$ (' a '). Click (function (Eve) {

Eve.preventdefault ();

});

JavaScript methods

Window.event.returnValue = false;

2) Pass parameters when registering events

In jquery, you can pass parameters when registering an event, and then in the event handler you can access the parameters through event object events, Event.data

$ (' #a1 '). Click ({' Name ': ' MDR ', ' Age ': $}, function (even) {

alert (even.data.name);

});

3) Register events that can only be triggered once

$ (function () {$ ('#btn'). One ('click', function (){});});

4) Imitate Tip

$(': Text'). MouseOver (function () {//determine if the layer exists on the page and remove it if it exists                if($('#dv1'). length >0) {                    $('#dv1'). Remove (); }                //gets the distance from the left of the current element, X                varLeft = $ ( This). Offset (). Left; //gets the distance from the top of the current element, Y                varTop = $ ( This). Offset (). Top + $ ( This). Height (); //dynamically creates a layer when the mouse enters the current element                vardiv = $ ('<div id= "Dv1" style= "border:1px solid pink;width:100px;height:20px;background-color:pink;position:absolute; Left:'+ Left +'Px;top:'+ Top +'px; " >nb</div>'); //add layers to the page                $('Body'). Append (div); });

5) Some of the animation effects in jquery

The show (), Hide () method displays and hides elements. Toggle between display and hide using the toggle (speed) method

$ (": Button[value=show]"). Click (function () {$ ("div"). Show ();});

$ (": Button[value=hide]"). Click (function () {$ ("div"). Hide ();});

If the show, hide method is immediately displayed without parameters, immediately hidden, if the specified speed parameter will be dynamically displayed, hidden, in milliseconds, or with three built-in speed: fast (200 milliseconds), normal (400 milliseconds), slow (600 ms) , the three values can generally be used in the jquery animation function where speed is required.

Slide effect

Slidedown (), Slideup (), Slidetoggle ()

Fade in (Transparent)

FadeIn (), FadeOut (), Fadetoggle (), FadeTo ()

Custom animations

Animate ({style},speed)

Some styles are not supported: backgroundcolor, color, BorderStyle 、......

When you use animate to set the object's position, make sure that the value of position is absolute or relative.

Stops the animation element that is performing the animation. Stop () (*)

Animation queue:. Animate (). Animate (). Animate () ....;

$ (' #dvAnimate '). Animate ({width: ' +=100px ', Height: ' +=100px ', left: ' 300px ', Top: ' 100px ', borderWidth: ' 20px '}, 2000), in Width increased by 100px in 2000 milliseconds

Implementing grouping effects

$ (function () {$ ('#hidden'). Click (function () {$ ('#dv1'). Hide ( the);            }); $('#dv1 ul'). CSS ({'List-style-type':'None','margin':'0','padding':'0'}); $('#dv1 ul > Li'). CSS ({'margin':'1px','padding':'1px','Background-color':'Pink'}). Click (function () {$ ('Li',$( This). Toggle (' Speed');            }); $('#dv1 ul > li Li'). CSS ({'Background-color':'Cyan','margin':'1px','padding':'1px'}). Hide (); });

Chila jquery3_ Animation effects < 23 >