前端培训-中级阶段（8）- jQuery元素属性样式操作（2019-08-01期）

Jul 9, 2019

思否

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

好久没有更文，有没有人想我呀。我没有摸鱼，最近调研了一下 vue-element-admin，用来做了个小项目。发现自己需要学习的地方还有很多啊。

今日份内容

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支持两种入参方式

(params,[speed],[easing],[fn] ) params: 一组包含作为动画属性和终值的样式属性和及其值的集合 speed: 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) easing: 要使用的进度效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”. fn: 在动画完成时执行的函数，每个元素执行一次。

(params,options) params: 一组包含作为动画属性和终值的样式属性和及其值的集合 options: 动画的额外选项。如：

speed - 设置动画的速度

easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
stop 用来暂停之前的动画
delay 用来执行等待动作

总结

jQuery 系列到这里就结束了。jQuery内容不多，但是API都是经典。

当然，新的浏览器把一些常规操作都集成了。慢慢的 jQuery 会淡出我们的视野。

微信公众号：前端linong

初级阶段文章目录

前端培训-初级阶段（17） - 数据存储（cookie、session、stroage）
前端培训-初级阶段（13） - 正则表达式
前端培训-初级阶段（13） - 类、模块、继承
前端培训-初级阶段（13） - ECMAScript （内置对象、函数）
前端培训-初级阶段（13） - ECMAScript （语法、变量、值、类型、运算符、语句）
前端培训-初级阶段（13、18）
前端培训-初级阶段（9 -12）
前端培训-初级阶段（5 - 8）
前端培训-初级阶段（1 - 4）

中级阶段文章目录

前端培训-中级阶段（2） - 事件(event) 事件冒泡、捕获 - （2019-06-20期）
前端培训-中级阶段（3） - DOM 文档对象模型（2019-06-27期）
前端培训-中级阶段（4）- BOM 浏览器对象模型（2019-07-04期）
前端培训-中级阶段（5）- jQuery的概念与基本使用（2019-07-11期）
前端培训-中级阶段（6）- jQuery元素节点操作（2019-07-18期）
前端培训-中级阶段（7）- jQuery的事件绑定链式操作及原理（2019-07-25期）

资料

前端培训目录、前端培训规划、前端培训计划
jQuery 速查地址

原文：SegmentFault