前端培训-中级阶段(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 会淡出我们的视野。

相关文章
|
20天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
46 10
|
1天前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
22 7
|
1月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
31 3
|
3月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
46 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
3月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
28 2
|
3月前
|
前端开发 JavaScript
前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)
本文介绍了如何在前端通过不同的方法获取DOM元素,包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。
113 3
|
2月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
64 0
|
3月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
138 0
|
7月前
|
前端开发 JavaScript