前端最基础的就是 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 函数
- (params,[speed],[easing],[fn] )
- 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期)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。