|
The Write Less,Do More——jQuery中 目录 The Write Less,Do More——jQuery中 一、事件编程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
运行效果：
三、文档处理插入 删除 复制 替换 包裹 查找 1、插入操作——内部插入jQuery <div> jQueryhello jQuery</div> l append(content) ：将content内容插入到元素的尾部 l appendTo(content) ：将匹配到的元素插入到content元素尾部 l prepend(content) ：将content内容插入到元素的头部 l prependTo(content) ：将匹配到内容插入到content元素的头部 demo07_nc.html
2、插入操作——外部插入Linux <div> hello </div> Linux l after(content) ：在元素的尾部插入content内容 l before(content) ：在元素的头部插入content内容 l insertAfter(content) ：将匹配到的内容插入到content元素的尾部 l insertBefore(content) ：将匹配到的内容插入到content元素的头部 demo08_wc.html
3、删除操作<div>content</div> l empty() ：清空元素内容（但不清楚元素本身） l remove() ：清空整个元素（包括元素及内容） demo09_del.html
4、复制（克隆）操作l clone() ：克隆元素（但不包含事件） l clone(true) ：克隆元素（包含元素本身绑定的事件） demo10_clone.html
案例05：实时购物车 anli05.html
运行效果：
5、替换操作html()：实现对元素的内容替换 replaceWith() ：实现对元素本身进行替换 demo11_replace.html
还可以采用以下方式进行元素替换：
在jQuery我们采用采用$来标识变量为jQuery对象，如$li 6、包裹操作<strong><span>文本信息</span></strong> l wrap() ：对每个元素进行包裹 l wrapAll() ：对整个匹配元素进行统一包裹操作 l wrapInner() ：对元素的内容进行包裹 demo12_wrap.html
7、查找操作l eq(index) ：通过元素的索引匹配元素，默认索引从0开始 l filter(expr) ：通过class进行元素过滤匹配元素 l not(expr) ：匹配不是指定选择器元素 l children([expr]) ：匹配所有子元素，里面可以加标识(子元素) l find(expr) ：通过后代选择器查找元素(后代元素) l next([expr]) ：查找下一个元素（相邻的） l prev([expr]) ：查找上一个元素（相邻的） l parent([expr]) ：查找当前元素的父元素 demo13_find.html
综合案例：表格编辑器
anli07.html
运行效果：
四、jQuery插件扩展在jQuery中，有些情况下，常用的方法或功能在jQuery中并没有进行封装，我们可以采用jQuery提供的接口实现对jQuery的扩展操作。 基本语法： jQuery.fn.extend(object) ： 参数说明： 要求参数是一个json对象 名/值对 要扩展的函数名称：函数的处理程序 语法： jQuery.fn.extend({ fn1:function(){}, fn2:function(){}, ...... }); 由于jquery.js框架文件中存在以下代码
我们还可以使用如下方式进行扩展： $.fn.extend({ fn1:function(){}, fn2:function(){}, ...... }); demo14_extend.html
案例7：全选、全不选、反选功能实现 插件实现：
绑定过程
html代码：
运行效果：
五、瀑布流布局（百度图片、花瓣网）Wookmark.js 瀑布流布局 |
|
|
