2020-3-7 前端达人
jQuery超详细总结
文章目录
jQuery超详细总结
一 选择器
特殊选择器
二 筛选器
用在 jQuery 选择的元素后面
都是方法,对选择出来的元素进行二次筛选
三 文本操作
总结
四 元素类名操作
五 元素属性操作
在 H5 的标准下, 给了一个定义, 当你需要写自定义属性的时候，最好写成 data-xxx="值"，当大家看到 data-xxx 的时候, 就知道这是一个自定义属性
六 元素样式操作
七 绑定事件
on()方法是专门用来绑定事件one() 方法是专门用来绑定一个只能执行一次的方法off() 方法是专门用来解绑一个元素的事件的trigger() 方法是专门用来触发事件的方法hover()常用事件offset()position()scrollTop()scrollLeft()ready() 事件each() 方法jQuery 发送一个 GET 请求jQuery 发送一个 POST 请求jQuery 的 $.ajax 方法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 帮你解析响应体
$.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, 默认值是 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 里面扩展一些方法
两个方法
$.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')
}
})
————————————————