jQuery其他方法

最新推荐文章于 2023-05-29 00:19:14 发布

Z_cx

最新推荐文章于 2023-05-29 00:19:14 发布

阅读量168

点赞数

分类专栏： web前端文章标签： jquery 其他 javascript

本文链接：https://blog.csdn.net/Python1One/article/details/120896257

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1. jQuery拷贝对象

如果想要把某个对象拷贝(合并)给另一个对象使用，此时可以使用 $. e x t e n d () 方法语法： ‘$ .extend([deep],target,[objectN])`

deep:如果设为true为深拷贝，默认为false浅拷贝
target:要拷贝的对象
object1：待拷贝到第一个对象的对象
objectN：待拷贝到第N个对象
浅拷贝是吧拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响背拷贝的对象
深拷贝，前面加true，完全克隆，拷贝的是对象不是地址，修改目标对象不会影响考拷贝内容

<!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>Document</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            // var targetObj = {};
            // var obj = {
            //     id: 1,
            //     name: "andy"
            // }

            // // $.extend(target,obj)
            // $.extend(targetObj, obj);
            // console.log(targetObj);


            //会覆盖targetObj之前的数据
            var targetObj = {
                id: 0,
                msg: {
                    sex: "男"
                }
            };
            var obj = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            }
            // $.extend(target,obj)
            // $.extend(targetObj, obj);
            // console.log(targetObj);

            //浅拷贝  当修改目标对象修改时会修改原对象
            //浅拷贝只是将地址拷贝给目标对象
            // targetObj.msg.age = 20;
            // console.log(targetObj);
            // console.log(obj);

            //深拷贝

            $.extend(true, targetObj, obj);
            targetObj.msg.age = 20;
            console.log(targetObj);
            console.log(obj);
        })
    </script>
</head>

<body>

</body>

</html>

2. 多库共存

问题描述：
jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用这$作为标识符，这样一起使用会引起冲突

客观需求：
需要一个解决方案，让jQuery和其他库的js库不存在冲突，可以同时存在，这就叫多库共存
jQuery解决方案：
1. 把里面的 $符号统一改为 j Q u e r y ，比如 j Q u e r y (" d i v ") 2 . j Q u e r y 变量规定新的名称： ‘$ .noConflict() var xxx = $.noConflict(); `

<!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>Document</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($("div"));
            // 1. 如果$ 符号冲突 我们就使用 jQuery
            jQuery.each();
            // 2. 让jquery 释放对$ 控制权 让用自己决定
            var suibian = jQuery.noConflict();
            console.log(suibian("span"));
            suibian.each();
        })
    </script>
</head>

<body>
    <div></div>
    <span></span>
</body>

</html>

3. jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成
注意：这些插件也是依赖于jQuery来完成的，所以要先引入jQuery文件，因此也称为jQuery插件
jQuery插件常用网站

插件的引入

从网上下载
看使用文档
根据给的demo复制到自己网页

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</head>

<body>
    <section id="gallery-wrapper">
        <article class="white-panel">
            <img src="./images/P_000(1).jpg" class="thumb">
            <h1><a href="#">我是轮播图1</a></h1>
            <p>里面更精彩</p>
        </article>
        <article class="white-panel">
            <img src="./images/P_001.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="./images/P_002.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="./images/P_003.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="./images/P_004.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="./images/P_005.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="./images/P_006.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="./images/P_007.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>

    </section>



    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/pinterest_grid.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#gallery-wrapper").pinterest_grid({
                no_columns: 3,
                padding_x: 10,
                padding_y: 10,
                margin_bottom: 50,
                single_column_breakpoint: 700
            });

        });
    </script>

</body>

</html>

jQuery插件演示

瀑布流
图片懒加载（图片使用延时加载可提高网页下载速度。他也能帮助服务器减轻负担）
当我们页面滑动到可视区域在显示图片
全屏滚动(fullpage.js)
1. geiHub
2. 中文翻译网站

bootstrap JS插件

bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件

<!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>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                Action <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>



        <!-- // 导航条组件 -->


        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">公司简介</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>


        <!-- 模态框 -->
        <!-- Large modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large
            modal</button>

        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    里面就是模态框
                </div>
            </div>
        </div>


        <!-- 自己定义模态框 -->
        <!-- <button data-toggle="modal" data-target="#btn">点击显示模态框</button> -->
        <button class="myBtn">点击显示模态框</button>

        <div class="modal fade" tabindex="-1" role="dialog" id="btn">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <p>One fine body&hellip;</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <!-- // tab栏切换  -->

        <div>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                        data-toggle="tab">手机</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">电视</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">手机相关的内容</div>
                <div role="tabpanel" class="tab-pane" id="profile">电视相关的内容</div>
            </div>

        </div>
    </div>
    <script>
        // 当我们点击了自己定义的按钮，就弹出模态框
        $(".myBtn").on("click", function () {
            // alert(11);
            $('#btn').modal()
        })
    </script>

</body>

</html>

案例 todolist

案例分析

文本框里输入内容，按下回车，就可以生成待办事项
点击代办事项复选框，就可以吧当前数据添加到已完成事项里面
点击已完成事件复选框，就可以把当前数据添加到代办事项里面
本页内容刷新不会丢失 需要用到本地存储localStorage
核心思路：不管按下回车还是点击复选框，都是把本地存储的数据加载到页面中，这样保证关闭页面不会丢失数据
存储数据格式:var todolist = [{title:'',done:false}]
注意1：本地存储localStorage里面只能存储字符串格式，因此需要把对象转换成字符串JSON.stringify(data)
注意2：获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse()我们才能使用里面的数据

案例下回车将数据添加到本地存储

切记：页面中的数据，都要从本地存储里面获取，这样舒心页面不会丢失数据，所以要把数据保存到本地存储里面。
利用事件对象：keyCode判断用户按下回车键（13）
声明一个数组保存数据
要先读取本地存储原来的数据（声明函数getData()），放到这个数组里面
之后把最新从表单获取过来的数据，追加到数组里面
最后把数组存储到本地存储（声明函数saveDate()）

案例 toDolist 本地存储渲染加载到页面

声明一个函数load 反面后期调用
先要读取本地存储。（不要忘记转格式）
遍历这个数据($.each()),有几条数据，就生成几条小li加到ol中
每次渲染之前，要先把原先的ol内容清空，然后渲染加载最新的数据

案例 toDoList删除操作

点击a链接删除本地存储对应的数据
核心原理：先获取本地数据，删除对应的数据，保存给本地存储，重新渲染li
我们可以给每个小li自定义属性记录当前索引号
根据索引号删除相关的数据----数组的splice(i,1)方法（splice(从哪个位置删除，删除几个元素)）
存储修改后的数据，然后给本地存储
重新渲染加载数据列表
因为a是动态创建，需要使用on绑定事件

案例 todolist 正在进行和已完成选项操作

当我们点击小的复选框，修改本地存储，在重新渲染数据类表
点击之后，获取本地存储
修改对应数据属性done为当前复选框checked状态
之后保存数据到本地存储
重新渲染加载数据列表
load加载函数中，新增条件，如果done为true是已完成的加载到ul中
如果当前数据的done为false，则是代办事件，就把列表渲染加载到ol中

案例 todolist统计正在进行个数和已完成个数

在load函数里操作
声明两个变量 todoCount和doneCount
当进行遍历时数据done为ture doneCOUNT++

代码 jQuery-》day3

Z_cx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery其他方法

1. jQuery拷贝对象如果想要把某个对象拷贝(合并)给另一个对象使用，此时可以使用.extend()方法语法：‘.extend()方法语法：`.extend()方法语法：‘.extend([deep],target,[objectN])`deep:如果设为true为深拷贝，默认为false浅拷贝target:要拷贝的对象object1：待拷贝到第一个对象的对象objectN：待拷贝到第N个对象浅拷贝是吧拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响背拷贝的对象深拷贝
复制链接

扫一扫