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 文件中。

当我们在教程中演示 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 事件

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

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

松软科技课堂:jQuery 事件函数的更多相关文章

  1. 松软科技课堂:jQuery 效果 - 滑动

    jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery sli ...

  2. 松软科技课堂:jQuery 效果 - 淡入淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  3. 松软科技课堂:jQuery 语法

    jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(select ...

  4. jQuery事件函数位置放置的两种方法

    jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法. 通常会把 jQuery 代码放到 <head& ...

  5. jquery事件函数和原生事件绑定函数中return false的区别

    一直听说jquery中事件函数返回false,相当于调用了event.preventDefault()和event.stopPropagation()两个方法,今天就想看看dom中0级.1级.2级事件 ...

  6. 松软科技课堂:sqlserver--数据类型

    SQL Server 数据类型(文章来源:松软科技www.sysoft.net.cn) Character 字符串: 数据类型 描述 存储 char(n) 固定长度的字符串.最多 8,000 个字符. ...

  7. 松软科技课堂:SQL--UNIQUE约束

    SQL UNIQUE 约束(文章来源:松软科技-www.sysoft.net.cn-) UNIQUE 约束唯一标识数据库表中的每条记录. UNIQUE 和 PRIMARY KEY 约束均为列或列集合提 ...

  8. 松软科技课堂:Winform之TextBox

    松软科技文(www.sysoft.net.cn): 文本框的几种模式:Multiline(多行).PasswordChar(密码)将文本框的PasswordChar设为*就是密码框效果,将MultiL ...

  9. 松软科技课堂:sql函数-AVG

    定义和用法 AVG 函数返回数值列的平均值.NULL 值不包括在计算中. SQL AVG() 语法 SELECT AVG(column_name) FROM table_name SQL AVG() ...

随机推荐

  1. Python3.7+Pycharm+cuda10.0+tensorflow GPU版本 安装

    处理器:I5-7500 显卡   :GTX1050Ti 系统   :Win10 1. 首先搭建Python环境. 官网https://www.python.org/downloads/下载Python ...

  2. 如何用Eagle for Mac查看GIF动图的图文教程?

    Mac版Eagle怎样打开查看GIF动图?eagle mac版以其功能强大,设计简洁等特点深受用户的喜爱.在Eagle众多功能中,打开查看GIF动图这一功能也是非常简单又好用的.今天小编要给大家分享的 ...

  3. 关于javascript中的内置函数

    (1) parseInt()函数 语法:parseInt(string,[n])   该函数主要将首位为数字的字符串转化为数字,若该字符串不是以数字开头,则返回NaN; n是用于指出字符串中的数据是几 ...

  4. P1422 小玉家的电费(scanf,printf)

    题目描述 夏天到了,各家各户的用电量都增加了许多,相应的电费也交的更多了.小玉家今天收到了一份电费通知单.小玉看到上面写:据闽价电[2006]27号规定,月用电量在 150 千瓦时及以下部分按每千瓦时 ...

  5. windows下安装openjdk

    redhat版openjdk,解压后就能用,下载地址https://developers.redhat.com/products/openjdk/download. Azul Zulu版openjdk ...

  6. chorme输入框autocomplete(移动端)

    输入框自动填充密码即使是type是text也别填充,尝试了 https://developer.mozilla.org/zh-CN/docs/Web/Security/Securing_your_si ...

  7. Spring mvc拦截器防御CSRF攻击

    CSRF(具体参考百度百科) CSRF(Cross-site request forgery跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSR ...

  8. while语句的练习一

    今天学习了while语句,自己想了一道题,试着练习,改了几次之后调试通过: 学生做题,如果全部都做对了,那么会得到老师的夸奖,如果做错了,那么每道题要罚抄十遍: namespace _999_1错题罚 ...

  9. 复原IP地址

    这道题有点不好理解 export default (str) => { // 保存所有符合条件的IP地址 let r = [] // 分四步递归处理ip分段 let search = (cur, ...

  10. 2020省选模拟训练1 排列(perm)多项式exp+EGF

    这道题真的还是简单的一批..... 我当时要是参加考试的话该多好(凭这一道题就能进前 5 了) 十分显然的指数型生成函数. 令 $f[i]$ 表示有 $i$ 个点的答案. 然后显然有 $f[i]=\s ...