好记心不如烂笔头之JQuery学习,第四章

时间:2022-09-10 20:39:41

---恢复内容开始---

JQuery中的事件和动画

JQuery中的事件:

$(document).ready()该事件和JS中的window.load类似,但是window.load中需要等待所有资源加载完毕后才处理(例如图片下载完),而$(document).ready()是在DOM树加载完毕后就进行处理了。但是在过程中有些也是需要加载完再处理的,比如知道图片的高宽比等,这时候就可以用$(window).load(function(){})这样处理了,与window.load等价。

多次执行也可以使用,不比跟window.load = function(){fun1();fun2;}酱紫了,直接

$(document).ready(fun1());
$(document).ready(fun2()); //简写

$().ready(fun1());
$().ready(fun2());

$(function(){fun1()});

绑定事件:

$().ready($("#panel h5").bind("click",function(){fun1()}));

或者
$(function(){
$("#panel h5").bind("click",function(){fun1()});
})

合成事件:

1、hover(fun1(),fun2());

模拟光标的悬停事件,光标移到上面时,执行fun1,离开时执行fun2

也是一载入进去就能绑定

 $(function(){
$("#panel h5").hover(function(){
$(this).next("div").show();
},function(){
$(this).next("div").hide();
})
})

2、toggle方法,模拟鼠标连续点击事件,第一次点击xxx,第二次点击xxx......

toggle(fun1,fun2,fun3,......)

$(function(){
$("#panel h5").toggle(function(){fun1()},function(){fun2()});
})

toggle方法还有一个用途:隐藏元素。使用例子如下:

 $(function(){
$("#panel h5").toggle( function(){
$(this).next("div").toggle();
},function(){
$(this).next("div").toggle();
});
})

事件冒泡和解决方案

例如,在body里有DIV,DIV里有DIV或者span,大家都定义了click事件,当点击最底层click会导致顶层的click事件也被触发。这个现象就叫做事件冒泡

为了解决这一问题,需要停止事件冒泡,做法为在绑定的function()里添加参数event,在最后的事件处理结束后,增加 event.stopPropagation();

$(function(){
$("span").bind("click",function(event){
var text = $("#msg").html()+"<p>内层span元素被单击</p>";
$("#msg").html(text);
event.stopPropagation();
});
$("#content").bind("click",function(event){
var text = $("#msg").html()+"<p>外层DIV元素被单击</p>";
$("#msg").html(text);
event.stopPropagation();
});
$("body").bind("click",function(){
var text = $("#msg").html()+"<p>body元素被单击</p>";
$("#msg").html(text);
});
})

阻止默认行为:

event.preventDefault();

同样在绑定事件的时候增加event参数,一般用于进行数据校验,当发现不对的时候停止默认行为

阻止默认行为和停止冒泡都可以使用return false;代替!!!!

移除绑定

指定元素,使用$("#test").unbind("事件名","事件方法");或者只指定事件名,当只有一个事件,什么都不用指定。

one方法,$("test").one("事件名","事件方法");绑定事件,但是这个事件只会执行一次,之后再触发事件将不会有作用

模拟事件

指定元素,使用trigger("事件名")来模拟$("test").trigger("click");

或者$("test").click();

而使用trigger在于他的广泛性,能触发任何事件,包括自定义事件,能以数组方式传递参数$("test").trigger("click",["aaa","bbbb"]);

绑定多个事件,可以为指定函数一次性绑定多个事件,例子如下:

 $(function(){
$("p").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
})
})

可以为事件增加命名空间,为事件解绑的时候直接解绑命名空间就完事,命名空间在每个事件后加点加命名空间名:

$("div").bind("click.plus",function(){......});

其中.plus为命名空间。

一个元素可以有多个相同的事件,例如click可以有带命名空间的事件

$(function(){
$("div").bind("click",function(){
$("body").append("<p>click event</p>");
});
$("div").bind("click.plus",function(){
$("body").append("<p>click.plus event</p>");
});
$("button").click(function(){
$("div").trigger("click!"); //注意!号
});
});

在此模拟事件中,感叹号意味着匹配不带命名空间的事件。若没有感叹号,两个事件一起触发

4.2 JQuery中的动画

1、隐藏和显示:hide() ,show()这两个属性都是在指定元素后实现的,hide()方法会记住原先的display属性,然后将display的属性设为none,show()将还原原来的display属性。这是默认的使用方法。

在方法当中增加参数可以控制动画显示速度,可以选择slow(600ms),normal(400ms),fast(200ms)

 $("button").toggle(function(){
$("div").hide("fast");
},function(){
$("div").show(600);
})

2、fadeOut和fadeIn方法,这两个方法和show、hide不同在于show、hide是减少长宽来消失元素,增大长宽来显示元素,而fadeOut,fadeIn是通过透明度的变化来显示元素的

 $("button").toggle(function(){
$("div").fadeOut("slow");
},function(){
$("div").fadeIn(600);
})

3、slidUp,slidDown,通过改变高度来隐藏的,向上隐藏,所以UP是隐藏,down是显示

 <script type="text/javascript">
$("button").toggle(function(){
$("div").slideUp("slow");
},function(){
$("div").slideDown(600);
})
</script>

4、自定义动画,animate(params,speed,callback)params写入参数,各个变化后的CSS属性用{}括起来,两个属性间用,相隔,多个动画用多个animate可以连在一起,最好用链式操作哦。

$("button").click(function(){
$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut("slow");
})

---恢复内容结束---

JQuery中的事件和动画

JQuery中的事件:

$(document).ready()该事件和JS中的window.load类似,但是window.load中需要等待所有资源加载完毕后才处理(例如图片下载完),而$(document).ready()是在DOM树加载完毕后就进行处理了。但是在过程中有些也是需要加载完再处理的,比如知道图片的高宽比等,这时候就可以用$(window).load(function(){})这样处理了,与window.load等价。

多次执行也可以使用,不比跟window.load = function(){fun1();fun2;}酱紫了,直接

$(document).ready(fun1());
$(document).ready(fun2()); //简写

$().ready(fun1());
$().ready(fun2());

$(function(){fun1()});

绑定事件:

$().ready($("#panel h5").bind("click",function(){fun1()}));

或者
$(function(){
$("#panel h5").bind("click",function(){fun1()});
})

合成事件:

1、hover(fun1(),fun2());

模拟光标的悬停事件,光标移到上面时,执行fun1,离开时执行fun2

也是一载入进去就能绑定

 $(function(){
$("#panel h5").hover(function(){
$(this).next("div").show();
},function(){
$(this).next("div").hide();
})
})

2、toggle方法,模拟鼠标连续点击事件,第一次点击xxx,第二次点击xxx......

toggle(fun1,fun2,fun3,......)

$(function(){
$("#panel h5").toggle(function(){fun1()},function(){fun2()});
})

toggle方法还有一个用途:隐藏元素。使用例子如下:

 $(function(){
$("#panel h5").toggle( function(){
$(this).next("div").toggle();
},function(){
$(this).next("div").toggle();
});
})

事件冒泡和解决方案

例如,在body里有DIV,DIV里有DIV或者span,大家都定义了click事件,当点击最底层click会导致顶层的click事件也被触发。这个现象就叫做事件冒泡

为了解决这一问题,需要停止事件冒泡,做法为在绑定的function()里添加参数event,在最后的事件处理结束后,增加 event.stopPropagation();

$(function(){
$("span").bind("click",function(event){
var text = $("#msg").html()+"<p>内层span元素被单击</p>";
$("#msg").html(text);
event.stopPropagation();
});
$("#content").bind("click",function(event){
var text = $("#msg").html()+"<p>外层DIV元素被单击</p>";
$("#msg").html(text);
event.stopPropagation();
});
$("body").bind("click",function(){
var text = $("#msg").html()+"<p>body元素被单击</p>";
$("#msg").html(text);
});
})

阻止默认行为:

event.preventDefault();

同样在绑定事件的时候增加event参数,一般用于进行数据校验,当发现不对的时候停止默认行为

阻止默认行为和停止冒泡都可以使用return false;代替!!!!

移除绑定

指定元素,使用$("#test").unbind("事件名","事件方法");或者只指定事件名,当只有一个事件,什么都不用指定。

one方法,$("test").one("事件名","事件方法");绑定事件,但是这个事件只会执行一次,之后再触发事件将不会有作用

模拟事件

指定元素,使用trigger("事件名")来模拟$("test").trigger("click");

或者$("test").click();

而使用trigger在于他的广泛性,能触发任何事件,包括自定义事件,能以数组方式传递参数$("test").trigger("click",["aaa","bbbb"]);

绑定多个事件,可以为指定函数一次性绑定多个事件,例子如下:

 $(function(){
$("p").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
})
})

可以为事件增加命名空间,为事件解绑的时候直接解绑命名空间就完事,命名空间在每个事件后加点加命名空间名:

$("div").bind("click.plus",function(){......});

其中.plus为命名空间。

一个元素可以有多个相同的事件,例如click可以有带命名空间的事件

$(function(){
$("div").bind("click",function(){
$("body").append("<p>click event</p>");
});
$("div").bind("click.plus",function(){
$("body").append("<p>click.plus event</p>");
});
$("button").click(function(){
$("div").trigger("click!"); //注意!号
});
});

在此模拟事件中,感叹号意味着匹配不带命名空间的事件。若没有感叹号,两个事件一起触发

4.2 JQuery中的动画

1、隐藏和显示:hide() ,show()这两个属性都是在指定元素后实现的,hide()方法会记住原先的display属性,然后将display的属性设为none,show()将还原原来的display属性。这是默认的使用方法。

在方法当中增加参数可以控制动画显示速度,可以选择slow(600ms),normal(400ms),fast(200ms)

 $("button").toggle(function(){
$("div").hide("fast");
},function(){
$("div").show(600);
})

2、fadeOut和fadeIn方法,这两个方法和show、hide不同在于show、hide是减少长宽来消失元素,增大长宽来显示元素,而fadeOut,fadeIn是通过透明度的变化来显示元素的

 $("button").toggle(function(){
$("div").fadeOut("slow");
},function(){
$("div").fadeIn(600);
})

3、slidUp,slidDown,通过改变高度来隐藏的,向上隐藏,所以UP是隐藏,down是显示

 <script type="text/javascript">
$("button").toggle(function(){
$("div").slideUp("slow");
},function(){
$("div").slideDown(600);
})
</script>

4、自定义动画,animate(params,speed,callback)params写入参数,各个变化后的CSS属性用{}括起来,两个属性间用,相隔,多个动画用多个animate可以连在一起,最好用链式操作哦。

$("button").click(function(){
$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut("slow");
})

5、停止动画stop(),stop(bool clearQueue,bool gotoEnd)后面这个重载是我自己为方便加进去的。stop()不带参数的话即为停止当前动画,注意,是停止当前动画!动到哪停到哪,相当于急刹车!而带参数的即不同,第一个参数针对有多个动画的动画队列,若使用stop()只停止正在进行的动画,要是后面还有动画还要继续执行,第一个参数设为true之后后面的动画就停止了。而gotoEnd这个参数的作用在于中途停止动画的话是否直接到动画结束后的状态,否则停在哪就是哪~

 $("#panel").hover(function(){
$(this).stop()
.animate({height:"150",width:"300"},200);
},function(){
$(this).stop(true,true)
.animate({height:"22",width:"60"},300);
})

但是gotoEnd是有问题的,他相当于直接无动画执行最后一步,若之前设置元素的长宽要经过两个动,透明度是第三个动画,而直接执行的话gotoend的话他就只管透明度了,长宽就不管了。

所以要注意避免动画累积,或者进行其他动画的时候做动画判断

$("element").is(":animated"){//判断元素是否完成动画
//如果当前没有动画,再添加新动画
}

辅助交互动画函数:toggle,slideToggle,可以加入时间参数,等同于show/hide和slideDown/slideUp交换着用

 $("button").click(function(){
$(this).prev("div").toggle(1000);
});

fadeTo(speed,to)函数,改变函数的透明度

 $("button").click(function(){
$(this).prev("div").fadeTo(1000,1);

好记心不如烂笔头之JQuery学习,第四章的更多相关文章

  1. 好记心不如烂笔头之JQuery学习,第二章

    jQuery获取元素不需要担心元素不存在而报错,但是无论怎样 $("#xxx") 是一定会有返回值的,无论存不存在元素,那么依然是要对元素做判断的,判断的方法常见两种 1.看返回的 ...

  2. 好记心不如烂笔头之jQuery学习&comma;第一章

    jQuery对象和DOM对象的转换: 1.jquery对象是对象数组,于是乎: var $cr = $('#cr'); var cr = $cr[0]; 2.使用jquery的自带函数: var $c ...

  3. 好记心不如烂笔头之JQuery学习,第三章

    第三章中主要讲了几个对DOM进行操作的方法. 归纳如下: 属性的获取和设置: //属性的获取 $("li").attr("title"); //属性的设置 $( ...

  4. 好记心不如烂笔头,ssh登录 The authenticity of host 192&period;168&period;0&period;xxx can&&num;39&semi;t be established&period; 的问题

    用ssh登录一个机器(换过ip地址),提示输入yes后,屏幕不断出现y,只有按ctrl + c结束 错误是:The authenticity of host 192.168.0.xxx can't b ...

  5. 好记心不如烂笔头,ssh登录 The authenticity of host 192&period;168&period;0&period;xxx can&amp&semi;&num;39&semi;t be established&period; 的问题

    用ssh登录一个机器(换过ip地址),提示输入yes后,屏幕不断出现y,仅仅有按ctrl + c结束 错误是:The authenticity of host 192.168.0.xxx can't ...

  6. jQuery系列 第四章 jQuery框架的选择器

    第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...

  7. jquery学习笔记&lpar;四&rpar;:动画

    内容来自[汇智网]jquery学习课程 4.1 显示和隐藏 在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: hide()的语法形式:$(selector).h ...

  8. &lbrack;jQuery学习系列四 &rsqb;4-Jquery学习四-事件操作

    前言:今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 青年中国说 SELF格致论道 参考:http://www.365 ...

  9. 【烂笔头】git常用命令篇

    前言 常言道,好记性不如烂笔头,更何况笔者的记性也不是太好,于是就有了这篇“烂笔头”系列之一的git命令记录.本篇主要记录了笔者在工作当中使用过的相关命令,以方便平时查看,同时也供同行们参考.当然,读 ...

随机推荐

  1. 【Alpha版本】 第七天 11&period;15

    一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 完成我要招聘的招聘详情显示,完成简历填写及显示功能 完成我要应聘的 ...

  2. iOS开发——数据持久化OC篇&amp&semi;plist文件增删改查操作

    Plist文件增删查改   主要操作: 1.//获得plist路径    -(NSString*)getPlistPath: 2.//判断沙盒中名为plistname的文件是否存在    -(BOOL ...

  3. UML中九种图的理解

    1.用例图. 用例图是用来描述用户需求的,从用户的角度来描述系统的功能,并指出各个执行者.强调谁在使用,系统的执行者是谁. 2.类图. 用来定义系统中的类,包括描述类的结构和类之间的关系.类图的主要作 ...

  4. Jira 6&period;0&period;3安装破解汉化

    前段时间和上海的朋友交流了下,他们公司使用JIRA管理项目.回来整理了下感觉很不错. http://www.unlimax.com/jira.html工作中总是有各种事务要去处理,而这些事务不仅仅是代 ...

  5. ArcEngine保存栅格数据至rastercatalog

    将栅格数据(IRasterDataset)直接保存到数据库中很常见,但是保存到栅格目录下就比较少见,好不容易才找到,在这里记录一下. public void saveRasterDs2Catalog( ...

  6. Redis的key过期处理策略

    Redis中有三种处理策略:定时删除.惰性删除和定期删除. 定时删除:在设置键的过期时间的时候创建一个定时器,当过期时间到的时候立马执行删除操作.不过这种处理方式是即时的,不管这个时间内有多少过期键, ...

  7. phoneshop cs6破解

    一.以“试用”方式安装photoshop: 二.下载amtlib.dll破解文件,密码:ubx2: 三.备份photoshop目录下的amtlib.dll文件,将下载的amtlib.dll文件拷贝到p ...

  8. 配置percona mysql server 5&period;7基于gtid主主复制架构

    配置mysql基于gtid主主复制架构 环境: 操作系统 centos7. x86_64 mysql版本:Percona-Server-- 测试环境: node1 10.11.0.210 node2 ...

  9. Win10手记-为应用集成日志工具Logger

    日志工具由来已久,是很受大家欢迎的debug工具.其中.NET平台上很出名的是log4net,但是由于Windows 10通用应用项目没有了System.Configuration引用,所以也就不能很 ...

  10. pandas使用lambda判断元素是否为空或者None

    df2a_tp2 = df2a[df2a['combineIdentifyCode'].map(lambda x: len(str(x).strip())>0)].copy() #识别出合单的订 ...