【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)

    开始入应用环节,js的学习开始难起来了qwq继续加油啊啊啊!!!   

  第二天的内容分真的太多了T^T,所以分成了两篇orz  

 写着写着就到10.24了hhh祝各位程序员节快乐~!

来源:JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts

目录

※※ 使用 className 修改样式属性

​编辑

※※※※ 样式案例 —— 密码框

※※ 小结

※※ 作业 —— 开关灯

--------------------------------------------以下是第二天的--------------------------------------------------​编辑

※※ 排他思想(算法)

 ※※※※ 排他案例 —— 百度换肤

※※※※ 表格案例 —— 隔行变色

※※※※ 表单案例 —— 取消全选

※※ 自定义属性值的操作

※※※※ 自定义案例 —— tab 栏切换 


※※ 使用 className 修改样式属性

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第1张图片

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第2张图片

※※※※ 样式案例 —— 密码框

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第3张图片

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第4张图片

我写的:





    
    
    
    Document
    



    

请输入6~16位密码

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第5张图片

pink的: 





    
    
    
    Document
    



    

请输入6~16位密码

※※ 小结

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第6张图片

※※ 作业 —— 开关灯





    
    
    
    Document
    



    
    

--------------------------------------------以下是第二天的--------------------------------------------------【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第7张图片

本篇只写了这六个,剩下的戳这里 → 还没写完orz

※※ 排他思想(算法)

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第8张图片





    
    
    
    Document




    

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第9张图片

 ※※※※ 排他案例 —— 百度换肤

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第10张图片

 我的:

PS.图片直接用了老师的素材





    
    
    
    Document




    

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第11张图片

pink的:





    
    
    
    Document
    



    

※※※※ 表格案例 —— 隔行变色

忘记表格内容的戳这里!→ 直接点目录里 IV.常用标签 里的 ⑧表格标签 吼!

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第12张图片

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第13张图片我的:





    
    
    
    Document




    
111 222 333 444 555
1 2 3 4 5
11 22 33 44 55
111 222 333 444 555

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第14张图片

pink的: 





    
    
    
    Document
    



    
代码 名称 最新公布净值 累计净值 前单位净值 净值增长率
003526 农银金穗3个月定期开放债券 1.075 1.079 1.074 +0.047%
003526 农银金穗3个月定期开放债券 1.075 1.079 1.074 +0.047%
003526 农银金穗3个月定期开放债券 1.075 1.079 1.074 +0.047%
003526 农银金穗3个月定期开放债券 1.075 1.079 1.074 +0.047%
003526 农银金穗3个月定期开放债券 1.075 1.079 1.074 +0.047%
003526 农银金穗3个月定期开放债券 1.075 1.079 1.074 +0.047%

※※※※ 表单案例 —— 取消全选

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第15张图片

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第16张图片

我的:





    
    
    
    Document




    
点击 按钮 实现 全选
2 3 4 5
22 33 44 55
222 333 444 555
便

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第17张图片

pink的:





    
    
    




    
商品 价钱
iPhone8 8000
iPad Pro 5000
iPad Air 2000
Apple Watch 2000

※※ 自定义属性值的操作

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第18张图片

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第19张图片

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第20张图片

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第21张图片

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第22张图片

 

※※※※ 自定义案例 —— tab 栏切换 

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第23张图片

【web】JavaScript——Web APIs笔记小结 dom 样式属性(排他思想+自定义属性)_第24张图片

我的:





    
    
    
    Document




    
1
2
3
4

pink的:





    
    
    
    Document
    



    
  • 商品介绍
  • 规格与包装
  • 售后保障
  • 商品评价(50000)
  • 手机社区
商品介绍模块内容
规格与包装模块内容
售后保障模块内容
商品评价(50000)模块内容
手机社区模块内容

  恭喜看到这的小伙伴,你已经完成 JavaScript APIs第二天的学习了~!!

下面进入第三天的学习吧 (。・∀・)ノ゙ → 自定义属性+节点操作

 有用的话可以点赞评论收藏哦!!

你可能感兴趣的:(web,前端,javascript,1024程序员节)