一,jquery中的事件
(1).执行时机
$(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包括所有的关联文件都加载后才执行,而前者是dom元素就绪时就可以被调用了。不必等到所有关联的文件全部加载。
2.多次使用
3.简写方式
$(document).ready(function()){
code
}
被$(function(){ })
(2)事件的绑定
bind(type[,data],fn);
参数类型: blur,focus,load,resize,scroll,unload,click,mousedown,mouseover,change,select,submit,keydown,error。。。
第2个参数可选,event.data属性值传递给事件对象的额外数据对象。
第3个参数则是用来绑定的处理函数。
1.基本效果
$("p").bind("click",function(){函数体})
2.加强效果
实现点击后在显示和隐藏之间的切换
3.改变绑定事件的类型
将click转换成mouseovr和mouseout
$("p").bind("mouseover",function(){$("this").next("div.content").show()})当鼠标滑过时显示内容
4.简写绑定的事件
$(function(){
$("p").mouseover(function(){函数体显示})
})
(3)合成事件
1.hover()方法
语法结构:hover(enter,leave);
模拟光标悬停事件,当光标移动到元素上的时候,会触发指定的第1个函数enter,当移出这个元素时,会触发指定的第2个函数leave
hover准确来说是替代jquery中的bind(“mouseenter”)和bind("mouseleave"),而不是替代bind("mouseover")和bind("mouseout"),因此当需要触发hover()方法的第2个函数时,需要用trigger(“mouseleave”)来触发,而不是trigger(“mouseout”)。
2.toggle()方法
toggle(fn1,fn2,...fnN);
模拟鼠标连续单击事件。第一次单击元素,触发指定的第1个函数fn1,当再次单机同一元素时,则触发指定的第2个函数fn2.
另外一个作用是切换元素的可见状态,隐藏和显示
3.再次加强效果
增加高亮效果 addclass()方法 和removeclass()方法 切换
(4)事件冒泡
页面中多个元素均绑定了此事件 从子元素相父元素方向执行事件,就叫冒泡
解决办法采用事件对象
$("element").bind("click",function(event){
code
})
当单击此元素时,这个对象就被创建了,当事件处理函数执行完毕后,事件对象就被销毁了
停止事件冒泡
可以组织事件中其他对象的事件处理函数被执行。stopPropagation()方法,
..function(event){...event.stopPropagation()...}
阻止默认行为
网页中的元素都有自己默认的行为。单击提交按钮后表单会提交,有时候需要阻止元素的默认行为。
preventDefault()方法来阻止元素的默认行为
如果相同时对事件对象停止冒泡和默认行为可以再事件处理函数中返回false。
return false;
(5)事件对象的属性
1.event.type()
可以获取到事件的类型
click还是mouseover等等
2.event.preventDefault() 阻止默认
3.event.stopPropagation() 阻止冒泡
4.event.target() 获取到触发事件的元素
5.event.relatedTarget() 相关元素
6.event.pageX event.pageY获取相对于页面的x坐标和y坐标
7.event.which()鼠标的左,中,右键
8.event.metaKey()键盘事件中获取ctrl按键
9.event.originalEvent()方法
(6)移除事件
1.移除按钮上以前注册的事件
unbind(“click”)或者unbind()
2.移除其中一个事件
myfun1=function(){}
$(".btn").unbind(“click”,myfun1)
one()方法 只执行一次,之后自行删除
(7)模拟操作
1.常用模拟
有时需要通过模拟用户操作,来达到例如单击的效果。
trigger()方法来完成模拟操作。
例子:$('#btn').trigger("click")
可以简写
$('#btn').click();
2.触发自定义事件
trigger()不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件
例子:$('#btm').bind("myclick",function(){ $('#test').append("<p>我的自定义事件</p>");})
触发此事件,$('#btn').trigger("myclick");
3.传递数据
trigger(type[,data])方法有两个参数,1为事件类型,2为传递个事件处理函数的额附加数据,以数组形 式传递。
$('#btn').trigger("mycklik",["我的自定义","事件"]);
传递两个数据
4.执行默认操作
trigger()触发事件后,会执行浏览器默认操作。
$("input").trigger("focus");
不仅会触发为input元素绑定的focus事件,也会使input元素本身得到焦点(浏览器默认操作)
如果不想浏览器默认操作,使用triggerHandler()方法
$("input").triggerHandler("focus");
(8)其他用法
1.绑定多个事件类型
例子:$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
})
等同于去掉mouseout在后面再加上
.bind("mouseout",function(){
$(this).toggleClass("over");
})
2.添加事件命名空间,便于管理
在所绑定的事件类型后面添加命名空间,这样在删除事件时只需要指定命名空间即可。
例子:$(function(){
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
})
$("button").click(function(){
$("div").unbind(".plugin");
})
})
plugin的命名空间被删除,而不再plugin的命名空间的dbclick事件依然存在。
3.相同事件名称,不同命名空间执行方法
可以为元素绑定相同的事件类型,然后以命名空间的不同按需调用,jquery代码
$(function(){
$("div").bind("click",function()
{
$("body").append("<p>click事件</p>");
})
$("div").bind("click.plugin",function()
{
$("body").append("<p>click.plugin事件</p>");
})
$("button").click(function(){
$("div").trigger("click!");
})
})
最后的感叹号的作用是匹配所有不包含在命名空间中的click方法。
二.jquery中的动画
(1).show()方法和hide()方法 显示和隐藏
(2).fadein()方法和fadeout()方法 改变元素的不透明度 in为提高 out为降低
(3).slideUp()方法和slideDown()方法 改变元素的高度 滑动
(4).自定义动画方法animate()
animate(params,speed,callback);
第1个一个包含样式属性即值的映射,例如property1:value1,property2:value2
第2个speed:速度 可选参数
第3个callback 在动画完成时执行的函数 可选
1.自定义简单动画
设置元素的position absolute或者relative
$(this).animate({left:"500px"},3000);
2.累加,累减动画
$("this").animate({left:"+=500px"},300);
在当前位置累加500px
3.多重动画
同时执行多个动画 或按顺序执行多个动画
animage({left:"500px",height:"200px"},3000);
4.综合动画
位置,高度,透明度都变化
5.动画回调函数
$("#element").slideDown("normal",function(){
//在效果完成之后做其他的事情
})
****6.停止动画和判断是否处于动画状态
停止元素的动画 stop([clearQueue][,gotoEnd]);
判断元素是否处于动画状态
if(!$(element).is(":animated")){
//判断元素是否正处于动画状态
}
(7)其他动画方法
toggle(speed,[callback]) 可见
slideToggle(speed,[callback]) 滑动 调整元素的高度
fadeTo(speed,opacity,[callback]) 不透明度以渐进的方式调整到指定的值
(8)动画方法概括 略
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
- 第4章 jQuery中的事件和动画
4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...
- 第七章 jQuery中的事件与动画
事件的分类 基础事件: 鼠标事件 键盘事件 window事件 表单事件 复合事件: 鼠标光标悬停 鼠标连续点击 基础事件: 实例: mouseenter()和mouseover()用法的区别: mou ...
- jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- jQuery中的事件与动画<思维导图>
Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...
- jQuery中的事件和动画 以及视频展示效果实例
经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
随机推荐
- specrate 与specspeed 的区别
What is the difference between a "rate" and a "speed" metric?There are several d ...
- Android tess_two Android图片文字识别
文字识别一般都用的tesseract-ocr. GitHub:https://github.com/tesseract-ocr/tesseract 而Android对应的比较推荐的有个tess-two ...
- win7 dos窗口模拟帧刷新
前几天是白色情人节,临时脑抽写了个表白神器 高端大气上档次,就是不知道该送给谁,经过两天的反射弧思考决定还是写给博客娘吧.- -~ 这个程序就是打开后,在Dos窗口内模拟写出几行字母.其实主要就是模拟 ...
- Jquery 日期差函数 修改 对火狐进行兼容
function DateDiff(sDate1, sDate2) { //sDate1和sDate2是yyyy-MM-dd格式 var aDate, oDate1, oDate2, iDays; a ...
- 【js类库Raphaël】使用raphael.js根据点坐标绘制平滑曲线
一.可供参考的文档资料. raphaeljs官网:http://raphaeljs.com/ w3c关于path的介绍:http://www.w3.org/TR/2003/REC-SVG11-200 ...
- Azure 镜像市场支持一键部署到云
本视频教程介绍了Azure 镜像市场和一键部署到云. Azure 镜像市场(AMP)由世纪互联运营,是一个联机应用程序和服务市场,它通过独立软件服务商(ISV)能够成为 Azure 客户(Custom ...
- COGS 2104. [NOIP2015]神奇的幻方
★ 输入文件:2015magic.in 输出文件:2015magic.out 简单对比时间限制:1 s 内存限制:256 MB 模拟 一开始数组开小了.. 屠龙宝刀点击就送 #incl ...
- python——动态类型
1.变量,对象,引用 变量是一个系统表的元素,拥有指向对象的连接的空间: 对象是分配的一块内存: 引用是自动形成的从变量到对象的指针: 类型属于对象,而不是变量 a=3; 变量a变成对象3的一个引用 ...
- 使用脚本在Linux服务器上自动安装Kubernetes的包管理器Helm
Helm之于Kubernetes好比yum之于Red Hat Enterprise Linux,或者apt-get之于Ubuntu. Helm是由helm CLI和Tiller组成,是典型的Clien ...
- cdoj 414 八数码 (双向bfs+康拓展开,A*)
一道关乎人生完整的问题. DBFS的优越:避免了结点膨胀太多. 假设一个状态结点可以扩展m个子结点,为了简单起见,假设每个结点的扩展都是相互独立的. 分析:起始状态结点数为1,每加深一层,结点数An ...