jQuery 对象拷贝

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

语法：

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

1. deep: 如果设为true 为深拷贝， 默认为false  浅拷贝

2. target: 要拷贝的目标对象

3. object1:待拷贝到第一个对象的对象。

4. objectN:待拷贝到第N个对象的对象。

5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。

就是把地址拷贝，当其中一个值发生改变，另一个指向这个地址的对象的值也会发生改变

6. 深拷贝，前面加true， 完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。

深拷贝 完全复制对象，然后自己开辟一个属于自己的空间 

多库共存

问题概述：

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

客观需求：

需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

jQuery 解决方案：

1. 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')

2.  jQuery 变量规定新的名称：$.noConflict()        var xx = $.noConflict();

报错，我们封装了一个名字为$的函数，但是在这个函数里面没有each方法因此会报错 

 jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。

注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。

jQuery 插件常用的网站：

1.  jQuery 插件库  jQuery插件库-收集最全最新最好的jQuery插件 (jq22.com) 

2.  jQuery 之家   jQuery之家-自由分享jQuery、html5、css3的插件库 (htmleaf.com)

jQuery 插件使用步骤：

1.  引入相关文件。（jQuery 文件 和 插件文件）   

2.  复制相关html、css、js (调用插件)。

 jQuery 插件演示：

1. 瀑布流

2. 图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）

  当我们页面滑动到可视区域，再显示图片。

  我们使用jquery 插件库  EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面

在VScode中ctrl+h键可以实现查找替换 

复制js和css到自己的文件夹中

 3. 全屏滚动（fullpage.js）

      gitHub： GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

      中文翻译网站： jQuery全屏滚动插件fullPage.js演示_dowebok

 bootstrap JS 插件：

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

注意要写在

就是把需要的组件写道需要位置

 案例：toDoList

①文本框里面输入内容，按下回车，就可以生成待办事项。

②点击待办事项复选框，就可以把当前数据添加到已完成事项里面。

③点击已完成事项复选框，就可以把当前数据添加到待办事项里面。

④但是本页面内容刷新页面不会丢失。

toDoList 分析

①刷新页面不会丢失数据，因此需要用到本地存储 localStorage

②核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据

③存储的数据格式：var todolist =  [{ title : ‘xxx’, done: false}]

title是文本框里面的内容 done是判断是否完成

④注意点1： 本地存储 localStorage 里面只能存储字符串格式 ，因此需要把对象转换为字符串 JSON.stringify(data)。

⑤注意点2： 获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据。

 toDoList 按下回车把新数据添加到本地存储里面

①切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。

②利用事件对象.keyCode判断用户按下回车键（13）。

③声明一个数组，保存数据。

④先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。

⑤之后把最新从表单获取过来的数据，追加到数组里面。

⑥最后把数组存储给本地存储 (声明函数 savaDate())

$(function(){// 1. toDoList 按下回车把新数据添加到本地存储里面$("#title").on("keydown",function(e){if(e.keyCode===13){// 先读取本地存储原来的数据var local=getDate()// console.log(local);// 把local数组进行更新数据 把最新的数据追加给local数组local.push({title:$("#title").val(),done:false,});// 把这个数组local存储到本地存储saveDate(local);//local是局部变量，传递给saveData()并且保存数据}})// 读取本地存储的数据function getDate(){var data=localStorage.getItem("todolist");if(data!==null){// 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的return JSON.parse(data)}else{return [];}}// 保存本地存储数据function saveDate(data){localStorage.setItem("todolist",JSON.stringify(data));}
})

 toDoList 本地存储数据渲染加载到页面

①因为后面也会经常渲染加载操作，所以声明一个函数 load，方便后面调用

②先要读取本地存储数据。（数据不要忘记转换为对象格式）

③之后遍历这个数据（$.each()），有几条数据，就生成几个小li 添加到 ol 里面。

④每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。

toDoList 删除操作

①点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。

②核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li

③我们可以给链接自定义属性记录当前的索引号

④根据这个索引号删除相关的数据----数组的splice(i, 1)方法

⑤存储修改后的数据，然后存储给本地存储

⑥重新渲染加载数据列表

⑦因为a是动态创建的，我们使用on方法绑定事件

	// 3.toDolist删除操作$("ol").on("click","a",function(){// 先获取本地元素var data = getDate();console.log(data);// 修改数据var index = $(this).attr("id");console.log(index);data.splice(index, 1);// 存储数据saveDate(data)// 重新渲染load()})

toDoList  正在进行和已完成选项操作

①当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。

②点击之后，获取本地存储数据。

③修改对应数据属性 done 为当前复选框的checked状态。

④之后保存数据到本地存储

⑤重新渲染加载数据列表

⑥load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面

⑦如果当前数据的done 为false， 则是待办事项，就把列表渲染加载到 ol 里面

toDoList 统计正在进行个数和已经完成个数

①在我们load 函数里面操作

②声明2个变量 ：todoCount 待办个数  doneCount 已完成个数  

③当进行遍历本地存储数据的时候， 如果 数据done为 false， 则 todoCount++, 否则 doneCount++

④最后修改相应的元素 text()

$(function() {load();// 1. toDoList 按下回车把新数据添加到本地存储里面// load()//开始前调用，是把数据显示在页面上$("#title").on("keydown",function(e){if(e.keyCode===13){if($(this).val()===""){alert("内容为空")}else{// 先读取本地存储原来的数据var local=getDate();console.log(local);// 把local数组进行更新数据 把最新的数据追加给local数组local.push({title:$(this).val(),done:false});// 把这个数组local存储到本地存储saveDate(local);//local是局部变量，传递给saveData()并且保存数据//  2.toDoList 本地存储数据渲染加载到页面load();}$(this).val("");}})// 3.toDolist删除操作$("ol,ul").on("click","a",function(){// 先获取本地元素var data = getDate();console.log(data);// 修改数据var index = $(this).attr("id");console.log(index);data.splice(index, 1);// 存储数据saveDate(data)// 重新渲染load()})// 4.toDoList  正在进行和已完成选项操作$("ol,ul").on("click","input",function(){// alert(1)// 先获取本地元素var data=getDate();// 修改数据var index = $(this).siblings("a").attr("id");data[index].done=$(this).prop("checked")console.log(data);// 存储数据saveDate(data)// 重新渲染load()})// 读取本地存储的数据function getDate(){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=getDate();console.log(data);// 遍历之前要清空ol里面的元素内容，不然会打印俩次$("ol,ul").empty();var todoCount=0;//正在进行的个数var doneCount=0;//已经完成的个数// 遍历数据$.each(data,function(i,n){if(n.done){$("ul").prepend("
 
" + n.title + "
 
");doneCount++;}else{$("ol").prepend("
 
" + n.title + "
 
");todoCount++;}// console.log(n);// $("ol").prepend("
"+n.title+"
")// $("ol").prepend("
 
" + n.title + "
 
");})$("#todocount").text(todoCount);$("#donecount").text(doneCount);}
})