Sharp jQuery key points summary (3) Events and animations in jQuery (Part 1: Events)_jquery

1. Event

1 Load DOM

Copy code The code is as follows:

$(document).ready(function(){//...})
It is executed after the DOM is loaded, which is different from window.onload=function(){//... in terms of reusability. }
$(window).load(function(){//...})
Executed after all objects in the window are loaded, almost equivalent to window.onload=function(){//...} . You can also use this method for selector

Another: $(document).ready(function(){//...}) abbreviation: $(function(){//.. .}) or $().ready(function(){//...})

2 Event binding

Copy Code The code is as follows:

$("selector").bind()
binds events to elements, format: bind(type[,data] ,fn), can be called multiple times.
type event types include: blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error or custom event
abbreviation method: $("selector").bind(type, function(){//...}) is equivalent to $("selector") .type(function(){//...})
Data parameters can be passed for unbinding specific events
$("selector").is()
Judgment method

(External: Methods can be reused multiple times to define local variables var $x = $("selector").method())

3 Synthetic events

Copy code The code is as follows:

$("selector").hover(enter,leave)
Simulate cursor hover event, The enter event is triggered when the mouse enters, and the leave event is triggered when the mouse moves out (instead of bind("mouseenter") and bind("mouseleave"))
Usage: $("selector").hover(function(){ //enter case...},function(){//leave case...})
(Except: IE6 does not support the :hover pseudo-class problem of CSS other than a tag - this hover event can be used as Hack to solve)
$("selector").toggle(fn1,fn2,...,fnN)
Simulate continuous mouse click events, and loop the events in order according to the order of clicks
How to use ：$("selector").toggle(function(){//case1...},function(){//case2...},...,function(){//caseN})
Special usage: Switch the visible state of an element. If the element is hidden, click toggle to trigger the element to make it visible; if the element is visible, click toggle to trigger the element to make it hidden

P108 example:

Copy code The code is as follows:

<script> <br>$(function(){ <br>$ ("panel h5.head").toggle(function(){ <br>$(this).next().toggle(); <br>},function(){ <br>$(this).next( ).toggle(); <br>}) <br>}) <br></script>

4 Event bubbling

$("selector"). bind("type",function(event){//event: event object...})
Event event object: It can only be accessed inside this function. After the event processing function is executed, the event object is destroyed
event.stopPropagation()
Used to stop event bubbling at the end of the function
P111 example:

Copy code The code is as follows:

<script> <br>$('span').bind("click",function(event){ <br>var txt = $('msg') .html() "<p>The inner span element was clicked</p>"; <br>$('#msg').html(txt); <br>event.stopPropagation(); <br>}) <br></script>
event.preventDefault()

Prevent element default behavior
Example: Validation form (empty input prevents submission and prompts)

Copy code The code is as follows:

<script> <br>$(function(){ <br>$("#submit").bind("click",function(event){ <br>var username=$("#username").val(); <br>if(username=="") { <br>$("#msg").html("<p> The value of the text box cannot be empty</p>"); <br>event.preventDefault(); <br>} <br> }); <br>}) <br></script>

return false;
Stop bubbling and default behavior for object events at the same time, which is equivalent to calling stopPapagation() and preventDefault() at the same time
(Exception: event capture and event bubbling are opposite processes, event Capture is triggered from the top of the DOM downwards, jQuery does not support it, so this book omits it)

5 Properties of the event object

event.type
Getting the event type
Example :

Copy code The code is as follows:

<script> <br>$("a ").click(function(event){ <br>alert(event.type); <br>return false; <br>}) <br></script>

return above "click"
event.target
Get the element that triggered the event
Example:

Copy code The code is as follows :

<script> <br>$("a[href=http://baidu.com]").click(function(){ <br>alert(event.target. href); <br>return false; <br>}) <br></script>

The above returns "http://baidu.com"
event.relatedTarget
Access event-related elements
event.pageX / event.pageY
Get the x-coordinate and y-coordinate of the cursor relative to the page
event.which
Get the left and center of the mouse in the mouse click event , right button; get the keyboard key in the keyboard event (return value 1 = left mouse button; 2 = middle mouse button; 3 = right mouse button)
event.metaKey
Get the buttonevent.originalEvent
Points to the original event object

6 Remove event

$("selector").unbind()
Remove the event on the element, format :$("selector").unbind([type][,data]); (If there are no parameters, all bound events will be deleted; if an event type parameter is provided, only bound events of that type will be deleted; if Use the handler function passed when binding as the second parameter, then only this specific event handler function will be deleted)
Example:

Copy code The code is as follows:

<script> <br>$(function(){ <br>$('#btn').bind("click", myFun1=function(){ //Bind first <br>$('#test').append("..."); <br>}); <br>}) <br></script>
<script> <br>$('#delOne').click(function(){ <br>$('#btn').unbind("click",myFun1); //Then delete <br>}) <br></script>

$("selector").one()
Bind an event that is triggered once and then deleted, format: $("selector ").one(type[,data],fn);

7 Simulate operation

$("selector").trigger("type");
Simulate user interaction , abbreviation method: $("#selector").type(); Format: $("selector").trigger(type[,data])
Example: Use click to replace mouse passing

Copy code The code is as follows:

<script> <br>$("selector").mouseover(function{ //...}); <br>$("selector2").click(function(){ <br>$("selector").trigger("mouseover"); //or $("selector") .mouseover() <br>}) <br></script>

Example of custom event

Copy code The code is as follows:

<script> <br>$("selector").bind("myClick",function(){//...}) ; //Bind custom events <br>$("selector").trigger("myClick"); //Trigger custom events <br></script>
$("selector").trigger (type[,data])

You can pass parameters to the callback function in the form of an array
P119 example:

Copy code The code is as follows:

<script> <br>$("#btn").bind("myClick",function(event,message1,message2){ <br>$("#test").append("<p>" message1 message2 "</p>"); <br>}); <br>$("#btn").trigger("myClick" , ["My Customization", "Event"]); <br></script>

8 Other usages

$("selector").bind( "type1 type2",function(){//...})
Bind multiple event types at one time
P119 Worth-seeing example

Copy code The code is as follows:

<script> <br>$(function(){ <br>$("div").bind("mouseover mouseout",function(){ <br>$(this).toggleClass( "over"); //Switch class <br>}); <br>}) <br></script>

$("selector").bind("type.name Space",function(){//...})
Add an event namespace for multiple events to facilitate management. After deleting the namespace, the events under the namespace will be deleted at the same time, such as:
$(" div").bind("mouseover.plugin",function(){//...})
$("div").bind("click.plugin",function(){//... })
$("div").unbind(".plugin");
$("selector").trigger("type!")
"!" is used to select matches not included in type method in namespace