(JavaScript学习记录)：jQuery 对象拷贝、多库共存、jQuery 插件

最新推荐文章于 2023-08-11 18:21:40 发布

NGC_2070

最新推荐文章于 2023-08-11 18:21:40 发布

阅读量241

点赞数 2

分类专栏： # JavaScript学习记录

本文链接：https://blog.csdn.net/baidu_41388533/article/details/108894246

版权

JavaScript学习记录专栏收录该内容

40 篇文章 2 订阅

订阅专栏

写在前面：参考哔哩哔哩黑马程序员pink老师教程
地址：https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4

jQuery 对象拷贝

jQuery 多库共存

jQuery 插件

瀑布流插件（重点讲解）

图片懒加载

全屏滚动（fullpage.js）

bootstrap JS 插件

jQuery 对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend() 方法

$.extend([deep], target, object1, [objectN])

deep: 如果设为true 为深拷贝，默认为false 浅拷贝
target: 要拷贝的目标对象
object1:待拷贝到第一个对象的对象。
objectN:待拷贝到第N个对象的对象。
浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象。

     var targetObj = {};
     var obj = {
         id: 1,
         name: "andy"
     };
     // $.extend(target, obj);
     $.extend(targetObj, obj);
     console.log(targetObj);
     var targetObj = {
         id: 0
     };
     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 里面原来的数据
    // // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
     targetObj.msg.age = 20;
     console.log(targetObj);
     console.log(obj);
    // 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
    $.extend(true, targetObj, obj);
    // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
    targetObj.msg.age = 20;
    console.log(targetObj); // msg :{sex: "男", age: 20}
    console.log(obj);

深拷贝、浅拷贝解析：

浅拷贝

深拷贝

jQuery 多库共存

问题概述：
jQuery使用$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符，这样一起使用会引起冲突。
客观需求：
需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery 解决方案：
把里面的 $ 符号统一改为 jQuery。比如 jQuery(''div'')
jQuery 变量规定新的名称：$.noConflict()
var xx = $.noConflict();
$(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();
})

jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：
jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤：
引入相关文件。（jQuery 文件和插件文件）
复制相关html、css、js (调用插件)。

瀑布流插件（重点讲解）

下载位置

代码演示
插件的使用三点： 1. 引入css. 2.引入JS 3.引入html。（有的简单插件只需引入html和js，甚至有的只需引入js）
- 1.引入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>

2.引入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>

3.引入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 插件库 EasyLazyload。
注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面
1.引入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>
2.引入html
<img data-lazy-src="upload/floor-1-3.png" alt="">

全屏滚动（fullpage.js）

gitHub： https://github.com/alvarotrigo/fullPage.js
中文网站： https://www.dowebok.com/

代码演示

全屏滚动因为有多重形式，所以不一样的风格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>
注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。

bootstrap JS 插件

Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式布局，使得 Web 开发更加方便快捷。
凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。
Bootstrap组件使用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html
下载地址：https://v3.bootcss.com/
参考网站：https://www.bootcss.com/
bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用，也必须引入jQuery 文件。