10-jQuery中的事件与动画教程

喜欢ヅ旅行 2022-12-08 14:14 139阅读 0赞

# jQuery中的事件 #

作者：曾庆林

### 事件初探 ###

加载文档完成触发：`$(document).ready(function(){})`  
事件可以多次执行。  
代码可以简写：`$(function(){})`

### 事件绑定 ###

1 可以之间添加事件函数

$("h1").click(function(){
            //触发事件要做的事情
      })

> 问题是：
> 
> 1.  每次单击h1都会相应事件，不能解除。
> 2.  这个里面的函数也不能复用
> 3.  只能绑定一个函数

2 可以通过绑定事件

*  bind() 绑定事件
 *  unbind() 解绑事件
 *  one() 只执行一次

$(".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

--------------------

### 合成事件 ###

hover(enter,leave)  
用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,触发指定的第二个函数.

$("h1").hover(
        function(){ // mouseover触法},
        function(){ // mouseout触发}
    )

--------------------

### 模拟事件 ###

trigger

事件都是通过用户执行相应的操作后触发的。有时我们更希望让事件自动执行，而不用手动触发，或者在一个事件中调用另一个事件的处理函数。这时我们可以考虑使用模拟操作。  
模拟操作可以使用`trigger()`方法来完成。

html

$(function(){
    	$("p").click(function(){ alert("我被点击了")});
    	$("p").trigger("click");
    	$("#good").trigger("focus");
    	// trigger 可以模拟自动获得焦点
    })

--------------------

### 阻止事件冒泡的方法 ###

在绑定的事件中加入event参数，并在函数中增加event.stopPropagation()调用就可以阻止事件冒泡。也可以使用return false阻止冒泡。

event中还有一个方法：event.preventDefault();作用是阻止默认行为，如表单提交！

![image][]

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>

> 我们在papa 上面绑定一个事件  
> 在span 也绑定一个事件  
> 单击span 时候 papa也会触发单击事件（事件会从子元素传递到父辈元素上面）  
> 怎么样阻止事件的默认向上冒泡传递呢?

> a 会默认 跳转页面，怎样阻止默认挑战页面呢？

$("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();//阻止默认事件
    	
    }

# jQuery中的动画 #

### 控制显示和隐藏 ###

show()	“fast”:200	“normal”:400	“slow”:600
    hide()

### 控制不透明度 ###

fadeIn()
    fadeOut()
    fadeTo()	//$(“div”).fadeTo(“fast”,”0.2”);

### 控制高度 ###

slideUp()
    slideDown()
    自定义动画实现

### 自定义动画实现 ###

animate(params,speed,fun);

累加、累减动画

$("#btn").click(function(){ 
    	$("#pos").animate({ left:"+=20px"},fast);
    })

同时执行多个动画

$("#pos").animate({ left:"+=20px",height:"+=20px"},fast);

停止动画

stop()方法：停止阶段性动画。
    stop(true)方法：停止当前动画后的所有阶段动画。

判断元素是否处于动画状态

$("#ele").is(":animated")
    说明：
    动画是顺序执行的。

# 全屏滚动案例 #

分析

> 2大步  
> 第一步 单击 li 让 li里面 a href 对应的 div 滚动到相应的位置  
> 第二大步 监听窗口滚动 切换导航的active

html

css

.active { 
    	background-color: #ff3;
    }
    .sc {  height: 600px;}
    .sc:nth-of-type(2n+1) {  background-color: yellow;}
    .f4{  height: 1000px;}

第一步 单击 li 让 li里面 a href 对应的 div 滚动到相应的位置

$(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);//动画完再监听
    		});
    		
    		
    		//让滚动条滚动到对应距离
    		
    	})

第二步 监听窗口滚动 切换导航的active

> 1监听窗口滚动  
> 2 滚动距离 与div距离顶部距离 对照，让对应div 的id 相对应的a 的父亲添加 active 其他去掉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入门 感谢关注][IT_]

IT入门 感谢关注

学习地址： [www.520mg.com/it][www.520mg.com_it]

[image]: /images/20221123/be2470540416459298e5662da6c5f64c.png
[IT_]: /images/20221123/0fd0f561b0684518bb4c19722c3ae48b.png
[www.520mg.com_it]: https://520mg.com/it/#/main/334