jQuery学习笔记第四节/jQuery的事件
1.jq的事件
什么是事件?
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。常见 DOM 事件:
其实常用的事件函数就是这些了.剩下的就是多多练习就可以了.没有啥子问题.
2.下面展示常用的这些事件函数
1.$(function(){})方法
文档加载函数,这个在上一节就已经说过了,就是在文档加载完毕之后再执行 JS 的代码,这里不在赘述.
2.click()方法
//点击某个元素的时候触发,当这个 ID 为 content-div 的元素被点击的时候就会执行这个函数,改变他的 CSS.<单击>
$("#content_div").click(function(){
$(this).css("backgroundColor","red");
})
3.dbclick()方法
//双击事件,当在一个元素上双击的时候会触发
$("#content_div").dblclick(function(){
$(this).css("width","200px");
})
4.mouseenter()方法
//鼠标进入元素的时候会触发
$("#content_div").mouseenter(function(){
alert("我进来了...");
})
5.mouseleave()方法
//鼠标进入元素的时候会触发
$("#content_div").mouseleave(function(){
alert("我出去了...");
})
6.mousedown()方法
//当鼠标进入一个元素并且按下了鼠标左键的时候触发
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
7.mouseup()方法
//当在元素上松开鼠标按钮时,会发生 mouseup 事件。
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
8.hover()方法
//模拟光标悬停事件,当鼠标悬停在某个元素的身上的时候会触发
$("#content_div").hover(function(){
$(this).css("color","#000");
})
9.focus()和 blur()方法
//当一个元素获得焦点的时候就会触发focus(),
//当一个元素失去焦点的时候就会触发 blur().其实一般多应用在输入框之类的控件上居多...
$("#name").focus(function(){
console.log("请输入您的名字...");
}).blur(function(){
console.log("姓名不能为空!"); })
写在后面:这一节我们学习了JQ中给元素添加事件的方法,其实常用的就是这几个方法,记忆熟练之后还是很简单的.很方便的.更多内容尽在下一节...