- 写在前面：参考哔哩哔哩黑马程序员pink老师教程
- 地址：https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4
目录
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）
代码演示
- 全屏滚动因为有多重形式，所以不一样的风格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
- bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用 ，也必须引入jQuery 文件。
