jquert事件机制.docx

jquert事件机制.docx

《jquert事件机制.docx》由会员分享，可在线阅读，更多相关《jquert事件机制.docx（12页珍藏版）》请在冰豆网上搜索。

jquert事件机制

1jquery中的事件

使用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（）方法实现元素的遍历

2页面载入事件

1.ready（）方法的工作原理

该方法类似于传统的JavaScript中的onload，只不过在事件执行时间上有区别：

onload的执行必须是页面中的全部元素完全加载到浏览器后才触发，在这种情况下，如果页面中的图片过多或图片过大，那么有可能要等到onload事件触发，用户才能进行其他的操作；而使用jQuery中的ready（）方法加载页面，只需要页面的DOM模型加载完毕，就会触发ready（）方法。

ready（）方法的几种相同写法

写法一：

$（document）.ready（function（）{

//代码部分

}）;

写法二：

$（function（）{

//代码部分

}）;

写法三：

jQuery（document）.ready（function（）{

//代码部分

}）;

写法四：

jQuery（function（）{

//代码部分

}）;

3绑定事件

在JavaScript的事件模型中，事件与处理程序的绑定一般有两种方式：

第一种是在事件源对象所对应的html标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码；第二种是直接在JavaScript代码中，设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码。

•jQuery常用事件

方法

描述

执行时机

mouseover（）

触发或将函数绑定到指定元素的mouseover事件

鼠标移动时

mouseout（）

触发或将函数绑定到指定元素的mouseoout事件

鼠标移出时

keydown（）

触发或将函数绑定到指定元素的keydown事件

按下键盘时

keyup（）

触发或将函数绑定到指定元素的keyup事件

释放按键时

keypress（）

触发或将函数绑定到指定元素的keypress事件

产生可打印的字符时

focus（）

触发或将函数绑定到指定元素的focus事件

获得焦点

blur（）

触发或将函数绑定到指定元素的blur事件

失去焦点

要求鼠标移动到菜单上时，该菜单高亮显示，鼠标移出时，菜单恢复原样。

同时能实现关闭窗口的快捷方式，即单击“ESC”键关闭窗口。

.current{

background-color:

#666;

}

......

$（function（）{

$（"#headli"）.mouseover（function（）{//当鼠标移入#headli元素时

$（this）.addClass（"current"）;//为鼠标所在li元素添加current类样式

}）;

$（"#headli"）.mouseout（function（）{//当鼠标移出#headli元素时

$（this）.removeClass（"current"）;//移除鼠标所在li元素的current类样式

}）;

$（document）.keypress（function（）{

if（event.keyCode==27）{

window.close（）;

}

}）;

}）

• 首页
• 美食
• 旅游
• 酒店
• 电影
• KTV
• 时尚
• 生活服务