jQuery_ 绑 定事件处理器上|学习笔记

简介: 快速学习 jQuery_ 绑定事件处理器上

开发者学堂课程【jQuery 开发教程:jQuery_ 绑定事件处理器上】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/362/detail/4287


jQuery_ 绑定事件处理器上


一、.bind()

.bind():为元素绑定一个事件处理器。

1、绑定事件 .bind(),现在已经不推荐使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
// 引用 jQuery
  <script src="jquery-2.2.1.min.js"></script>
</head>
<body>
  <button id="btn">按钮</button>
<script>
  $(function(){
// 可以有第三个参数,第三个参数为布尔类型,为 false 时是为阻止冒泡事件、默认事件,为 true 时则为冒泡事件。
// 默认事件是指浏览器会有一个自动的事件处理,比如说a链接,点击将会跳转。
    $("#btn").bind("click",function(){
      alert(haha);
    });
  })
</script>
</body>
</html>

效果截图:

点击将会跳出窗口。

图片1.png

2、可以绑定两个事件,而且互相不会覆盖

鼠标略过或点击都会触发。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-2.2.1.min.js"></script>
</head>
<body>
  <button id="btn">按钮</button>
<script>
  $(function(){
    $("#btn").bind("click mousever",function(){
      alert(haha);
    });
  })
</script>
</body>
</html>

效果截图:

鼠标略过会弹出一个弹出框,点击也会弹出弹出框。

图片2.png

3、让每个事件弹出不一样的内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-2.2.1.min.js"></script>
</head>
<body>
  <button id="btn">按钮</button>
<script>
  $(function(){
    $("#btn").bind({
      click:function(){
        alert("click");
      },    // 对象之间要用逗号分开
      mouseover:function(){
        alert("mouseover");
      },
    })
  })
</script>
</body>
</html>

效果截图:

鼠标滑过

图片3.png

鼠标点击

图片4.png

4、pbtn实现按钮效果

转到百度的页面,当鼠标在按钮滑进滑出会看到不同的效果,可以用 jQuery 实现这样的效果。

代码一

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    p{
    width: 100px;
    height: 50px;
    background-color: darkgreen;
      border-radius: 5px;
      text-align: center; // 文字水平居中
      line-height: 50px;  // 垂直居中
      margin: 0 auto; // 居于浏览器中间
      color: #ffffff;
font-size: 20px;
}
.pbtn{
background-color: green;
}
</style>
// 引入 jQuery
  <script src="jquery-2.2.1.min.js"></script>
</head>
<body>
  <p>按钮</p>
<script>
  $(function(){
  $("p").bind({
      mouseover:function(){
// 实现当前对象
  $(this).addClass("pbtn");
},
// 鼠标滑出
  mouseout:function(){
// 当前对象的类移除
  $(this).removeClass("pbtn");
      }
    })
  })
</script>
</body>
</html>

代码二(减少代码量)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    p{
      width: 100px;
      height: 50px;
      background-color: darkgreen;
      border-radius: 5px;
      text-align: center;
      line-height: 50px;
      margin: 0 auto;
      color: #ffffff;
      font-size: 20px;
  }
  .pbtn{
  background-color: green;
  }
  </style>
  <script src="jquery-2.2.1.min.js"></script>
</head>
<body>
  <p>按钮</p>
<script>
  $(function(){
    $("p").bind("mouseover mouseout",function(){
// 获取当前指针,toggleClass :在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在,或只交换属性。
// 检测这个 p 标签是否有这个 pbtn 类名,如果有就删掉,如果没有就添加上。
  $(this).toggleClass("pbtn");
  })
  })
</script>
</body>
</html>


相关文章
|
5月前
|
JavaScript 前端开发
jQuery中绑定事件的方式
jQuery中绑定事件的方式
117 1
N..
|
6月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
63 1
|
5月前
|
JavaScript 前端开发
jQuery 事件
jQuery 事件
35 1
|
1月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
16 0
|
2月前
|
JavaScript
jQuery 事件
jQuery 事件
39 10
|
2月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
2月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
33 3
|
2月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
15 0
|
3月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
57 13
|
3月前
|
Web App开发 JavaScript Android开发
重载jquery on方法实现click事件在移动端的快速响应
重载jquery on方法实现click事件在移动端的快速响应