前端 复习内容

Web前端开发

css部分:
css选择器复习盒子模型
css文本
css链接
display属性布局
css定位
css溢出
css文本效果
css变换与动画弹性盒子flex
css边框背景
javascript部分:
数据类型日期所有
js调试方法
JSON对象
js forms
HTML DOM
浏览器 BOM

css选择器

css选择器一共就两种操作:

• 拆分
• 筛选

分为五种选择器,每种选择器针对的情况不同

1. 简单选择器根据id选中,或者类选中,或者标签名选中

2. 组合选择器组合选择器通过元素之间的结构关系来进一步确定元素

3. 伪类选择器伪类,也就是另一种类别,比如hover,所有hover的元素都属于hover类实际上就是组合了某些其他方面的条件,例如 div > a:hover就是选中了div中的直接元素中的a并当被鼠标悬浮的时候,:first-child当是第一个子元素的时候

   伪类一共就这么几种:
   :hover :active :focus :visited :first-child :last-chid :nth-child()

4. 伪元素选择器实际上并不是一个完整的元素,而是元素的一部分

5. 属性选择器通过元素的属性键值对来筛选元素

简单选择器

除了使用#选择id使用.选择类之外,还有一些语法需要了解

1. 使用逗号
2. 连写(选择操作)

使用逗号分割的选择器,他们是不同的独立选择器,他们选中的元素会合并在一起作为此次选中的元素

连写的选择器表示对于同一个元素的描述

例如:

div.cat{}

表示是div标签并且这个标签的class=”cat”,需要注意区分 div .a{}使用空格分割的选择器,这个选择器表示的意思是div标签的子标签中 class=”cat”的元素

连写在伪类和伪元素中的体现

使用伪类和伪元素的时候一定要与随后的元素连写不要使用空格分隔,这样才能体现补充说明的含义!

可以发现,伪类和伪元素其实都是对之前选择器的一个补充

---

一些特殊的选择方法

• • 选中所有元素,优先级很低
• 标签名选择优先级为1(也就是0之上最差的)

组合选择器(结构选择器,拆分操作)

组合选择器的语法是从左到右依次确定元素

四种符号

• 空格
• >
• ~

空格用的最多,表示是 后方元素是前方元素的子元素

>表示是直接子元素,也就是只有一层嵌套

+表示是和前边元素是相邻兄弟,手牵手,同一级

~表示是兄弟,但不确定是不是相邻

伪类选择器(选择操作)

伪类选择器是在已有选择器基础上做出的补充,大多数选择器的主体是结构选择器,在结构上选择完毕之后,再进行

伪类选择,伪类选择实际上是交集,使用连写.

例如

.container > div:first-child{}

这里选中的不是div的第一个child,而是作为第一个child的div

所以在看一个伪类选择器的时候,先看前边的选择器主体,去掉伪类选择器去看,最后再去结合伪类选择部分

常见的伪类:

1. :hover - 当用户将鼠标悬停在元素上时应用样式。
2. :active - 当元素被激活或点击时应用样式。
3. :checked , :enable, :disable
4. :focus - 当元素获得焦点时应用样式。
5. :visited - 用于选择已访问链接的样式。
6. :first-child - 匹配父元素的第一个子元素。
7. :last-child - 匹配父元素的最后一个子元素。
8. :nth-child(n) - 通过数学表达式匹配指定位置的子元素。
9. :empty - 当没有子元素时

伪类中有一个非常重要的家族,就是结构伪类

结构伪类(选择操作)

结构伪类其实也是通过结构选择元素的,但是因为结构选择器的选择粒度很大,想要通过更小的结构进行选择就没有办法,结构伪类提供了粒度更小的结构选择方法

• 作为直接父元素第几个孩子时
• 作为直接父元素唯一的崽子时
• 作为直接父元素的孩子同标签中的第几个孩子时
• 作为直接父元素的孩子同标签中的唯一的崽子时

其他选择器(选择操作)

例如

• :not(s) 选中不被s选择器选中的元素
• :target

伪元素选择器(拆分操作)

与伪类不同,伪元素选择器是结构的进一步缩小,选中元素的进一步缩小

例如:

::fisrt-letter

选择第一个字符

因为元素最小只能是文本节点了,要像更小粒度的选中精确地某一个文本部分,就需要用到伪类选择器了

常见的伪类选择器:

1. ::first-letter 第一个字符
2. ::first-line 第一行
3. ::selection 被选中的文本(只能设置颜色)
4. ::before 在所有文本之前
5. ::after 在所有文本之后

属性选择器

通过[属性条件]来进行的 选择操作

第一种 存在属性

第二种 数值型等于

第三种 值的正则表达式

$表示结尾

^表示开头

*表示包含val即可

~表示空格分割的一部分中是val

|表示以val开头并且是-分割的值

盒子模型

盒子模型就是四个概念:

1. margin
2. border
3. padding
4. content

需要注意的是 padding: 这个属性,具有不同数量的值所表示的含义,赋值顺序是顺时针,上游下作.

也就是当缺少某个值的时候,会从对面的数值拿过来用

设置盒子的宽高

默认情况下,设置width,height都是设置content的width和height

如果想要真的设置当前元素的border包含的宽高

设置元素box-sizing:border-box;即可

默认情况下是box-sizing:content;

css文本

文本的css属性设置很常用,所以需要复习一下

按照使用频率排序:

color设置文本颜色

backgorund-color设置背景颜色

text-align文本(或者行内元素)对齐方式 left right justify(每行对齐拉伸) center

direction 改变左右位置 rtl ltr

unicode-bidi: bidi-override;使得可以改变文本的书写方向

vertical-align 设置一个行内元素相对于行基准线的位置 top middle bottom

text-decoration 文本修饰,例如下划线之类的,一般都是设置为none消除文本修饰overline line-through userline

text-transform 文本转换 例如转换大小写之类的,uppercase(所有字符大写) lowercase(所有字符小写) capitalize(所有单词首字母大写)

text-indent设置第一段缩进;

letter-spacing设置字符之间的间距

line-height设置行高

word-spacing设置单词之间的间距

white-space设置不可见字符的使用方式,例如nowrap就禁用了自动换行

text-shadow文本阴影 多个值个值 1水平偏移量 2垂直偏移量 3.5模糊范围 3颜色 可以通过逗号分隔 再加一组

text-overflow设置文本移除容器时的操作,一般要结合overflow属性操作

overflow设置了元素在内容溢出的行为,例如scroll auto hidden visiable 等主要用auto自动显示滚动条

text-overflow设置了文本溢出后文本的变化而不是元素的变化,一般文本可以裁剪 clip 显示省略号是ellipsis

css链接

主要需要掌握的是锚点,伪类,脚本嵌入

通过超链接可以跳转到锚点,在href=”#锚点名字”

如何设置一个锚点呢?可以通设置id来设置锚点,锚点名字就是id的值

也可以通过设置a标签的name值来设置锚点,name值就是锚点名字

另外a标签的伪类也是很容易考到的

四种伪类 :visited :active :hover

css定位

定位是一种普遍属性,position属性

一共有五种position的值

默认是 staitc 也就是静态网页定位

常用的是 absolute 绝对定位 指的是在最近的不是静态定位的 祖先元素的位置定位

最好理解是是 fixed 固定于浏览器窗口的某个位置

比较难以理解的是relative相对属性,其实相对的是自己原来在文档流中的位置,实际上没有改变在文本流中的位置,而是只是渲染的时候偏移而已

当确定了元素的定位之后,使用left,right,top,bottom可以控制元素的位置

最不常用的是sticky;根据用户的滚动位置进行定位,粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其”粘贴”在适当的位置（比如 position:fixed）。

z-index设置元素的堆叠顺序,更大的在上,可以为负数

css 溢出

溢出的处理分为对于溢出元素的处理,和对于溢出内容的处理

正常的我们一般都是处理的溢出文本,

text-overflow属性,取值为ellipsis将溢出文本替换为…

但是如果是子元素移除,如何处理,通过overflow设置,此时的取值就不是文本的做法

1. 显示 visible
2. 隐藏 hidden
3. 一开始就添加滚动 scroll
4. 需要时添加滚动 auto

可以分别设置上下移除,和左右溢出的处理

overflow-x

overflow-y

text-overflow有三种取值,clip直接剪丢弃,ellipsis替换为… ,还可以使用一个字符串来自己替代

css文本效果

• text-overflow

• word-wrap

• word-break

• writing-mode

  这四个就是文本效果的具体属性

  第一个就是文本溢出的处理方式

  第二个是单词换行,只有英语单词能应用

第四个writing-mode书写模式指的是垂直还是水平书写

2-3D变换与动画

2D转换

例如旋转,平移,变大变小

transform属性 支持许多函数

translate()

角度单位是deg

rotate()

scaleX

scaleY

skewX就是X轴不变,Y轴倾斜(坐标系)

skewY就是Y轴不变,X轴倾斜(坐标系)

3d转换

rotateX

..Y

…Z

等等都可以加上Z

• 过渡

考变换一定会考过渡

transition属性

例如

transition :width 2s ,height 2s

transition:width 2s, height 2s , transform 2s

transition-duration: 2s;

Javascript

日期

new Date()此对象自动从本地时间获取

构造函数

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)

一位和两位数年份将被解释为 19xx 年：

您不能省略月份。如果只提供一个参数，则将其视为毫秒。

JavaScript 将日期存储为自 1970 年 1 月 1 日 00:00:00 UTC（协调世界时）以来的毫秒数。

常用方法

输出自动调用toString()转换为字符串,是本地时间字符串

还有两种转换为字符串的方法

toDateString()更短

toUTCString()显示为UTC字符串

通过字符串转换为时间Date

字符串的格式可以是

IOS 国际标准 年-月-日

短时间 年/月/日 或者 日/月/年

或者是一些英语表达方式

在某些浏览器中，不带前导零的月或其会产生错误：

时间转换毫秒

提供的静态方法

Date.parse("String") 返回日期和1970年1月1日之间的毫秒数:

对象方法

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）普通的Day指的是第几周
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）的毫秒数

需要注意的是处理getDate是从1开的是之外,其余的都是从0开始

对应的set方法只是前缀从get变成了set而已

Math.random() 返回 0（包括） 至 1（不包括） 之间的随机数：

数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象,布尔：

数值是Number

字符串是String

数组是Array 使用[]不需要new

对象是Object 使用{}不需要new

undefined

NUll类型

js在浏览器中的调试方法

要在Chrome浏览器中调试JavaScript，您可以执行以下步骤：

1. 打开Chrome浏览器，并进入您想要调试的网页。
2. 按下 F12 键或者右击页面并选择 “检查” 选项来打开开发者工具。
3. 在开发者工具中，切换到 “Sources”（源代码）标签页。
4. 在左侧面板中，找到并选择您想要调试的 JavaScript 文件。
5. 添加断点：单击行号左侧的空白区域来添加断点，以便在代码执行到该处时暂停。
6. 您也可以使用控制台（Console）来执行和测试JavaScript代码。

通过这些步骤，您可以在Chrome浏览器中方便地调试JavaScript代码。

JSON对象

1. 将字符串转换为对象

JSON.parse(String)

2. 将对象输出为json字符串

JSON.stringify(object)

JavaScript 操作 Form

验证

通过document.forms可以获得当前文档中的表单数组

通过[‘name’]可以准确查找name为对应值的表单元素

例如

var x = document.forms["myForm"]["fname"].value;

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

一定要在表单中写好name才能使用直接通过name寻找对象这一技巧,只要设置了name,那么就可以直接通过name查询对象

通过onsubmit 的值来截断表单的提交

限制

在html中通过属性设置,可以做到对于input的限制

属性	描述
disabled	规定应禁用 input 元素。
max	规定 input 元素的最大值。
min	规定 input 元素的最小值。
pattern	规定 input 元素的值模式。
required	规定 input 字段必填。
type	规定 input 元素的类型。

常用的就是type限制输入类型

required限制必须输入

通过这些限制属性之后,js内部自动校验表单

自动校验提供了两个API,提供校验函数checkValidity()返回校验结果,有效返回true无效返回false

以及一个提示信息,setCustomValidity()设置会在元素显示的提示信息,例如当用户输入的数字过大,这里就会显示…大于

DOM操作

最常用的是获取元素

getSelectorAll(“css 选择表达式”)

getSelector(“css 选择表达式”) 选中第一个

改变元素属性

属性	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加监听事件

添加当用户点击按钮时触发的事件监听器：

document.getElementById(“myBtn”).addEventListener(“click”, displayDate);

替换监听事件

直接选中对象

然后on[envent] = function(){},即可替换

事件触发运行程序

在标签中写道的onclick = “myFuntion()”

这种的意思是当点击之后,会运行之一段javascript代码,而不是

有一个内容对象event,内部保存了当前触发的事件对象

通过event.target可以获得事件触发元素

BOM对象

bom就是浏览器模型对象

常用的有windnow.location对象

Window Location

window.location 对象可不带 window 前缀书写。

一些例子：

• window.location.href 返回当前页面的 href (URL)
• window.location.hostname 返回 web 主机的域名
• window.location.pathname 返回当前页面的路径或文件名
• window.location.protocol 返回使用的 web 协议（http: 或 https:）
• window.location.assign() 加载新文档

以及history

Window History

window.history 对象可不带 window 书写。

为了保护用户的隐私，JavaScript 访问此对象存在限制。

一些方法：

• history.back() - 等同于在浏览器点击后退按钮
• history.forward() - 等同于在浏览器中点击前进按钮

此对象只有一个属性就是lenght