松软科技课堂: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 文件中。
当我们在教程中演示 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 事件函数的更多相关文章
- 松软科技课堂:jQuery 效果 - 滑动
jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery sli ...
- 松软科技课堂:jQuery 效果 - 淡入淡出
jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
- 松软科技课堂:jQuery 语法
jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(select ...
- jQuery事件函数位置放置的两种方法
jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法. 通常会把 jQuery 代码放到 <head& ...
- jquery事件函数和原生事件绑定函数中return false的区别
一直听说jquery中事件函数返回false,相当于调用了event.preventDefault()和event.stopPropagation()两个方法,今天就想看看dom中0级.1级.2级事件 ...
- 松软科技课堂:sqlserver--数据类型
SQL Server 数据类型(文章来源:松软科技www.sysoft.net.cn) Character 字符串: 数据类型 描述 存储 char(n) 固定长度的字符串.最多 8,000 个字符. ...
- 松软科技课堂:SQL--UNIQUE约束
SQL UNIQUE 约束(文章来源:松软科技-www.sysoft.net.cn-) UNIQUE 约束唯一标识数据库表中的每条记录. UNIQUE 和 PRIMARY KEY 约束均为列或列集合提 ...
- 松软科技课堂:Winform之TextBox
松软科技文(www.sysoft.net.cn): 文本框的几种模式:Multiline(多行).PasswordChar(密码)将文本框的PasswordChar设为*就是密码框效果,将MultiL ...
- 松软科技课堂:sql函数-AVG
定义和用法 AVG 函数返回数值列的平均值.NULL 值不包括在计算中. SQL AVG() 语法 SELECT AVG(column_name) FROM table_name SQL AVG() ...
随机推荐
- LeetCode刷题专题
1. https://leetcode-cn.com/problems/container-with-most-water/ 思想:左右边界 i,j 向中间收敛 ,左右夹逼 方法一: 一维数组的 ...
- 面试 Spring Boot 再也不怕了,答案都在这里!
问: 什么是spring boot? 答:多年来,随着新功能的增加,spring变得越来越复杂.只需访问页面https://spring.io/projects,我们将看到所有在应用程序中使用的不同功 ...
- Django---Django连接Mysql数据库
前面介绍了Django平台的数据交互,这些数据都是在本地存放着,修改内容或者重新启动服务,数据就消失了,如果我们把数据存放在数据库中,不就保存了吗? Django数据库 Django中自带的也有数据库 ...
- malloc分配内存的结构
在C/C++,我们都可以使用malloc进行分配大小,单位是字节. malloc实际分配的内存大小和传入的参数其实是不同的. 实际分配的内存大小>传入的参数大小. malloc分配的内存 ...
- Nginx配置HTTPS并将HTTP请求重定向到HTTPS
个人博客 地址:https://www.wenhaofan.com/a/20190702214652 在阿里云获取免费的HTTPS证书 配置HTTPS之前首先需要拥有HTTPS证书,在阿里云可以获得域 ...
- Pycharm控制台乱码问题
PS:如我般的小白都会遇到中文乱码问题,那么怎么解决呢?其实非常简单,鼠标点点就好,请看下面: 如下乱码: 解决方法: 按如下步骤File→Settings→Editor→File Encodings ...
- Java课后总结-原码、补码、反码
1.原码.补码.反码的定义和表示方法. 数在计算机中是以二进制形式表示的. 数分为有符号数和无符号数. 原码.反码.补码都是有符号定点数的表示方法. 一个有符号定点数的最高位为符号位,0是正,1是副. ...
- HDU5608
题意 英文 做法 设\(g(n)=n^2-3n+2\),有\(g(n)=\sum\limits_{d|n}f(d)\),反演一下有\(f(n)=\sum\limits_{d|n}\mu(\frac{n ...
- hdu 1007 Quoit Design(平面最近点对)
题意:求平面最近点对之间的距离 解:首先可以想到枚举的方法,枚举i,枚举j算点i和点j之间的距离,时间复杂度O(n2). 如果采用分治的思想,如果我们知道左半边点对答案d1,和右半边点的答案d2,如何 ...
- PAT (Basic Level) Practice (中文)1047 编程团体赛 (20 分)
编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: 输入第一行给出一个正 ...