Development tools and key technology: Visual Studio 2015 & amp; & JQuery
Author: WeiYongGui
Time to write:
May 05, 2020
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
One, the jQuery page load event
Shorthand:
$(function () {
//write your code here...
}); Or
The $(document). Ready (function () {
//write your code here...
});
Second, mouse events in the jQuery
1, click [the mouse click event]
$(" box "). Click (function () {
Alert (" this is a trigger when the mouse click click () event ")
});
2, dblclick events] [mouse click
$(" box "). The dblclick (function () {
Alert (" this is a trigger when the double-click the dblclick () event ")
});
3, the mousedown [is pressed on the mouse moves to an element when trigger events]
$(" box "). The mousedown (function () {
Alert (" this is a triggered when the mouse is pressed mousedown () event ");
});
4, mouseup [when the mouse button on the element relaxation trigger events]
$(" box "). Mouseup (function () {
Alert (" this is a triggered when the mouse button on the element relaxation mouseup () event ");
});
5, mouseenter [when the mouse pointer across the element trigger events]
$(" box "). Mouseenter (function () {
The console. The log (" this is a triggered when the mouse pointer across the element mouseenter () event ");
});
6, the mouseleave [] when the mouse pointer left element trigger events
$(" box "). Mouseleave (function () {
The console. The log (" this is a triggered when the mouse pointer left elements mouseleave () event ");
});
"Mouseenter () events and mouseleave () event, most of the time will be used together]
7, mouseover [when the mouse pointer over the element trigger events]
$(" box "). Mouseover (function () {
The console. The log (" this is a trigger when the mouse pointer over the element mouseover () event ");
});
8, mouseout [when the mouse pointer from the diverse elements trigger events]
$(" box "). A mouseout (function () {
The console. The log (" this is a triggered when the mouse pointer from the diverse elements mouseout () event ");
});
[mouseover and mouseout () event (most of the time) will be used together]
Three, the jQuery form events
1, the focus () [trigger events when element gains focus]
$(". Wrapinput "). The focus (the function () {
The console. The log (" capturing the input has been the focus of ");
});
2, focusin () [trigger events when element gains focus]
$(" wrap "). Focusin (function () {
$(this). AddClass (" bgPink ");
The console. The log (" capturing the input has been the focus of ");
});
[focusin with focus events the difference is that focusin events could detect child elements get focus on the parent element of]
3, the blur () [] when the element loses focus trigger events
$(". Wrapinput "). The blur (function () {
The console. The log (" input has lost focus ");
});
4, focusout () [] when the element loses focus trigger events
$(" wrap "). Focusout (function () {
$(this). RemoveClass (" bgPink ");
The console. The log (" input has lost focus ");
});
[focusout events with the blur the difference is that focusout events could detect child elements in the parent element loses focus of]
5, change () [through the event can monitor & lt; input>, & lt; textarea> and & lt; select> element values change]
Input element [when the value value has changed, after losing focus change event triggered]
$(" forminput "). The change (function (event) {
The console. The log (value) event. Target.;
});
The select element [for the drop-down selection box, when a user using the mouse to make a choice, the incident triggered an immediate]
$(" form the select "). The change (function () {
Var value=https://bbs.csdn.net/topics/$(this). Val ();
The console. The log (value);
});
[multi-line text fields, textarea element when changed, after losing focus change event triggered]
$(" formtextarea "). The change (function () {
The console. The log (value) event. Target.;
});
Four, the keyboard events in jQuery
1, the keydown () [when the keyboard or button is pressed the trigger events]
$(" target1 "). The keydown (function (e) {
The console. The log (e. arget. Value);
$(" em "). The first (). The text (e. arget, value);
});
2, keyup () event [when the button is released triggering event]
$(". Target2 "). Keyup (function (e) {
The console. The log (e. arget. Value);
Em: $(" last "). The text (e. arget, value);
});
Five, the binding settlement tied events of jQuery
1, to bind a click event on way to elements
$(" # div1 ") on (" click ", function (e) {
$(this). The text (" triggered: "+ e. ype);
})
2, more than one event binding same function
$(" # div2 ") on (" mousedownmouseup ", function (e) {
$(this). The text (" triggered: "+ e. ype);
})
3, multiple event binding different function
$(" # div3 ") on ({
Mousedown: function () {
$(this). Attr (" class ", "bgGreen");
},
Mouseup: function () {
$(this). RemoveAttr (" class ");
}
});
4, binding two events
$(" elem ") on (" mousedownmouseup ", fn)
5, to delete an event
$(" elem ") off (" mousedown ")
6, delete all events
$(" elem ") off (" mousedownmouseup ")
7, shortcut to delete all events, there is no need to pass the event name, node binding on all events speak destroyed
$(" elem ") off ()
CodePudding user response:
