jQuery超详细总结
文章目录
- jQuery 是一个前端库,也是一个方法库
- 他里面封装着一些列的方法供我们使用
- 我们常用的一些方法它里面都有,我们可以直接拿来使用就行了
- jQuery 之所以好用,很多人愿意使用,是因为他的几个优点太强大了
- 优质的选择器和筛选器
- 好用的隐式迭代
- 强大的链式编程
- 因为这些东西的出现,很多时候我们要做的事情被 “一行代码解决”
- 接下来我们就来认识一下 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()
方法是专门用来解绑一个元素的事件的
- 使用方式
off('事件类型')
: 给该事件类型的所有事件处理函数解绑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
三套方法, 四种使用方式
- 这些方法都是不考虑盒模型的状态(不管是什么型, 都是固定区域)
width()
和height()
- 获取元素的 内容 区域的尺寸
innerWidth()
和innerHeight()
- 获取元素的 内容 + padding 区域的尺寸
outerWidth()
和outerHeight()
- 获取元素的 内容 + padding + border 区域的尺寸
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, ...) 默认是 GET
data: '', // => 携带到后端的参数
dataType: '', // => 期望后端返回的数据类型, 默认不解析
async: true, // => 是否异步, 默认是 true
success: function () {}, // => 成功的回调
error: function () {}, // => 失败的回调
timeout: 数字, // 单位是 ms, 超时时间(超过你写的时间没有响应, 那么就算失败)
cache: true, // 是否缓存, 默认是 true
context: 上下文, // 改变回调函数里面的 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() 之前触发
ajaxSuccess()
- 每一个 ajax 再成功的时候触发
- 只要有一个 ajax 成功了就会触发
ajaxError()
- 每一个 ajax 再失败的时候触发
- 只要有一个 ajax 失败了就会触发
ajaxComplete()
- 每一个 ajax 完成的时候触发
- 只要有一个 ajax 完成了, 不管成功还是失败, 都会触发
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, 默认值是 callbackcache: 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 里面扩展一些方法
-
两个方法
$.extend()
- 扩展给
jQuery本身
使用的 - 语法:
$.extend({ 你要扩展的方法名: function () {}, 你要扩展的方法名: function () {}, ... })
- 扩展给
- 使用的时候就是 $.你扩展的方法名()
$.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 属性为 true
item.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 的插件
- 专门用来做表单验证的
- 你输入的内容是不是符合规则
- 下载
- 引入文件
- 去复制粘贴
<!-- 引入文件 -->
<!-- 注意: 先引入 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')
}
})