zoukankan html css js c++ java

jQuery---9. jQuery其他方法

1 jQuery拷贝对象

浅拷贝
深拷贝

<script>
    $(function() {
        //1.情况1
        // var targetObj = {};
        // var obj = {
        //     id: 1,
        //     name: "andy"
        // };
        // $.extend(targetObj, obj); //将obj拷贝给targetObj  

        //2. 情况2 
        // var targetObj = {
        //     id: 0
        // };
        // var obj = {
        //     id: 1,
        //     name: "andy"
        // };
        // $.extend(targetObj, obj); //会将原先targetObj的内容覆盖掉

        //3.情况3
        var targetObj = {
            id: 0,
            msg: {
                sex: "girl"
            }
        };
        var obj = {
            id: 1,
            name: "andy",
            msg: {
                age: 18
            }
        };


        //（1）浅拷贝   将原来对象里复杂数据类型的地址拷贝给目标对象，里面属性被完全覆盖
        // $.extend(targetObj, obj); //obj里的数据稍微复杂点，还是会将原先targetObj的内容覆盖掉.  targetObj中的msg就没有sex了，只有age了
        // targetObj.msg.age = 20; //修改targetObj,此时obj的内容也被修改了
        // console.log(targetObj);
        // console.log(obj);

        //（2）深拷贝   把里面数据完全复制一份给目标对象，里面如果有不冲突的属性会合并到一起
        $.extend(true, targetObj, obj); //obj里的数据稍微复杂点，还是会将原先targetObj的内容覆盖掉.  targetObj中的msg既有sex了，也有age
        targetObj.msg.age = 20; //修改targetObj,此时obj的内容不会被修改  
        console.log(targetObj);
        console.log(obj);
    })
</script>

2 多库共存

<script>
    $(function() {
        //现在自己定义一个函数，函数名就叫$
        function $(ele) {
            return document.querySelector(ele);
        }
        //调用自己定义的函数
        console.log($("div")); //<div></div>
        //现在再调用jQuery的$
        // $.each();保持

        //如何解决这个问题呢？
        //解决方案1：将$替换为jQuery
        jQuery.each(); //如果$ 符号冲突 我们就使用 jQuery

        //解决方案2：用户自己定义用什么表示$
        // var suibian = $.noConflict();  $和函数名冲突
        var suibian = jQuery.noConflict(); //让jquery 释放对$ 控制权 让用自己决定
        console.log(suibian("span"));
        suibian.each();
    })
</script>

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

3 jQuery插件

http://www.jq22.com/
推荐http://www.htmleaf.com/

3.1 瀑布流

接下来的内容使用的是第二个网站
（1）进入网站，点击侧边栏的jQuery库，选择瀑布流插件，随便选一个插件(兼容IE8的响应式网格瀑布流布局jQuery插件http://www.htmleaf.com/jQuery/pubuliuchajian/201601093003.html)
（2）打开之后查看演示，喜欢就下载，并解压
（3）查看index.html网页源代码
（5）建立自己的index.html和选择自己喜欢的图片放入自己的image文件夹中
（6）在自己的index.html引入同样的css和js(包括内嵌的css和js都要复制)
（7）复制插件的结构部分，并作出相应的修改，结构的复制不要全部复制，可以参考该网址下的使用方法http://www.htmleaf.com/jQuery/pubuliuchajian/201601093003.html以防止将模板的头尾都复制过来了。或者不用在网页上查看源代码，直接打开插件的index.html复制过来就行。
（8）js中的相关参数也可以修改

3.2 图片懒加载

以之前做过的品优购首页为例子，接下来的内容使用的是第一个网站
（1）进入网站，输入懒加载搜索，选择比较有名的EasyLazyLoad.js,下载并解压
（2）查看插件的网页源代码，复制Js（结构和CSS是写给图片的，由于我们的品优购图片的样式和结构已经写好了，所以这里不必复制CSS）

源码参考如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            display: block;
            margin: 0 auto;
            margin-top: 100px;
        }

    </style>
</head>
<body >
    <img data-lazy-src="https://picsum.photos/500/300?image=100" />
    <img data-lazy-src="https://picsum.photos/500/300?image=101" />
    <img data-lazy-src="https://picsum.photos/500/300?image=102" />
    <img data-lazy-src="https://picsum.photos/500/300?image=103" />
    <img data-lazy-src="https://picsum.photos/500/300?image=104" />
    <img data-lazy-src="https://picsum.photos/500/300?image=105" />
    <img data-lazy-src="https://picsum.photos/500/300?image=106" />

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>  <!--说明：这行引入的就是jquery.min.js-->
<script src="./dist/EasyLazyload.min.js"></script>
<script>
    lazyLoadInit({
        coverColor:"white",
        coverDiv:"<h1>test</h1>",
        offsetBottom:0,
        offsetTopm:0,
        showTime:1100,
        onLoadBackEnd:function(i,e){
            console.log("onLoadBackEnd:"+i);
        }
        ,onLoadBackStart:function(i,e){
            console.log("onLoadBackStart:"+i);
        }
    });
</script>
</body>
</html>

(3)具体使用方法如下（可以参考http://www.jq22.com/jquery-info11629）

将图片 src 替换为 data-lazy-src：ctrl+H
引入相关JS

<script src="js/jquery.min.js"></script>
<!--EasyLazyload.min.js这个插件必须放在所有图片的最后-->
<script src="js/EasyLazyload.min.js"></script>
<script>
	lazyLoadInit({
		// coverColor: "white",
		// coverDiv: "<h1>test</h1>",
		// offsetBottom: 0,
		// offsetTopm: 0,
		//相关参数的修改参看http://www.jq22.com/jquery-info11629
		showTime: 1100,
		onLoadBackEnd: function(i, e) {
			console.log("onLoadBackEnd:" + i);
		},
		onLoadBackStart: function(i, e) {
			console.log("onLoadBackStart:" + i);
		}
	});
</script>

3.3 全屏滚动

gitHub:https://github.com/alvarotrigo/fullPage.js
中文翻译网站：http://www.dowebok.com/demo/2014/77/

这里用中文网站，进入网站后，点击页面尾部的说明，就可以查阅说明手册，了解使用方法
（1）复制需要的js和css文件放入自己的文件夹
（2）建立自己的html页面
（3）引入js，css,结构（跟着手册得到基础结构如下）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <!-- 先引入jquery.min.js，后面所有的内容都是依赖于jquery.min.js -->
    <script src="js/jquery.min.js"></script>
    <!-- 引入全屏滚动的插件 -->
    <script src="js/jquery.fullPage.min.js"></script>
</head>

<body>
    <div id="dowebok">
        <div class="section">
            <!-- 这里面可以修改内容 -->
            <h3>第一屏</h3>
        </div>
        <div class="section">
            <h3>第二屏</h3>
        </div>
        <div class="section">
            <h3>第三屏</h3>
        </div>
        <div class="section">
            <h3>第四屏</h3>
        </div>
    </div>
    <script>
        $(function() {
            //其他参数可以在这里修改添加
            $('#dowebok').fullpage();
        });
    </script>
</body>

（4）若有任何想修改的参数可以在内嵌的js中修改（查阅手册）
（5）如想要其他模板中的样式（比如背景），可以查看其他模板中的网页源代码，看看是在基础内容上添加了什么
（6）若想更改某个样式（小圆圈的颜色等），可以右击查看审查元素，找到对应的类名，我们重新为该类名写样式，将原来的样式覆盖掉，不要忘了加!important提高权重。

3.4 bootstrap里的js插件

以下是bootstrap完整的引入:这样就可以使用bootstrap中的所有功能了

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 以下是bootstrap完整的引入 -->
    <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>

3.4.1 比如：使用bootstrap中的组建

bootstrap里的组建就是将网页中常用的功能组合到一起

<body>
    <!-- container这个盒子是必须要写的是bootstrap的规定  保证内容与屏幕两侧留空白-->
    <div class="container">
        <!-- 以下是复制的内容 -->
        <!-- 1.按钮式下拉菜单组建 -->
        <!-- 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>

        <!-- 2.导航条组建 -->
        <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="#">Link <span class="sr-only">(current)</span></a></li>
                        <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>
                                <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>
    </div>
</body>

3.4.2 比如：使用bootstrap中的javaScript插件

1. 模态框

通过 data 属性调用模态框插件
通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle="modal" 属性，或者 data-target="#foo" 属性，再或者 href="#foo" 属性，用于指向被控制的模态框。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通过 JavaScript调用模态框插件
只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：

$('#myModal').modal(options)

在之前的代码内容区添加

<!-- 3.模态框  直接复制   button也不是自己写的-->
<!-- 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>

<!-- 4.自己定义模态框 利用data  button是自己写的-->
<button data-toggle="modal" data-target="#btn">点击显示模态框</button>
<!-- data-target="#btn"和id="btn"将按钮和模态框建立联系 -->
<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 -->

<!-- 5.自己定义模态框 利用javaScript 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 -->
<script>
    //当点击了自己定义的按钮就弹出模态框
    $(".myBtn").on("click", function() {
        $("#btn").modal(); //#btn是要调用的模态框的id
    })
</script>

2. 标签页（Tab栏切换）

在上述代码后继续添加

<!-- 5 标签页 -->
<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">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</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 role="tabpanel" class="tab-pane" id="messages">...</div>
        <div role="tabpanel" class="tab-pane" id="settings">...</div>
    </div>
</div>

查看全文

相关阅读:
谈谈Nginx有哪些特点
 网站嵌入百度地图制作
 8张图理解Java
linux问题-easy_install安装bpython时报错
 linux问题-Centos 安装Sublime text 3
python例子-Nmap扫描IP并更新
 python例子-PyQuery抓取信息.
python例子-MySQLdb和练习题
 python例子-线程和队列
 mysql问题-centos7中mysql远程连接问题

原文地址：https://www.cnblogs.com/deer-cen/p/12360435.html