jQuery的事件,动画效果等
一.事件
click(function(){}) 点击事件
hover(function(){}) 悬浮事件,这是jQuery封装的,js没有不能绑定事件
focus(function(){}) 聚焦事件,多用于input
blur(function(){}) 离开聚集事件,与聚焦事件相反
change(function(){}) 内容改变时触发,多用于input,select
keyup(function(e){}) $(window)对象获取,键盘抬起时触发,形参为e, e.keyCode可以回去键的码值
keydown(function(e){}) 键盘按下时触发
mouseover(function(e){}) 鼠标移上去时触发
mouseenter(function(e){}) 鼠标进入标签时触发
input(function(e){}) 实时监听input输入值变化,只能绑定事件才能触发
二.绑定事件
$("#id").on("事件",function(){})
三.阻止后续事件执行
return false; 可以阻止后续时间执行,打断事件执行
e.stopPropagation() e.是函数的形参传入的
四.事件委托
利用别的标签来捕获事件,可以操作后来添加的标签,还可以优化内存提高性能
$("受托方").on("事件","委托人",function(){}) $(this)还是"委托人"
五.动画效果
1.基本效果
.show(毫秒) 显示
.hide() 隐藏
.toggle() 切换
2.滑动,像窗帘一样,必须有宽高才行
.slideDown(毫秒) 显示
.slideUp() 隐藏
.slideToggle() 切换
3.渐变
.fadeIn(毫秒) 显示
.fadeOut() 隐藏
.fadeToggle() 切换
4.自定义
animate(样式,毫秒)
六.each循环
1.遍历数组
$.each(list,function(index,value){}) 传入的是数组的索引和值
2.遍历jQuery对象
$("#id").each(function(){}) 可以对遍历的标签在函数中进行操作
return false: 终止循环遍历
return; 跳出本次循环遍历
$("#id").data("key","value"); 给标签保存一个属性
$("#id").data("key") 获取属性值
$("#id").removeData("key") 删除数据
八.插件
1.新增一个对象
jQuery.extend(object)
jQuery.extend({
min:function(a,b){return a < b ? a : b;},
max:function(a,b){return a > b ? a : b;}
})
多个对象用逗号隔开
// 调用
jquery.min(1,2);
新增对象和调用
2.合并到一个jQuery对象中
jQuery.fn.extend(object)
jQuery.fn.extend({
check:function(){},
uncheck: function(){}
})
合并到jQuery对象中
jQuery.fn.extend({
check:function(){},
uncheck: function(){}
})
合并到jQuery对象中
jQuery的事件,动画效果等的更多相关文章
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- Jquery如何使用动画效果改变背景色
Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...
- JQuery图片切换动画效果
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...
- jQuery之简单动画效果
1. show()显示动画 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow",&quo ...
- Jquery基础(动画效果的轮播图特效)
jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...
- JQuery(二)——简单动画效果
上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...
- JQuery解决事件动画重复问题
开发项目时,经常要写动画效果,有时候会遇到动画重复问题,例如:当鼠标移动到某个元素上时,执行某个动画,当我鼠标多次移动到该元素时,该动画就要连续执行,那么怎么去解决呢? 话不多说,直接添代码,简单明了 ...
- [学习笔记]jQuery实现一些动画效果的方法
jQuery实现效果的方法 1,隐藏和显示:hide(),show(),toggle() // [ˈtɑ:gl]切换 语法: $(selector).hide(speed,callback); $( ...
- 关于jquery自带动画效果的stop()问题
首先先来看一下jquery中stop()的用法 stop()用于在动画执行前停止正在执行的动画 stop(stopAll,goToEnd)的两个参数为布尔值: stopAll:true/false:是 ...
随机推荐
- Nginx、HAProxy、LVS三者的优缺点
一.Nginx优点: 1.工作在网络7层之上,可针对http应用做一些分流的策略,如针对域名.目录结构,它的正规规则比HAProxy更为强大和灵活,所以,目前为止广泛流行. 2.Nginx对网络稳定性 ...
- XML和实体类之间相互转换(序列化和反序列化)
我们需要在XML与实体类,DataTable,List之间进行转换,下面是XmlUtil类,该类来自网络并稍加修改. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- linux添加zabbix service并开机自动启动
最近有个数据库相关操作后需要重启操作系统,重启后发现zabbix监控一直没有数据,迷了半天原来zabbix压根就没有启动.想了半天决定把zabbix添加到系统服务,并设置开机启动. 1.按一定的规则编 ...
- [SQL]sql server中如何直接查询存储过程EXEC返回的结果集?
Declare @T Table (iDay VARCHAR(),iNum DECIMAL(,),yuxiang DECIMAL(,)) Insert @T --EXEC [dbo].[BSP0101 ...
- Activiti流程设计工具
在Actitivi工程的src/main/resources新建一个文件夹diagrams 然后右键,创建一个activiti Diagram 取名为helloWorld后finish 中间区域,是我 ...
- k8s学习笔记之二:使用kubeadm安装k8s集群
一.集群环境信息及安装前准备 部署前操作(集群内所有主机): .关闭防火墙,关闭selinux(生产环境按需关闭或打开) .同步服务器时间,选择公网ntpd服务器或者自建ntpd服务器 .关闭swap ...
- vue slot
一直觉得vue的slot比较申请,而且比较深奥,总有点不想用的感觉,事实上,在一定程度上,也真的可以完全避开slot就能把一个项目完全搭建完成. 但是随着用的次数越来越多,看到的内容也越来越多的情况, ...
- Django和SQLAlchemy,哪个Python ORM更好?
ORM是什么? 在介绍Python下的两个ORM框架(Django和SQLAlchemy)的区别之前,我们首先要充分了解ORM框架的用途. ORM代表对象关系映射.ORM中的每个单词解释了他们在实际项 ...
- R语言-图的要素颜色
1.设置图形要素的颜色 Plot函数中,使用col=参数来决定要素的颜色 如果不指定plot type,颜色加在散点上,如果指定了plot type,例如line,则颜色加在线上 其它函数,例如bar ...
- python入门(七):字符串
1.字符串类型: >>> s="早上好" #str类型的字符串 >>> type(s) <class 'str ...