jQuery 其他方法

文章目录

1. jQuery 拷贝对象
2. 多库共存
3. jQuery 插件
- 3.1 瀑布流插件
- 3.2 图片懒加载技术
- 3.3 bootstrap JS 组件
- 3.4 bootstrap JS 插件
- - *案例--todolist布局

1. jQuery 拷贝对象

在这里插入图片描述

在这里插入图片描述
拷贝过去的对象属性值会覆盖原来对象的值。

**浅拷贝：**简单数据类型就直接被拷贝，复杂数据类型就只拷贝过去地址；修改目标对象会影响被拷贝对象。

示例：将obj 拷贝给targetObj
在这里插入图片描述
**深拷贝：**指的是完全克隆，修改目标对象不会影响被拷贝对象。

示例：将obj 拷贝给targetObj
在这里插入图片描述

2. 多库共存

在这里插入图片描述

3. jQuery 插件

在这里插入图片描述

3.1 瀑布流插件

瀑布流效果：
在这里插入图片描述

下载插件zip
复制插件的css 和js 文件
创建自己的index.html
在index.html 中引入下载好的css 和js 文件
引入插件index.html 中的内嵌style 和script
复制插件index.html 中想要的html 部分

在插件说明文档中都有相应配置参数的解释，在使用插件时可以查看。

3.2 图片懒加载技术

图片懒加载技术 ---- 图片使用延迟加载可以提高网页下载速度；同时减轻服务器负载。

当页面滑到可视区时再加载相应图片
在这里插入图片描述

在html 文件中使用ctrl + H 使用查找/替换可以把某些代码替换。

懒加载插件必须在所有图片下面引入!

3.3 bootstrap JS 组件

在这里插入图片描述

在这里插入图片描述
bootstrap JS 组件就是把网页中常用的一些功能组合到了一起，我们只需要复制粘贴就能使用了。

3.4 bootstrap JS 插件

在这里插入图片描述

*案例–todolist布局

在这里插入图片描述
重点练习本地存储！

1. 本地存储里只能存储字符串数据格式，把我们的数组对象转换为字符串格式 JSON.stringify()
在这里插入图片描述
2. 获取本地存储的数据，我们需要把里面的字符串数据转换为原先的对象格式 JSON.parse()

获取键盘、鼠标的状态（按下，点击等）需要使用到事件对象event！

索引号一般都是给相邻的亲兄弟( li )设置：

 <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

而遇到表兄弟( a )时一般我们会给他们设置自定义属性记录索引号

<ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>

知识回顾：数组删除数据使用splice(从哪个位置开始删除, 删除多少个数据)。

$(function () {
    // 1. 按下回车 把完整数据存储到本地存储里
    // 存储的数据格式var todolist=[{title:"xxx",done:false}]
    load();
    $("#title").on("keydown", function (event) {
        if (event.keyCode === 13) {
                
            if ($(this).val() === "") {
                alert("请输入您要的操作");
            } else {
             // 读取本地存储数据 因为完成待办事项或者删除事项等多个功能都需要先去读取本地数据
                // 所以可以直接封装在函数中 每次使用时直接调用即可
                var local = getData();
                // 把最新的数据追加给本地存储
                local.push({ title: $(this).val(), done: false });
                // 把数组信息保存到本地存储
                saveDate(local);
                // 把本地存储数据渲染加载到页面中
                load();
            }
        }
    });
    
    // 3. 删除操作
    $("ol, ul").on("click", "a", function () {
        // 先获取数据 再是修改数据 存入数据 重新渲染加载数据
        var data = getData();
        var index = $(this).attr("id");
        data.splice(index, 1);
        saveDate(data);
        load();
    });
    // 4.已经完成和正在进行操作
    $("ol, ul").on("click", "input", function () {
        // 先获取数据 再是修改数据 存入数据 重新渲染加载数据
        var data = getData();
        var index = $(this).siblings("a").attr("id");
        data[index].done = $(this).prop("checked");
        saveDate(data);
        load();
    });
    
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            //本地存储里面的数据是字符串格式的但是我们需要的是对象格式的
            return JSON.parse(data);
        } else {
            return [];
        }
    };
    // 保存本地存储数据
    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    };
    // 渲染本地存储数据
    function load() {
        var data = getData();
        var todoCount = 0;
        var doneCount = 0;
        // 遍历数据
        // 遍历之前要先清除ol 里面的元素内容 不然本来打开页面就先会渲染加载本地数据 结果又添加事项之后再次渲染加载了页面
        // 就会出现重复数据
        $("ol,ul").empty();
        $.each(data, function (i, n) {
            if (n.done) {
                $("ul").prepend("<li><input type='checkbox' checked='checked'> <p>" + n.title + "</p> <a href='#'id=" + i + "></a> </li>");
                doneCount++;
                
            } else {
                $("ol").prepend("<li><input type='checkbox'> <p>" + n.title + "</p> <a href='#'id=" + i + "></a> </li>");
                todoCount++;
            }
            // 5.统计完成个数和未完成个数

        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);

    }
})