jQuery实例方法之on、one、off、trigger、hover、keydown

最新推荐文章于 2024-07-03 02:59:48 发布

&XYZ&

最新推荐文章于 2024-07-03 02:59:48 发布

阅读量684

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/105181931

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

on：绑定事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知"心"</title>
  <style>
    .demo {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
    }

    .demo1 {
      width: 100px;
      height: 100px;
      background-color: #ff00ff;
    }
  </style>
</head>

<body>
  <div class="demo"></div>
  <div class="demo1"></div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  /*
    on
    系统事件
  */
  $('.demo').on('click', function () {
    alert("xyz")
  })

  $('.demo1').on('mouseenter', function () {
    alert("lm")
  })

  //点击ul弹窗：xyzul
  $('ul').eq(0).on('click', function () {
    alert('xyzul')
  })
  //现在你想点击ul里面的li，弹窗出：xyzli
  $('ul').eq(1).on('click', 'li', () => {
    alert('xyzli')
  })
</script>

</html>

on通过对象的方式控制多个函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知"心"</title>
</head>

<body>
  <div>xyz</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  $('div').on({
    click: function () {
      console.log('click')
    },
    mouseenter: function () {
      console.log('mouseeenter')
    },
    mouseleave: function () {
      console.log('mouseleave')
    }
  })
</script>

</html>

one

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知"心"</title>
</head>

<body>
  <a href="https://www.baidu.com">只跳转一次淘宝页面，后面一直跳转百度页面</a>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  /*
    one:只使用一次
  */
  $('a').one('click', function () {
    window.open('https://taobao.com');
    return false;
  })
</script>

</html>

off:解绑事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    function clickOne() {
        console.log("clickOne")
    }
    function clickTwo() {
        console.log("clickTwo")
    }
    $('.demo').on('click', clickOne)
    $('.demo').on('click', clickTwo)

    function enterOne() {
        console.log("enterOne")
    }
    function enterTwo() {
        console.log("enterTwo")
    }
    $('.demo').on('mouseenter', enterOne)
    $('.demo').on('mouseenter', enterTwo)

    //off: 解绑
    //解绑div类名为demo的全部事件
    //    $('.demo').off()

    //解绑div类名为demo的全部click事件
    //    $('.demo').off('click')

    //解绑div类名为demo的click事件——clickOne
    //第二个参数是指定解绑事件的函数
    $('.demo').off('click', clickOne)
</script>

</html>

trigger

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //系统事件
    $('.demo').on('click', function (e, a, b, c, d) {
        console.log('click', a, b, c, d)
    })
    $('.demo').trigger('click', [11, 22, 4, 7])

    //自定义事件
    $('.demo').on('pageLoad', function (e, a, b, c, d) {
        console.log('click', a, b, c, d)
    })
    $('.demo').trigger('pageLoad', [77, 21, 123, 456])

</script>

</html>

hover方法：可以触发鼠标移入移出的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }

        .demo1 {
            width: 100px;
            height: 100px;
            background-color: #0000ff;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
    <div class="demo1"></div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //hover:可以触发鼠标移入移出的效果
    $('.demo').on('mouseenter', () => {
        console.log('enter')
    }).on('mouseleave', () => {
        console.log('leave')
    })

    $('.demo1').hover(() => {
        console.log('enter1')
    }, () => {
        console.log('leave1')
    })

</script>

</html>

keydown:键盘按下事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
</head>

<body>
    <input type="text" class="demo" />
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //keydown:键盘按下事件
    $('.demo').keydown(function () {
        console.log($(this).val())
    })
</script>

</html>