1. Event handling
1.1. Event Binding
Bind (TYPE,FN);
Example:
Copy Code code as follows:
$ (function () {
A formal formulation
$ (' #d1 '). Bind (' click ', function () {
$ (this). CSS (' font-size ', ' 80px ');
});
Abbreviated form
$ (' #d1 '). Click (function () {
$ (this). CSS (' font-size ', ' 80px ');
});
});
1.2. The shorthand form of binding method
Copy Code code as follows:
1.3. Synthetic Events
Hover (Enter,leave): Simulate cursor hover event
Toggle (fn1,fn2 ...): Analog Mouse Continuous Click event
Example 1:
Copy Code code as follows:
$ (function () {
Separate events
$ ('. S1 '). MouseEnter (function () {
$ (this). addclass (' s2 ');
});
$ ('. S1 '). MouseLeave (function () {
$ (this). Removeclass (' s2 ');
});
Synthetic events
$ ('. S1 '). Hover (function () {
$ (this). addclass (' s2 ');
},function () {
$ (this). Removeclass (' s2 ');
});
});
Example 2:
Copy Code code as follows:
$ (function () {
$ (' #a1 '). Toggle (function () {
$ (' #d1 '). Show (' slow ');
},function () {
$ (' #d1 '). Hide (' slow ');
});
});
1.4. Event bubbling//child node events will be thrown up to the parent node in turn
1.4.1. Get the Event object//Only need to add an arbitrary variable to the event handler function, such as E
E is not a real event object, but an encapsulation of the underlying event object
Click (function (e) {
});
Example 1:
Copy Code code as follows:
$ (function () {
$ (' a '). Click (function (e) {
E:jquery object that contains an event object.
The target property returns a Dom object, which is the event source.
var srcobject = E.target;
alert (srcobject.innerhtml);
});
});
1.4.2. Stop bubbling
Event.stoppropagation ();
Example 2:
Copy Code code as follows:
$ (function () {
$ (' a '). Click (function (e) {
Alert (' You clicked on a link ');
Stop bubbling
E.stoppropagation ();
});
$ (' #d1 '). Click (function (e) {
Alert (' You clicked a div ');
});
});
1.4.3. Stop default behavior
Event.preventdefault ()//e.g. form submission
Example 3:
Copy Code code as follows:
$ (function () {
$ (' a '). Click (function (e) {
var flag = confirm (' Confirm deletion? ');
if (!flag) {
Stop default behavior
E.preventdefault ();
}
});
});
1.5. Properties of the Event object
Event.type: Event Type
Event.target: Returns the event source (is a DOM object!!! ）
Event.pagex/pagey: The coordinates of the clicked Point
Example 4:
Copy Code code as follows:
$ (function () {
$ (' a '). Click (function (e) {
alert (E.type); Get Event Type
Alert (E.pagex + ' +e.pagey ");
});
});
1.6. Simulate operation//AS. $ (' xxx '). MouseEnter ();
$ (' xxx '). Trigger (' simulated events ');//Can simplify
Example 5:
Copy Code code as follows:
$ (function () {
$ (' #b1 '). Click (function () {
Get focus on username text input box
$ (' #username '). Trigger (' focus ');
In addition, you can also simplify
$ (' #username '). focus ();
});
});
2. Animation
2.1.show ()/Hide ()//Show/Hide
Function: Display and hide by changing the width and height of elements at the same time
Usage:
Show (speed, [callback function]);
Speed can be used "normal", "fast", "slow", or you can use the number of milliseconds
The callback function executes after the entire animation has finished executing
2.2.slideUp ()/Slidedown ()
Function: Display and hide by changing the height of elements
Usage ditto.
Example:
Copy Code code as follows:
$ (function () {
$ (' #a1 '). Toggle (function () {
$ (' #d1 '). Show (' slow ');
$ (' #d1 '). Slidedown (' slow ');
},function () {
$ (' #d1 '). Hide (' slow ');
$ (' #d1 '). Slideup (' slow ');
});
});
2.3.fadeIn ()/fadeout ()//fade in, fade out
Function: Display and hide by changing the opacity of elements
Usage ditto.
Example:
Copy Code code as follows:
$ (function () {
$ (' #b1 '). Toggle (function () {
$ (' #d1 '). fadeout (' slow ');
},function () {
$ (' #d1 '). FadeIn (' slow ');
});
});
2.4. Custom Animation
Animate (Params,speed,[callback])
Params://is a JavaScript object that describes the style at the end of the animation execution.
Speed://speed, the unit is milliseconds.
Callback://callback function, which is executed after the animation has finished executing.
Example:
Copy Code code as follows:
$ (function () {
$ (' #d1 '). Click (function () {
Animation queues
$ (this). Animate ({' Left ': ' 400px '},3000);
$ (this). Animate ({' Top ': '},2000 '). fadeout (' slow ');
});
});
3. Operation of class array
Class array: The jquery selector encapsulates all of the DOM objects that are found into a jquery object,
Refer to these DOM objects as an array of classes.
3.1.length property://Get the number of Dom objects contained in the jquery object.
3.2.each (Fun (i))://Loop through each element, this represents the DOM object being iterated,
$ (this) represents the jquery object being iterated.
3.3.eq (Index)://Returns the JQuery object at the index+1 location
3.4.index (obj)://returns subscript, where obj can be a DOM object or a jquery object.
3.5.get ()://Returns an array of Dom objects
3.6.get (Index)://Returns a Index+1 DOM object.
Example:
Copy Code code as follows:
$ (function () {
$ (' #b1 '). Click (function () {
//var $obj = $ (' ul Li ');
Alert ($obj. length);
$obj. Each (function (i) {
//i: Indicates the subscript for the DOM object being accessed,
/subscript starting from 0.
//this: Represents the DOM object that is being accessed
if (i==0) {
$ (this). CSS (' font-size ', ' 60px ');
}else if (i==1) {
$ (this). CSS (' Font-style ', ' Italic ');
}else{
$ (this). CSS (' Color ', ' red ');
}
});
//var $obj = $ (' ul Li ');
var $o = $obj. EQ (1);
//$o. CSS (' font-size ', ' 60px ');
var index = $obj. Index ($O);
//alert (index);
//var $obj = $ (' ul Li ');
var arr = $obj. get ();
//alert (arr[1].innerhtml);
var $obj = $ (' ul Li ');
var obj = $obj. Get (1);
Alert (obj.innerhtml);
});
});
