今日份内容
attr()
、prop()
addClass()
、removeClass()
、toggleClass()
html()
、text()
、val()
offset()
、position()
css()
animate()
、stop()
、delay()
attr()
与 prop()
差异性,在之前的文章中就已经讲过了。这里说一下重点。
attr()
对应 attribute ,是标签的属性。如 href
,src
,id
,class
prop()
对应 properties ,是标签的状态(基本是Boolean类型)。如 checked
、disabled
addClass()
、removeClass()
、toggleClass()
用于操作标签的 class 属性,封装的一系列方法(对应原生 classList
)。
$('p').addClass('wrap')
会给所有的p标签增加一个 warp 的 class。如果已经有了,就不会重复操作。
$('p').removeClass('wrap')
会给所有的p标签移除 warp 的 class。如果没有,就不会操作。
$('p').toggleClass('wrap')
会给所有的p标签切换 warp 这个class。如果有,就删除。如果没有,就添加。
html()
、text()
、val()
- html() 对应 innerHTML
- text() 对应 innerText
- val() 对应 value
- 其实也可以用做 xss 防护。先用 text 写内容,然后用 html 读内容。
当然,还是建议,不要相信用户的输入。都用 text() 来写入内容。
offset()
、position()
- offset
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
- offset
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
css()
获取css值支持多种写法。
$("p").css("color");
$("p").css(["color","font-size"]);
设置css值也支持多种写法
$("p").css("color",'#0ff');
$("p").css({"color":'#c0c','font-size': '18px',backgroundColor: '#0c0'});
推荐使用键值对的方法。如果是有斜杠的,可以加引号,或者改成大写。
$("p").css('font-size',()=>50*Math.random()+'px');
随机字体大小。
其实也可以根据index来做渐进色彩等等。
animate()
、stop()
、delay()
- animate支持两种入参方式
a.(params,[speed],[easing],[fn] )
params: 一组包含作为动画属性和终值的样式属性和及其值的集合
speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing: 要使用的进度效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn: 在动画完成时执行的函数,每个元素执行一次。
b.(params,options)params: 一组包含作为动画属性和终值的样式属性和及其值的集合options: 动画的额外选项。如:
- speed - 设置动画的速度
- easing - 规定要使用的 easing 函数
- callback - 规定动画完成之后要执行的函数
- step - 规定动画的每一步完成之后要执行的函数
- queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
- specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数
- stop 用来暂停之前的动画
- delay 用来执行等待动作
总结
jQuery 系列到这里就结束了。jQuery内容不多,但是API都是经典。
当然,新的浏览器把一些常规操作都集成了。慢慢的 jQuery 会淡出我们的视野。