脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery事件

jQuery学习总结之jQuery事件

 更新时间：2014年06月30日 17:31:31   投稿：mdxy-dxy  
今天总结一下jQuery事件，这是比较重要的一块，希望本次总结能帮助到很多同我一样的新手

首先，我们来看一个有用的实例，来加深以前所掌握的知识，其中有些是在前边出现过的。

复制代码 代码如下:

<img id="imgGoogle" src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" alt="google.com" />
<input type="button" id="btnHide" value="隐藏图片" />

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

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

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

在过去，我们经常看到：

复制代码 代码如下:

<div onclick="alert('租房贵');" id="divRent">在北京</div>

这种写法。从现在开始，大家应该抛弃这种写法。实现js代码和html的分离，这样页面整洁了，效率也会更高。现在的写法，将会变成：

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

既然是总结，我还是像前三篇那样，用实例来记录尽可能多的事件方法，方便大家在需要的时候查阅。

以下是自己在学习过程中遇到的：

1、one()事件，绑定要执行一次的事件

复制代码 代码如下:

<div id="divRent">人在北京</div>

复制代码 代码如下:

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

以上绑定一次单击事件，第二次点击时，不会再弹出提示。

2、focus()和blur()事件

复制代码 代码如下:

<input id="tTest" type="text" />

复制代码 代码如下:

jQuery("#tTest").focus(function() {
    jQuery(this).css("background", "yellow");
}).blur(function() {
    jQuery(this).css("background", "white");
});

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

3、keydown()和keyup()事件

复制代码 代码如下:

<input type="text" id="tTest" />
<label id="lResult"></label>

复制代码 代码如下:

jQuery("#tTest").keyup(function() {
    jQuery("#lResult").html(jQuery(this).val());
});

当键弹起时（这里感觉不好表达^_^），在label中将会显示文本框中的内容。操作元素属性部分可以看看第三篇总结。

4、submit()事件

复制代码 代码如下:

<form id="form2" runat="server">
    <input id="text" type="text" />
    <asp:button id="btnTest" onclick="btnTest_Click" runat="server" text="测试">
    </asp:button>
</form>

复制代码 代码如下:

jQuery("#form1").submit(function() {
    if (jQuery.trim(jQuery("#text").val()).length == 0) {
        return false;
    }
});

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

5、hover()事件

复制代码 代码如下:

<div id="divHover">hover me</div>

复制代码 代码如下:

jQuery("#divHover").hover(function() {
    jQuery(this).css("background", "yellow");
}, function() {
    jQuery(this).css("background", "red");
});

鼠标移动到div上时，div背景色变成黄色，移出背景色变成红色。

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

您可能感兴趣的文章:

相关文章

  • jquery插件star-rating.js实现星级评分特效

    jquery插件star-rating.js实现星级评分特效

    Bootstrap Star Rating是一个简单而强大的jQuery插件实现星级分数评级。支持像分数星填充和RTL输入先进的功能。在利用纯CSS-3造型使控制重点开发。该插件使用引导标记和造型默认情况下，但它可以覆盖与其他任何CSS的标记。
    2015-04-04
  • JQuery+drag.js上传图片并且实现图片拖曳

    JQuery+drag.js上传图片并且实现图片拖曳

    这篇文章主要介绍了JQuery+drag.js上传图片并且实现图片拖曳,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • jQuery实现遮罩层登录对话框

    jQuery实现遮罩层登录对话框

    用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面，点击登录按钮就会弹出一个遮罩层，显示用户登录的对话框。本文将推荐一个带二维码的登录弹出层，可拖动、关闭，有需要的朋友可以参考一下。
    2016-12-12
  • 使用js显示当前时间示例

    使用js显示当前时间示例

    这篇文章主要介绍了使用js显示当前时间示例,这里也用到了jquery，让得把它也要引入到页面中
    2014-03-03
  • jQuery实现点击任意位置弹出层外关闭弹出层效果

    jQuery实现点击任意位置弹出层外关闭弹出层效果

    在之前做项目的时候经常会在主页面上点击某个按钮，右侧弹出一个div输出对应内容的详细信息，怎么实现的呢，今天小编给大家分享通过jquery实现点击任意位置弹出层外关闭弹出层效果，感兴趣的朋友一起看看吧
    2016-10-10
  • jquery怎样实现ajax联动框(二)

    jquery怎样实现ajax联动框(二)

    ajax联动框想必大家早有所耳闻，接下来将介绍jquery实现另一种形式的联动框，右边的联动框用jquery生成，仿照上篇的js方法修改的，感兴趣的你可以参考下希望可以帮助到你
    2013-03-03
  • 用jquery写的菜单从左往右滑动出现

    用jquery写的菜单从左往右滑动出现

    这篇文章主要介绍了用jquery写的菜单从左往右滑动出现的效果,需要的朋友可以参考下
    2014-04-04
  • jQuery实现鼠标拖拽登录框移动效果

    jQuery实现鼠标拖拽登录框移动效果

    这篇文章主要为大家详细介绍了jQuery实现鼠标拖拽登录框移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • jQuery实现div拖拽效果实例分析

    jQuery实现div拖拽效果实例分析

    这篇文章主要介绍了jQuery实现div拖拽效果的方法,结合实例形式分析了jQuery响应鼠标事件实现页面元素样式变换的技巧与相关注意事项,需要的朋友可以参考下
    2016-02-02
  • jQuery select操作控制方法小结

    jQuery select操作控制方法小结

    很多朋友对jquery select的操作很有兴趣，但网上的东西太多，所以脚本之家特别将Jquery Select操作方法整理下，方便大家查找。
    2010-05-05

最新评论