目录
jQuery帮我们解决了浏览器兼容问题
-
1.x 版本也兼容老版本浏览器
类操作
-
用jQuery来操作类名
-
方法
-
addClass
-
添加类
-
-
removeClass
-
删除类
-
-
toggleClass
-
切换类
-
-
hasClass
-
判断是否有某个类
-
-
案例:tab栏切换
显示和隐藏之动画
-
就是在
show
和hide
方法里传入一个动画时长,就有动画了,单位是毫秒 -
有个
toggle
切换显示和隐藏 -
不传没有动画
-
动画效果跟定位方向有关,显示动画就是从定位方向往外扩,隐藏动画就是缩小到定位的方向
-
详细参数
-
参数1: 动画时长
-
了解一下也可以传入字符串:'slow', 'normal', 'fast'
-
-
参数2:动画效果,只有两个选项: 'swing' 和 'linear' ,默认是 'swing'
-
用的少
-
-
参数3: 回调函数
-
当动画结束调用回调函数
-
-
以上三个参数都是可选的,也就是说可以都不传,也可以就传1个,或者2个,或3个一起
-
甚至还可以就写参数1和参数3,不写参数2
-
下滑显示和上滑隐藏动画
-
slideDown
-
下滑
-
-
slideUp
-
上滑
-
-
slideToggle
-
滑动切换
-
-
以上三个方法,默认都有动画效果,动画时长默认为0.25s
-
他们的都是共同的参数,参数跟 show 和 hide方法都是一样的
-
jQuery里面所有效果动画参数都是一样的
案例:下拉菜单
淡入淡出动画
-
也是显示和隐藏,只不过是以透明度的形式来显示和隐藏
-
方法
-
fadeIn
-
淡入
-
-
fadeOut
-
淡出
-
-
fadeToggle
-
淡出入
-
-
fadeTo
-
淡到
-
参数1:动画时长
-
参数2:淡入到多少透明度
-
参数3:动画效果
-
参数4:动画完成的回调函数
-
-
-
他们的参数跟show、hide是一样的,参数1:动画时长 参数2:动画效果 参数3:动画完成的回调函数
案例:京东轮播图
animate动画
-
我们上面学的动画都是跟显示和隐藏有关
-
如果我想用别的动画,就可以用animate来指定动画效果,例如放大、缩小、移动
-
用法:
jq对象.animate({ 要动画改变的属性值 },动画时长, 动画效果, 动画完成的回调函数)
-
animate回调函数里的this
-
谁调用这个animate,回调函数里的this就是谁
-
this永远都是DOM对象
-
删除元素
-
语法:
jq对象.remove()
案例: 360开机动画
复习上午内容
-
jQuery的1.x版本解决了老版本浏览器的兼容问题
-
类操作
-
jq对象.addClass()
-
添加类,如果要加多个,在内容里写空格
-
-
jq对象.removeClass()
-
删除类
-
-
jq对象.toggleClass()
-
切换类
-
-
jq对象.hasClass()
-
判断是否有某个类,有得到true,没有得到false
-
-
-
动画相关
-
显示和隐藏:
-
show和hide
-
默认不传参数没有动画
-
参数1:动画时长
-
参数2:动画效果
-
参数3:动画完成的回调函数
-
这三个参数都是可选的
-
-
下滑和上滑
-
slideDown和slideUp
-
默认不传参数也有动画效果
-
它也有三个参数,跟show和hide一样
-
-
淡入和淡出
-
fadeIn
-
fadeOut
-
fadeToggle
-
fadeTo
-
参数1:动画时长
-
参数2:淡入到多少透明度
-
参数3:动画效果
-
参数4:回调函数
-
-
-
animate动画
-
可以设置自己想设置的属性加动画
-
参数1:对象,对象里写想用动画效果变到的属性
-
参数2:动画时长
-
参数3:动画效果
-
参数4:回调函数
-
-
动画队列及停止动画
-
动画队列:
-
把要执行的动画都加在一个队列里,先加的先执行,后加的后执行
-
每个元素自己有一个自己的 动画队列, 跟别的元素不冲突
-
-
停止动画:
-
jq对象.stop()
-
参数1: 是否清空动画队列,默认为false
-
为true代表清空,也就相当于把后面的动画也停(停止所有动画)
-
为false代表只停当前动画,继续后面的动画
-
-
参数2:
-
是否立即到当前动画的终点
-
默认为false,代表不到,改成true代表立即到终点
-
-
-
动画延迟
-
delay
-
传入延迟时间,单位是毫秒
-
它延迟的是后面的动画队列
-
显式迭代
-
隐式迭代:
-
jQuery内部会自动帮我们遍历每个元素设置为相同的属性,这就叫隐式迭代
-
-
显式迭代:
-
就是自己写代码来遍历找到的每个元素
-
语法
jQuery对象.each(function (下标, 被遍历的dom元素) { })
-
2个形参的名字可以随便写,建议叫 index 和 item
-
-
案例:手风琴效果-王者荣耀版
jQuery创建元素与添加
-
$('元素')
-
html怎么写,$里面就怎么写
-
例:
let $a = $('<a href="javascript:">点我啊</a>')
-
-
添加子元素到最后
-
JQ对象.append()
-
可以传入一个jq对象,甚至还可以传入html标签,那样它会自动把html标签解析出来并添加
-
相当于添加元素时,append()跟html()用法是一样的,但是append不会覆盖原来的内容,html会覆盖
-
-
子元素加到某个父元素上(子元素找爹)
-
jq对象.appendTo( 父元素 )
-
还可以传入选择器,选择器找到多少个,就加到多少个身上
-
案例:表格生成数据
添加元素的几种方式
-
append:
-
父加子,加入到最后
-
传jQuery对象或者标签
-
-
appendTo:
-
子加到父,加到最后
-
传入jQuery对象,也可以直接传选择器
-
-
prepend:
-
父加子,加入到最前
-
-
prependTo
-
子加到父,加到最前
-
行内属性 - multiple
-
multiple:多选的属性
-
写上就有效果,不选就没有效果