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

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。最近调研了一下 vue-element-admin,用来做了个小项目。发现自己需要学习的地方还有很多啊。

今日份内容



  1. attr()prop()


  1. addClass()removeClass()toggleClass()


  1. html()text()val()


  1. offset()position()


  1. css()


  1. animate()stop()delay()


attr()prop()


差异性,在之前的文章中就已经讲过了。这里说一下重点。


attr() 对应 attribute ,是标签的属性。如 href,src,id,class


prop() 对应 properties ,是标签的状态(基本是Boolean类型)。如 checkeddisabled


addClass()removeClass()toggleClass()


用于操作标签的 class 属性,封装的一系列方法(对应原生 classList)。


  1. $('p').addClass('wrap') 会给所有的p标签增加一个 warp 的 class。如果已经有了,就不会重复操作。


  1. $('p').removeClass('wrap') 会给所有的p标签移除 warp 的 class。如果没有,就不会操作。


  1. $('p').toggleClass('wrap') 会给所有的p标签切换 warp 这个class。如果有,就删除。如果没有,就添加。


html()text()val()


也在之前讲过了


  1. html() 对应 innerHTML


  1. text() 对应 innerText


  1. val() 对应 value


  1. 其实也可以用做 xss 防护。先用 text 写内容,然后用 html 读内容。
    当然,还是建议,不要相信用户的输入。都用 text() 来写入内容。


offset()position()


  1. offset
    获取匹配元素在当前视口的相对偏移。
    返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。


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


css()


获取css值支持多种写法。


  1. $("p").css("color");


22.png


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


21.png


设置css值也支持多种写法


  1. $("p").css("color",'#0ff');


  1. $("p").css({"color":'#c0c','font-size': '18px',backgroundColor: '#0c0'});


推荐使用键值对的方法。如果是有斜杠的,可以加引号,或者改成大写。


  1. $("p").css('font-size',()=>50*Math.random()+'px'); 随机字体大小。


其实也可以根据index来做渐进色彩等等。


bVbuQui.webp.jpg


animate()stop()delay()


  1. animate支持两种入参方式


a.(params,[speed],[easing],[fn] )
params: 一组包含作为动画属性和终值的样式属性和及其值的集合


speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)


easing: 要使用的进度效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn: 在动画完成时执行的函数,每个元素执行一次。


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


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


  1. stop 用来暂停之前的动画


  1. delay 用来执行等待动作


总结



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


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

相关文章
|
1月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
43 10
|
30天前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
280 8
|
30天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
149 1
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
33 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
43 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
2月前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
65 1
前端基础(十四)_隐藏元素的方法
|
2月前
|
前端开发 JavaScript
前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)
本文介绍了如何在前端通过不同的方法获取DOM元素,包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。
93 3
|
2月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
62 1
|
2月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
85 1
|
2月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
43 0
前端基础(十)_Dom自定义属性(带案例)