jQuery超详细总结

文章目录

jQuery超详细总结
- 一选择器
- - 特殊选择器
- 二筛选器
- - 用在 jQuery 选择的元素后面
  - 都是方法,对选择出来的元素进行二次筛选
- 三文本操作
- - 总结
- 四元素类名操作
- 五元素属性操作
- - 在 H5 的标准下, 给了一个定义, 当你需要写自定义属性的时候，最好写成 data-xxx="值"，当大家看到 data-xxx 的时候, 就知道这是一个自定义属性
- 六元素样式操作
- 七绑定事件
- - 1. `on() `方法是专门用来绑定事件
  - 2. `one()` 方法是专门用来绑定一个只能执行一次的方法
  - 3. `off()` 方法是专门用来解绑一个元素的事件的
  - 4. `trigger()` 方法是专门用来触发事件的方法
  - 5. `hover()`
  - 6. `常用事件`
- 八节点操作
- - 1. 创建节点
  - 2. 插入节点
  - 3. 删除节点
  - 4. 替换节点
  - 5. 克隆节点
- 九获取元素尺寸
- - 尺寸: 元素的占地面积
  - 三套方法, 四种使用方式
- 十获取元素位置
- - 1. `offset()`
  - 2. `position()`
- 十一获取卷去的尺寸（页面滚动条）
- - `scrollTop()`
  - `scrollLeft()`
- 十二 jQuery中的函数
- - `ready()` 事件
  - `each()` 方法
- 十三 jQuery中的动画
- - 让元素出现不同的移动, 改变
  - 标准动画
  - 折叠动画
  - 渐隐渐显动画
  - 综合动画
  - 停止动画
- 十四 jQuery发送ajax请求
- - jQuery 里面帮我们封装好了几个方法
  - 专门用来发送 ajax 请求的
  - - `jQuery 发送一个 GET 请求`
    - `jQuery 发送一个 POST 请求`
    - `jQuery 的 $.ajax 方法`
    - jQuery 的 ajax 全局钩子函数
- 十五 jQuery 发送一个 jsonp 请求
- 十六 jQuery 的多库并存机制
- 十七 jQuery 的插件扩展机制
- 十八 jQuery 的拷贝对象问题
- 十九 jQuery 的插件

jQuery 是一个前端库，也是一个方法库
他里面封装着一些列的方法供我们使用
我们常用的一些方法它里面都有，我们可以直接拿来使用就行了
jQuery 之所以好用，很多人愿意使用，是因为他的几个优点太强大了
1. 优质的选择器和筛选器
2. 好用的隐式迭代
3. 强大的链式编程
因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”
接下来我们就来认识一下 jQuery

一选择器

$()
- css怎么获取元素这里就怎么写
- 获取的是一组元素，当里面是id时，这组元素只有一个内容

特殊选择器

:first $('li:first') 获取元素集合里的第一个元素

//  console.log($('li:first'))

:last $('li:last') 获取元素集合里的最后一个元素
:eq() $('li:eq()')获取元素集合里索引为n 的那个元素，索引从0开始
:odd $('li:odd') 获取所有索引为奇数的元素
:even $('li:even') 获取所有索引为偶数的元素

二筛选器

用在 jQuery 选择的元素后面

都是方法,对选择出来的元素进行二次筛选

first() 筛选元素集合里面的第一个元素

//  console.log($('li').first())

last() 筛选元素集合里面的最后一个元素
eq(n) 筛选元素集合里索引为n 的那个元素
next() 筛选出来元素的下一个兄弟元素
- nextAll() 筛选出元素后面的所有兄弟元素
- nextAll(选择器) 筛选出元素后面的所有兄弟元素中符合选择器的元素
- nextUntil(选择器) 筛选出元素后面的所有兄弟元素直到选中的元素为止不包含选中的元素

//  console.log($('span').nextUntil('.a10'))

prev() 筛选出来元素的上一个兄弟元素
- prevAll() 筛选出元素上面的所有兄弟元素（元素集合中的元素从上一个兄弟元素开始排序）
- prevAll(选择器) 筛选出元素上面的所有兄弟元素中符合选择器的元素
- prevUntil(选择器) 筛选出元素上面的所有兄弟元素直到选中的元素为止不包含选中的元素

//  console.log($('span').prevUntil('.a10'))

parent() 筛选出元素的父元素
- parents()筛选出元素的所有祖先元素直到html元素
- parents(选择器)拿到所有祖先元素中的符合选择器的元素
- parentsUntil(选择器)筛选出元素的所有的祖先元素直到某一个元素不包含该元素

//  console.log($('span').parents('body'))
// console.log($('span').parentsUntil('html'))

children() 筛选出元素的所有子级元素
- children(选择器) 筛选出元素所有子级元素中的符合选择器的元素
siblings() 筛选出所有的兄弟元素不包含自己
- siblings(选择器) 筛选出所有的兄弟元素中的符合选择器的元素
find(选择器)
- 筛选一个元素后代中的符合选择器的元素
- 在一个元素集合的每一个元素中查找后代元素符合选择器的元素
index() 获取元素的索引位置
- 索引位置是指是该父元素下的第几个元素拿到的是数字

三文本操作

html() 一个读写的属性
- html()不传递参数的时候就是获取元素内部的超文本内容
- html(参数)传递参数的时候就是设置元素内部的超文本内容
text() 一个读写的属性
- text()不传递参数的时候就是获取元素内部的超文本内容
- text(参数)传递参数的时候就是设置元素内部的超文本内容
val() 一个读写的属性操作 input 标签
- val()不传递参数的时候, 就是获取标签的 value 值
- val(参数)传递一个参数的时候, 就是设置标签的 value 值

总结

获取
- html() 只能获取第一个元素的超文本内容
- text() 能获取元素集合内所有元素的文本内容合
- val() 只能获取第一个元素的 value 值
设置
- html() 给元素集合内所有元素设置超文本内容
- text() 给元素集合内所有元素设置文本内容
- val() 给元素集合内所有元素设置 value 值

四元素类名操作

addClass() 添加类名
- 执行这个方法会给元素集合里面所有的元素添加上固定的类名
- 如果有就不添加, 不存在这个类名时添加
removeClass() 移除类名
- 执行这个方法删除元素集合里面所有元素的指定类名
toggleClass()切换类名
- 执行这个方法会给元素集合里面的所有元素切换类名
- 本身存在这个类名, 删除类名
- 本身不存在这个类名, 添加类名
hasClass() 判断有没有某一个类名
- 返回的时一个布尔值, 表示这个类名是否存在

五元素属性操作

在 H5 的标准下, 给了一个定义, 当你需要写自定义属性的时候，最好写成 data-xxx=“值”，当大家看到 data-xxx 的时候, 就知道这是一个自定义属性

attr() 和 removeAttr()
- attr: attribute 属性
- attr()
  - 是一个读写的方法
  - attr(要读取的属性名): 传递一个参数的时候是读取
  - attr(属性名, 属性值): 传递两个参数的时候是设置
- removeAttr() 专门用来移除属性的
- attr 这套方法的注意:
  - 所有的属性都会显示在标签上(原生属性和自定义属性)
  - 不管你设置的是什么数据类型, 都会给你变成字符串
  - removeAttr 删除 attr 设置的属性, 有多少删除多少(针对自定义属性)
prop() 和 removeProp()
- prop: property 属性
- prop()
  - 一个读写的方法
  - prop(要读取的属性名): 传递一个参数的时候是读取
  - prop(属性名, 属性值): 传递两个参数的时候是设置
- removeProp()专门用来移除属性的
- prop 这套方法的注意:
  - 非原生属性, 不会显示在标签上, 但是你可以获取使用
  - 你存储的是什么数据类型, 获取的时候就是什么数据类型
  - removeProp 删除 prop 设置的属性, 有多少删除多少(针对自定义属性)
  - removeProp() 不能删除原生属性 id class style 等等
data() 和 removeData()
- data: data 数据
- data()
  - 一个读写的方法
  - data(要读取的属性名): 传递一个参数的时候是读取
  - data(属性名, 属性值): 传递两个参数的时候是设置
- removeData() 专门用来删除数据的
- data 这套方法的注意:
  - 和元素的原生属性没有关系, 可以设置 id, 但是和元素的 id 没关系
  - 就是在元素身上给你开辟一个地方, 存储一些数据
  - 你设置的是什么数据类型, 拿到的就是什么数据类型
  - removeData 删除 data 设置的属性
  - data() 方法也能读取写在标签上的 H5 标准自定义属性

三个方法存储内容
- attr 设置的自定义属性存储在标签身上
- prop 设置的自定义属性存储在元素对象里面
- data 设置的自定义属性存储在元素对象里面单独开辟的一个对象

六元素样式操作

css()
- 一个读写的属性
- 不同操作需要传递不同的参数

css('样式名称')
- css('width')
- 获取元素的样式值, 不管是行内样式还是非行内样式都能获取
css('样式名称', '样式的值')
- css('width', '200px')
- 设置元素的样式值, 元素集合能获取多少个元素就置多少个元素
- 设置的时候, 所有的单位都可以不写, 默认添加 px为单位
css(对象)
- css({ width: 100, 不写单位默认是 px height: '200px', opacity: 0.5 })
- 批量设置 css 样式
- 给元素集合里面的所有元素, 批量设置样式

七绑定事件

1. `on()`方法是专门用来绑定事件

jQuery 里面通用的事件绑定方式
不同操作传递不同参数

on方法的各种参数描述

on('事件类型', 事件处理函数)
- 给元素集合内所有的元素绑定一个事件

// 给 $('li') 获取到的所有元素绑定一个点击事件// $('li').on('click', function () {//   console.log('我被点击了')// })

on('事件类型', '事件委托', 事件处理函数)
- 把事件委托位置的元素的事件委托给了前面元素合

    // 给所有的 li 标签设置事件委托, 委托给了 ul// $('ul').on('click', 'li', function () {//   console.log('我被点击了, 事件委托')// })

on('事件类型', 复杂数据类型, 事件处理函数)
- 给每一个元素绑定一个事件, 复杂数据类型是发事件时候传递的参数

 //   每一个 li 点击的时候, 都能得到中间那个对象//   就是事件对象了面// $('li').on('click', { name: 'Jack', age: 18 }, function (e) {//   console.log('我被点击了, li')//   console.log(e)// })

on('事件类型', '事件委托', 任意数据类型, 件处函数)
- 做一个事件委托的形式, 第三个参数位置的数据
- 是触发事件的时候, 可以传递进去的数据
on(对象)
- 给一个元素绑定多个事件的方式不能传参数

 // $('ul').on({//   click: function () { console.log('点击事件') },//   mouseover: function () { console.log('移入事件') },//   mouseout: function () { console.log('移出事件') }// })

2. `one()` 方法是专门用来绑定一个只能执行一次的方法

传递的参数个数和意义于 on 方法一摸一样
绑定上的事件只能执行一次

3. `off()` 方法是专门用来解绑一个元素的事件的

使用方式
1. off('事件类型') : 给该事件类型的所有事件处理函数解绑
2. off('事件类型', 事件处理函数) : 解绑指定事件处理函数
- 注意：on 和 one 绑定的事件它都能移除

4. `trigger()` 方法是专门用来触发事件的方法

不通过点击, 通过代码把事件触发了
trigger('事件类型') : 把该元素的事件给触发了

5. `hover()`

jQuery 里面唯一一个很特殊的事件函数
表示一个鼠标悬停动作
只有一个使用方式
- hover(鼠标移入的时候触发, 鼠标移出的时候触发)

 // hover 事件//   如果你只传递一个函数, 那么移入移出都触发这一个函数$('ul').hover(function () { console.log('鼠标移入') },function () { console.log('鼠标移出') })

6. `常用事件`

jQuery 把一些常用事件直接做成了函数
- click()
- mouseover()
- . . . . . .
直接使用就可以了
使用 click 举一个例子
- click(事件处理函数)
- click(参数, 事件处理函数)
- 参数: 触发事件的时候传递到事件里面的数据

    // 常用事件// 给 ul 绑定了一个点击事件// $('ul').click([1, 2, 3, 4, true], function (e) {//   console.log('你好 世界')//   console.log(e)// })

八节点操作

1. 创建节点

对应原生 js 里面的 createElement()
$('html 格式的文本')

// 创建一个 div 元素console.log($('<div>我是一个创建出来的节点</div>'))

2. 插入节点

对应原生 js 里面的 appendChild()
内部插入
- 放在页面元素的子元素位置, 放在末尾
  - 页面元素.append(要插入的元素)
  - 要插入的元素.appendTo(页面元素)
- 放在页面元素的子元素位置, 放在最前
  - 页面元素.prepend(要插入的元素)
  - 要插入的元素.prependTo(页面元素)
外部插入
- 放在页面元素的下一个兄弟元素位置
  - 页面元素.after(要插入的元素)
  - 要插入的元素.insertAfter(页面元素)
- 放在页面元素的上一个兄弟元素位置
  - 页面元素.before(要插入的元素)
  - 要插入的元素.insertBefore(页面元素)

3. 删除节点

对应原生 js 里面的 removeChild()
- 页面元素.empty() -> 把自己变成空标签,将所有子元素移除
- 页面元素.remove() -> 把自己移除
- 没有删除某一个子节点的方法，因为 jQuery 的选择器的强大，直接找到要删除的节点, remove()

4. 替换节点

对应原生 js 里面的 replaceChild()
- 页面元素.replaceWith(替换元素)
- 替换元素.replaceAll(页面元素)

5. 克隆节点

对应原生 js 里面的 cloneNode()
- 元素.clone()
  - 两个参数的值为 true或false
  - 第一个参数: 自己的事件是否克隆
  - 第二个参数: 子节点的事件是否克隆
  - 如果第一个参数的值为false,那么第二个参数不起作用，没有意义。
- 不管你是否传递参数, 都会把所有后代元素都克隆下来
  - 元素 + 文本内容 + 属性 + 行内样式
- 参数只决定是否克隆元素身上的事件

九获取元素尺寸

尺寸: 元素的占地面积

width 和 height
padding
border
margin

三套方法, 四种使用方式

这些方法都是不考虑盒模型的状态(不管是什么型, 都是固定区域)
1. width() 和 height()
- 获取元素的内容区域的尺寸
1. innerWidth() 和 innerHeight()
- 获取元素的内容 + padding 区域的尺寸
1. outerWidth() 和 outerHeight()
- 获取元素的内容 + padding + border 区域的尺寸
1. outerWidth(true) 和 outerHeight(true)
- 获取元素的内容 + padding + border + margin 区域的尺寸

十获取元素位置

1. `offset()`

offset: 偏移量
是一个读写的属性
读取
- 不传递参数就是读取
- 读到的元素相对于页面的位置关系
- 返回值是一个对象 { left: xxx, top: xxx }
书写
- 传递一个对象就是写入 { left: xxx, top: xxx }
- 注意: 绝对写入
- 不管你本身和页面的尺寸是什么样，写多少就是多少

2. `position()`

postition: 定位
只读的方法
读取:
- 元素相对于定位父级的位置关系
- 得到的也是一个对象 { left: xxx, top: xxx }
- 如果你写的是 right 或者 bottom, 会自动计算成 left 和 top 值给你

十一获取卷去的尺寸（页面滚动条）

`scrollTop()`

原生 js 里面 document.documentElement.scrollTop
读写的方法
- 不传递参数的时候就是获取卷去的高度
- 传递一个参数就是设置卷去的高度

`scrollLeft()`

原生 js 里面 document.documentElement.scrollLeft
读写的方法
- 不传递参数的时候就是获取卷去的宽度
- 传递一个参数的时候就是设置卷去的宽度

十二 jQuery中的函数

`ready()` 事件

类似于 window.onload 事件,但是有所不同
- window.onload 会在页面所有资源加载行
- ready() 会在页面 html 结构加载完毕后执行
也叫做 jQuery 的入口函数
有一个简写的形式 $(function () {})

`each()` 方法

类似于 forEach(), 遍历数组的
jQuery 的元素集合, 是一个 jQuery 数组, 不是一个数组, 不能使用 forEach()
forEach语法： forEach(function (item, index) {})
each语法：each(function (index, item) {})
比较少用到, 因为 jQuery 隐式迭代自动遍历

十三 jQuery中的动画

让元素出现不同的移动, 改变

transition -> 过渡动画
animation -> 帧动画

标准动画

show() 显示元素
- 语法: show(时间, 运动曲线, 运动结束的函数)
hide() 隐藏元素
- 语法: hide(时间, 运动曲线, 运动结束的函数)
toggle() 改变元素显示或隐藏（如果显示就隐藏，如果隐藏就显示）
- 语法: toggle(时间, 运动曲线, 运动结束的函数)

三个方法的参数都可以选填，不需要每个都填写

折叠动画

slideDown() 下滑显示
- 语法: slideDown(时间, 运动曲线, 运动结束的函数)
slideUp() 上滑隐藏
- 语法: slideUp(时间, 运动曲线, 运动结束的函数)
slideToggle() 切换滑动和隐藏
- 语法: slideToggle(时间, 运动曲线, 运动结束的函数)

渐隐渐显动画

实质是透明的opacity的变化

fadeIn() 逐渐显示
- fadeIn(时间, 运动曲线, 运动结束的函数)
fadeOut() 逐渐消失
- fadeOut(时间, 运动曲线, 运动结束的函数)
fadeToggle() 切换显示和消失
- fadeToggle(时间, 运动曲线, 运动结束的函数)

以上三个方法的参数，均有默认值

fadeTo() 设置元素透明度变为你指定的数字
- fadeTo(时间, 你指定的透明度, 运动曲线, 运动结束的函数)

综合动画

animate()
基本上大部分的 css 样式都可以动画
- transform 不行, 颜色不行
语法: animate({}, 时间, 运动曲线, 运动结束的函数)
- { }里面就写你要运动的 css 属性,默认单位为px

停止动画

让当前的动画结束
因为 jQuery 的动画你一直点击，就会一直触发。即使不再点击让事件发生，还是会把没执行完的动画执行完毕。
- 你点击 10 次, 他就会触发 10 次, 直到 10 次全都完毕才结束

stop()
- 当这个函数触发的时候, 就会让运动立刻停下来
- 你运动到哪一个位置了就停止在哪一个位置
finish()
- 当这个函数触发的时候, 就会让运动立刻停下来
- 不管你运动到了哪一个位置, 瞬间到达运动完成位置

十四 jQuery发送ajax请求

jQuery 里面帮我们封装好了几个方法

专门用来发送 ajax 请求的

$.get() -> 专门用来发送 get 请求的
$.post() -> 专门用来发送 post 请求的
$.ajax() ->
- 发送什么请求都可以(get, post, put, delete)
- 并且还可以发送一个 jsonp 请求

`jQuery 发送一个 GET 请求`

语法: $.get(请求地址, 需要携带到后端的参数, 成功的回调函数, 期望后端返回的数据类型)

请求地址: 你要请求的后端接口地址(必填)
携带参数: 你需要给后端传递的参数
- 可以是一个固定格式的字符串 ‘key=value&key=value’
- 也可以是一个对象 { a: 100, b: 200 }
成功回调: 当请求成功的时候会执行的函数
期望数据类型: 就是你是不是需要 jQuery 帮你解析响应体
- 默认是不解析
- 当你传递一个 ‘json’ 的时候, 会自动帮你执行 JSON.parse()

    // 打开页面就发送 GET 请求了// $.get('./server/get.php', 'a=100&b=200', function (res) {//   // res 就是后端返回的数据, 也就是响应体//   // console.log(JSON.parse(res))//   console.log(res)// }, 'json')// $.get('./server/get.php', { a: 300, b: 400 }, res => {//   console.log(res)// }, 'json')

`jQuery 发送一个 POST 请求`

语法: $.post(请求地址, 需要携带到后端的参数, 成功的回调函数, 期望后端返回的数据类型)

四个参数和 $.get 是一摸一样的

    // 打开页面就发送 POST 请求了// $.post('./server/post.php', 'c=hello&d=world', function (res) {//   console.log(res)// }, 'json')// $.post('./server/post.php', { c: '你好', d: '世界' }, res => {//   console.log(res)// }, 'json')

`jQuery 的 $.ajax 方法`

用来发送综合 ajax 请求的(GET, POST, PUT, …)

语法: $.ajax(对象)对象是对本次请求的所有配置

- $.ajax({url: '', // => 请求地址(必填)type: '', // => 请求方式(GET, POST, ...) 默认是 GETdata: '', // => 携带到后端的参数dataType: '', // => 期望后端返回的数据类型, 默认不解析async: true, // => 是否异步, 默认是 truesuccess: function () {}, // => 成功的回调error: function () {}, // => 失败的回调timeout: 数字, // 单位是 ms, 超时时间(超过你写的时间没有响应, 那么就算失败)cache: true, // 是否缓存, 默认是 truecontext: 上下文, // 改变回调函数里面的 this 指向...})

$.ajax 里面失败的回调
- 不光是请求失败的时候会触发
- jQuery 认定失败就是失败
  - 当 dataType 写成 json 的时候, jQuery 会帮我们执行 JSON.parse()
  - 当后端返回一个不是 json 格式的字符串的时候
  - 执行 JSON.parse() 就会报错
  - 也会执行失败的回调, 请求虽然成功, 但是解析失败了, 也是失败
- JSON.parse(‘你好世界’) -> 就会报错了
$.ajax 里面是否缓存的问题
- 这个请求要不要缓存
- 当两次请求地址一样的时候, 就会缓存
- 如果你写成 false, 表示不要缓存
- jQuery 就会自动再你的请求后面加一个参数 _=时间戳
  - 第一次请求 ./server/get.php?_=11:10:01.325的时间戳
  - 第二次请求 ./server/get.php?_=11:10:02.326的时间戳
$.ajax 里面的回调 this 指向问题
- ajax 的回调里面默认 this 指向被 jQuery 加工过的 ajax 对象
- context 的值你写的是谁, 回调函数里面的 this 就时谁
$.ajax 里面的请求方式的问题
- $.ajax 这个方法里面, type 表示请求方式
- jQuery 还给了我们一个参数叫做 method，也表示请求方式
- 当你写请求方式的时候
- 可以写成 type: ‘POST’
- 也可以写成 method: ‘POST’
$.ajax 里面的接收响应的问题(2015年以后的版本才有 promise 的形式)
- jQuery 默认把 ajax 封装成了 promsie 的形式
- 你可以用 success 选项接收成功的回调
- 也可以用 .then() 的方式接收响应

jQuery 的 ajax 全局钩子函数

钩子: 挂在你的身上, 你的所有动作都和它有关系
这些全局函数都是挂在 ajax 身上的, 这个 ajax 的每一个动作都和全局函数有关系
全局的钩子函数
1.ajaxStart()
- 会在同一个作用域下多个 ajax 的时候, 第一个 ajax 之前开始的时候触发
- 如果有多个 ajax 他只触发一次
  2.ajaxSend()
- 每一个 ajax 再发送出去之前, 都会触发一下
- xhr.send() 之前触发
1. ajaxSuccess()
- 每一个 ajax 再成功的时候触发
- 只要有一个 ajax 成功了就会触发
1. ajaxError()
- 每一个 ajax 再失败的时候触发
- 只要有一个 ajax 失败了就会触发
1. ajaxComplete()
- 每一个 ajax 完成的时候触发
- 只要有一个 ajax 完成了, 不管成功还是失败, 都会触发
1. ajaxStop()
- 会在同一个作用域内多个 ajax 的时候, 最后一个 ajax 完成以后触发
- 如果有多个 ajax 它只触发一次

作用: 通常用来做 loading 效果

 <img src="./loading.gif" alt="">
// 利用ajax钩子函数 做一个lading效果  等待页面// 提前利用钩子函数准备 loading 效果// 每一次发送出去的时候都要显示图片$(window).ajaxSend(() => {$('img').show()})// 每一次完成的时候都要图片再隐藏起来$(window).ajaxComplete(() => {$('img').hide()})// 每次点击按钮的时候都会发送一个 ajax 请求$('button').click(() => {// 发送一个 ajax 请求$.ajax({url: './server/get.php',data: { a: 100, b: 200 },dataType: 'json',success: function (res) {console.log('请求成功了')console.log(res)}})})

十五 jQuery 发送一个 jsonp 请求

jQuery 也提供给我们发送 jsonp 请求的方式

jsonp: 利用 script 标签的 src 属性来请求
返回值: 是一个字符串, 字符串里面写了一个 函数名(后端传递给前端的参数)

使用 $.ajax() 这个方法
- 必须写的:dataType: 'jsonp'
发送 jsonp 请求
- jQuery 帮我们准备好了一个函数名, 并且以参数的形式带到了后端
- jQuery 帮我们带过去的 callback 参数, 就是它准备好的函数名
- 后端就应该返回一个 jQuery 准备好的函数名()
其他参数
- jsonp: '', 你带到后端表示你函数名的那个 key, 默认值是 callback
- cache: false, 当 dataType === ‘jsonp’ 的时候, 默认 cache 就是 false

 // 发送一个 jsonp 请求$.ajax({url: 'http://127.0.0.1/server/jsonp.php',dataType: 'jsonp', // 表示我要发送一个 jsonp 请求jsonp: 'cb', // 表示参数里面的 cb 属性时我准备好的函数名cache: true, // 表示缓存本次请求success: function (res) {console.log(res)}})//   jQuery 准备好的函数名//     + jQuery34108160883644340862_1582255906750//     + 变量名包含 数字 字母 下划线 $//     + function jQuery34108160883644340862_1582255906750() {}

十六 jQuery 的多库并存机制

因为 jQuery 引入页面以后, 向全局添加了两个名字
- 一个叫做 $
- 一个叫做 jQuery
- 万一有别的类库也起名叫做 jQuery 或者$ 怎么办
当我两个库都需要使用的时候
- 因为向全局暴露的名字一样, 就会发生冲突了
- 谁的文件引再后面, 谁的名字就占主要位置了
- 两个只能选择一个使用
jQuery 提供了一个方法
- 我可以不占用$ 或者 jQuery 这个名字
- noConflict()
- 语法: $.noConflict() 或者jQuery.noConflict()
- 当你执行了 noConflict() 以后, jQuery 就交出了$的控制权。
  jQuery向全局暴露的不在有$ 这个名字了。当你执行了noConflict(true) 以后, jQuery就交出了 $ 和jQuery 的控制权。
- 交出去以后, 我的 jQuery 就用不了

noConflict() 的返回值: 就是一个新的控制权
- 你只要接收一个返回值, 你定好的变量是什么,jQuery 的控制权就是什么

 // 交出 $ 的控制权// $.noConflict()// 交出 $ 和 jQuery 的控制权// $.noConflict(true)// 改变 jQuery 的控制权var $$ = $.noConflict(true)

十七 jQuery 的插件扩展机制

jQuery 还提供给我们了一个机制, 就是你可以向 jQuery 里面扩展一些方法
- 两个方法
  1. $.extend()
    - 扩展给 jQuery本身使用的
    - 语法:
      $.extend({ 你要扩展的方法名: function () {}, 你要扩展的方法名: function () {}, ... })
  - 使用的时候就是 $.你扩展的方法名()
  1. $.fn.extend() => $.extend($.fn, { 你扩展的方面名 })
    - 扩展给 jQuery 元素集合使用的
    - 语法 $.fn.extend({ 你要扩展的方法名: function () {}, 你要扩展的方法名: function () {}, ... })
    - 使用的时候就是 $(选择器).你扩展的方法名()
    - $('div').html()

      // 1. 扩展给 jQuery 本身//    jQuery 本身没有操作 cookie 的方法// $.extend({//   setCookie: function (key, value, expires) {//     // 写上设置 cookie 的方法//     if (expires) {//       var time = new Date()//       time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * expires)//       document.cookie = `${key}=${value};expires=${time}`//     } else {//       document.cookie = `${key}=${value}`//     }//   },//   getCookie: function (key) {//     // ...//   }// })// 使用我们扩展的方法去设置 cookie// $.setCookie('a', 100)// $.setCookie('b', 200, 10)// 2. 扩展给元素集合//    扩展一个全选的方法//    方法以执行, 就能让 input checkbox 变成选中状态或者不选中状态$.fn.extend({selectAll: function (type = true) {// type 就是你传递进来的选中或者不选中一个标志//   你不传递的时候, 我默认是 true, 你传递了就用你传递的// console.log(this) // 就是你调用的时候前面的哪个元素集合this.each(function (index, item) {// 让元素集合中的每一个 input 的 checked 属性为 trueitem.checked = type})// return 这个元素集合, 达到一个链式编程的效果return this}})$('button').click(() => {// 让所有 input 框变成选中状态console.log($('input').selectAll().attr('hello', 'world'))})

十八 jQuery 的拷贝对象问题

$.extend() 深拷贝与浅拷贝
传递一个对象的时候, 可以做到插件扩展机制
传递多个对象的时候, 可以将后面几个对象的内容复制到第一个对象里面
语法:
- $.extend(是否深拷贝, 对象1, 对象2, 对象3, ...)
- 是否深拷贝: 默认是 false, 可以不写
- 从对象2 开始, 后面所有对象的内容都会被拷贝到对象1 里面
- 再拷贝的时候, 如果有重复的 key, 那么以写在后面的为准(后来者居上)

十九 jQuery 的插件

基于 jQuery 使用的, 别人封装好的插件
我们拿来使用就可以了, 前提就是要有 jQuery
例子一个叫做 jquery-validate 的插件
- 专门用来做表单验证的
- 你输入的内容是不是符合规则
  1. 下载
  2. 引入文件
  3. 去复制粘贴

<!-- 引入文件 --><!-- 注意: 先引入 jQuery, 后引入 jquery-validate --><script src="./jquery/jquery.min.js"></script><!-- jquery-validate 这个文件依赖的 jquery --><script src="./jquery-validate/jquery.validate.min.js"></script><!-- 引入中文信息提示包, 必须在 jquery-validate 的后面 --><script src="./jquery-validate/localization/messages_zh.min.js"></script><script>

    // 选择到你要验证的表单的 form 标签//   执行 validate 方法//   {} 里面就写我们的验证规则$('#login').validate({// 你需要的验证规则rules: {// key 就是你要验证的哪个 input 框的 name 属性username: 'required', // 用户名必填password: { // 一个字段可以写多个验证方式required: true,minlength: 6, // 最少是六个maxlength: 12, // 最多十二个}},// 你自定义提示的文本内容messages: {// key 就是你验证的哪个 input 框的 name 属性username: '请输入用户名! ^_^',password: {required: '请输入密码!',minlength: '最少要输入 6 个字符噢!'}},// 表单的提交事件//    这个函数会在表单验证通过以后执行submitHandler: function (form) {// form 接收的就是你的 form 标签// console.log(form)// console.log('表单验证通过了, 我需要使用 ajax 去提交数据了')// 有一个 jQuery 的方法// serialize() 快速获取表单输入的数据//  $(form).serialize() 就能拿到这个 form 标签里面的表单数据// console.log($(form).serialize())  // username=admin&password=123456// 发送请求到后端$.post('./server/login.php', $(form).serialize(), res => {console.log(res)}, 'json')}})

jQuery超详细总结相关推荐

jQuery超详细入门教程
jquery其实总的来说东西不是很多期间发现一点问题就是界面中使用本地存储之后,刷新后虽然数据不会丢失,但是刷新会整个页面重新渲染,有些只想在修改数据之前加载的内容也会被重新加载. 然后是我jque ...
超详细的jQuery的 DOM操作，一篇就足够！
摘要:今天来和大家分享有关jQuery框架中DOM操作的相关技术,又是一个堪称DOM"全家桶"系列的讲解,建议收藏关注认真学习! 本文分享自华为云社区<[JQuery框架]超 ...
400 多行代码！超详细 Rasa 中文聊天机器人开发指南 | 原力计划
作者 | 无名之辈FTER 责编 | 夕颜出品 | 程序人生(ID:coder_life) 本文翻译自Rasa官方文档,并融合了自己的理解和项目实战,同时对文档中涉及到的技术点进行了一定程度的扩展, ...
Nginx实战部署常用功能演示(超详细版)，绝对给力~~~
前言上次分享了一些开发过程中常用的功能,但如果到真实环境中,其实还需要一些额外的配置,比如说跨域.缓存.配置SSL证书.高可用等,老规矩,还是挑几个平时比较常用的进行演示分享.上篇详见Nginx超详 ...
区块链DApp从零开始学 (二) | 超详细 DApp创建 | 发行代币token | 宠物领养
初学记录 · 欢迎交流区块链DApp从零开始学 (一) | DApp抓包区块链DApp从零开始学 (二) | 超详细 DApp创建 | 发行代币token |宠物领养区块链知识 (一) | 实例 ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（三）
续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作现在,我们需要再随机两个两个生成数字. 随机生成数字在这个游戏里会经常出现,用户移动一步,也会产 ...
超详细的实现上传文件功能教程，文件上传实现。
重要声明:本文章仅仅代表了作者个人对此观点的理解和表述.读者请查阅时持自己的意见进行讨论. 本文更新不及时,请到原文地址浏览:<超详细的实现上传文件功能教程,文件上传实现.>. 一.文件上 ...
react的超详细讲解
create-react-app 项目目录在HTML中使用react 1 2 3基础 React的注意事项模拟的React 和 render React组件函数组件类组件 React 的数据源 ...
环信WebIM 超详细教程01：点对点单聊
环信WebIM 超详细教程01:点对点单聊第一个单聊(点对点)Demo 前言一,准备工作:注册->登录->创建应用->创建应用用户二,搭建工程,实现简单的单聊(点对点)功能三 ...

jQuery超详细总结

jQuery超详细总结

文章目录

一 选择器

特殊选择器

二 筛选器

用在 jQuery 选择的元素后面

都是方法,对选择出来的元素进行二次筛选

三 文本操作

总结

四 元素类名操作

五 元素属性操作

在 H5 的标准下, 给了一个定义, 当你需要写自定义属性的时候，最好写成 data-xxx=“值”，当大家看到 data-xxx 的时候, 就知道这是一个自定义属性

六 元素样式操作

七 绑定事件

1. on()方法是专门用来绑定事件

2. one() 方法是专门用来绑定一个只能执行一次的方法

3. off() 方法是专门用来解绑一个元素的事件的

4. trigger() 方法是专门用来触发事件的方法

5. hover()

6. 常用事件

八 节点操作

1. 创建节点

2. 插入节点

3. 删除节点

4. 替换节点

5. 克隆节点

九 获取元素尺寸

尺寸: 元素的占地面积

三套方法, 四种使用方式

十 获取元素位置

1. offset()

2. position()

十一 获取卷去的尺寸（页面滚动条）

scrollTop()

scrollLeft()

十二 jQuery中的函数

ready() 事件

each() 方法

十三 jQuery中的动画

让元素出现不同的移动, 改变

标准动画

折叠动画

渐隐渐显动画

综合动画

停止动画

十四 jQuery发送ajax请求

jQuery 里面帮我们封装好了几个方法

专门用来发送 ajax 请求的

jQuery 发送一个 GET 请求

jQuery 发送一个 POST 请求

jQuery 的 $.ajax 方法

jQuery 的 ajax 全局钩子函数

十五 jQuery 发送一个 jsonp 请求

十六 jQuery 的多库并存机制

十七 jQuery 的插件扩展机制

十八 jQuery 的拷贝对象问题

十九 jQuery 的插件

jQuery超详细总结相关推荐

最新文章

热门文章

一选择器

二筛选器

三文本操作

四元素类名操作

五元素属性操作

六元素样式操作

七绑定事件

1. `on()`方法是专门用来绑定事件

2. `one()` 方法是专门用来绑定一个只能执行一次的方法

3. `off()` 方法是专门用来解绑一个元素的事件的

4. `trigger()` 方法是专门用来触发事件的方法

5. `hover()`

6. `常用事件`

八节点操作

九获取元素尺寸

十获取元素位置

1. `offset()`

2. `position()`

十一获取卷去的尺寸（页面滚动条）

`scrollTop()`

`scrollLeft()`

`ready()` 事件

`each()` 方法

`jQuery 发送一个 GET 请求`

`jQuery 发送一个 POST 请求`

`jQuery 的 $.ajax 方法`