jQuery事件


1.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>
  <b>淮阴工学院</b>
  <p>计算机工程学院</p>
  <p>Web开发技术</p>
  <button>点击</button>
 </body>
</html>

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

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

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

$("p").hide();


2.单独文件中的函数

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

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

实例

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

3.jQuery名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。


4.常用jQuery事件

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

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

©版权所有: 淮安深度人工智能科技有限公司2020, 备案号:苏ICP备2020056902号-2 | 技术支持:淮阴工学院计算机与软件工程学院《Web开发技术》教学团队