jQuery 学习笔记（三）

作者: 青年心路 | 来源:发表于2020-06-26 15:00 被阅读0次

1.jQuery 事件注册

jQuery 为我们提供了方便的事件注册机制，使开发人员易于操作，优缺点如下：

优点：操作简单，且不用担心事件覆盖等问题。
缺点：普通的事件注册不能做事件委托，且无法实现事件绑定，需要借助其它方法。

在这里插入图片描述

演示代码：

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

2.jQuery 事件处理

因为普通注册事件方法的不足，jQuery 又开发了多个处理方法，重点讲解如下：

on()：用于事件绑定，也是目前最好用的事件绑定方法
off()：事件解绑
trigger() / triggerHandler()：事件触发。

2.1 事件处理 on() 绑定事件

因为普通注册事件方法不足，jQuery 又创建了多个新的事件绑定方法 bind() / live() / delegate() / on() 等，其中最好用的是 on()。

在这里插入图片描述

演示代码：

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    .current {
        background-color: purple;
    }
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div></div>
<script>
    $(function() {
        // 1.单个事件注册
        // $("div").click(function() {
        //     $(this).css("background", "purple");
        // })
        
        // $("div").mouseenter(function() {
        //     $(this).css("background", "skyblue");
        // })

        // 2.事件处理 on
        // (1) 使用 on 绑定多个事件
        // $("div").on({
        //     mouseenter: function() {
        //         $(this).css("background", "skyblue");
        //     },
        //     click: function() {
        //         $(this).css("background", "purple");
        //     },
        //     mouseleave: function() {
        //         $(this).css("background", "blue");
        //     }
        // })
        $("div").on("mouseenter mouseleave", function() {
            $(this).toggleClass("current");
        })
    })
</script>

在这里插入图片描述

演示代码：

// (2) on 可以实现事件委托
//$("ul li").click(function() {})
$("ul").on("click", "li", function() {
    alert("Hello World!");
})

在这里插入图片描述

演示代码：

// (3) on 可以给动态创建的元素绑定事件
// $("ol li").click(function() {
//     alert(11);
// })
$("ol").on("click", "li", function() {
    alert("hello");
})
var li = $("<li>我是后来创建的</li>")
$("ol").append(li);

2.2 事件处理 off() 解绑事件

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程也称为事件解绑。jQuery 为我们提供了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里重点看一下 off()。

在这里插入图片描述

演示代码：

<div></div>
<ul>
    <li>我们都是好孩子</li>
    <li>我们都是好孩子</li>
    <li>我们都是好孩子</li>
</ul>
<p>我是p</p>
<script>
    $(function() {
        $("div").on({
            click: function() {
                console.log("我点击了");
            },
            mouseover: function() {
                console.log("我鼠标经过了");
            }
        });
        $("ul").on("click", "li", function() {
            alert(11);
        })
        // 1.事件解绑 off
        // $("div").off(); // 解除了 div 身上的所有事件
        $("div").off("click");  // 只解除 div 身上的点击事件
        $("ul").off("click", "li"); // 解除事件委托

        // 2.one() 只能触发事件一次
        $("p").one("click", function() {
            alert(11);
        })
    })
</script>

2.3 事件处理 trigger() 自动触事件

有些时候，在某些特定条件下，我们希望某些事件可以自动触发，比如轮播图自动播放功能跟点击左右侧按钮一致。可以利用定时器自动触发左右按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler()。

在这里插入图片描述

演示代码：

<div></div>
<input type="text">
<script>
    $(function() {
        $("div").on("click", function() {
            alert(11);
        })

        // 自动触发事件
        // (1) 元素.事件()
        // $("div").click();
        // (2) 元素.trigger("事件类型")
        // $("div").trigger("click");
        // (3) 元素.triggerHandler() 不会触发元素的默认行为（例如：表单中的光标闪烁）
        $("div").triggerHandler("click");

        $("input").on("focus", function() {
            $(this).val("你好吗");
        })
        // $("input").triggerHandler("focus");
        $("input").trigger("focus");
    })
</script>

3.jQuery 事件对象

jQuery 对 DOM 中的事件对象 event 进行了封装，兼容性更好、获取更方便、使用变化不大。事件被触发，就会有事件对象的产生。

在这里插入图片描述
演示代码：

<div></div>
<script>
    $(function() {
        $(document).on("click", function() {
            console.log("点击了 document");
        })
        $("div").on("click", function(e) {
            // console.log(e);
            console.log("点击了 div");
            e.stopPropagation();    // 阻止事件传播
        })
    })
</script>

4.jQuery 拷贝对象

在这里插入图片描述

演示代码：

$(function() {
    // var targetObj = {};
    // var obj = {
    //     id: 1,
    //     name: "lyman"
    // };
    // // $.extend(targetObj, obj);
    // $.extend(targetObj, obj);
    // console.log(targetObj);

    // var targetObj = {
    //     id: 0
    // };
    // var obj = {
    //     id: 1,
    //     name: "lyman"
    // };
    // // $.extend(targetObj, obj);
    // $.extend(targetObj, obj);
    // console.log(targetObj); // 会覆盖 targetObj 里原来的数据

    
    var targetObj = {
        id: 0,
        msg: {
            sex: "男"
        }
    };
    var obj = {
        id: 1,
        name: "lyman",
        msg: {
            age: 18
        }
    };
    // $.extend(targetObj, obj);
    // $.extend(targetObj, obj);
    // console.log(targetObj); // 会覆盖 targetObj 里原来的数据
    // // 1.浅拷贝把元对象里面复杂数据类型的地址拷贝给目标对象
    // targetObj.msg.age = 20;
    // console.log(obj);
    // console.log(targetObj);

    // 2.深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起
    $.extend(true, targetObj, obj);
    console.log(targetObj); // 会覆盖 targetObj 里原来的数据
    // 1.浅拷贝把元对象里面复杂数据类型的地址拷贝给目标对象
    targetObj.msg.age = 20;
    console.log(obj);
    console.log(targetObj);
})

5.jQuery 多库共存

实际开发中，很多项目连续开发十多年，jQuery 版本不断变更，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的 jQuery 版本实现，这种情况被称为，jQuery 多库共存。

在这里插入图片描述

演示代码：

function $(ele) {
    return document.querySelector(ele);
}
console.log($("div"));
// 解决方式 1：适用于 $ 符号冲突
jQuery.each();
// 解决方式 2：自定义，释放 $ 的控制权
var suibian = jQuery.noConflict();
console.log(suibian("span"));

6.jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助 jQuery 插件完成。这些插件也是依赖于 jQuery 来完成的，所以必须引入 jQuery 文件，所以也被称为 jQuery 插件。

jQuery 插件常用的网站：

jQuery 插件库：http://www.jq22.com
jQuery 之家：http://www.htmleaf.com

jQuery 插件使用步骤：

引入相关文件。（jQuery 文件和插件文件）
复制相关 html、css、js（调用插件）

6.1 瀑布流插件

瀑布流插件是由 jQuery 之家开源的插件。

下载位置：

在这里插入图片描述

代码演示：
插件的使用三点：

引入 css

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
  
<!-- 下面的样式代码为页面布局，可以引入，也可以自己写，自己设计页面样式，一般为直接引入，方便 -->
<style type="text/css">
  #gallery-wrapper {
    position: relative;
    max-width: 75%;
    width: 75%;
    margin: 50px auto;
  }

  img.thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .white-panel {
    position: absolute;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    padding: 10px;
  }

  .white-panel h1 {
    font-size: 1em;
  }

  .white-panel h1 a {
    color: #A92733;
  }

  .white-panel:hover {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    margin-top: -5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
</style>

引入 js

<!-- 前两个必须引入 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<!-- 下面的为启动瀑布流代码，参数可调节属性，具体功能可参考readme.html -->
<script type="text/javascript">
    $(function() {
      $("#gallery-wrapper").pinterest_grid({
          no_columns: 5,
          padding_x: 15,
          padding_y: 10,
          margin_bottom: 50,
          single_column_breakpoint: 700
      });
    });
</script>

引入 html

<!-- html结构一般为事先写好，很难修改结构，但可以修改内容及图片的多少（article标签） -->
<section id="gallery-wrapper">
    <article class="white-panel">
        <img src="images/P_000.jpg" class="thumb">
        <h1><a href="#">我是轮播图片1</a></h1>
        <p>里面很精彩哦</p>
    </article>
    <article class="white-panel">
        <img src="images/P_005.jpg" class="thumb">
        <h1><a href="#">我是轮播图片1</a></h1>
        <p>里面很精彩哦</p>
    </article>
    <article class="white-panel">
        <img src="images/P_006.jpg" class="thumb">
        <h1><a href="#">我是轮播图片1</a></h1>
        <p>里面很精彩哦</p>
    </article>
    <article class="white-panel">
        <img src="images/P_007.jpg" class="thumb">
        <h1><a href="#">我是轮播图片1</a></h1>
        <p>里面很精彩哦</p>
    </article>
</section>

总结：jQuery 插件就是引入别人写好的 html、css、js（同时也可以只引入一部分）。

6.2 图片懒加载插件

图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开速度和用户体验。

下载略

代码演示：
懒加载只需引入 html 和 js 操作即可，此插件不涉及 css

引入 js

<script src="js/EasyLazyload.min.js"></script>
<script>
    lazyLoadInit({
        showTime: 1100,
        onLoadBackEnd: function(i, e) {
            console.log("onLoadBackEnd:" + i);
        },
        onLoadBackStart: function(i, e) {
            console.log("onLoadBackStart:" + i);
        }
    });
</script>

引入 html

<img data-lazy-src="upload/floor-1-3.png" alt="">

6.3 全屏滚动插件

全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站，全屏滚动插件介绍比较详细的网站为：
http://www.dowebok.com/demo/2014/77/

代码演示：
全屏滚动因为有多重形式，所以不一样的风格 html 和 css 也不一样，但是 js 变化不大。所以下面只演示 js 的引入，html 和 css 引入根据自己实际项目需要使用哪种风格引入对应的 html 和 css。

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
    $(function() {
        $('#dowebok').fullpage({
            sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
            navigation: true
        });
    });
</script>

注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。

jQuery 学习笔记（三）

1.jQuery 事件注册

2.jQuery 事件处理

2.1 事件处理 on() 绑定事件

2.2 事件处理 off() 解绑事件

2.3 事件处理 trigger() 自动触事件

3.jQuery 事件对象

4.jQuery 拷贝对象

5.jQuery 多库共存

6.jQuery 插件

6.1 瀑布流插件

6.2 图片懒加载插件

6.3 全屏滚动插件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

视觉艺术