资源描述
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（）;
}
}）;
}）
在jQuery中，还可以使用bind（）方法进行事件的绑定，bind（）功能是为每个选择元素的事件绑定处理函数，其语法格式如下：
jQuery对象.bind（type,fn（））;
其中，参数type表示事件的类型，参数fn（）表示事件触发时需要执行的处理函数。
内置的事件类型包括click、mouseover、mouseout、focus、blur、keyup、keydown、change和scroll等。
使用bind（）方法修改前面的“菜单”。
4切换事件
（1）hover（）方法
调用jQuery中的hover（）方法可以使元素在鼠标移入与鼠标移出的事件中进行切换，其语法格式如下
jQuery对象.hover（over,out）;
参数over为鼠标移入元素时触发的函数，参数out为鼠标移出元素时触发的函数。
用hover（）方法修改前例
（2）toggle（）方法
在toggle（）方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数进行调用，像mp3中的循环播放。
其语法格式如下：
jQuery对象.toggle（
function（）{},//第一次单击时触发
function（）{},//第二次单击时触发
function（）{},//第三次单击时触发
…..
）;
在页面上插入一幅图片，第一次单击时，切换至第二幅图片，第二次单击时，切换至第三幅图片，第三次单击时，恢复到第一幅图片，依次循环显示图片。
5其他事件
（1）方法one（）
one（）方法的功能是为所选择的元素绑定一个仅触发一次的处理函数，其调用的语法格式如下
jQuery对象.one（type,fn）;
其中参数type为事件类型，即需要触发事件的类型；fn为事件触发时所需要执行的函数
在页面添加一个按钮，初始值为“查看编号”，当单击该按钮时，通过jQuery中的one（）方法，将隐藏域所保存的编号显示在该按钮上，再次单击时则不响应。
DOCTYPEhtml>
（2）方法trigger（）
在前端页面开发中，通常希望页面加载完毕后能够自动执行一些人性化的操作，如文本框的内容处于全部被选中状态、某个按钮处于焦点中等。
但是利用传统的JavaScript语言，需要编写极其复杂的代码才可以实现上述功能，而在jQuery中，仅需要调用一个trigger（）方法就可以轻松实现。
其调用的语法格式如下：
jQuery对象.trigger（type）;
其中参数type为触发事件的类型。
trigger（）方法的功能是在所选择的元素上触发指定类型的事件。
在页面添加一个文本框，并给文本框设置一个默认值，当该页面加载完毕后，文本框处于被选中状态。
用户名：
在页面上添加一个
标签，并在该
中嵌套一个按钮。
同时将body、div和button这三个元素click事件绑定同样的处理函数，当单击按钮时，显示单击事件触发的次数。
DOCTYPEhtml>
应避免事件冒泡现象的发生，即单击按钮就执行单击事件，并不触发其他父元素的单击事件。
在jQuery中，可以通过returnfalse实现停止事件的冒泡过程，修改如下：
文本框获取焦点focus和丢失焦点blur事件的应用，需求如下所述：
1．在页面添加一个用于输入邮箱地址的文本框，页面加载完毕后，默认让文本框获取焦点。
并且当文本框获取焦点时实现边框高亮、背景突出显示的效果。
如下图所示：
（1）在文档加载完毕后，使用trigger（）方法自动触发文本框的focus事件且给文本框的focus事件绑定函数，在函数体中使用jQuery操作DOM元素样式的方法，制作文本框高亮、背景突出的效果。
（2）创建函数checkEmail（），使用正则表达式对象验证邮箱地址的格式，如果格式正确返回true，否则返回false。
（3）在文档加载完毕后，给文本框的blur事件绑定函数。
在函数体中使用jQuery操作DOM元素样式的方法，制作文本框丢失焦点后的样式效果，并做格式验证。
在用户输入了邮箱地址的前提下，调用checkEmail（）函数实现验证，根据checkEmail（）函数的返回值，确定提示的信息。
如果用户没有输入，则提示“邮箱地址必填”。
DOCTYPEhtml>
邮箱：
邮箱名@域名
DOCTYPEhtml>
邮箱：
邮箱名@域名
jQuery中的页面载入事件ready（）方法有四种写法，其中最简单的写法是$（function（）{}）。
jQuery提供了一种统一的事件模型。
在jQuery中，还可以使用bind（）方法进行事件的绑定，bind（）功能是为每个选择元素的事件绑定处理函数。
调用jQuery中的hover（）方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换，该方法在实现运用中，也可以通过jQuery中的事件mouseover与事件mouseout进行替换。
调用jQuery中的toggle（）方法，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数进行调用。
one（）方法功能是为所选的元素绑定一个仅触发一次的处理函数，trigger（）方法的功能是在所选择的元素上触发指定类型的事件。
在jQuery中，可以通过returnfalse实现停止事件的冒泡过程。
展开阅读全文
升级会员 