web api基础
变量声明有三个var let 和const
我们应该用那个呢?
首先var先排除,老派写法,问题很多,可以淘汰掉…
let or const?
建议:const优先,尽量使用const,原因是:
- const语义化更好
- 很多变量我们声明的时候就知道他不会被更改了,那为什么不用const呢?实际开发中也是,比如react框架,基本const
如果你还在纠结,那么我建议:
- 有了变量先给const,如果发现它后面是要被修改的,再改为let
const arr=['red', 'pink']
arr.push('blue')
console.log(arr)
追加数组元素是没问题的,直接改是error的
以下文章酌情观看
DOM (Document Object Model-文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API
白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用
开发网页内容特效和实现用户交互
DOM树是什么
将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用:文档树直观的体现了标签与标签之间的关系
DOM对象:浏览器根据html标签生成的JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
DOM的核心思想
123
把网页内容当做对象来处理
document 对象
是DOM里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
例:document.write()
网页所有内容都在document里面
获取DOM对象
利用CSS选择器
document. querySelector('#nav')
参数:
包含一个或多个有效的css选择器字符串
返回值:
CSS选择器匹配的第一个元素,一个HTMLElement对象。
如果没有匹配到,则返回null。
选择匹配的多个元素
document.querySelectorAll('css选择器')
参数:
包含一个或多个有效的CSS选择器字符串
返回值:
CSS选择器匹配的NodeList对象集合
document.querySelectorAll('ul li')
得到的是一个伪数组:
有长度有索引号的数组
但是没有pop() push()等数组方法
想要得到里面的每一个对象,则需要遍历(for)的方式获得。
哪怕只有一个元素,通过querySelectAll()获取过来的也是一个伪数组,里面只有一个元素而已
其他获得DOM方式
//根据id获取一个元素
document.getElementById('nav')
// 根据 标签获取一类元素 获取页面 所有
div.document.getElementsByTagName('div')
//根据 类名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')
操作元素内容
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
我是文字的内容2.元素.innerHTML 属性
将文本内容添加/更新到任意标签位置会解析标签,多标签建议使用模板字符举例说明
const info = document.querySelector('.info') //获取标签内部的文字 console.Log(info.innerHTML) // 添加/修改标签内部文字内容 info.innerHTML ='嗨喽,俺是刘德华~'
元素.innerText属性 只识别文本,不能解析标签元素.innerHTML属性
能识别文本,能够解析标签如果还在纠结到底用谁,你可以选择innerHTML
年会抽奖案例
操作元素属性
还可以通过JS设置/修改标签元素属性,比如通过sfc更换图片
• 最常见的属性比如:href、title、src等
语法:对象.属性=值
随机更换图片案例
//准备好几张名字为为1 2 3 4 的图片
操作元素样式属性
•还可以通过js设置/修改标签元素的样式属性。
>比如通过轮播图小圆点自动更换颜色样式
>点击按钮可以滚动图片,这是移动的图片的位置left等等
学习路径:
1 .通过style属性操作CSS
2 .操作类名(className)操作C5S
3 .通过classList操作类控制CSS1 通过style属性操作CSS
语法:对象.style.样式属性=值
注意:
1 .修改样式通过style属性引出
2 .如果属性有-连接符,需要转换为小驼峰命名法
3 .赋值的时候,需要的时候不要忘记加css单位element.style.paddingLeft='300px'
例子
2. 操作类名(className)操作CSS
如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。
语法://act服务器托管网ive是一个css类名 元素.className = 'active'
●注意:
1.由于class是关键字,所以使用className去代替
2.className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名
3.通过classlist修改样式
•为了解决className容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
//追加一个类 元素.classList.add('类名') //删除一个类 元素.classList.remove(' 类名') //切换一个类 元素.classList.toggle('类名')
<div class="box active">文字</div>
使用 className和classList的区别?
- 修改大量样式的更方便
- 修改不多样式的时候方便
- classList是追加和删除不影响以前类名
参考资料 :极客时间 Redis(亚风) 前置知识 系统隔离 为了避免⽤户应⽤导致冲突甚⾄内核崩溃服务器托管网,⽤户应⽤与内核是分离的: 进程的寻址空间会划分为两部分:内核空间、⽤户空间 • ⽤户空间只能执⾏受限的命令(Ring3),⽽且不能直接调⽤系统资源,…