使用JavaScriptjQuery实现页面特效第九章-理论.pptVIP

* * 第九章 jQuery事件 回顾 使用jQuery第一步是获取指向某元素的jQuery对象；第二步是使用jQuery对象的方法来操作该元素。 将jQuery对象转换成DOM对象，可以使用get()方法，其语法结构为get([index])。 对于一个DOM对象，只需要用$()把它包装起来，就可以获得相应的jQuery对象。 操作元素样式的方法包含css()、addClass()、removeClass()和toggleClass()。 操作元素内容的方法包括html()和text()。如果要获取元素的值，通过val() 实现。 通过attr()方法可以对元素属性执行获取和设置操作，通过removeAttr()方法则可以对某一指定的属性执行删除操作。 有很多种方法可以实现增加节点的功能，append()方法仅是其中之一，按照插入元素的顺序来分，可以分为内部插入和外部插入两种方法。 如果需要替换元素中的节点，可以使用replaceWith()和replaceAll()这两种方法。 可以通过方法clone()复制元素节点。 在操作页面时，删除多余或指定的页面元素是非常必要的，jQuery中提供了remove()方法来实现删除操作。 直接使用each()方法实现元素的遍历。 理论内容 jQuery中的事件 事件机制 综合案例 页面载入事件 1. ready()方法的工作原理 该方法类似于传统的JavaScript中的onload，只不过在事件执行时间上有区别：onload的执行必须是页面中的全部元素完全加载到浏览器后才触发，在这种情况下，如果页面中的图片过多或图片过大，那么有可能要等到onload事件触发，用户才能进行其他的操作；而使用jQuery中的ready()方法加载页面，只需要页面的DOM模型加载完毕，就会触发ready()方法。 9.1 jQuery中的事件 2．ready()方法的几种相同写法 9.1 jQuery中的事件 写法一： $(document).ready(function(){ //代码部分 }); 写法二： $(function(){ //代码部分 }); 写法三： jQuery(document).ready(function(){ //代码部分 }); 写法四： jQuery(function(){ //代码部分 }); 绑定事件 在JavaScript的事件模型中，事件与处理程序的绑定一般有两种方式：第一种是在事件源对象所对应的html标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码；第二种是直接在JavaScript代码中，设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码。 9.1 jQuery中的事件 //例如，在页面加载完毕后，使用下述代码绑定按钮的单击事件 $(function(){ $(#btn).click(function(){ //执行代码 }); }); jQuery常用事件 9.1 jQuery中的事件 方法 描述 执行时机 mouseover() 触发或将函数绑定到指定元素的mouseover事件 鼠标移动时 mouseout() 触发或将函数绑定到指定元素的mouseoout事件 鼠标移出时 keydown() 触发或将函数绑定到指定元素的keydown事件 按下键盘时 keyup() 触发或将函数绑定到指定元素的keyup事件 释放按键时 keypress() 触发或将函数绑定到指定元素的keypress事件 产生可打印的字符时 focus() 触发或将函数绑定到指定元素的focus事件 获得焦点 blur() 触发或将函数绑定到指定元素的blur事件 失去焦点 要求鼠标移动到菜单上时，该菜单高亮显示，鼠标移出时，菜单恢复原样。同时能实现关闭窗口的快捷方式，即单击“ESC”键关闭窗口。 9.1 jQuery中的事件 style type=text/css .current{ background-color:#666; } /style ...... $(function(){ $(#head li).mouseover(function() { //当鼠标移入#head li元素时 $(this). addClass(current); //为鼠标所在li元素添加current类样式 }); $(#head li).mouseout(function() { //当鼠标移出#hea