jQuery完美版教学说明.docVIP

昨天内容回顾 $符号由来 $符号就是函数名字 $符号 和 jQuery符号 互为别名 jquery对象 和 dom对象 的关系及转化 关系：dom对象 是 jquery对象 的数组组成部分 转化： jquery对象 -----------》dom对象： $()[下标] dom对象---------》jquery对象： $(dom对象) jqueqy框架 对象分析 对象类型：jquery对象 和 $函数对象 两种 jquery对象(new jQuery.fn.init()) jQuery.fn.init-----原型继承-----jQuery.fn------复制继承------extend() $函数对象： jQuery.extend = function(){} $函数对象的成员都是通过extend复制继承过来的 加载事件 jquery加载事件： ① $(document).ready(function(){}); ② $().ready(function(){}); ③ $(function(){}); jquery加载事件 与 传统加载事件onload不同： ① 加载事件个数 ② 执行时机 jquery加载事件原理，是对DOMContentLoaded的封装 document.addEventListener(‘DOMContentLoaded’,处理); 简单事件操作 $().事件类型([function事件处理函数]) 事件类型：click mouseover blur focus mouseout keyup keydown等等 DOM节点处理 节点追加： append() prepend() appendTo() prependTo() after() before() insertAfter() insertBefore() 节点替换： replaceAll() replaceWith() 复制： clone(true/false) 删除： empty() remove() 三．事件绑定 1. 事件绑定 jquery事件的简单操作： $().事件类型(function事件处理); $().事件类型(); 1.1 jquery事件绑定 $().bind(事件类型，function事件处理); $().bind(类型1 类型2 类型3，事件处理); //给许多不同类型的事件绑定同一个处理 $().bind(json对象); //同时绑定多个不同类型的事件 (事件类型：click mouseover mouseout focus blur 等等) 事件处理：有名函数、匿名函数 1.2 取消事件绑定 ① $().unbind(); //取消全部事件 ② $().unbind(事件类型); //取消指定类型的事件 ③ $().unbind(事件类型，处理); //取消指定类型的指定处理事件 注意：第③种取消事件绑定，事件处理必须是有名函数。 事件绑定是丰富事件操作的形式而已。 从dom2级事件操作开始，同一个对象可以绑定多个同类型的事件，具体如下： dvnode.addEventListener(‘click’,fn); dvnode.addEventListener(‘click’,fn); $(‘div’).click(function); $(‘div’).click(function); 事件委派 3. 事件对象、阻止浏览器默认动作、阻止事件冒泡 $().bind(‘click’,function(evt){ window.event }); $().click(function(evt){}); $().bind(‘mouseover’,f1); function f1(evt){} 事件对象：就使用红色的evt即可，在jquery框架内部有做浏览器兼容处理。 阻止浏览器默认动作、阻止事件冒泡： dom2级浏览器默认动作阻止： 事件对象.preventDefault(); 主流浏览器 事件对象.returnValue = false; IE浏览器 dom2级事件冒泡阻止： 事件对象.stopPropagation(); 主流浏览器 事件对象.cancelBubule = true; IE浏览器 在jquery里边： $().bind(‘click’,function(evt){ evt.preventDefault(); evt.stopPropagation(); }); preventDefault()方法是jquery