首页 前端知识 JQuery事件的基本使用

JQuery事件的基本使用

2024-03-13 00:03:39 前端知识 前端哥 442 581 我要收藏

1.事件的基本使用

jQuery事件方法语法

  • on() off()

  • bind() unbind()

  • 快捷绑定click()等

在jQuery中,大多数DOM事件都有一个等效都jQuery方法

页面中指定一个点击事件:

$("p").click();

下一步是定义触发事件的内容:

¥$("p").click(function(){
  //动作触发后执行都代码!!
})
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-事件的基本使用.html</title>
</head>
<body>
  <button>新增</button>
  <button>修改</button>
  <div>标题</div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    $(function () {
      // 第一个参数 事件类型 第二个参数(可选的) 要传递的参数 第三个参数 事件处理函数
       /*
       $('button').bind('click', '123', function (event) {
         console.log('button点击');
         console.log(event);
         console.log(event.data);//123
       })
       */
      // 点击新增或者修改按钮,改变div内部的内容
      $('button').bind('click', function (event) {
        // 通过event.target(DOM节点,可以拿到内部的内容) 来判断当前是哪个按钮点击
        // console.log(event.target);
        // console.log(event.target.innerHTML);
        if($(event.target).html() === '新增'){
          $('div').html('新增学生信息')
        }else{
          $('div').html('修改学生信息')
        }
      })
      // 解绑 unbind() 无参时 解除绑定的所有事件
      // $('button').unbind()
      // 解绑 unbind('click') 传递参数->事件类型
      // $('button').unbind('click')
      // 解绑 unbind() 解绑click对应的事件
      function clickEvent() {
        console.log('我是click事件');
      }
      $('button').click(clickEvent)
      // 第一个参数 事件类型 第二个参数 事件名称
      $('button').unbind('click', clickEvent)
    })
  </script>
</body>
</html>

2.事件代理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-事件代理.html</title>
</head>
<body>
  <button>点我啊</button>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    // 点击body
    // 第一个参数 事件类型 第二个参数(可选) 将要代理谁 第三个参数(可选) 传递给事件内部的参数 第四个参数 事件处理程序
    // $('body').on('click', function (event) {
    //   console.log(event);
    // })
    // button做代理
    $('body').on('click','button', [1,2], function (event, a, b) {
      console.log(event, a, b);
    })
    // 事件解绑 移除代理 使用off
    // $('body').off('click', 'button')
    // 模拟事件执行 trigger 第一个参数 事件类型 第二个参数 数组参数(传递给形参)
    $('button').trigger('click', [1, 2])
  </script>
</body>
</html>

3.事件类型

常用**的jQuery事件快速绑定方法**

1.$(document).ready()

$(document).ready()方法允许我们在文档完全加载完后执行函数

2.click()

click()方法是当按钮点击事件被触发时会调用一个函数

3.dbclick()

当双击元素时,会发生dbclick事件

4.mouseenter()

当鼠标指针穿过元素时,会发生mouseenter事件

5.mouseleave()

当鼠标指针离开元素时,会发生mouseleave事件

6.mousedown()

当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件

7.mouseup()

当元素上松开鼠标按钮时,会发生mouseup事件

8.hover()

hover()方法用于模拟光标悬停事件

当鼠标移动到元素上时,会触发指定当第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定当第二个函数(mouseleave)

9.blur()

当元素失去焦点时,发生blur事件

10.keydown()

键盘事件:按键按下事件

11.keyup()

键盘事件:按键抬起事件

12.表单事件等等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-事件类型方法.html</title>
</head>
<body>
  <p>一段文字</p>
  <button>点我啊</button><br>
  输入一些东西: <input type="text">
  <form action="">
    name:
    <input type="text" value="zhangsan">
    <span style="display: none;">请输入你的名字</span>
    <br>
    <input type="submit" value="提交">
  </form>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    $(function () {
      //click() 鼠标单击事件
      //当点击事件在某个<p>元素上触发时,隐藏当前当<p>元素
      $("p").click(function(){
        $(this).hide();
      });
      // dblclick()   鼠标双击事件
      $('button').dblclick(function () {
        alert('dblclick')
      })
      // mouseenter() 鼠标进入事件  不支持子元素
      $('button').mouseenter(function () {
        console.log('mouseenter:你的鼠标移到了button的元素上!');
        $('button').css('background', 'red')
      })
      // mouseleave() 鼠标离开事件  不支持子元素
      $('button').mouseleave(function () {
        console.log('mouseleave:再见,你的鼠标离开了该button');
        $('button').css('background', 'blue')
      })
      // mousedown()  当鼠标指针移动到元素上方,并按下鼠标按键时
      $('button').mousedown(function () {
        console.log('mousedown:鼠标在该按钮上按下');
      })
      // mouseup()  当元素上松开鼠标按钮时,会发生mouseup事件
      $('button').mouseup(function () {
        console.log('mouseup:鼠标在button上松开');
      })
      // hover()    鼠标悬停事件
      $('button').hover(function () {
        console.log('hover');
        $(this).css("background-color","#cccccc");
      })
      //blur() 失去焦点
      $("input").blur(function(){ 
        $(this).css("background-color","#ffffff"); 
      });
      // 键盘事件
      // keydown 按键按下事件
      $('input').keydown(function () {
        $('input').css('background', 'blue')
      })
      // keyup 按键抬起事件
      $('input').keyup(function () {
        $('input').css('background', 'yellow')
      })
      // submit()
      $('form').submit(function () {
        alert('submit')
        return false;
      })
      // focus
      $('input:text').focus(function () {
        // 动画
        $('span').css('display','inline').fadeOut(3000)
      })
    })
  </script>
</body>
</html>

提供几个可供学习JQuery的网站

在线使用:jquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

官网下载:jQuery

中文文档:jQuery API 中文文档 | jQuery 中文网jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3757.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!