资讯专栏INFORMATION COLUMN

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

bang590 / 3430人阅读

摘要:前端最基础的就是。对应,是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。

前端最基础的就是 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类型)。如 checkeddisabled

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 速查地址

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114936.html

相关文章

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

    摘要:前端最基础的就是。对应,是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,...

    everfly 评论0 收藏0
  • 前端培训-中级阶段8)- jQuery元素属性样式操作2019-08-01

    摘要:前端最基础的就是。对应,是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,...

    james 评论0 收藏0
  • 前端培训-中级阶段(11、12)- 跨域请求原理以及实现(2019-08-22

    摘要:上节我们讲了同源策略,这节我们讲讲如何跨域。当这些从的脚本执行出错,因为违背了同源策略为了保证用户信息不被泄露,错误信息不会显示出来,取而代之只会返回一个。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每...

    binaryTree 评论0 收藏0
  • 前端培训-中级阶段(10)- 同源策略(2019-08-15

    摘要:同源策略是什么同源策略是浏览器的一个安全功能,不同源的数据禁止访问。或许你可以说验证,在浏览器没有同源策略的情况下这些都可以绕过去。总结同源策略是蛮好的,防御了大部分的攻击。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思...

    heartFollower 评论0 收藏0
  • 前端培训-中级阶段(9)- 原生Ajax的运行原理与实现(2019-08-08

    摘要:前端最基础的就是。的原理浏览器发送请求,服务器给出响应。保持之前的界面不变化。的核心创建一个对象,用于发起请求设置为请求,请求发送请求。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。 ajax ...

    anonymoussf 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<