4.jQuery学习笔记第四节/jQuery的事件

jQuery学习笔记第四节/jQuery的事件

---

1.jq的事件

什么是事件?

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：

• 在元素上移动鼠标。
• 选取单选按钮
• 点击元素

在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。常见 DOM 事件：

常见的事件.png

其实常用的事件函数就是这些了.剩下的就是多多练习就可以了.没有啥子问题.

---

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中给元素添加事件的方法,其实常用的就是这几个方法,记忆熟练之后还是很简单的.很方便的.更多内容尽在下一节...