笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验# jq事件操作和插件

jq事件操作和插件

on方法注册事件

jq提供使用它on方法注册事件

语法：jq对象.on( 事件名，事件函数 )

on方法本质上底层使用的是addEventListener

$('p').on('click', () => console.log(1111))

on方法事件委托

语法：父jq对象.on( 事件名，选择器，事件函数 )

注意：

选择器部分不需要书写父元素，程序会默认已经存在父元素，只需要书写父元素后面的选择器即可

on方法中的this指向触发事件的事件源，不是委托的父元素，类似e.target

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    // 使用on方法是先事件委托
    // 注意选择器部分不需要再书写ul，因为已经默认有了一个ul，只需要书写后面的选择器即可
    // on方法中的this指向触发事件的元素，类似原生中的e.target
    $('ul').on('click', 'li', function () {
      $(this).css('background', 'pink')
    })
  </script>
</body>

off方法事件移除

使用off方法解绑之前绑定的事件

解绑普通事件：jq对象.off( 事件名，事件函数名 )

解绑事件委托：父jq对象.off( 事件名，选择器，事件函数名 )

注意：只有非匿名的事件函数才能解绑，匿名事件不能解绑

<body>
  <button>点我点我</button>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    const fn1 = () => console.log(1),
      fn2 = () => console.log(2),
      fn3 = () => console.log(3),
      fn4 = () => console.log(4)
    // 给按钮绑定两个事件
    $('button').on('click', fn1)
    $('button').on('click', fn2)
    // 创建两个事件委托
    $('ul').on('click', 'li', fn3)
    $('ul').on('click', 'li', fn4)

    // 解绑普通事件
    $('button').off('click', fn2)
    // 解绑事件委托
    $('ul').off('click', 'li', fn4)
  </script>
</body>

trigger模拟触发事件

使用trigger方法可以直接触发事件，不需要手动触发

语法：jq对象.trigger( 事件名 )

<body>
  <button>点我点我</button>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    const fn1 = () => console.log(1)
    // 给按钮绑定两个事件
    $('button').on('click', fn1)

    // 直接触发按钮的点击事件
    $('button').trigger('click')
  </script>
</body>

应用：轮播图自动切换，每隔一段时间自动触发右按钮事件

事件对象

在jq事件中，我们可以使用之前原生中的事件对象形参，来调用事件对象的一些属性，并且jq还解决了一些不兼容的问题

鼠标事件相关属性
- 事件对象( e ).clientX/Y：鼠标参考浏览器窗口位置
- 事件对象( e ).pageX/Y：鼠标参考整个文档的位置
- 事件对象( e ).oddsetX/Y：鼠标参考祖先元素的位置
键盘事件相关属性
- 事件对象( e ).keyCode：返回按下按键键码
- 事件对象( e ).altKey/shiftKey/ctrlKey：判断是否按下alt/shift/ctrl，按下返回true
公共属性和方法
- 事件对象( e ).target：触发事件的事件源
- 事件对象( e ).currentTarget：事件冒泡的当前元素
- 事件对象( e ).preventDefault()：禁止默认行为
- 事件对象( e ).stopPropagation()：阻止事件冒泡

//给整个文档添加键盘按下事件，打印键值
$(document).keydown((e) => console.log(e.keyCode))

多库共存问题

问题：当文档中引入多个库的时候，可能会和jq中的 $冲突，导致$ 无法使用

解决方案1：使用jQuery
- 使用jQuery代替 $使用，因为本身在jq中，$ 和jQuery使用效果是相同的
解决方案2：释放$，并使用其他符号代替
- 使用jQuery.noConfict()，方法会返回一个新的值，把这个值赋值给新的符号或者变量，新符号/变量 = jQuery.noConfict()之后使用新的符号代替以前使用的$即可

JQ插件库使用

获取插件：

搜索引擎、github
技术文章
交流
插件之家：www.htmleaf.com

使用插件：

找到并下载插件
单独写一个小demo（先测试插件，没问题再引入）
看源码、文档

注意事项：

复制结构，保证结构关系是一致的，标签名不一致也没关系
样式可以直接复制，也可以自己定制
先引入jq文件，在使用插件
复制远吗或者查看文档使用

案例：放大镜插件使用

www.jacklmoore.com/zoom/

把源码和修改好的代码放在一起了。解压查看对比一下怎么用吧

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* // 自定义css样式，因为可能插件中的样式我们不需要 */
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 400px;
            height: 300px;
            margin: 20px auto;
        }

        div img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 模仿插件中的结构，标签名不需要一样，但要有id属性，因为后面要用也可以不一样 -->
    <div id="box">
        <img src="./img/1.png" alt="">
    </div>
    <!-- 引入jq文件，注意jq文件必须在最前面引入，因为插件的js文件完全依赖jq文件的 -->
    <script src="./js/jquery.min.js"></script>
    <!-- 引入插件的js文件 -->
    <script src="./js/jquery.zoom.min.js"></script>
    <!-- 书写自己的代码 -->
    <script>
        // 查看源码中发现只需要一行代码即可
        $('#box').zoom();
    </script>
</body>

</html>

案例：轮播图插件

www.htmleaf.com/jQuery/Slid…

把源码和修改好的代码放在一起了。解压查看对比一下怎么用吧

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/jquery.gScrollingCarousel.css" rel="stylesheet" />
    <style>
        /* 按照案例使用方法，复制css样式 */
        /*  对样式进行一些修改 */
        .g-scrolling-carousel {
            width: 800px;
        }

        /* // 下面是原始样式 */
        .g-scrolling-carousel .items {
            padding: 5px 0;
        }

        .g-scrolling-carousel .items img {
            display: inline-block;
            /* notice the comments between inline-block items */
            margin-right: 10px;
            width: 300px;
            height: 250px;
            box-shadow: 0 0 5px #000;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 复制结构 -->
    <div class="g-scrolling-carousel">
        <div class="items">
            <!-- 把内部标签替换成图片标签 -->
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
        </div>
    </div>
    <!-- 引入js文件 -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.gScrollingCarousel.js"></script>
    <!-- 调用即可 -->
    <script>
        $(".g-scrolling-carousel .items").gScrollingCarousel();
    </script>
</body>

</html>

jq事件操作和插件

on方法注册事件

jq提供使用它on方法注册事件

语法：jq对象.on( 事件名，事件函数 )

on方法本质上底层使用的是addEventListener

$('p').on('click', () => console.log(1111))

on方法事件委托

语法：父jq对象.on( 事件名，选择器，事件函数 )

注意：

选择器部分不需要书写父元素，程序会默认已经存在父元素，只需要书写父元素后面的选择器即可

on方法中的this指向触发事件的事件源，不是委托的父元素，类似e.target

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    // 使用on方法是先事件委托
    // 注意选择器部分不需要再书写ul，因为已经默认有了一个ul，只需要书写后面的选择器即可
    // on方法中的this指向触发事件的元素，类似原生中的e.target
    $('ul').on('click', 'li', function () {
      $(this).css('background', 'pink')
    })
  </script>
</body>

off方法事件移除

使用off方法解绑之前绑定的事件

解绑普通事件：jq对象.off( 事件名，事件函数名 )

解绑事件委托：父jq对象.off( 事件名，选择器，事件函数名 )

注意：只有非匿名的事件函数才能解绑，匿名事件不能解绑

<body>
  <button>点我点我</button>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    const fn1 = () => console.log(1),
      fn2 = () => console.log(2),
      fn3 = () => console.log(3),
      fn4 = () => console.log(4)
    // 给按钮绑定两个事件
    $('button').on('click', fn1)
    $('button').on('click', fn2)
    // 创建两个事件委托
    $('ul').on('click', 'li', fn3)
    $('ul').on('click', 'li', fn4)

    // 解绑普通事件
    $('button').off('click', fn2)
    // 解绑事件委托
    $('ul').off('click', 'li', fn4)
  </script>
</body>

trigger模拟触发事件

使用trigger方法可以直接触发事件，不需要手动触发

语法：jq对象.trigger( 事件名 )

<body>
  <button>点我点我</button>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    const fn1 = () => console.log(1)
    // 给按钮绑定两个事件
    $('button').on('click', fn1)

    // 直接触发按钮的点击事件
    $('button').trigger('click')
  </script>
</body>

应用：轮播图自动切换，每隔一段时间自动触发右按钮事件

事件对象

在jq事件中，我们可以使用之前原生中的事件对象形参，来调用事件对象的一些属性，并且jq还解决了一些不兼容的问题

鼠标事件相关属性
- 事件对象( e ).clientX/Y：鼠标参考浏览器窗口位置
- 事件对象( e ).pageX/Y：鼠标参考整个文档的位置
- 事件对象( e ).oddsetX/Y：鼠标参考祖先元素的位置
键盘事件相关属性
- 事件对象( e ).keyCode：返回按下按键键码
- 事件对象( e ).altKey/shiftKey/ctrlKey：判断是否按下alt/shift/ctrl，按下返回true
公共属性和方法
- 事件对象( e ).target：触发事件的事件源
- 事件对象( e ).currentTarget：事件冒泡的当前元素
- 事件对象( e ).preventDefault()：禁止默认行为
- 事件对象( e ).stopPropagation()：阻止事件冒泡

//给整个文档添加键盘按下事件，打印键值
$(document).keydown((e) => console.log(e.keyCode))

多库共存问题

问题：当文档中引入多个库的时候，可能会和jq中的 $冲突，导致$ 无法使用

解决方案1：使用jQuery
- 使用jQuery代替 $使用，因为本身在jq中，$ 和jQuery使用效果是相同的
解决方案2：释放$，并使用其他符号代替
- 使用jQuery.noConfict()，方法会返回一个新的值，把这个值赋值给新的符号或者变量，新符号/变量 = jQuery.noConfict()之后使用新的符号代替以前使用的$即可

JQ插件库使用

获取插件：

搜索引擎、github
技术文章
交流
插件之家：www.htmleaf.com

使用插件：

找到并下载插件
单独写一个小demo（先测试插件，没问题再引入）
看源码、文档

注意事项：

复制结构，保证结构关系是一致的，标签名不一致也没关系
样式可以直接复制，也可以自己定制
先引入jq文件，在使用插件
复制远吗或者查看文档使用

案例：放大镜插件使用

www.jacklmoore.com/zoom/

把源码和修改好的代码放在一起了。解压查看对比一下怎么用吧

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* // 自定义css样式，因为可能插件中的样式我们不需要 */
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 400px;
            height: 300px;
            margin: 20px auto;
        }

        div img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 模仿插件中的结构，标签名不需要一样，但要有id属性，因为后面要用也可以不一样 -->
    <div id="box">
        <img src="./img/1.png" alt="">
    </div>
    <!-- 引入jq文件，注意jq文件必须在最前面引入，因为插件的js文件完全依赖jq文件的 -->
    <script src="./js/jquery.min.js"></script>
    <!-- 引入插件的js文件 -->
    <script src="./js/jquery.zoom.min.js"></script>
    <!-- 书写自己的代码 -->
    <script>
        // 查看源码中发现只需要一行代码即可
        $('#box').zoom();
    </script>
</body>

</html>

案例：轮播图插件

www.htmleaf.com/jQuery/Slid…

把源码和修改好的代码放在一起了。解压查看对比一下怎么用吧

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/jquery.gScrollingCarousel.css" rel="stylesheet" />
    <style>
        /* 按照案例使用方法，复制css样式 */
        /*  对样式进行一些修改 */
        .g-scrolling-carousel {
            width: 800px;
        }

        /* // 下面是原始样式 */
        .g-scrolling-carousel .items {
            padding: 5px 0;
        }

        .g-scrolling-carousel .items img {
            display: inline-block;
            /* notice the comments between inline-block items */
            margin-right: 10px;
            width: 300px;
            height: 250px;
            box-shadow: 0 0 5px #000;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 复制结构 -->
    <div class="g-scrolling-carousel">
        <div class="items">
            <!-- 把内部标签替换成图片标签 -->
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/1.png" alt="">
        </div>
    </div>
    <!-- 引入js文件 -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.gScrollingCarousel.js"></script>
    <!-- 调用即可 -->
    <script>
        $(".g-scrolling-carousel .items").gScrollingCarousel();
    </script>
</body>

</html>