当前位置：首页 > news >正文

jQuery编程学习3（jQuery 其他方法： jQuery 拷贝对象、 jQuery 多库共存、jQuery 插件）

news 2025/6/9 10:34:16

jQuery 其他方法

1. jQuery 拷贝对象 $.extend()方法

2. jQuery 多库共存

问题概述：

客观需求：

jQuery 解决方案：（两种方式）

3. jQuery 插件

jQuery 插件常用的网站：

jQuery 插件使用步骤：

jQuery 插件演示：

bootstrap JS 插件：

案例：toDoList ！！！！！！重要案例

疑问！！！学习：localStorage的存放和取值和JSON

1.localStorage的存储对象方法

2.JSON

案例分析：

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

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

案例：toDoList 删除操作

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

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

jQuery 其他方法

1. jQuery 拷贝对象 $.extend()方法

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

语法：

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

1. deep: 如果设为true 为深拷贝，默认为false 浅拷贝
2. target: 要拷贝的目标对象
3. object1:待拷贝到第一个对象的对象。
4. objectN:待拷贝到第N个对象的对象。
5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。被拷贝的对象object会覆盖拷贝的目标对象target
6. 深拷贝，前面加true， 完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。被拷贝的对象object不会覆盖拷贝的目标对象target

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

2. jQuery 多库共存

问题概述：

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

客观需求：

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

jQuery 解决方案：（两种方式）

1. 把里面的 $ 符号统一改为 jQuery。比如 jQuery(''div'')
2. jQuery 变量规定新的名称：$.noConflict() var xx = $.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);}$("div");             // 这个div相当于实参，把这个实参传递给形参ele，ele再传递给querySelector(ele) // 即document.querySelector("div")console.log($("div"));      // <div></div>// $.each();           // 遍历  但是这里会引发冲突（因为已经封装了一个$函数） 最终会报错显示没有这个$.each()函数// 这种冲突的情况我们称之为“多库并存”// 解决方案1:把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'') 就不会出现报错情况jQuery.each();             // 解决方案2.jQuery 变量规定新的名称（用户自定义）：$.noConflict() 或者 jQuery.noConflict()  var xx = $.noConflict();var suibian = jQuery.noConflict();  suibian("span");            // 相当于$("span")console.log(suibian("span"));              // w.fn.init [span, prevObject: w.fn.init(1)]suibian.each();             // 不会报错// 总结：1.如果 $ 符号冲突，我们就使用jQuery// 2.让jQuery释放对 $ 控制权 让用户自己决定})</script>
</head><body><div></div><span></span>
</body></html>

3. jQuery 插件

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

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

jQuery 插件常用的网站：

1. jQuery 插件库 http:// http://www.jq22.com/
2. jQuery 之家 http://www.htmleaf.com/ （免费开源）

jQuery 插件使用步骤：

1. 引入相关文件。（jQuery 文件和插件文件）
2. 复制相关html、css、js (调用插件)。

jQuery 插件演示：

1. 瀑布流（3.4.9素材-08）

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

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

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

3. 全屏滚动（fullpage.js）

全屏滚动 gitHub：http:// https://github.com/alvarotrigo/fullPage.js

全屏滚动中文翻译网站： http://www.dowebok.com/demo/2014/77/

bootstrap JS 插件：

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

案例：toDoList ！！！！！！重要案例

（3.4.9素材——13 toDoList）

① 文本框里面输入内容，按下回车，就可以生成待办事项。
② 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
③ 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
④ 但是本页面内容刷新页面不会丢失。

疑问！！！学习：localStorage的存放和取值和JSON

1.localStorage的存储对象方法

getItem(keyname)	返回指定键的值
setItem(keyname, value)	添加键和值，如果对应的值存在，则更新该键对应的值。
removeItem(keyname)	移除键

保存数据语法：

localStorage.setItem("key", "value");

读取数据语法：

var lastname = localStorage.getItem("key");

删除数据语法：

localStorage.removeItem("key");

Web 存储 API 提供了 sessionStorage （会话存储）和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

2.JSON

JSON格式(JavaScript Object Notation 的缩写)是一种用于数据交换的文本格式

JSON对象是JavaScript的原生对象,用来处理JSON格式数据.它有如下两个静态方法:

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

案例分析：

（3.4.9素材——13-todolist——本地存储的数据.html）

① 刷新页面不会丢失数据，因此需要用到本地存储 localStorage
② 核心思路：不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
③ 存储的数据格式：var todolist = [{ title : ‘xxx’, done: false}，{ title : ‘xxx’, done: false}] （以数组的形式存储，数组里面装对象）（done表示是否完成，false表示未完成）
④ 注意点1：本地存储 localStorage 里面只能存储字符串格式 ，因此需要把对象转换为字符串 通过 JSON.stringify(data)。
⑤ 注意点2：获取本地存储数据，需要把里面的字符串转换为对象格式，通过 JSON.parse() 我们才能使用里面的数据。

        var todolist = [{title: '我今天吃八个馒头',done: false}, {title: '我今天学习jq',done: false},];// localStorage.setItem("todo", todolist);    // （在“应用程序”里面） 密钥：todo  值：[object Object],[object Object]// 1.本地存储里面 只能 存储 字符串 的数据格式 把我们的 数组对象 转换为 字符串格式 通过 JSON.stringify()localStorage.setItem("todo", JSON.stringify(todolist));// 在“应用程序”里面） 密钥：todo  值：[{"title":"我今天吃八个馒头","done":false},{"title":"我今天学习jq","done":false}]var data = localStorage.getItem("todo");// console.log(typeof data);           // string// console.log(data[0].title);        // undefined  因为data是字符串，没有title属性// 2. 获取 本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()data = JSON.parse(data);console.log(data);           //  [{…}, {…}]console.log(data[0].title);     // 我今天吃八个馒头

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

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

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

① 因为后面也会经常渲染加载操作，所以声明一个函数 load，方便后面调用
② 先要读取本地存储数据。（数据不要忘记转换为对象格式）
③ 之后遍历这个数据（$.each()），有几条数据，就生成几个小li 添加到 ol 里面。
④ 每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。以避免数据重复

案例：toDoList 删除操作

① 点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
② 核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
③ 我们可以给链接自定义属性记录当前的索引号原因见（3.4.9素材——13todolist——索引号.html）
④ 根据这个索引号删除相关的数据----数组的splice(i, 1)方法
⑤ 存储修改后的数据，然后存储给本地存储
⑥ 重新渲染加载数据列表
⑦ 因为a是动态创建的，我们使用on方法绑定事件

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

① 当我们点击了小的复选框，先修改本地存储数据，再重新渲染数据列表。
② 点击之后，先获取本地存储数据。
③ 修改对应数据属性 done 为当前复选框的checked状态。
④ 之后保存数据到本地存储
⑤ 重新渲染加载数据列表
⑥ load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面
⑦ 如果当前数据的done 为false，则是待办事项，就把列表渲染加载到 ol 里面

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

① 在我们load 函数里面操作
② 声明2个变量：todoCount 待办个数 doneCount 已完成个数
③ 当进行遍历本地存储数据的时候，如果数据done为 false，则 todoCount++, 否则 doneCount++
④ 最后修改相应的元素 text()

jQuery编程学习3（jQuery 其他方法： jQuery 拷贝对象、 jQuery 多库共存、jQuery 插件）

目录 jQuery 其他方法 1. jQuery 拷贝对象 $.extend()方法 2. jQuery 多库共存问题概述： 客观需求： jQuery 解决方案：（两种方式） 3. jQuery 插件 jQuery 插件常用的网站： jQuery 插件使用步骤&…...

编程日记 2023/8/12 15:38:36

jvm——垃圾回收机制(GC)详解

开始之前有几个GC的基本问题什么是GC？ GC 是 garbage collection 的缩写，意思是垃圾回收——把内存（特别是堆内存）中不再使用的空间释放掉；清理不再使用的对象。为什么要GC？ 堆内存是各个线程共享的空间…...

编程日记 2023/8/12 15:37:35

计算机组成原理-笔记-第七章

目录七、第七章——输入输出系统 1、IO设备与IO控制方式 （1）控制方式（查询，中断，DMA） （2）通道控制 （3）IO系统 （4）总结 2、外设…...

编程日记 2023/8/12 15:36:34

文章目录网络基础21. 应用层1.1 协议1.2 HTTP 协议1.2.1 URL1.2.2 urlencode和urldecode1.2.3 HTTP协议格式1.2.4 HTTP的方法1.2.5 HTTP的状态码1.2.6 HTTP 常见的header1.2.7 最简单的HTTP服务器 2. 传输层2.1 端口号2.1.1 端口号范围划分2.1.2 认识知名端口号2.1.3 netstat2…...

编程日记 2023/8/12 15:35:33

可视化绘图技巧100篇进阶篇（四）-三维簇状柱形图（3D Clustered Bar Chart）

目录前言适用场景图例柱形图一、柱形图的特点二、柱形图的类型...

编程日记 2023/8/12 15:33:31

架构设计第八讲：架构 - 理解架构的模式2 (重点)

架构设计第八讲：架构 - 理解架构的模式2 (重点) 本文是架构设计第8讲：架构 - 理解架构的模式2，整理自朱晔的互联网架构实践心得, 他是结合了微软给出的云架构的一些模式的基础上加入他自己的理解来总结互联网架构中具体的一些模式。我在此基…...

编程日记 2023/8/12 15:32:30

Java中的Maven Shade插件是什么？

Maven Shade插件是一个非常有用的Maven插件，它可以帮助你在构建项目时打包所有依赖项，并将其打包到一个单独的JAR文件中。这对于在构建过程中使用多个依赖项的项目非常有用，因为它可以让你避免在每个依赖项中都包含所有依赖项，从而…...

编程日记 2023/8/12 15:31:28

ffmpeg的bpp是什么？

例如： AV_PIX_FMT_YUV420P, ///< planar YUV 4:2:0, 12bpp, (1 Cr & Cb sample per 2x2 Y samples) AV_PIX_FMT_YUYV422, ///< packed YUV 4:2:2, 16bpp, Y0 Cb Y1 Cr AV_PIX_FMT_RGB24, ///< packed RGB 8:8:8, 24bpp, RGBRGB... AV_PIX_FMT_BGR24, …...

编程日记 2023/8/12 15:30:27

【C# 基础精讲】类和对象的概念

在面向对象编程（Object-Oriented Programming，OOP）中，类和对象是两个核心概念，用于描述和实现现实世界中的实体和关系。OOP 是一种编程范式，通过将数据和操作封装为对象来组织和管理代码，使得代…...

编程日记 2023/8/12 15:29:25

微信ipad实现批量添加联系人及批量分组

GEWE框架官方网站 geweapi.com 点击访问即可搜索小提示： 添加联系人必要接口搜索返回的V3 V4用于添加联系人请求URL： http://域名地址/api/contacts/search 请求方式： POST 请求头： Content-Type：application/…...

编程日记 2023/8/12 15:28:24

Highcharts引入

Highcharts是和jQuery一起使用的，所以需要下载好jQuery jQuery下载方式：访问：http://cdn.staticfile.org/jquery/2.1.4/jquery.min.js，然后全选复制到自己新建的txt文档中，最后把扩展名改为js。 Highcharts下载方式&…...

编程日记 2023/8/12 15:27:23

腾讯云轻量和CVM有什么区别？不都是服务器吗？

腾讯云轻量服务器和云服务器有什么区别？为什么轻量应用服务器价格便宜？是因为轻量服务器CPU内存性能比云服务器CVM性能差吗？轻量应用服务器适合中小企业或个人开发者搭建企业官网、博客论坛、微信小程序或开发测试环境，云服务器CV…...

编程日记 2023/8/12 15:26:19

Android高通8.1 Selinux问题

1、最近客户提了一个需求，说要在user版本上面切分辨率，默认屏幕分辨率是2.5 k 执行adb shell指令之后变成 4k 然后adb shell wm size可以查看 2、一开始我能想到就是在文件节点添加权限，这里不管是mtk还是qcom（高通平台&#xff…...

编程日记 2023/8/12 15:25:17

python图片爬虫

#!/usr/bin/env python # -*- coding:utf-8 -*- import argparse import os import re import sys import urllib import json import socket import urllib.request import urllib.parse import urllib.error # 设置超时 import timetimeout 5 socket.setdefaulttimeout(time…...

编程日记 2023/8/12 15:24:16

jQuery 其他方法

1. jQuery 拷贝对象 $.extend()方法

2. jQuery 多库共存

问题概述：

客观需求：

jQuery 解决方案：（两种方式）

3. jQuery 插件

jQuery 插件常用的网站：

jQuery 插件使用步骤：

jQuery 插件演示：

bootstrap JS 插件：

案例：toDoList ！！！！！！重要案例

疑问！！！学习：localStorage的存放和取值和JSON

1.localStorage的存储对象方法

2.JSON

案例分析：

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

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

案例：toDoList 删除操作

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

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

相关文章：

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

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