博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery_3事件和应用
阅读量:4618 次
发布时间:2019-06-09

本文共 2207 字,大约阅读时间需要 7 分钟。

首先声明本次随笔大部分来源于huizhi网,单纯用于自己记笔记

1 绑定事件

在jQuery中可以使用bind()方法进行事件的绑定。bind()功能是给每个选择元素的事件绑定处理函数。

语法:$(selector).bind(event,[data] function) 参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。

示例

...省略代码 

bind()方法绑定事件

result:

2 切换事件

在jQuery中提供了hover()和toggle()这两个方法用于事件的切换。所谓的切换事件,就是有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换。

2.1 hover()方法:

hover()方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切换效果。

语法形式:$(selector).hover(over,out); over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。

2.2 toggle()方法:

toggle()方法toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

语法形式:$(selector).toggle(fun1(),fun2(),funN(),...)

注意:toggle()方法在1.9.0之后的版本是不支持的。

也可用于切换被选元素的 hide() 与 show() 方法。

语法形式:$(selector).toggle(speed,callback) speed参数可选,作用是规定hide/show效果的速度;callback()参数可选,当toggle()方法完成是执行的函数。

示例

...省略代码 

切换事件

打土豪
鼠标移上去看看

result:

开始 然后

 

3 移除事件

unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。

语法形式:$(selector).unbind(event,function) 其中参数event表示需要移除的事件名称,多个事件名用空格隔开,function参数为事件执行时调用的函数名称

示例

...省略代码

...省略代码

移除事件

帽子,点击之后消失
上衣,点击之后消失
裤子,点击之后消失
内裤,点击之后消失
鞋子,点击之后消失
...省略代码

4 一次性事件

ne() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数。

语法形式:$(selector).one(event,[data],function)

其中event参数必需,当添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。data参数可选,是传递到函数的额外数据。function参数必需,当事件发生时运行的函数。

...省略代码    

one()方法的使用

这是一个段落。

这是另一个段落。

请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。

result:

 

5 手动触发指定事件

trigger() 方法触发被选元素的指定事件类型。

语法形式:$(selector).trigger(event,[param1,param2,...])

其中event参数必需,是指定元素要触发的事件。可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。后面的参数可选,是指传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

 示例

...省略代码    

trigger()手动触发事件

在夕阳下奔跑,
在夕阳下奔跑

result:

6 焦点事件

当元素获得焦点时,发生 focus 事件;当元素失去焦点时发生 blur 事件。

示例

...省略代码

焦点事件

输入名字:

请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。

result:

7 change()改变事件

当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textareaselect 元素。change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。

语法形式:$(selector).change(function) 参数function是当change事件发生时运行的函数

...省略代码     

在某个域被使用或改变时,它会改变颜色。

名 称:

性别:

result:

 

转载于:https://www.cnblogs.com/fuzzier/p/6365053.html

你可能感兴趣的文章
Delphi中窗体的事件
查看>>
file_get_contents()获取https出现这个错误Unable to find the wrapper “https” – did
查看>>
linux vi编辑器
查看>>
js树形结构-----(BST)二叉树增删查
查看>>
contract
查看>>
Python语言编程
查看>>
[poj 1469]Courses
查看>>
vue+element-ui实现表格checkbox单选
查看>>
测试开发学习进阶教程 视频&PDF
查看>>
C#基础-连接Access与SQL Server
查看>>
autofac
查看>>
MacOS 系统终端上传文件到 linux 服务器
查看>>
Excel导出POI
查看>>
兼容性
查看>>
自动执行sftp命令的脚本
查看>>
转 Merkle Tree(默克尔树)算法解析
查看>>
网络编程基础之socket编程
查看>>
各种浏览器的user-agent和
查看>>
Restful levels
查看>>
Phonegap移动开发:布局总结(一) 全局
查看>>