jQuery 事件

2017-09-16
摘抄自W3school-jQuery 事件
希望帮助自己系统地打好基础,也能在做笔记的同时添加一些自己额外的收获。

jQuery 是为事件处理特别设计的

jQuery 事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件"触发"经常会被使用。
通常会把 jQuery 代码放到 <head> 部分的事件处理方法中:
实例

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

在本例中,当按钮的点击事件被触发时会调用一个函数:

$("button").click(function() {..some code... } )

该方法隐藏所有 <p> 元素

$("p").hide();

单独文件中的函数

如果网站包含许多页面,并且你希望你的jQuery函数易于维护,那么你可以把jQuery函数放在独立的 .js 文件中。

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数 (比如 Prototype)同样使用 $ 符号
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict(),帮助你使用自己的名称(比如 jq)来代替 $ 符号

结论

由于 jQuery 是为处理 HTML 事件而特别设计的,那么当你遵循以上原则时,代码会更恰当且更易维护:

  • 把所有 jQuery 代码置于事件处理函数中
  • 把所有事件处理函数置于文档就绪事件处理器中
  • 把 jQuery 代码置于单独的 .js 文件中
  • 如果存在名称冲突,则重命名 jQuery 库

jQuery 事件

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文章是老马jQuery视频的讲义和上课的代码。具体观看视频地址:https://chuanke.baidu.co...
    IT老马阅读 7,349评论 3 14
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 5,532评论 2 10
  • 毕设要翻译短论文,就网上随便找了篇让女朋友翻译了下,哈哈,还不错。没错,我就是来花式秀女友的。格式乱乱的,明天改 ...
    debt阅读 2,854评论 0 1
  • 一、基础事件 1、绑定事件 bind();参数一:要绑定事件函数的事件名。参数二:要绑定的事件函数(事件函数名),...
    清心挽风阅读 3,443评论 0 1
  • 有谁许我的承诺 一字一句堆砌成王国 我在城里 诵念一世的佛 回转梦空 有谁能续写我这美好的经过 可又有谁 能免去终...
    顾北枝阅读 2,880评论 0 0