jQuery基础

最新推荐文章于 2024-09-15 00:30:13 发布

☆·°卟荏輸—━╋う

最新推荐文章于 2024-09-15 00:30:13 发布

阅读量485

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_42290128/article/details/122869437

版权

https://jquery.cuishifeng.cn/

前端方法库

插件库和框架的区别

插件: 实现某一个单一类功能

库: 封装了各种的功能和你需要的工具

框架: 自己的完整的生态系统

主要内容是封装了各种 dom 操作

优点:

选择器
链式编程
隐式迭代

特点:

号称全兼容，2.0 以前的版本，2.0 以后逐步的不再兼容 IE

当你引入一个 jquery.js 或者 jquery.min.js 以后，会向全局暴露两个变量名：jQuery、$

jQuery 从 $()

jQuery 的选择器

基本选择器：语法: $(选择器)；返回值: 满足条件的所有元素(id 选择器除外)，放在一个数组里面返回，都是一个集合的形式，这个集合叫做 jquery 元素集合；css 如何捕获标签, 这里就可以怎么填写参数
特殊选择器：语法: $(选择器)，对已经存在的选择器进行修饰，
- :first
- :last
- :eq(索引)，按照索引排列的第几个，注意: 从 0 开始
- :odd，按照索引排列的奇数个
- :even，按照索引排列的偶数个

jQuery 的筛选器

对 jQuery 的元素集合进行二次筛选。注意: 只有 jQuery 的元素集合才可以使用, 原生 DOM 对象不能使用

first()：元素集合里面的第一个
last()：元素集合里面的最后一个
eq(索引)：元素集合里面指定索引的那一个
next()：当前元素的下一个元素
nextAll()：语法
- 元素集合.nextAll() 获取到当前元素后面的所有兄弟元素
- 元素集合.nextAll(选择器) 获取到当前元素后面所有元素中指定选择器的那一个
nextUntil()：语法
- 元素集合.nextUntil() 获取到当前元素后面所有的兄弟元素
- 元素结合.nextUntil(选择器) 获取到当前元素后面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)
prev()：当前元素的上一个元素
prevAll()：语法
- 元素集合.prevAll() 获取到当前元素上面的所有兄弟元素
- 元素集合.prevAll(选择器) 获取到当前元素上面的所有兄弟元素中指定选择器的那一个
prevUntil()：语法
- 元素结合.prevUntil() 获取到当前元素上面所有的兄弟元素
- 元素结合.prevUntil(选择器) 获取到当前元素上面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)
parent() ：获取到当前元素的父元素
parents()：语法
- 元素集合.parents() 拿到结构父级的所有父元素
- 元素集合.parents(选择器) 拿到结构父级里面所有父元素中符合选择器的那一个元素
children()：语法
- 元素集合.children() 拿到该元素的所有子元素
- 元素集合.children(选择器) 拿到该元素的所有子元素中符合选择器的那一个元素
sinblings()：拿到该元素的所有兄弟元素, 自己除外
find()：找到该元素中所有后代元素里面符合选择器条件的元素
index()：获取到的就是该元素在其父元素里面的索引位置

jQuery 操作文本内容

操作元素内的文本和超文本；注意: 属于 jQuery 的方法只能 jquery元素集合调用, 原生 DOM 不能调用

html()
- 元素集合.html()，获取该元素的超文本内容, 以字符串的形式返回，获取的时候为了保证 html 结构只能获取第一个的元素的超文本内容
- 元素集合.html(‘内容’)，设置元素集合内元素的超文本内容，完全覆盖式的写入，隐式迭代: 元素集合内有多少元素, 就写入多少元素
text()
- 元素集合.text()，获取该元素的文本内容, 以字符串的形式返回，因为是文本内容, 不涉及 html 结构, 所以拿到的是所有元素的文本内容，以一个字符串的形式返回
- 元素集合.text(‘内容’)，设置元素集合内元素的文本内容，完全覆盖式的写入，隐式迭代: 元素集合内有多少元素, 就写入多少元素
val()
- 元素集合.val()，获取元素集合内元素的 value 值
- 元素集合.val(‘内容’)，设置元素集合内元素的 value 值，完全覆盖式的写入，隐式迭代: 元素集合内有多少元素, 就写入多少元素

jQuery 操作元素类名

addClass()，添加元素类名
removeClass()，删除元素类名
hasClass()，判断有没有类名
toggleClass()，切换类名，如果原先有, 就是删除；如果原先没有, 就是添加。

jQuery 操作元素样式

元素集合.css(‘width’)：获取元素的某一个样式的值, 不管是行内还是非行内都能获取到
元素集合.css(‘样式名’, ‘样式值’)：设置元素的行内样式，隐式迭代: 元素集合内有多少元素设置多少元素；设置的时候, 如果你需要设置的单位是 px 可以不写
元素集合.css({ 样式名1: 样式值1, 样式名2: 样式值2, … })：批量给元素设置行内样式；隐式迭代: 元素集合内有多少元素设置多少元素；设置的时候, 如果你需要设置的单位是 px 可以不写

jQuery 事件绑定

on()，事件绑定, 根据传递不同的参数做不同的事情
- on(事件类型, 事件处理函数)，直接绑定事件, 有隐式迭代，元素集合内有多少元素, 就会给多少元素绑定事件
```
$('ul > li').on('click', function () {})
```
- 元素集合.on(事件类型, 选择器, 事件处理函数)，事件委托的绑定，把选择器元素委托给元素集合里面的元素。注意: 选择器元素要是元素集合内元素的后代元素
```
$('ul').on('click', 'li', function () {})
```
- 元素集合.on(事件类型, 复杂数据类型, 事件处理函数)，给元素集合内的所有元素绑定事件。这个复杂数据类型是事件触发的时候, 传递给事件里面的参数。在事件对象里面有一个叫做 data 的成员, 就是你传递进来的参数
```
$('ul').on('click', 'li', 'hello world', function (e) {
   console.log(e.data)//hello world
})
```
- 元素集合.on(事件类型, 选择器, 数据, 事件处理函数)，事件委托的形式, 带上传递参数，把选择器所属的事件, 委托给了元素集合内的事件，数据位置, 就是在事件触发的时候传递给事件处理函数的参数
```
$('ul').on('click', 'li', 'hello world', function (e) {})
```
- 元素集合.on({ 事件类型1: 事件处理函数, 事件类型2: 事件处理函数, … })，一次性给元素绑定多种事件，无法传递参数和事件委托
```
$('li').on({
	click: function () { console.log('点击事件') },
	mouseover: function () { console.log('移入事件') }
})
```
one()，用来绑定事件的方法，和 on() 方法的参数和使用形式一样，只不过绑定的事件只能执行一次

off()，用来解除事件绑定的。语法:

元素集合.off(事件类型)，解除元素身上该事件类型的所有事件处理函数

元素集合.off(事件类型, 事件处理函数)，解除元素身上该事件类型的某一个事件处理函数

function handlerA() { console.log('handlerA') }
function handlerB() { console.log('handlerB') }
$('li').on('click', handlerA)
$('li').on('click', handlerB)

// off(事件类型)
// 把 click 事件的所有事件处理函数全部解除
$('li').off('click')

// off(事件类型, 事件处理函数)
// 把 click 事件的 handlerA 事件处理函数解除
$('li').off('click', handlerA)

trigger()，用 JS 代码的方式来触发事件，语法: 元素集合.trigger(事件类型)

$('li:first').trigger('click')

jQuery 的事件函数

jQuery 给我们提供了一些简洁的绑定事件的方式，把一些常用事件直接封装成了函数，click()、mouseover()，这些方法可以直接使用, 带有隐式迭代，快捷绑定事件

语法:

元素集合.事件类型(事件处理函数)

$('div').click(function (e) { console.log('点击事件', e) })

元素集合.事件类型(传入事件处理函数的参数, 事件处理函数)

$('div').click({ name: 'Jack' }, function (e) { console.log('点击事件', e) })

jquery 唯一的特殊事件，hover()

一个结合了移入移出的事件

语法: 元素集合.hover(移入的事件处理函数, 移出的事件处理函数)，如果你只传递一个参数, 那么移入移出都触发

$('div').hover(
	function () { console.log('移入') },
	function () { console.log('移出') }
)

jQuery 的节点操作

创建节点，$(html结构字符串)

当 $() 里面传递一个选择器的时候, 就是获取元素；当 $() 里面传递一个 html 结构字符串的时候, 就是创建元素节点；当 $() 里面传递一个 DOM 元素节点的时候, 就是转换成 jQuery 元素结合
```
const p = $('<p> jQuery 创建的 p 元素节点</p>')
```
插入节点
- 内部插入(父子关系的插入)
  1. append()，语法: 父元素.append(子元素)，把子元素插入到父元素内部, 放在末尾的位置
  2. appendTo()，语法: 子元素.appendTo(父元素)，把子元素插入到父元素内部, 放在末尾的位置
  3. prepend()，语法: 父元素.prepend(子元素)，把子元素插入到父元素内容, 放在最前面的位置
  4. prependTo()，语法: 子元素.prependTo(父元素)，把子元素插入到父元素内容, 放在最前面的位置
- 外部插入(兄弟关系的插入)
  1. after()，语法: 存在元素.after(插入元素)，把插入元素排在存在元素的后面, 以兄弟关系出现
  2. insertAfter()，语法: 插入元素.insertAfter(存在元素)，把插入元素排在存在元素的后面, 以兄弟关系出现
  3. before()，语法: 存在元素.before(插入元素)，把插入元素排在存在元素的前面, 以兄弟关系出现
  4. insertBefore()，语法: 插入元素.insertBefore(存在元素)，把插入元素排在存在元素的前面, 以兄弟关系出现
删除节点
- remove()，语法: 元素集合.remove()，把自己从自己的父元素里面移出
- empty()，语法: 元素集合.empty()，把自己变成空标签, 把所有后代节点全部移除
替换节点
- replaceWith()，语法: 换下节点.replaceWith(换上节点)
- replaceAll()，语法: 换上节点.replaceAll(换下节点)
克隆节点，clone()，语法: 元素集合.clone()，必然携带所有节点过来，第一个参数默认是 false, 表示是否克隆元素本身的事件, 选填 true；第二个参数默认是跟随第一个, 表示是否克隆元素后代节点的事件, 选填。注意: 当第一个参数是 false 的时候, 第二个参数没有意义
```
$('div').clone(false, true).insertAfter($('hr'))
```

jQuery 操作元素属性

attr() 和 removeAttr()
- attr()，语法: 元素集合.attr(属性名)，获取元素的该属性, 主要用来获取标签属性, 包括一些自定义属性；语法: 元素集合.attr(属性名, 属性值)，设置元素的标签属性, 只是把属性设置在标签上, 当作一个自定义属性使用，对于原生属性有些有用, 有些没有用
  
  注意：设置的时候, 需要两个参数，设置的不管是什么数据类型, 都会变成字符串类型；有的原生属性好使, 有的不好使
- removeAttr()，语法: 元素集合.removeAttr(属性名)，删除元素身上的自定义属性，id class 等属性也可以删除
  
  注意：多用于删除 attr 方法设置的属性
prop() 和 removeProp()
- prop()，语法: 元素集合.prop(属性名)，获取元素的原生属性, 也可以获取元素的自定义属性，但是 attr 方法设置的自定义属性他获取不到；
  
  语法: 元素集合.prop(属性名, 属性值)，主要设置元素的原生属性, 也可以设置自定义属性，他设置的自定义属性不会显示在标签上, 而是存储在元素身；
  
  注意：设置的自定义属性不会显示在标签上，你设置的时候是什么数据类型, 获取到的时候还是什么数据类型，attr 设置的自定义属性他拿不到
- removeProp()，语法: 元素集合.removeProp(属性名)，删除元素的属性, 但是只能删除由 prop 设置的自定义属性，原生属性 id class … 不能删除
data() 和 removeData()
- data()，语法: 元素集合.data(属性名)，获取使用 data() 方法存储的数据, 获取元素身上 data-xxx 的属性语法: 元素集合.data(属性名, 属性值)，设置的时候, 只是把数据存储在元素身上的某一个对象空间内，但是不会出现在标签上, 不会由 data-xxx 的属性出现。
  
  注意：可以获取元素标签上 data-xxx 的属性，但是不能设置标签上 data-xxx 的属性
- removeData()，只能删除由 data() 方法设置的属性，不能删除元素身上 data-xxx 的属性

jQuery 获取元素尺寸

获取元素尺寸有三套方法四种使用方式，不管在页面是不是占位, 这些方法都是获取元素的尺寸

width() 和 height()，语法: 元素集合.width() 或者元素集合.height()，获取的是元素内容位置的尺寸
innerWidth() 和 innerHeight()，语法: 元素集合.innerWidth() 或者元素集合.innerHeight()，获取的是元素内容 + padding 区域的尺寸
outerWidth() 和 outerHeight()，语法: 元素集合.outerWidth() 或者元素集合.outerHeight()，获取的是元素内容 + padding + border 区域的尺寸
outerWidth(true) 和 outerHeight(true)，语法: 元素集合.outerWidth(true) 或者元素集合.outerHeight(true)，获取的是元素内容 + padding + border + margin 区域的尺寸

jQuery 操作元素位置

操作元素相对于某一个点的位置关系

offset()，是一个读写的方法
- 读取，语法: 元素集合.offset()；返回值: 一个对象, 里面包含一个 x 信息一个 y 信息，相对谁: 相对页面左上角的绝对坐标。注意: 读取出来是一个对象, 你需要值得时候, 要继续 .不能继续链式编程
- 设置，语法: 元素集合.offset({ top: xxx, left: xxx })，设置的: 设置的是相对于页面左上角的绝对位置，例子: $(‘div’).offset({ top: 30, left: 30 })，一定会把这个 div 放在距离页面左上角 30 30 的位置。注意: 你设置的时候, 如果父子元素都要动，考虑先后顺序
position()，是一个只读的方法

读取：语法: 元素集合.position()。返回值: 一个对象, 里面包含一个 x 信息一个 y 信息，就是元素的定位关系，如果你定位的是 right 和 bottom, 那么会自动计算成 left 和 top

jQuery动画

jQuery三个基础动画

show()：显示
hide()：隐藏
toggle()：切换, 本身显示就隐藏, 本身隐藏就显示

上面三个方法操作的 display: none 和 block

三个的语法是一样的：方法名(运动时间, 运动曲线, 回调函数)。运动时间: 多长时间运动结束；运动曲线: 什么方式运动；回调函数: 运动结束后触发

$('div').show(1000, 'linear', () => console.log('显示结束'))

jQuery 的折叠动画

jQuery 提供了三种折叠动画

slideDown()：下拉显示
slideUp()：上拉隐藏
slideToggle()：切换显示和隐藏

三个方法都是一样的参数，方法名(时间, 运动曲线, 回调函数)

$('.inner').slideDown(1000, 'linear', () => console.log('显示结束'))

jQuery 的渐隐渐显动画

通过操作元素的 opacity 达到效果

faseIn()：opacity 0 ~ 1
fadeOut()：opacity 1 ~ 0
fadeToggle()：切换

以上三个方法的语法是一样的，方法名(时间, 运动曲线, 回调函数)

fadeTo()：运动到指定透明度。语法: fadeTo(时间, 指定透明度, 运动曲线, 回调函数)

$('div').fadeTo(1000, 0.5, 'linear', () => console.log('运动结束'))

jQuery 的综合动画

可以按照你的设定去进行运动

animate()：语法: animate({}, 时间, 运动曲线, 回调函数)，{}: 书写你要运动的属性

注意：颜色相关的属性, 运动不了，CSS3 的 2d 和 3d 动画效果运动不了

$('div').animate({
    width: 300,
    height: '400px',
    borderRadius: '50%',
    left: 150,
    top: 200,
    backgroundColor: 'red'
}, 1000, 'linear', () => console.log('运动结束'))

jQuery 的停止动画

因为当你给一个元素设置动画以后，如果快速触发, 会停不下来, 直到你所有的触发都执行完毕为止，jquery 给我们提供两个临时停下动画的方法

stop()：语法: 元素集合.stop()，当代码执行到这句的时候, 不管运动到什么程度, 立刻停下来，运动到什么位置就停止在什么位置
finish()：语法: 元素集合.finish()，当代码执行到这句的时候, 不管运动到什么程度, 直接去到运动结束位置，直接完成本次动画

jQuery 发送网络请求

get 请求

jQuery 提供了一个函数, 叫做 $.get()，引入 jQuery 以后, 会提供两个变量 $、jQuery，这两个都是函数数据类型

把这个函数当作一个对象, 向他的身上添加了一些成员，我们管这种方法叫做 jQuery 的全局方法，不需要依赖选择器, 不需要元素集合，直接调用就行

语法: $.get(地址, 传递给后端的数据, 回调函数, 期望返回的数据类型)，地址: 请求地址 (你可以自主拼接参数, 不推荐)；数据: 给后端的数据, 可以写 ‘key=value&key=value’, 可以写 { … }；回调: 请求成功的回调, 请求成功以后会触发；期望返回的数据类型: 是不是执行解析响应体的操作，‘string’ 不解析，‘json’ 会执行一步 JSON.parse()。

$.get('./server/get.php?a=100&b=200', function (res) {
	// res 就是后端返回的响应体
      console.log(res)
}, 'json')

$.get('./server/get.php', 'c=300&d=400', function (res) {
	// 如果你的最后一个参数写了 'json', 会自动执行 JSON.parse()
	console.log(res)
}, 'json')

$.get('./server/get.php', { e: 500, f: 600 }, function (res) {
	console.log(res)
}, 'json')

post 请求

jQuery 提供了一个全局方法叫做 $.post()，专门用来发送 post 请求

发送 post 请求，语法: $.post(地址, 携带给后端的数据, 回调函数, 期望后端返回的数据类型)，四个参数的意义和 $.get() 一样

ajax 请求

可以由你来配置, 决定发送 get 还是 post 请求，$.ajax()，所有的请求都可以使用他来发送

语法: $.ajax(options)， options: 就是本次请求的配置信息, 是一个对象数据类型

配置信息里面可以填写的内容

url: 请求地址, 必填
async: 是否异步, 默认是异步(true), 可以选填非异步(false)
type / method: 表示请求方式, 默认是 GET, 可以选填其他请求方式，大小写无所谓
data: 传递给后端的参数，可以是查询字符串的形式，可以是对象的形式
dataType: 期望后端返回的数据类型, 是否进行 JSON.parse() 解析
success: 接收一个函数数据类型, 表示成功的回调
error: 接收一个函数数据类型, 表示失败的回调，不光是请求失败会走失败的回调，解析失败的时候, 也会走失败的回调
timeout: 设置一个超时时间，从发送请求开始计时, 到达超时时间还没有接收到响应，会直接取消本次请求, 到失败的回调函数
cache: 是否缓存，对于 ajax 请求默认缓存的(true), 可以选填(false)，如果你选择缓存, 那么不会有最后一个时间戳参数；如果你选择不缓存, 那么 jQuery 会在本次请求的末尾添加一个时间戳作为参数。对于 jsonp 请求默认不缓存(false), 可以选填(true)，当你发送 jsonp 请求的时候, 会默认带有一个时间戳参数
context: 上下文，指定回调函数的 this 指向，jQuery 默认回调函数的 this 指向 jQuery 封装的 xhr 对象，context 传递的是谁, 回调函数的 this 就指向谁

jQuery 对于 ajax 的封装，除了回调函数的形式接收结果，还封装了 promise 的形式接收结果，一个 $.ajax() 方法，你可以选择书写回调函数的形式，也可以选择 promise 的形式

注意: 选择一种方式使用, 不要都是用

$.ajax({
	url: './server/post.php',
	data: { a: 100, b: 200 },
    type: 'POST',
    dataType: 'json',
    success (res) {
		console.log('success')
        console.log(res)
	}
}).then(res => {
      console.log('promise')
      console.log(res)
})

跨域请求

非同源地址解决方案

jsonp，前端利用 script 标签和 src 属性绕开同源策略，和 ajax 没有关系, 实际上不是在发送 ajax 请求，实际上是在请求一个 js 文件
代理，由一个同源的代理服务端转发请求，对于前端来说, 依旧是正常发送请求，只不过把地址书写成代理地址，依旧是直接使用 $.ajax() 方法来发送，只不过 url 位置书写代理标识符
cors，服务端允许指定客户端发送请求，和前端没有关系，前端正常发送请求，使用 $.ajax()

jQuery 发送 jsonp 请求

使用一个叫做 $.ajax() 的方法， jQuery 封装 ajax 函数的时候做了一个判断，根据 dataType 传递的值来判断，只要把 dataType 书写成 ‘jsonp’，就会发送 jsonp 请求

注意: 发送 jsonp 请求会默认不缓存(自动添加一个 _=时间戳)

jQuery 发送 jsonp 请求专用的配置项

jsonp: 表示携带函数名的那个 key
jsonpCallback: 表示你自主定义的函数名，默认值是 jquery 自己组装的 jQuery-版本号随机数_时间戳

$.ajax({
	url: 'http://127.0.0.1/server/jsonp.php',
	dataType: 'jsonp',
	cache: true,
	jsonp: 'cb',
	jsonpCallback: 'fn'
})

jQuery 的全局钩子函数

也叫做全局 ajax 函数，出现在 ajax 的不同阶段，一个 ajax 的整个周期中, 会在不同的位置执行的函数，在一个事情的生命周期上各个不同时期触发的函数叫做钩子函数。不是自主触发的函数, 而是钩挂再其他的事情上，由其他的事情发生过程中来触发

ajaxStart()，同一个作用域下多个 ajax 请求的时候，第一个 ajax 请求之前执行
ajaxSend()，表示在每一个请求发送之前触发，只要有一个请求要执行 send 方法了, 就会先出发钩子函数
ajaxSuccess()，表示在每一个请求成功之后触发，只要有一个请求成功了, 就会触发一次
ajaxError()，表示在每一个请求失败之后触发，只要有一个请求失败了, 就会触发一次，根据 jQuery 判定的失败
ajaxComplete()，表示在每一个请求完成之后触发，只要有一个请求完成了, 不管成功还是失败, 只要完成了就会触发
ajaxStop()，表示再同一个作用域下最后一个 ajax 结束以后触发，当有多个请求的时候, 会在最后一个结束以后触发这个钩子

在发送请求之前, 把钩子函数挂载

$(window).ajaxStart(function () {
	console.log('第一个请求开始')
})

jQuery 的多库并存

jquery 自己是一个库，还有很多其他的库，当出现第二个库一起使用的时候，如果两个库都向外暴露了 $ 或者 jQuery 的变量名，就会出现变量名冲突，两个库只有一个能正常使用，谁写在后面就是谁，jQuery 给我们提供了一个多库并存的机制

要求你把 jQuery 引入再最后面，先暂时把变量民的所有权交给 jQuery
执行一个方法, jQuery 把变量名的所有权交出去，表示不再占用这个名字了
- noConflict()，交出 $ 的控制权
- noConflict(true)，交出 $ 和 jQuery 的控制权
- const 变量 = $.noConflict(true)，变量是什么，自己定义一个控制权

深浅拷贝

三个词(描述对象和对象之间的关系)

赋值，把一个对象的地址赋值给另一个变量，两个变量操作同一个空间
浅拷贝，把对象里面的每一个成员, 复制一份一模一样的内容，放到另一个对象里面；当有某一个对象成员是复杂数据类型的时候，这个成员依旧是一样的，只是操作对象里面一层可以没有关系, 如果再深层次就会出现问题

深拷贝，对象空间里面不管多少层, 都是相对独立, 没有关系

方案1: 利用递归思想实现深拷贝，把第一遍遍历放在一个函数里面，如果遍历的时候, 发现有一个数据是数组或者对象，从新调用函数

function deep(o2, o1) {
	for (var key in o1) {
		if (o1[key].constructor === Array) {
			o2[key] = []
          	deep(o2[key], o1[key])
        } else if (o1[key].constructor === Object) {
          	o2[key] = {}
          	deep(o2[key], o1[key])
        } else {
          	o2[key] = o1[key]
        }
	}
}

方案2: json，不管多复杂的数据类型, 转换成 json 以后就是字符串，字符串的赋值时基本数据类型，赋值以后再转换回来
```
o2 = JSON.parse(JSON.stringify(o1))
```

jQuery 里面的深浅拷贝

jQuery 里面提供了一个进行深浅拷贝的方法，$.extend()

语法:

$.extend(对象1, 对象2, 对象3, …)，把从第二个参数开始的每一个对象的数据拷贝到第一个对象中，是一个浅拷贝
$.extend(true, 对象1, 对象2, 对象3, …)，把从第三个参数开始的每一个对象的数据拷贝到第二个对象中，是一个深拷贝， $.extend(true, o1, o2)

注意：如果你要进行拷贝, 不管是深拷贝还是浅拷贝，至少传递两个参数，传递一个参数的时候, 不是进行拷贝

jQuery 的插件扩展

jQuery在设计的时候, 封装了好多的方法，但是怕你不够用, 提供了插件扩展机制，你可以向 jQuery 里面扩展一些内容，插件扩展机制提供了两个方法

扩展到 jQuery 本身, 作为全局方法调用，语法: $.extend({ 你扩展的方法 })，使用: $.extend({ a: function () {} })，相当于扩展了一个 a 方法再 jQuery 本身，如果你向调用, 就书写 $.a()

$.extend({
	getCookie (val) {
    	const cookie = document.cookie
    	var o = ''
		if (val) {
			cookie.split('; ').forEach(item => {
				var t = item.split('=')
            	if (t[0] === val) {
              	o = t[1]
            	}
         	})
		} else {
    		o = {}
        	cookie.split('; ').forEach(item => {
            	const t = item.split('=')
            	o[t[0]] = t[1]
        	})
    	}
     	return o
	},
	setCookie () {

	}
})

const res = $.getCookie('a')
console.log(res)
console.log($.getCookie())

扩展到 jQuery 的原型上, 就是给 jQuery 的元素集合使用，语法: $.fn.extend({ 你扩展的方法 })，使用: $.fn.extend({ a: function () {} })，相当于扩展了一个 a 方法给 jQuery 的元素集合，如果你想调用, 就书写 $(选择器) . a () ；第二种书写的语法，$ .extend($.fn, { 你扩展的方法 })
```
$.fn.extend({
	a: function () {
		console.log('我调用了')
	}
})

// 使用的时候
$('html').a()
```