前端培训中级阶段8-jQuery元素属性样式操作20190801期

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

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

今日份内容

1. attr()、prop()
2. addClass()、removeClass()、toggleClass()
3. html()、text()、val()
4. offset()、position()
5. css()
6. animate()、stop()、delay()

attr() 与 prop()

差异性，在之前的文章中就已经讲过了。这里说一下重点。
attr() 对应 attribute，是标签的属性。如 href,src,id,class
prop() 对应 properties，是标签的状态（基本是 Boolean 类型）。如 checked、disabled

addClass()、removeClass()、toggleClass()

用于操作标签的 class 属性，封装的一系列方法（对应原生 classList）。

1. $('p').addClass('wrap') 会给所有的 p 标签增加一个 warp 的 class。如果已经有了，就不会重复操作。
2. $('p').removeClass('wrap') 会给所有的 p 标签移除 warp 的 class。如果没有，就不会操作。
3. $('p').toggleClass('wrap') 会给所有的 p 标签切换 warp 这个 class。如果有，就删除。如果没有，就添加。

html()、text()、val()

也在之前讲过了。

1. html() 对应 innerHTML
2. text() 对应 innerText
3. val() 对应 value
4. 其实也可以用做 xss 防护。先用 text 写内容，然后用 html 读内容。
   当然，还是建议，不要相信用户的输入。都用 text() 来写入内容。

offset()、position()

1. offset
   获取匹配元素在 当前视口的相对偏移 。
   返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
2. offset
   获取匹配元素相对父元素的偏移。
   返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

css()

获取 css 值支持多种写法。

1. $("p").css("color");
   
2. $("p").css(["color","font-size"]);
   

设置 css 值也支持多种写法

1. $("p").css("color",'#0ff');
2. $("p").css({"color":'#c0c','font-size': '18px',backgroundColor: '#0c0'});
   推荐使用键值对的方法。如果是有斜杠的，可以加引号，或者改成大写。
3. $("p").css('font-size',()=>50*Math.random()+'px'); 随机字体大小。
   其实也可以根据 index 来做渐进色彩等等。。
   

animate()、stop()、delay()

1. animate 支持两种入参方式

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

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

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

总结

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

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

微信公众号：前端 linong

初级阶段文章目录

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

中级阶段文章目录

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

资料

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