博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
2021.5.22 Jquery
阅读量:2147 次
发布时间:2019-04-30

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

jQuery 事件

在这里插入图片描述

jQuery 事件方法语法

在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件:

$(“p”).click();

下一步是定义什么时间触发事件。可以通过一个事件函数实现:

$(“p”).click(function(){ // 动作触发后执行的代码!! });

			
事件点击

测试鼠标进入和移除事件

光标悬停事件。

常用的 jQuery 事件方法

1.$(document).ready(function) 文档完全加载完后执行函数

2.click(function) 方法是当按钮点击事件被触发时会调用一个函数

3.dblclick(function)双击元素时,会发生 dblclick 事件。

4.mouseenter(function)当鼠标指针穿过元素时,会发生 mouseenter 事件。

5.mouseleave(function)当鼠标指针离开元素时,会发生 mouseleave 事件。

6.hover(function)方法用于模拟光标悬停事件。

7.focus(function)当元素获得焦点时,发生 focus 事件。

8.blur(function)当元素失去焦点时,发生 blur 事件。

元素的隐藏和显示动画【就是元素的隐藏和显示】

hide([毫秒数],[success-function]) 隐藏元素

show([毫秒数],[success-function]) 显示元素

fadeIn([毫秒数],[success-function]) 显示元素。

fadeOut([毫秒数],[success-function]) 隐藏元素。

slideDown([毫秒数],[success-function]) 显示元素

slideUp([毫秒数],[success-function]) 隐藏元素

			
元素的隐藏和显示

jQuery 效果- 动画

jQuery animate() 方法允许您创建自定义的动画。

语法:

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性.

可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

jQuery 停止动画

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

			
jQuery 效果- 动画
点我向下滑动面板
Hellow,world!
点我向上滑动面板

jQuery - 链(Chaining)

			
jQuery - 链(Chaining)

6.HTML DOM 遍历和修改

jQuery each() 方法

语法

$(selector).each(function(index,element){ })

each函数中的function的

参数1-index–被遍历出的每一个元素在数组中的位置[下标]

参数2-element–被遍历出的每一个元素具体元素【DOM对象】

each函数中的function中没有element时,可以被this代替

			
jQuery each() 方法

测试用的p元素1

测试用的p元素2

测试用的p元素3

测试用的p元素4

转载地址:http://gbzwb.baihongyu.com/

你可能感兴趣的文章
程序员--学习之路--技巧
查看>>
解决问题之 MySQL慢查询日志设置
查看>>
contOS6 部署 lnmp、FTP、composer、ThinkPHP5、docker详细步骤
查看>>
TP5.1模板布局中遇到的坑,配置完不生效解决办法
查看>>
PHPstudy中遇到的坑No input file specified,以及传到linux环境下遇到的坑,模板文件不存在
查看>>
TP5.1事务操作和TP5事务回滚操作多表
查看>>
composer install或composer update 或 composer require phpoffice/phpexcel 失败解决办法
查看>>
TP5.1项目从windows的Apache服务迁移到linux的Nginx服务需要注意几点。
查看>>
win10安装软件 打开时报错 找不到 msvcp120.dll
查看>>
PHPunit+Xdebug代码覆盖率以及遇到的问题汇总
查看>>
PHPUnit安装及使用
查看>>
PHP项目用xhprof性能分析(安装及应用实例)
查看>>
composer安装YII
查看>>
Sublime text3快捷键演示
查看>>
sublime text3 快捷键修改
查看>>
关于PHP几点建议
查看>>
硬盘的接口、协议
查看>>
VLAN与子网划分区别
查看>>
Cisco Packet Tracer教程
查看>>
02. 交换机的基本配置和管理
查看>>