What is the event?
Page called the incident a response to different visitors. Event handler method means that when certain events occur in the HTML call. Often uses the term "trigger" (or "excitation") commonly used click () method is triggered in the event
DOM load
$ (Document) .ready () method and the difference between window.onload () method:
Event binding
Use bind () method for each specific binding event matching element event handlers. bind () method call format: the bind (type, [Data], Fn )
• of the type: contains one or more event type string multiple events separated by a space. Such as "click" or "submit", also can be custom event name.
• Data: passed as event.data property value to the event object Additional data
• Fn : bound to each element of the matching event handler above
Example:
//事件绑定
$("#btn1").bind("click",function(){
alert("点我触发bind函数");
})
<button id="btn1">点我触发bind函数</button>Using jQuery is () method determines whether the element is visible, used is () method:
alert($("button").parent().is("body"));
/*
* $("#b1").is(":visible") 判断id为d1的元素是否可见
* 可见返回true，不可见就返回false
*
* next($("#b1").is(":visible"));
*/
alert("#btn2").is(":visible");
$("#btn2").click(function(){
if($("#b1").is(":visible")){
//$(this).next().css();
$(this).next().hide();
}else{
$(this).next().show();
}
})Synthetic event -hover ()
hover () simulate cursor hovering event. When the cursor is moved over an element, will trigger the first function specified, when the cursor out of this element, will trigger the second function specified.
hover () syntax structure is the method: hover ([over,] OUT)
• over: the mouse over an element to trigger functions
• out: a function of the mouse out of the element to be triggered
Example:
web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
$(function(){
/*
* 合成事件hover()方法的语法结构:
* hover(enter,leave);
*
* */
$("#btn2").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
<button id="btn1">点我触发bind函数</button>
<button id="btn2">隐藏或者显示</button>
<div id="b1" style="display: none;">
<img src="img/log.jpg"/>
</div>Synthetic event -toggle (): used to simulate a mouse click event in a row first click on an element, triggering the first specified function, click again when the same element, then trigger the second specified function. If there are more functions, then in turn trigger until the last.
$(function(){
/*
* 合成事件toggle()方法的语法结构:
* toggle(f1,f2,f3,f4....);
*
* 有俩个功能:
* 1：模拟连续点击(自动点击，不是你手动点击);
* 2.如果元素本身可见，则会自动隐藏，如果本身是隐藏的，则会自动显示
* */
/* $("#btn1").toggle(function(){
alert("触发toggle函数");
});*/
//带俩个参数的toggle方法
$("#btn1").toggle(function(){
$("#btn1").css("color","turquoise");
//alert("触发toggle函数");
},function(){
//alert("触发toggle2函数")
$("#btn1").css("background-color","deepskyblue");
})
})Event bubbling:
On the page can have multiple events, multiple elements can also respond to the same event.
There are two elements on the assumption that page, one nested within another element in, and are bound to click events, while the body elements are also bound to the click event.
DOM event will follow the same hierarchy as blisters continued up until the top
<style type="text/css">
#body1{
background-color: deepskyblue;
}
#div1{
background-color: white;
}
#span1{
background-color: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/*
*演示事件冒泡
* 当一个元素的本身和父类都绑定了相同事件时，它本身触发该事件，则父类也会触发该事件
* 解决方法：停止冒泡
* 方法1:本身return false；
* 方法2:stopPropagation(); [event是事件对象]
*/
$("#body1").click(function(){
alert("body的click方法");
})
$("#div1").click(function(){
alert("div的click方法");
})
$("#span1").click(function(){
alert("span的click方法");
// return false;
event.stopPropagation();
})
})
</script>
</head>
<body id="body1">
body
<div id="div1">
div
<span id="span1">
span
</span>
</div>
</body>
</html>
Prevent the default behavior
Web page elements have their own default behavior, for example, you click a hyperlink will jump, and click the submit button to submit the form, the default behavior is sometimes necessary to prevent the elements.
In jQuery provides a preventDefault () method to prevent the default behavior of the element.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//阻止点击之后跳转
$("#a1").click(function(){
alert("你正在阻止a标签的默认行为");
//return false; //方法一
event.preventDefault(); //方法二
})
/*
* 写一个登录表单，设置如果用户名不满足正则表达式的要求，阻止请求服务
* 正则判断是否满足符合规则
*
*/
$(":submit").click(function(){
var na=$("#na").val();
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
if(!uPattern.test(na)){
alert("你正在阻止a标签的默认行为");
return false;
}
})
})
</script>
</head>
<body>
<a href="http://baidu.com" id="a1">跳转百度</a>
<form action="http://baidu.com" method="post">
用户名<input type="text" id="na"/><br/>
密码<input type="password" id="pa" /><br/>
<button type="submit">登录</button>
</form>
</body>
</html>Property of the event object
Event object: When a trigger event, the event object is created using the events in the program only need to add a parameter to a function.
event.type: Gets the type of event
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/*
* 事件对象：对事件对象的常用属性进行封装
* 1.event.type获取事件的类型(也就是事件名称)
* 2\. event.preventDefault(); 阻止默认的事件行为 (在IE中无效)
* 3\. event.stopPropagation() 阻止事件冒泡
* 4.event.target 获取触发事件的元素（获取触发的目标）
* 5.event.pageX / event.pageY 获取事件光标的X和Y的坐标
* 6.event.which 获取鼠标的按键(左键返回1，中键返回2，右键返回3)
*/
$("#a1").click(function(){
//alert(event.pageX+","+event.pageY);
alert(event.which);
return false;
})
})
</script>
</head>
<body>
<a href="http://baidu.com" id="a1">查看事件对象的属性</a>
</body>
</html>Remove the event:
In the process of binding events, not only you can bind multiple events for the same element, can also bind the same event for multiple elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").one("click", function() {
$("#test").append("<p>我的绑定函数1</p>");
}).one("click", function() {
$("#test").append("<p>我的绑定函数2</p>");
}).one("click", function() {
$("#test").append("<p>我的绑定函数3</p>");
})
})
</script>
</head>
<body>
<button id="btn1">绑定函数</button>
<div id="test">
</div>
</body>
</html>One () method
one (): This method can be bound to the element handler when the handler is triggered once, ie immediately be removed on each object, the event handler will only be executed once...
on () and bind () difference
jQuery from 1.7 + version, provides on () and off () to bind and to cancel the event handler.
The difference lies in whether to support the selector value of this parameter. If you are using on time, do not set the selector, so on and bind there is no difference.
jQuery animations
Hide and display elements -show () method and hide () method
hide (): In an HTML document, an element calling for the hide () method will change the display style elements of none, the code function with css ( "display", "none").
show (): After the hidden element, may be used show () method to display style element to a previous display state ( "block" or "inline" in addition to or other "none" value).
$(function(){
$("div").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
</script>
Fade in and fade out -fadeIn () method and fadeout () method
fadeIn (), fadeOut (): Only change the transparency of elements fadeOut () will reduce the opacity of elements within a specified period of time, until the element completely disappeared. ( "display: none"), fadeIn () is the opposite.
And slide down the slide -slideUp () method and slideDown () method
slideDown (), slideUp (): changes only the height of the element, if the element a display attribute is none, when calling slideDown () method, the display element will extend from top to bottom, slideUp () method on the contrary, the elements bottom-shortened hidden.
Custom animation method animate ()
Use Animate () method from the custom animations, syntax structure:
Animate (the params, [Speed], [Fn]) • the params : a set of animation properties and comprising as a set of style attributes and their values and final values, such as {property1: "value1", property2 : "value2", .. }
• speed : string of a predetermined one of three kinds of speed ( "slow", "normal" , or "fast") or when the number of milliseconds long animation representing (eg: 1000)
the Fn : Function executed when the animation is complete, executed once for each element
toggle () method
Toggle () method of switching elements may be visible. If the element is visible, the hidden switch; if hidden when the element is switched to be visible.
Toggle () will also change the height, width and transparency elements
slideToggle () method
slideToggle () method to toggle the visibility of matched elements by adjusting their height. This animation only adjust the height of the element.
fadeTo () method
fadeTo () method can be asymptotically opacity elements adjusted to the specified value (between 0-1). This animation only adjust the opacity of the elements, the height and width that is matched elements do not change.
fadeToggle () method
fadeToggle () method to change the visibility of opacity switchable matching element. This animation only adjust the opacity of elements
Animation Method Description:
Attribute custom methods of animation, animation All of the above methods are the essence of the internal call animate () method. In addition, direct use Animate () method can also customize other style attributes, for example: "left", "marginLeft", "scrollTop" etc.
Application Form:
A form has three basic components:
• Form label: Contains method to submit form data processing procedures used by the server and URL data to the server.
• Form Field: Contains text box, password box, multi-line text boxes, check boxes, radio buttons, drop-down selection boxes and file upload box and so on.
• Form button: comprising submit button, reset button, and general buttons for transmitting data to the server, or cancel transmission, also other definitions may be used to control the processing of the script processing.
attr () and prop () method distinction:
attr The return value is either checked or is undefined, prop return value only true and false.
prop () ** Results function **:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是空字符串。** attr () function result : **
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是undefined。For the inherent properties of the element itself with the HTML, when the treatment method using the prop.
HTML DOM attributes for custom elements of our own, in the processing, use attr method.
True and false attribute has two properties, such as checked, selected or disabled using prop ()