JQ Third Lecture

First, set the element style

1. Add and remove CSS categories

$ ("div"). AddClass         ("MyClass1 myClass2"); Add a class style to an element, or multiple class styles, separated by a space between each style

$ ("div"). Removeclass                  ("MyClass1"); Delete the class style of an element

2. Dynamic switching between categories

$ (function () {

$ ("P"). Click (Function ({

$ (this). Toggleclass          ("Mycss"); The actions that are repeatedly loaded or removed from the specified style each time they are clicked, that is, the style is alternately executed.

});); This is the object that contains its function as the method is invoked: P

}); Toggleclass can only set a class that cannot be set more than one.

3, Mouse induction

$ (". D1"). mouseover (function () {mouseover: An event after the mouse has moved up

$ (this). Hide (1000); Hides the element that generated the event within 1 seconds

}); This is the object that contains its function as the method is invoked: div

$ (". D1"). mouseout (function () {mouseout: event after mouse removal

$ (this). Show (1000); Displays the element that generated the event within 1 seconds

});

$ (". D1"). Hover (function () {hover: Merges the last two events, he directly takes two functions to execute mouseover and

$ (this). Hide (1000); Mouseout the corresponding event

}, function () {hide: Hidden element

$ (this). Show (1000); Show: Display elements

});

4. Toggle Method

$ ("#btn"). Click (function () {Specify the element to be displayed alternately when the button is clicked, and the hidden action

$ (". D1"). Toggle                       　  (1000); Specifies that the element is displayed or hidden within 1 seconds

});

* * The low version of the toggle method Jquery-1.8.2.min.js can be executed normally, incompatible with the high version

$ ("#btn"). Toggle (function () {This notation directly has two functions that specify the body of the function to be executed alternately.

$ (". D1"). Slideup                          　　 (); The bottom edge starts to close, and all the finished results are hidden.

}, function () {

$ (". D1"). Slidedown                            (); The bottom edge begins to open, and all the effects appear

});

5, whether an element contains a class class style, the return value is a Boolean type

$ ("D1"). Hasclass ("MyClass") returns True if there are myClass class styles in the D1 element, otherwise false.

JQ Third Lecture