jQuery
一、认识
是一个大型的开源类库,封装的都是 DOM 相关的操作
特点:
+ 选择器
+ 链式编程
+ 隐式迭代
优点:全兼容
使用方法:
- 下载一个 jQuery.js 文件 https://jquery.com
- 在页面引入
+ 直接引入 jQuery.js
- 开始使用
+ jQuery.js 中有 window. jQuery = window.$ = jQuery
+ 调用 jQuery 时,使用名字是 $ 或者 jQuery
- 关于$ ()
+ $('选择器'):获取元素
+ $('DOM结构'):把 DOM 结构转化为 jQuery 元素集合
+ $('html结构字符串'):创建节点
+ $(function(){}):jQuery 的入口函数
二、 jQuery获取元素
- 基本选择器
+ $('选择器')
css 里面的选择器,符合 CSS 语法
不管用什么选择器获取到的一定是个 jQuery 的元素集合
- 特殊选择器
+ $('选择器 : first') 第一个选择器
+ $('选择器 : last') 最后一个选择器
+ $('选择器 : eq(索引)')获取索引的第几个
+ $('选择器 : odd')获取索引的奇数个
+ $('选择器 : even') 获取索引的偶数个
- jQuery 的筛选器
语法:$('选择器').first()
目的:为了链式编程
+ 普通选择
first() 获取到选择器内的第一个
last() 获取到选择器内的最后一个
eq(索引) 获取到选择器内的索引第几个
+ 兄弟关系
siblings() 获取到所有的兄弟元素,不包括自己
next() 获取下一个兄弟元素
nextAll() 获取到后面的所有的兄弟元素
nextAll('选择器') 获取到后面的所有的兄弟元素中类名是选择器名字
nextUntil() 获取到后面的所有的兄弟元素
nextUntil('选择器') 获取到后面的所有的兄弟元素直到选择器名字为止,不包含选择器
prev() 获取到上一个兄弟元素
prevAll() 获取到前面的所有的兄弟元素
prevAll('选择器') 获取到前面的所有的兄弟元素中类名是选择器名字
prevUntil() 获取到前面的所有的兄弟元素
prevUntil('选择器') 获取到前面的所有的兄弟元素直到选择器名字为止,不包含选择器
+ 向父级关系
parent() 获取到父元素
parents() 逐层获取到所有的结构父级,直到 html 为止
parents('选择器') 获取到逐层的父级结构中满足选择器名字的元素
parentsUntil() 逐层获取到所有的结构父级,直到 html 为止
parentsUntil('选择器') 逐层获取到所有的结构父级,直到 选择器元素 为止
+ 后代元素
find('选择器') 查找所有后代元素中符合选择器要求的元素
index() 返回值:是该元素在其 html 结构(兄弟关系)中的索引位置
三、jQuery操作 css 样式
+ 获取 css 样式
$('选择器').css('样式名')
返回值: 该样式的值
+ 设置 css 样式
$('选择器').css('样式名','样式值')
作用: 给该元素设置该样式的值
+ 批量设置样式
$('选择器').css({
样式名:样式值 ,
样式名:样式值 ,
样式名:样式值 ,
样式名:样式值
})
样式与样式之间用 逗号 隔开
四、jQuery操作元素类名
+ 添加类名
$('选择器').addClass('类名')
+ 删除类名
$('选择器').removeClass('类名')
+ 切换类名
$('选择器').toggleClass('类名')
作用:如果原来有此类名,就删除此类名,原来没有此类名,就加上此类名
五、jQuery事件绑定
- on() 方法
+ $('选择器').on(事件类型,事件处理函数)
+ $('选择器').on(事件类型,选择器,事件处理函数)
=> 用来实现事件委托
=> 元素集合身上绑定事件,但只有满足选择器要求的元素身上才触发事件
+ $('选择器').on(事件类型,复杂数据类型,事件处理函数)
=> 复杂数据类型是给事件处理函数传递的参数
=> 在事件处理函数内通过 时间对象.data 获取
+ $('选择器').on(事件类型,选择器,数据,事件处理函数)
=> 事件委托和传递数据
+ $('选择器').on(事件类型1:事件处理函数1,事件类型2:事件处理函数2...)
=> 批量绑定事件
=> 不能进行事件委托和传递数据
- one() 方法
+ 和 on 方法使用方法一模一样
+ 但 one() 事件只能触发一次
- off() 方法
+ $('选择器').off(事件类型)
=> 把该事件类型的所有事件处理函数全部取消
+ $('选择器').off(事件类型,事件处理函数)
=> 把该事件类型的某一个事件处理函数取消
- trigger() 方法
+ $('选择器').trigger(事件类型)
=> 直接触发事件
- 常用事件函数
+ $('选择器').事件类型(事件处理函数)
+ $('选择器').事件类型(数据,事件处理函数)
- 唯一的特殊事件
+ hover 事件
$('选择器').hover(函数1,函数2)
=> 函数1 在鼠标移入的时候触发
=> 函数2 在鼠标移出的时候触发
=> 只写一个函数,移入移出都触发此函数
六、jQuery操作元素属性
- attr() 和 removeAttr() 一般操作自定义属性
+ attr() 获取
=> $('选择器').attr('属性名')
=> 返回值:获取到对应属性的值
=> 不能获取到prop()设置的自定义属性的值
+ attr() 设置
=> $('选择器').attr('属性名',属性值)
=> 设置对应属性的值
+ removeAttr()
=> $('选择器').removAttr('属性名')
=> 删除该元素内的所有元素的某一个属性,但是不能删除prop()设置的自定义属性的值
- prop() 和 removeProp() 一般操作原生属性
+ attr() 获取
=> $('选择器').prop('属性名')
=> 返回值:获取到对应原生属性的值,不能获取到自定义属性,除非这个自定义属性由prop()设置的
+ prop() 设置
=> $('选择器').prop('属性名',属性值)
=> 设置对应属性的值,如果是自定义属性,不会显示在标签身上
+ removeProp()
=> $('选择器').removProp('属性名')
=> 不能删除原生属性,只能删除自定义属性
七、jQuery操作元素内容
- html() 等价于 innerHTML
+ html() 获取
$('选择器').html()
=> 获取到该元素的所有内容,以字符串的形式返回
+ html() 设置
$('选择器').html('内容')
=> 设置该元素的所有内容,完全翻盖式的设置
- text() 等价于 innerText
+ text() 获取
$('选择器').text()
=> 获取到该元素的 文本内容,以字符串的形式返回
+ text() 设置
$('选择器').text('内容')
=> 设置该元素的所有内容,完全翻盖式的设置
- val() 等价于 value
+ val() 获取
$('选择器').val()
=> 获取到该表单的 value 值
+ val() 设置
$('选择器').val('内容')
=> 设置该表单的 value 值,完全翻盖式的设置
- 追加内容的方法
先获取到开始的内容,在加上新的内容,在给元素设置总的内容
八、jQuery获取元素尺寸
-
width() 和 height()
+ $('选择器').width() + $('选择器').height() => 得到元素的 内容 区域
-
innerWidth() 和 innerHeight()
+ $('选择器').innerWidth() + $('选择器').innerHeight() => 得到元素的 内容 + padding 区域
-
outerWidtn() 和 outerHeight()
+ $('选择器').outerWidtn() + $('选择器').outerHeight() => 得到元素的 内容 + padding + border 区域
-
outerWidtn( true ) 和 outerHeight( true )
+ $('选择器').outerWidtn( true ) + $('选择器').outerHeight( true ) => 得到元素的 内容 + padding + border + margin 区域
-
offset( )
+ $('选择器').offset() => 获取元素相对于左上角屏幕的偏移量 => 返回值:是一个对象数据类型{ top:xxx,left:xxx } + $('选择器').offset({ top:xxx,left:xxx }) => 绝对设置 元素 相对于页面左上角的距离
-
position()
+ $('选择器').position() => 只能读取元素的绝对定位位置 => 返回值:是一个对象数据类型{ top:xxx,left:xxx }
九、jQuery操作元素节点
1.创建元素节点
+ $('html结构字符串') 如: $('<div></div>')
2.插入元素节点
内部插入 - 父子关系的插入
+ append()
语法:父节点.append(子节点)
作用:把该子节点插入到父节点的最后面的位置
+ appendTo()
语法:子节点.appendTo(父节点)
作用:把该子节点插入到父节点的最后面的位置
+ prepend()
语法:父节点.prepend(子节点)
作用:该子节点插入到父节点的最前面的位置
+ prependTo()
语法:子节点.prependTo(父节点)
作用:该子节点插入到父节点的最前面的位置
外部插入 - 兄弟关系的插入
+ insertBefore()
语法:要插入的节点.insertBefore(已存在的节点)
作用:把 要插入的节点 放在 已存在的节点 的上一个兄弟元素的位置
+ before()
语法:已存在的节点.insertBefore(要插入的节点)
作用:把 要插入的节点 放在 已存在的节点 的上一个兄弟元素的位置
+ insertAfter()
语法:要插入的节点.insertAfter(已存在的节点)
作用:把 要插入的节点 放在 已存在的节点 的下一个兄弟元素的位置
+ after()
语法:已存在的节点.insertAfter(要插入的节点)
作用:把 要插入的节点 放在 已存在的节点 的下一个兄弟元素的位置
3.删除节点
+ remove() 把自己删除
语法:$('选择器').remove()
+ empty() 把自己变成空标签,删除全部的后代元素
语法:$('选择器').empty()
4.替换节点
+ replaceAll()
语法:换上节点.replaceAll(换下的节点)
+ replaceWith()
语法:换下节点.replaceAll(换上的节点)
5.克隆节点
+ clone()
语法:节点.clone(参数1,参数2)
参数1:表示是否克隆该元素本身的事件,选填,默认是false
参数2:表示是否克隆该元素后代的事件,选填,默认跟随参数1
=> 当参数1 为 false时,参数2 没有意义
十、jQuery的动画
1.基础动画
+ show() 显示
$('选择器').show(参数1,参数2,参数3)
参数1:运动时间,单位是 ms
参数2:运动曲线,linear 匀速运动等
参数3:运动结束的回调函数
+ hide() 隐藏
$('选择器').hide(参数1,参数2,参数3)
参数1:运动时间,单位是 ms
参数2:运动曲线,linear 匀速运动等
参数3:运动结束的回调函数
+ toggle() 切换
$('选择器').toggle(参数1,参数2,参数3)
参数1:运动时间,单位是 ms
参数2:运动曲线,linear 匀速运动等
参数3:运动结束的回调函数
2.折叠动画
+ slideDown() 下拉显示
$('选择器').slideDown(参数1,参数2,参数3)
参数1:运动时间,单位是 ms
参数2:运动曲线,linear 匀速运动等
参数3:运动结束的回调函数
+ slideUp() 上拉隐藏
$('选择器').slideUp(参数1,参数2,参数3)
参数1:运动时间,单位是 ms
参数2:运动曲线,linear 匀速运动等
参数3:运动结束的回调函数
+ slideToggle() 切换显示和隐藏
$('选择器').slideToggle(参数1,参数2,参数3)
参数1:运动时间,单位是 ms
参数2:运动曲线,linear 匀速运动等
参数3:运动结束的回调函数
3.淡入淡出动画
+ fadeIn() 淡入
$('选择器').fadeIn(参数1,参数2,参数3)
参数1:运动时间,单位是 ms
参数2:运动曲线,linear 匀速等
参数3:运动结束的回调函数
+ fadeOut() 淡出
$('选择器').fadeOut(参数1,参数2,参数3)
参数1:运动时间,单位是 ms
参数2:运动曲线,linear 匀速等
参数3:运动结束的回调函数
+ fadeToggle() 切换
$('选择器').fadeToggle(参数1,参数2,参数3)
参数1:运动时间,单位是 ms
参数2:运动曲线,linear 匀速等
参数3:运动结束的回调函数
+ fadeTo()
$('选择器').fadeTo(参数1,参数2,参数3,参数4)
参数1:运动时间,单位是 ms
参数2:指定透明度
参数3:运动曲线,linear 匀速等
参数4:运动结束的回调函数
4.综合动画(运动函数)
什么样式都能运动,但是 颜色变化 和 2D到3D 变化 不能实现
+ animate()
$('选择器').animate(参数1,参数2,参数3,参数4)
参数1:对象数据类型,运动的样式
参数2:运动的时间,单位 ms
参数3:运动曲线,linear 匀速等
参数4:运动结束的回调函数
5.运动结束
当给一个元素添加动画时,都会在前面书写一次运动结束函数
+ stop() 动画直接停止当前位置
$('选择器').stop()
+ finish() 动画直接去到动画结束位置
$('选择器').finish()
十一、jQuery 发送 ajax 请求
- 发送 ajax 请求
语法: $.ajax({ 本次请求的配置参数 })
url: 必填,表示请求的地址
method: 选填,表示请求的方式,默认是GET
data: 选填,表示携带给后面的参数,默认是 空字符串
async: 选填,表示是否一部,默认是 true
dataType: 选填,表示是否解析后端返回的数据,默认是 不解析
success: 选填,表示成功的回调函数function()
error: 选填,表示请求失败、解析失败的函数 function(xhr,err,info){
xhr: jquery 封装的 ajax 对象
err: 错误信息
info: 错误信息的描述
}
timeout: 选填,表示请求超过这个时间还没得到响应就返回请求失败,单位 ms ,默认没有
cache: 选填,表示是否缓存,默认是 true 缓存,只缓存 GET 缓存
context: 选填,表示回调函数内的 this 指向
headers: 选填,默认没有,里面书写请求头内容,值是一个对象数据类型
- 专门发送 GET 请求的方法
$.get(请求地址,携带参数,成功的回调,是否解析结果)
- 发送 jsonp请求
语法: $.ajax()
+ 必须把 dataType 写成 jsonp
+ cache 选项默认是 false
+ jsonp: 表示给后端传递回调函数名的字段,默认是 callback
+ jsonpcallback: 表示函数名,默认是 jquery 自己组装的名字
- jQuery 内的全局 ajax 生命周期函数
请求开始
+ 语法: $(window).ajaxStart(function(){})
+ 时机: 同一个作用域下的第一个 ajax 发送的时候执行
发送之前
+ 语法: $(window).ajaxSend(function(){})
+ 时机: 会在每一个请求发送出去( xhr.send() )之前执行
成功之后
+ 语法: $(window).ajaxSuccess(function(){})
+ 时机: 会在每一个请求成功之后执行
失败之后
+ 语法: $(window).ajaxError(function(){})
+ 时机: 会在每一个请求失败之后执行
完成之后
+ 语法: $(window).ajaxComplete(function(){})
+ 时机: 会在每一个请求完成之后执行,不管成功与否
请求结束
+ 语法: $(window).ajaxStop(function(){})
+ 时机: 同一个作用域下的最后一个 ajax 完成以后执行
十二、 jQuery 实现深浅拷贝
- 浅拷贝
+ $.extend(对象1,对象2,对象3)
把 对象2 及后面的内容进行 浅 拷贝到 对象1 中
- 深拷贝
+ $.extend(true,对象1,对象2,对象3)
把 对象2 及后面的内容进行 深 拷贝到 对象1 中
十三、 jQuery 的多库并存
当我们引入了别的框架插件等第三方内容也是使用 $ 和 jQuery 名字时
应该将 jQuery 引入在最后面
通过 jQuery 的 语法来还原 $ 和 jQuery
- 还原 $
作用:让出 $ 这个变量的控制权
语法: $.noConflict()
- 还原 $ 和 jQuery
作用:让出 $ 和 jQuery 变量的控制权
语法: $.noConflict(true)
3.定义新的控制权
直接定义一个参数接受 $.noConflict() 的返回值
如: $$ = $.noConflict() 此时 $$ 就是新的控制权
十四、 jQuery 的入口函数
语法: $(window).ready(function(){})
注意:会在页面的 DOM 结构加载完毕后执行
简写: $(function(){})
十五、 jQuery 的扩展机制
- jQuery 自己本身的方法
不需要依赖 DOM 来执行的方法 $.xxx()
扩展语法: $.extend({
方法名:函数,
...
})
使用: $.方法名()
- jQuery 原型上的方法
需要依赖 DOM 来执行的方法 $().xxx()
扩展语法: $.fn.extend({
方法名:函数,
...
})
扩展语法: $.extend($fn,{方法名:函数,...})
使用: $().方法名()
注意:自己扩展的方法没有进行 隐式迭代
解决:this 就是 jQuery 获取到的元素集合
可以在自己扩展函数里面加一个 遍历函数
this.each((index.item)=>{
.....
})
就可以进行 隐式迭代
注意:自己扩展的方法如果没有返回一个 jQuery 的元素集合就没法使用链式编程
解决:可以在自己扩展函数里面加一个 return this 即可达到链式编程