html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

jQuery学习总结之jQuery事件_jquery_

[ ] 已经帮助:人解决问题

首先,我们来看一个有用的实例,来加深以前所掌握的知识,其中有些是在前边出现过的。dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
<img id="imgGoogle" src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" alt="google.com" />dFvHTML5中文学习网 - HTML5先行者学习网
<input type="button" id="btnHide" value="隐藏图片" />dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

jQuery(document).ready(function() {  jQuery("#btnHide").click(function() {    jQuery("#imgGoogle").hide("1000");  });});

当点击隐藏图片时,google的logo图片将在一秒钟进行隐藏。这里我们用到了hide()方法,当然也可不指定时间,如果要显示图片的话应该使用show()方法,感觉是不是很棒。dFvHTML5中文学习网 - HTML5先行者学习网

现在开始本篇的主要内容:事件。大家可能已经注意到了,上边已经在多处用到了事件。其中,document.ready就是一个事件,当文档准备好了,它告诉jQuery可以执行事件了,鼠标移动、点击、文本框焦点离开等都是事件。dFvHTML5中文学习网 - HTML5先行者学习网

在过去,我们经常看到:dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
<div onclick="alert('租房贵');" id="divRent">在北京</div>dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

这种写法。从现在开始,大家应该抛弃这种写法。实现js代码和html的分离,这样页面整洁了,效率也会更高。现在的写法,将会变成:dFvHTML5中文学习网 - HTML5先行者学习网

jQuery("#divRent").click(function() {  alert("租房贵");});

既然是总结,我还是像前三篇那样,用实例来记录尽可能多的事件方法,方便大家在需要的时候查阅。dFvHTML5中文学习网 - HTML5先行者学习网

以下是自己在学习过程中遇到的:dFvHTML5中文学习网 - HTML5先行者学习网

1、one()事件,绑定要执行一次的事件dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
<div id="divRent">人在北京</div>dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
jQuery("#divRent").one("click", function() {dFvHTML5中文学习网 - HTML5先行者学习网
    alert("租房贵");dFvHTML5中文学习网 - HTML5先行者学习网
});dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

以上绑定一次单击事件,第二次点击时,不会再弹出提示。dFvHTML5中文学习网 - HTML5先行者学习网

2、focus()和blur()事件dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
<input id="tTest" type="text" />dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
jQuery("#tTest").focus(function() { dFvHTML5中文学习网 - HTML5先行者学习网
    jQuery(this).css("background", "yellow"); dFvHTML5中文学习网 - HTML5先行者学习网
}).blur(function() { dFvHTML5中文学习网 - HTML5先行者学习网
    jQuery(this).css("background", "white"); dFvHTML5中文学习网 - HTML5先行者学习网
});dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

此例实用到了链式写法,相信不难理解。如果对jQuery操作css样式不熟悉,可以看看第二篇总结。此例当焦点聚焦在本文框时,背景色变为黄色,离开时又变回白色。这样做的目的,可以提高用户体验,我个人感觉。dFvHTML5中文学习网 - HTML5先行者学习网

3、keydown()和keyup()事件dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
<input type="text" id="tTest" /> dFvHTML5中文学习网 - HTML5先行者学习网
<label id="lResult"></label>dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
jQuery("#tTest").keyup(function() { dFvHTML5中文学习网 - HTML5先行者学习网
    jQuery("#lResult").html(jQuery(this).val()); dFvHTML5中文学习网 - HTML5先行者学习网
}); dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

当键弹起时(这里感觉不好表达^_^),在label中将会显示文本框中的内容。操作元素属性部分可以看看第三篇总结。dFvHTML5中文学习网 - HTML5先行者学习网

4、submit()事件dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
<form id="form2" runat="server">dFvHTML5中文学习网 - HTML5先行者学习网
    <input id="text" type="text" /> dFvHTML5中文学习网 - HTML5先行者学习网
    <asp:button id="btnTest" onclick="btnTest_Click" runat="server" text="测试"> dFvHTML5中文学习网 - HTML5先行者学习网
    </asp:button> dFvHTML5中文学习网 - HTML5先行者学习网
</form>dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
jQuery("#form1").submit(function() { dFvHTML5中文学习网 - HTML5先行者学习网
    if (jQuery.trim(jQuery("#text").val()).length == 0) { dFvHTML5中文学习网 - HTML5先行者学习网
        return false; dFvHTML5中文学习网 - HTML5先行者学习网
    } dFvHTML5中文学习网 - HTML5先行者学习网
});dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

可以看出,本实例使用了服务器控件。实质上是一样的,最终会进行表单提交。点击按钮时,进行表单提交。如果文本框内容为空时,返回false,从而不进行提交;否则,进行提交。此类应用在web开发中随处可见。dFvHTML5中文学习网 - HTML5先行者学习网

5、hover()事件dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
<div id="divHover">hover me</div>dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
dFvHTML5中文学习网 - HTML5先行者学习网
jQuery("#divHover").hover(function() { dFvHTML5中文学习网 - HTML5先行者学习网
    jQuery(this).css("background", "yellow"); dFvHTML5中文学习网 - HTML5先行者学习网
}, function() { dFvHTML5中文学习网 - HTML5先行者学习网
    jQuery(this).css("background", "red"); dFvHTML5中文学习网 - HTML5先行者学习网
});dFvHTML5中文学习网 - HTML5先行者学习网
dFvHTML5中文学习网 - HTML5先行者学习网

鼠标移动到div上时,div背景色变成黄色,移出背景色变成红色。dFvHTML5中文学习网 - HTML5先行者学习网

以上几种事件是比较常见的,也是用的比较多的。当然本篇总结的只是一小部分,学习中遇到问题还得用jQuery文档进行查阅。dFvHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助