当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery学习总结之jQuery事件

jQuery学习总结之jQuery事件

2019年03月25日  | 移动技术网IT编程  | 我要评论

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

复制代码 代码如下:


<img id="imggoogle" src=https://www.2cto.com/uploadfile/2018/0119/20180119013529319.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可以执行事件了，鼠标移动、点击、文本框焦点离开等都是事件。

在过去，我们经常看到：

复制代码 代码如下:


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

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

jquery("#prent").click(function() {
  alert("租房贵");
});

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

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

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

复制代码 代码如下:


<p id="prent">人在北京</p>

复制代码 代码如下:


jquery("#prent").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" />
    <: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()事件

复制代码 代码如下:


<p id="phover">hover me</p>

复制代码 代码如下:


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

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网