小白读《锋利的jQuery（第二版）》学习笔记 第四章 jQuery中的事件和动画

于 2019-01-31 20:57:25 发布
阅读量293 收藏
点赞数 1
分类专栏： jQuery 文章标签： 小白 前端 jQuery 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/canxuezhang/article/details/86700001
版权

JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引起的事件来处理的。
jQuery不仅提供了更加优雅的事件处理方法，而且极大地增强了事件处理能力。

jQuery中的事件

  1. 加载DOM
    传统window.onload方法 ——> jQuery中$(document).ready()方法。
    $(document).ready()方法是事件函数模块中最重要的一个函数，可以极大地提高Web应用程序的响应速度。

两者的细微区别

  • 1.执行时机
    window.onload方法：网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行。
    $(document).ready()方法：通过此方法注册的事件处理程序，在DOM完全就绪就可以被调用。（关联文件不一定已经下载完毕。）

若使用$(document).ready()方法注册的事件执行时可能元素关联文件未下载完（如图片有关的高度和宽度），此时可以使用load()方法解决。

load()方法：会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

  • 2.多次使用
    JavaScript的onload事件一次只能保持对一个函数的引用。
    示例代码：
function one() {
	alert("one");
}

function two() {
    alert("two");
}

window.onload = one;
window.onload = two;

在这里插入图片描述
要one()和two()顺序触发，需写成：

window.onload = function() {
    one();
    two();
}

在这里插入图片描述
在这里插入图片描述
这样存在的问题：
假如多个JavaScript文件都用了window.onload方法，则编写代码变得麻烦。

$(document).ready()方法优点：会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。

示例代码：

$(document).ready(function() {
    one();
});

$(document).ready(function() {
    two();
});
  • 3.简写方式

①

$(function() {
	//编写代码
});

②

$().ready(function() {
		//编写代码
});
  1. 事件绑定
    bind()方法。
    格式：bind( type[ , data] , fn);
    3个参数：
  • 事件类型：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。
  • 可选，作为event.data属性值传递给事件对象的额外数据对象。
  • 用来绑定的处理函数。

示例：假设网页中有一个FAQ，单击“标题”链接将显示内容。

HTML：

<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content">
		jQuery是继Prototype之后又一个优秀的JavaScript库，
		它是一个由 John Resig 创建于2006年1月的开源项目。
		jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、
		操作DOM、处理事件、执行动画和开发Ajax。
		它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
	</div>
</div>

CSS：

* {
    margin:0;
    padding:0;
}	
body { 
    font-size: 13px; 
    line-height: 130%; 
    padding: 60px;
}
#panel { 
    width: 300px; 
    border: 1px solid #0050D0;
}
.head { 
    height:24px;
    line-height:24px;
    text-indent:10px;
    background: #96E555; 
    cursor: pointer;
    width:100%; 
}
.content { 
    padding: 10px; 
    text-indent:24px; 
    border-top: 1px solid #0050D0;
    display:block;
    display:none; 
}

在这里插入图片描述
jQuery代码：

$(function(){
    $("#panel h5.head").bind("click",function(){
		$(this).next().show();		//$(this).next(); 获取“内容”元素
	})
})

在这里插入图片描述
同ready()方法一样，bind()方法也可以多次调用。
this：引用的是携带相应行为的DOM元素。
$(this)：转换为jQuery对象。

对示例进行改进后jQuery代码：

$(function(){
    $("#panel h5.head").bind("click",function(){
	    var $content = $(this).next();
	    if($content.is(":visible")){
			$content.hide();
		}else{
			$content.show();
		}
	})
})

可以实现显示和隐藏。

还可以改变事件的类型，修改后的jQuery代码：

$(function(){
    $("#panel h5.head").bind("mouseover",function(){
	     $(this).next().show();
	}).bind("mouseout",function(){
	     $(this).next().hide();
	})
})

jQuery为常用的事件提供了简写绑定事件的方法
示例代码：

$(function(){
    $("#panel h5.head").mouseover(function(){
	    $(this).next().show();
	}).mouseout(function(){
	    $(this).next().hide();
	})
})

  1. 合成事件
    hover()方法和toggle()方法。
    hover语法格式：

    hover(enter, leave);

对上题示例利用mouseover和mouseout方法的改写：

$(function(){
    $("#panel h5.head").hover(function(){
	    $(this).next().show();
	},function(){
	    $(this).next().hide();   
	})
})

toggle语法格式：

toggle(fn1,fn2,······fnN);

对上题示例利用click()方法的改写：

$(function(){
    $("#panel h5.head").toggle(function(){
			$(this).next().show();
	},function(){
			$(this).next().hide();
	})
})

toggle()方法在jQuery中的一个重要作用：切换元素的可见状态。
示例代码：

$(function(){
    $("#panel h5.head").toggle(function(){
			$(this).next().toggle();
	},function(){
			$(this).next().toggle();
	})
})

示例再改进，显示时标题高亮。
CSS添加代码：

.highlight{ background:#FF3300; }

jQuery代码：

$(function(){
    $("#panel h5.head").toggle(function(){
			$(this).addClass("highlight");
			$(this).next().show();
	},function(){
			$(this).removeClass("highlight");
			$(this).next().hide();
	});
})

在这里插入图片描述
在这里插入图片描述

  1. 事件冒泡
    冒泡：事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>冒泡事件示例</title>
        <style type="text/css">
            * {
                margin:0;
                padding:0;
            }

            body { 
                font-size: 13px; 
                line-height: 130%; 
                padding: 60px; 
            }

            #content { 
                width: 220px; 
                border: 1px solid #0050D0;
                background: #96E555; 
            }

            span { 
                width: 200px; 
                margin: 10px; 
                background: #666666; 
                cursor: pointer;
                color:white;
                display:block;
            }

            p {
                width:200px;
                background:#888;
                color:white;
                height:16px;
            }
            
        </style>
    </head>
    <body>
        <div id="content">
            外层div元素
            <span>内层span元素</span>
            外层div元素
        </div>
        
        <div id="msg"></div>
        <script src="../scripts/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(function(){
            // 为span元素绑定click事件
            $('span').bind("click",function(){
                var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
                $('#msg').html(txt);
            });
            // 为div元素绑定click事件
            $('#content').bind("click",function(){
                var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
                $('#msg').html(txt);
            });
            // 为body元素绑定click事件
            $("body").bind("click",function(){
                var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
                $('#msg').html(txt);
            });
        })
        </script>
    </body>
</html>

在这里插入图片描述
在这里插入图片描述
事件冒泡引发的问题
事件冒泡可能会引起预料之外的效果。

事件对象

IE-DOM和标准DOM实现事件对象的方法各不相同。
jQuery进行必要的扩展和封装。
在程序中使用事件对象非常简单，只需要为函数添加一个参数，一般为event。

$("element").bind("click",function(event) {		//event:事件对象
		//···
});

当单击“element”元素时，事件对象就被创建了。
这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。

停止事件冒泡

stopPropagation()方法：阻止事件中其他对象的事件处理函数被执行。

$(function(){
   	// 为span元素绑定click事件
	$('span').bind("click",function(event){			//event：事件对象
		var
最低0.47元/天 解锁文章
canxuezhang
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值