松软科技课堂: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() ...
随机推荐
- 一个最简单的Dockfile实践
一:一个Dockerfile文件 FROM bash COPY . /usr/jinliang/ WORKDIR /usr/jinliang/ CMD [ "sh", " ...
- C++ Primer 抄书笔记(一)
操作系统通过调用main函数(function)来运行C++程序: int main(){ ; } main函数返回类型必为int.大多数系统中main的返回值被用来指示状态.0即成功:非0由系统定义 ...
- 安装Nginx到CentOS(YUM)
运行环境 系统版本:CentOS Linux release 7.3.1611 软件版本:nginx-1.12.2 硬件要求:无 安装过程 1.配置YUM源 [root@localhost ~]# r ...
- 离线部署ArcGIS Runtime for Android100.5.0
环境 系统:window 7 JDK:1.8.0_151 Maven:3.6.1 Android Studio:2.3 ArcGIS Runtime SDK for Android:100.5.0 1 ...
- 洛谷新手题 P1028 数的计算题解
题目描述 我们要求找出具有下列性质数的个数(包含输入的自然数nn): 先输入一个自然数nn(n \le 1000n≤1000),然后对此自然数按照如下方法进行处理: 不作任何处理; 在它的左边加上一个 ...
- CVE-2019-1388 Windows UAC提权
漏洞简述 该漏洞位于Windows的UAC(User Account Control,用户账户控制)机制中.默认情况下,Windows会在一个单独的桌面上显示所有的UAC提示——Secure Desk ...
- 在eclipse中JS页面创建后<%@ page此处就马上就报错
修改路径:右键点击创建的jsp页面--->Build Path--->Configure Build Path---> Libraries--->Add Libraries-- ...
- 在Docker中部署Confluence和jira-software
-------谢谢您的参考,如有疑问,欢迎交流 version: centos==7.2 jdk==1.8 confluence==6.15.4 jira-software==8.2.1 docker ...
- 论文阅读笔记(九)【TIFS2020】:True-Color and Grayscale Video Person Re-Identification
Introduction (1)Motivation:在现实场景中,摄像头会因为故障呈现灰白色,或者为了节省视频的存储空间而人工设置为灰白色.灰度图像(grayscale images)由8位存储,而 ...
- [CF1303D] Fill The Bag - 贪心
Solution 考虑从低位往高位贪心,设当前在处理第 \(i\) 位,更低位剩余的部分一共可以拼出 \(cnt\) 个 \(2^i\) 如果 \(n\) 的这一位是 \(1\) ,那么这一位就需要处 ...