Events in jQuery
Author: Zeng Qinglin
A preliminary exploration of the incident
Triggered when the document is loaded: the $(document).ready(function(){})
event can be executed multiple times.
The code can be abbreviated:$(function(){})
Event binding
1 Event functions can be added between
$("h1").click(function(){
//触发事件要做的事情
})
The issue is:
- Each time you click h1, it will respond to the event and cannot be cancelled.
- The functions in this cannot be reused either
- Only one function can be bound
2 can bind events
- bind() bind event
- unbind() unbind event
- one() is executed only once
js
$(".box").bind("click",fn1);
$(".box").bind("click",fn2);
// 可以绑定多个
function fn1(){
alert("你敢点我，我不是你的菜");
}
function fn2(){
alert("我就是去问问老朋友");
}
$("button").bind("click",fn3);
function fn3(){
alert("你点我了，就不要找那个她！");
$(".box").unbind("click");
// 在这里 解绑的 .box 所有click 事件
/* 也可以只解绑一个一个事件如：
$(".box").unbind("click"，fn1);
*/
}
$(".box").one("click",function(){
alert("我只出现一次，以后不烦你了");
})
html
<div class="box">box</div>
<button>我是米米</button>
Synthetic event
hover(enter,leave) is
used to simulate the cursor hovering event. When the cursor moves to the element, the specified first function is triggered, and when the cursor moves out of this element, the specified second function is triggered.
$("h1").hover(
function(){
// mouseover触法},
function(){
// mouseout触发}
)
Simulated event
trigger
Events are triggered after the user performs a corresponding operation. Sometimes we prefer to let the event be executed automatically, instead of manually triggering, or calling another event processing function in one event. At this time, we can consider using simulated operations.
Simulation operations can trigger()be done using methods.
html
<p>this is a p</p>
<form action="">
<input type="text" id="good" />
<input type="text" />
</form>
js
$(function(){
$("p").click(function(){ alert("我被点击了")});
$("p").trigger("click");
$("#good").trigger("focus");
// trigger 可以模拟自动获得焦点
})
Ways to prevent events from bubbling
Add the event parameter to the bound event and add the event.stopPropagation() call to the function to prevent event bubbling. You can also use return false to prevent bubbling.
There is also a method in event: event.preventDefault(); The function is to prevent default behaviors, such as form submission!
html
<div class="papa">
父亲
<div class="self">
自己
<div class="son">儿子<span>this is 核心</span><a href="http://www.baidu.com">BAIDU</a></div>
</div>
</div>
We bind an event to papa and
also bind an event to
span. When span is clicked, papa will also trigger a click event (the event will be passed from the child element to the parent element).
How to prevent the event from being bubbled up by default?
a It will jump to the page by default. How to prevent the default challenge page?
$("span").bind("click",fn1);
$(".papa").bind("click",fn2);
function fn1(e){
alert("我是小span的被点击了");
e.stopPropagation();//阻止事件冒泡
}
function fn2(){
alert("我是papa被点击了");
}
$("a").bind("click",fn3);
function fn3(e){
alert("A被单击了");
e.preventDefault();//阻止默认事件
}
Animation in jQuery
Control show and hide
show() “fast”:200 “normal”:400 “slow”:600
hide()
Control opacity
fadeIn()
fadeOut()
fadeTo() //$(“div”).fadeTo(“fast”,”0.2”);
Control height
slideUp()
slideDown()
自定义动画实现
Custom animation implementation
animate(params,speed,fun);
Accumulate and subtract animation
$("#btn").click(function(){
$("#pos").animate({
left:"+=20px"},fast);
})
Perform multiple animations simultaneously
$("#pos").animate({
left:"+=20px",height:"+=20px"},fast);
Stop animation
stop()方法：停止阶段性动画。
stop(true)方法：停止当前动画后的所有阶段动画。
Determine whether the element is in an animated state
$("#ele").is(":animated")
说明：
动画是顺序执行的。
Full screen scroll case
analysis
2 big
steps. The first step is to click li to scroll the div corresponding to a href in li to the corresponding position. The
second step is to monitor the active window scrolling and switching navigation
html
<div class="fi">
<div class="container">
<ul>
<li class="active"><a href="#sc1">第一屏</a></li>
<li><a href="#sc2">第二屏</a></li>
<li><a href="#sc3">第三屏</a></li>
<li><a href="#sc4">第四屏</a></li>
<li><a href="#sc5">第五屏</a></li>
<li><a href="#sc6">第六屏</a></li>
<li><a href="#sc7">第七屏</a></li>
</ul>
</div>
</div>
<div class="sc" id="sc1">
<h1>1</h1>
</div>
<div class="sc" id="sc2">
<h1>2</h1>
</div>
<div class="sc" id="sc3">
<h1>3</h1>
</div>
<div class="sc f4" id="sc4">
<h1>4</h1>
</div>
<div class="sc" id="sc5">
<h1>5</h1>
</div>
<div class="sc" id="sc6">
<h1>6</h1>
</div>
<div class="sc" id="sc7">
<h1>7</h1>
</div>
<p class="line"></p>
css
.active {
background-color: #ff3;
}
.sc {
height: 600px;}
.sc:nth-of-type(2n+1) {
background-color: yellow;}
.f4{
height: 1000px;}
The first step is to click li to scroll the div corresponding to a href in li to the corresponding position
$(function(){
$(".fi li a").click(function(e){
e.preventDefault()
$(window).unbind("scroll",checkScroll);//单击取消监听
var href=$(this).attr("href");//求出里面的href
$(this).parent().siblings(".active").removeClass("active");
//他的爹的兄弟有active 去掉active；
$(this).parent().addClass("active");//给a的爹加active
var offT=$(href).offset().top;//对应的div 距离顶部的距离
$("body,html").animate({
"scrollTop":offT-50},600,function(){
$(window).bind("scroll",checkScroll);//动画完再监听
});
//让滚动条滚动到对应距离
})
The second step is to monitor the active of the window scrolling switch navigation
1 Monitor window scrolling
2 Compare the scroll distance with the distance from the top of the div, let the father of a corresponding to the id of the div add active and remove the active
$(window).bind("scroll",checkScroll);//监听滚动
function checkScroll(){
var st=$(window).scrollTop();//拿到滚动的距离
var id;//存一个空的id值
$(".sc").each(function (index,elem){
//循环每一个第
var offT=$(this).offset().top;//拿到每个div距离顶部的距离；
if(st>=offT-51){
//滚动的距离大于 该div距离顶部的距离 （对应的div）51是导航的高度
id=$(this).attr("id");//获取他的id值
}
})
$("a[href=#"+id+"]").parent().siblings(".active").removeClass("active");
//id值对应的a 的父亲的兄弟有active 去掉active
$("a[href=#"+id+"]").parent().addClass("active")
//id值对应的a 的父亲添加active
}
IT Getting Started Thank attention
Study address: www.520mg.com/it