38-JQuery效果.docxVIP

精通jQuery编程（二）目录精通jQuery编程（二）1一、事件编程21、基本事件22、事件切换43、事件绑定54、事件绑定中的this75、事件冒泡76、默认行为9二、jQuery中的效果101、基本效果（显示与隐藏）102、滑动效果（向上或向下滑动）113、淡入淡出效果（透明度设置）114、自定义动画12案例：一组图片的淡入淡出13案例：仿hao123左侧导航13三、jQuery文档操作141、插入操作（内部插入）142、插入操作（外部插入）153、删除操作164、复制操作（克隆元素）17案例：实现滚动公告效果18案例：天猫购物车185、替换操作196、包裹操作197、查找操作20四、jQuery中的插件机制211、提出问题212、实现jQuery插件扩展213、案例：实现后台管理列表的全选、全不选、反选功能23一、事件编程1、基本事件blur(fn) ：当失去焦点时触发change(fn) ：当状态改变时触发click(fn) ：当单击时触发dblclick(fn) ：当双击时触发focus(fn) ：当获得焦点时触发keydown(fn) ：当键盘按下时触发keyup(fn) ：当键盘弹起时触发keypress(fn) ：当键盘按下时触发 keypresskeydownkeyupload(fn) ：当页面载入完毕后触发（功能与ready方法类似）unload(fn) ：当页面关闭时触发mousedown(fn) ：当鼠标按下时触发mouseup(fn) ：当鼠标弹起时触发mousemove(fn) ：当鼠标移动时触发mouseover(fn) ：当鼠标悬浮时触发mouseout(fn) ：当鼠标离开时触发resize(fn) ：当窗口大小改变时触发scroll(fn) ：当滚动条滚动时触发select(fn) ：（了解），当文本框内容被选中时触发submit(fn) ：当表单元素提交时触发记住：以上事件在jQuery中都是以方法形式存在的，谨记。调用基本格式如下：jQuery对象.方法(事件处理程序，要求是一个函数); 例：jQuery对象.click(function() {//事件处理程序});示例代码：在Javascript原生代码中，事件绑定具有三种形式：1）行内绑定2）动态绑定3）事件监听在jQuery的事件绑定中，其是采用哪种形式呢？通过以上形式观察，jQuery中的事件绑定肯定不是行内绑定，其一定是动态绑定或事件监听？区分两者的主要依据：我们可以不可以为同一对象的同一事件绑定多个事件处理程序？通过以上代码运行可知：jQuery中的事件可以绑定多次，所以可以得出结论：jQuery中的事件绑定是使用事件监听的形式且解决了兼容性问题，还调整了事件的触发顺序，统一更改为正序触发（先绑定先触发）。原生Javascript代码中事件绑定：① 语法不同IE：attachEventW3C：addEventListener② 参数不同IE：需要’on’前缀W3C：不需要’on’前缀③ 触发顺序不同IE：先绑定后触发W3C：先绑定先触发2、事件切换hover(over,out) ：鼠标切换事件（鼠标悬浮,鼠标离开）参数解析：鼠标悬浮与鼠标离开切换事件，当鼠标悬浮时触发第一个事件处理程序，当鼠标离开时触发第二个事件处理程序。over：鼠标悬浮事件out：鼠标离开事件示例代码：toggle(fn,fn) ：点击切换事件参数说明：当我们第一次单击时触发第一个fn事件处理程序，当我们第二次单击时触发第二个fn事件处理程序，当我们第三次单击时，触发第一个fn事件处理程序（当然其可以定义多个fn事件处理程序）fn：事件的处理程序示例代码：3、事件绑定bind(type,[data],fn) ：为元素绑定相关事件参数说明：type：要绑定的事件类型，不带’on’前缀，如click、mouseover、mouseout[data]：（了解），事件发生时所传递的参数fn：事件的处理程序，一般是一个匿名函数bind({type:fn,type:fn}) ：为元素绑定多个相关事件，要求参数是一个json对象参数说明：参数只有一个，就是一个json对象，里面属性为type，值为fntype：事件的类型fn：事件的处理程序one(type,[data],fn) ：为元素进行一次绑定，只绑定一次参数说明：type：要绑定的事件类型，不带’on’前缀，如click、mouseover、mouseout[data]：（了解），事件发生时所传递的参数fn：事件的处理程序，一般是一个匿名函数unbind([type]) ：移除元素事件参数说明：[type]：可选参数，填写type代表移除某个指定的事件 不填写代表移除所有事件这个方法不同于原生Javascri