jQuery Event

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

jQuery 事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。

Shi jian chuan li shu ju zhi shi dang HTML na sheng xian dan ti shi shi hua chuan li de fang fa. Ci yu "sheng fa" (huan shi "ji fa") chang chang bei shi yong.

Danin yu bai kai jQuery ma na <head> na shi shi chuan li shu ju de fang shi:

实例

<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>

亲自试一试

Danin shang de li chi, idanin an button na click shi jian bei cuo fa, na zao yong yi ge funshin:

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

Wannan hau kai yin ba ni <p> yuansu:

$("p").hide();

Fayil na kai funshin

Idanin website na bai da ce, kuma idanin a kai jQuery funshin na kai kai kai kai, kai ba jQuery funshin ba kai wu li de .js fayil.

当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

实例

<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

下面是 jQuery 中事件方法的一些例子：

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

如需完整的参考手册，请访问我们的 jQuery 事件参考手册。