码迷,mamicode.com
首页 > Web开发 > 详细

20150303+JQuery选择器-01

时间:2016-05-07 23:53:20      阅读:569      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

The Write Less,Do More——jQuery

目录

The Write Less,Do More——jQuery 1

一、事件编程 2

1、事件监听 2

2、事件冒泡 4

3、默认行为 5

二、jQuery中的动画 6

1、基本效果 6

2、滑动效果 7

3、淡入淡出效果 9

4、自定义动画效果 9

三、文档处理 12

1、插入操作——内部插入 13

2、插入操作——外部插入 13

3、删除操作 14

4、复制(克隆)操作 15

5、替换操作 16

6、包裹操作 17

7、查找操作 17

综合案例:表格编辑器 18

四、jQuery插件扩展 19

五、瀑布流布局(百度图片、花瓣网) 22

事件编程

jQuery对象.click(事件的处理程序);

jQuery对象.blur(事件的处理程序);

1、事件监听

l bind(type,[data],fn) :为对象绑定事件监听程序

参数说明:

type:事件类型,不带’on’前缀,如click,mouseover

[data]:可选参数,事件发生时所传递的数据(了解)

fn:事件处理程序

l bind({type:fn,type:fn}) :为对象绑定多个事件监听程序,要求参数为json对象

参数说明:

{

事件类型:事件的处理程序,事件类型:事件的处理程序

}

l one(type,[data],fn) :为对象绑定事件且该事件只触发一次

l unbind([type]) :事件移除

参数说明:

[type]:可选参数,要移除的事件类型,如果为空,则移除当前对象的所有事件

IE:attchEvent 触发顺序:先定义后触发

W3C:addEventListener 触发顺序:先定义先触发

demo01_bind.html

技术分享

通过运行以上程序可知,在jQuery中,事件监听程序bind方法是对以前我们学习过的监听方式进行了封装并解决了兼容性问题,并更改事件的触发顺序为正序触发(先定义先触发)

技术分享

说明:我们可以通过bind方法为对象绑定多个事件处理程序,要求参数是一个json对象且在jQuery的事件监听中,jQuery调整了所有内部的this指向,使其内部this指向当前要操作的dom对象。

技术分享

one绑定只能触发一次

技术分享

unbind方法主要用于移除事件,其不需要指定事件处理程序的名称,只需要指定事件类型即可,不写默认移除所有事件。

2、事件冒泡

什么是事件冒泡

之所以称之为冒泡,是因为事件会按照dom层次结构向水泡一样上升至最顶端

技术分享

原生解决方案:

IE:

window.event.cancelBubble = true;

W3C:

function(event) {

event.stopPropagation();

}

demo02_bubble.html

技术分享

3、默认行为

所谓的默认行为,就是元素在生产过程中,默认拥有的行为,如超级链接具有跳转功能,submit按钮具有表单提交功能等等。

IE:

window.event.returnValue = false;

W3C:

event.preventDefault();

demo03_default.html

技术分享

说明:在jQuery中,无论是事件冒泡还是默认行为,我们的jQuery都帮我们解决了兼容性的问题,实际上是对W3C的方法进行了再次封装,我们所使用stopPropagation()以及preventDefault()已经不再是我们以前所使用的方法了。

jQuery中的动画

l 基本

l 滑动

l 淡入淡出

1、基本效果

l show() :显示

l show(speed,[callback]) :以动画的效果显示

参数:

speed:动画持续的时间(默认的单位:毫秒)

[callback] :可选参数,动画完成时所触发的回调函数

l hide() :隐藏

l hide(speed,[callback]) :以动画的效果隐藏

参数:

speed:动画持续的时间(默认的单位:毫秒)

[callback] :可选参数,动画完成时所触发的回调函数

l toggle() :切换显示与隐藏,如显示则隐藏,反之则显示

l toggle(switch) :显示或隐藏 switch:true显示 switch:false隐藏

l toggle(speed,[callback]) :以动画效果显示与隐藏

参数:

speed:动画持续的时间(默认的单位:毫秒)

[callback] :可选参数,动画完成时所触发的回调函数

l speed:"slow", "normal", "fast" : slow:缓慢 normal:正常 fast:快速

demo04_sh.html

技术分享

2滑动效果

l slideDown(speed,[callback]) :以动画效果下拉显示

l slideUp(speed,[callback]) :以动画效果上拉显示

l slideToggle(speed,[callback]) :切换向上与向下效果

参数说明:

speed:动画持续事件

[callback]:可选参数,动画完成时所触发的回调函数

demo05_slide.html

技术分享

案例1:下拉菜单

技术分享

效果如下:

技术分享

3、淡入淡出效果

l fadeIn(speed,[callback]) :以动画效果淡入

l fadeOut(speed,[callback]) :以动画效果淡出

参数说明:

speed:动画持续时间

[callback]:动画完成时所触发的回调函数

l fadeTo(speed,opacity,[callback]) :以动画效果设置元素透明度

参数说明:

speed:动画持续事件

opacity:从0(全透明)到1(不透明),(PS软件0-100%)

[callback]:动画完成时所触发的回调函数

demo06_inout.html

技术分享

4、自定义动画效果

animate(params,[speed],[easing],[fn])

参数说明

params:要求是一个json对象

speed:动画的持续时间

easing:动画效果

fn:动画完成时所触发的回调函数

anli02.html

技术分享

运行效果:

技术分享

案例3:一组图片的淡入淡出效果

技术分享

运行效果:

技术分享

案例4:折叠菜单

anli04.html

技术分享

运行效果:

技术分享

20150303+JQuery选择器-01

标签:

原文地址:http://www.cnblogs.com/lifushan/p/5469356.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!