Web学习笔记
一.前言
- 花了大概三周看前端入门，写笔记让自己忘了的时候能快点查到
参考资料
Web前端开发_中国大学MOOC(慕课) (icourse163.org)
[如何理解Web语义化 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/25493886#:~:text= web语义化应该是样式与结构分离的结果，重构中的语义化包含HTML标签语义化和CSS命名语义化，HTTP的语义化是针对HTTP协议来说。,HTML为网页文档内容提供上下文结构和含义。 对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析。)
(sublime快速生成html标签(emmet语法)_孙小笔的博客-优快云博客_sublime创建html快捷键
[前端]弹性盒子 align-items 与 align-content 的区别 - 知乎 (zhihu.com)
JavaScript | MDN (mozilla.org)
二.HTML基础
HTML概述
标签，元素，属性？
一个标签可能有多个属性，属性先后顺序无关。
img标签
- 图像格式
- JPG：有损压缩
- GIF 简单动画，背景透明
- PNG：无损压缩，背景透明，支持交错（逐步显示出来）
- 标签
- 属性
src=""带有图片路径 - 属性
alt=""当图片无法显示时，替代显示的文字 - 绝对路径：以根目录为基准，例如
C:/images/logo.png - 相对路径：以网页文件当前位置为基准，例如
src="logo.png" - img设置超链接：
a>img例如<a href="https://cn.bing.com/"><img src="img/1.jpg" alt="图片显示"></a>
- 属性
Div标签
-
div标签：区域标签。
-
什么是区域？例如页面的一个组成部分，一个栏目板块。导航栏、广告等等。
-
区域的好处：方便改动。例如
<div align="center"> <h1>web前端</h1> <p>html</p> <p>css</p> <p>js</p> </div>可以将div区域内加上align属性
等效于
<div> <h1 align="center">web前端</h1> <p align="center">html</p> <p align="center">css</p> <p align="center">js</p> </div>div结合css样式，方便进行布局。
-
-
无序列表
<ul></ul>表示无序列表<li></li>表示列表项- 快速生成
ul>li*3
-
有序列表
<ol></ol>表示有序列表
-
表格
<table>标签表示表格- 每一行(table row)用
<tr></tr>表示 - tr内用
<td></td>标签方式表示 - 例如
table>tr*2>td*3生成2行3列的表格 - 表头单元个使用
<th></th>标签表示
表单
-
**HTML 表单用于搜集不同类型的用户输入。**例如账号密码，选项列表等等
-
<form action="后端页面">标签内部是表单元素 -
<input type="text|password">，text表示文本框明文显示，password表示密码框，星号显示。例如,name属性给后端指明了表单元素的名字。
<form action=""> 账号：<input type="text" name="Name"> <br> 密码：<input type="password" name="Passwd"> </form> -
按钮
- 提交按钮
<input type="submit" value="提交" name="submit">value规定按钮表面的文字- 例如
<form>姓名<input type="text" name="" id=""><input type="submit" value=确定></form> 
- 重置按钮
<input type="reset">
- 提交按钮
-
单选框/复选框
- 使用input标签实现
- 单选框
type="radio"只能选择一项 - 复选框
type="checkbox"可以选择多项 <input type="radio|checkbox" value="值" name="" checked="checked">- value表示提交的值，单选框的name必须相同。checked表示默认选择。
-
下拉列表框select option
<form> 马 <select> <option>大和赤骥</option> <option selected="selected">黄金船</option> <option>丸善斯基</option> </select> </form>- 整个列表用select标签围住
- 每个选项用option标签围住
selected="selected"表示默认选择
效果：
-
文本域
-
<textarea rows="行数"cows="列数">在这里输入内容</textarea> -
例如
<form> 文本框 <br> <textarea name="" id="" cols="30" rows="10">默认内容</textarea> </form>效果
-
-
表单总结
<input type="">- text
- password
- submit
- reset
- radio
- checkbox
- select
- option
- textarea
Web语义化
思考：有了
<div id="header">，为什么还要有<header>设置页眉？
语义化：div没有明确的含义，而<header>本身容易被理解。让人或者计算机能更好的理解网页内容。
语义化包括标签语义化和CSS命名语义化。
参考：[如何理解Web语义化 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/25493886#:~:text= web语义化应该是样式与结构分离的结果，重构中的语义化包含HTML标签语义化和CSS命名语义化，HTTP的语义化是针对HTTP协议来说。,HTML为网页文档内容提供上下文结构和含义。 对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析。)
-
好处
- 有利于搜索引擎优化
- 有利于人阅读
- HTML语义化是反对大篇幅使用无语义化的div+span+class，而鼓励使用HTML定义好的语义化标签。
- 更容易兼容不同设备。
-
<em>强调</em> <i>斜体</i> <strong>重点强调</strong> <b>粗体显示</b> -
尽管这两组标签互相等价，但是
em和strong更加明确，现在更推荐使用。
三.CSS样式
CSS概述
CSS：Cascading Style Sheets层叠样式表。它将网页内容HTML和内容样式CSS分离。便于修改样式。
-
CSS样式定义如何显示HTML元素
-
外部样式表通常存储在CSS文件中
-
多个样式定义可以层叠为一个
-
CSS的语法：
选择器{ 声明; 声明; } 声明： 属性名:属性值 例如 p{ font-size:12px; color:blue; } -
注释使用 /**/
CSS添加方法
-
行内添加(内联样式)
- 将属性直接添加到元素内部
- 例如
<p style="color:blue">
-
内嵌样式
-
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<style>标签在文档头部定义内部样式表<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> -
<style type="text/css">表示style由css文本决定 -
适合文件很少，css代码不多的情况
-
-
外部样式表
-
如果有一个网站，所有页面都要用你写的css。就可以把css保存在单独文件中联接。这样减少了工作量，和每个网页文件的大小。
-
文件后缀：
.css -
链接方式：
-
在head标签中：用link标签链接，rel表示链接什么文件，href链接文件名
-
<link rel="stylesheet" type="text/css" href="mystyle.css">。stylesheet表示链接到样式表文件 -
可以使用
link:css快速创建
-
-
应用：
-
优点：
- 将html完全和样式分离
- 维护公共样式表文件即可
- 可以被多次引用
-
-
优先级
-
多重样式可以叠加，可以覆盖
-
如果一个属性多次被定义（比如color）,那么优先级行内>内嵌>外部文件。举例如下
-
选择器
-
标签选择器
-
例如
p{} .one{} .two{}
-
-
类别选择器
-
上面的
.one就是一个类别，可以同一个标签展现不同的样式 -
使用方式
<p class="one">类别1</p> <p class="two">类别2</p> -
如果没有class,就是普通的css样式
-
class使用示例
-
-
id选择器
-
CSS代码：
<style> #one{} #two{} </style> -
html使用方法
<p id="one"> ID1 </p> <p id="two"> ID2 </p> -
id选择器使用示例
-
-
选择器的嵌套声明
标签 标签表示嵌套关系p span表示p内部的span有这种样式
-
集体声明
- 可以同意声明多个标签
- 例如
<style>h1,p{}</style>。
-
全局声明
- 对所有标签进行声明
- 使用星号
*{}
-
注意
- 多个选择器可以混合使用
- 多个class选择器可以混合使用
- class和id可以混合使用
- id不能混合使用
- id只能使用一次
- 我上面的那个id示例就是个错误用法，因为使用了
id="two"两次，但是没有语法错误。 - 是因为js获取id会有歧义，所有不能这样写（虽然目前看来和class效果相同🤗）
- 我上面的那个id示例就是个错误用法，因为使用了
CSS文本样式
-
单位与颜色
-
单位 描述 px 像素 em 1em-1个字符
2em-2个字符
自动适应用户所使用的字体
（比如用户使用一个字符为12px,1em就是12px,2em就是24px）% 百分比(相对于父层) -
颜色
颜色 描述 red,blue,grenn… CSS 颜色代码大全 CSS颜色对照表_慢跑中的蜗牛的博客-优快云博客_css颜色代码对照表 rgb(x,y,z) RGB值 rgb(x%,y%,z%) rgb百分比值 rgba(x,y,z,a) a：透明度。0.0:完全不透明，1.0：完全透明 #rrggbb 十六进制数
-
text
-
属性 描述 取值 color 文本颜色 见上表 letter-spacing 字符间距 px,-px,em,-em line-height 行高 10px,1.5em,150%等 text-align 对齐方式 center,left,right,justify(两端对齐) text-decoration 装饰线 none,overline,underline,line-through text-indent 首行缩进 2em
-
-
font
属性 描述 示例 font 在一个声明中设置所有的字体 font:bold 19px ‘幼圆’ font-family 字体系列 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。 font-size 字号 font-style normal,italic,oblique font-weight 字体的粗细 
CSS背景样式
-
background
-
background-color
- 使用之前color的方式设置
-
background-image
- 使用
url(图片路径)设置 - 如果同时添加背景图片和背景颜色，背景图片会覆盖掉背景颜色。
- 示例：比如给
<p>加上背景图片
- 使用
-
background-repeat
-
默认：棋盘格填充
-
取值 效果 repeat 默认棋盘格填充 repeat-x 横向填充 repeat-y 纵向填充 no-repeat 不填充 inherit 继承
-
CSS超链接
- 链接的四种状态
- a:link 普通的链接
- a:visited 已经被访问的链接
- a:hover 鼠标悬停的链接
- a:active 鼠标点击链接后的反应
列表，表格样式
-
列表样式
- list-style:所有属性
- list-style-image 为列表项标志设置图像
- list-style-position 标志的位置。
- list-style-type 标志的类型CSS list-style-type 属性 (w3school.com.cn)
-
表格样式
-
表格大小
-
table{ width: height: } -
表格边框
border: 像素宽 类型 颜色 -
border-collapse:collapse,合并默认表格样式。叠加，将表格边框和单元格边框重叠。 -
奇偶选择器
-
标签:nth-child(odd|even|数字) -
举例：
-
tr:nth-child(odd) { color: red; } tr:nth-child(even) { color: green; } table { border-style: dotted; border-collapse: collapse; } -
-
-
四.CSS 布局与定位
概述
CSS将不同的区域就像月饼盒子一样分开，又装起来。
- 下面是月饼
- 再来看看bilibili的网页样式吧
怎么样，是不是很像😂
-
内容
-
盒子模型
- 页面元素的大小
- 边框
- 与其他元素的距离
- CSS 盒子模型 | 菜鸟教程 (runoob.com)
-
定位机制
- 文档流
- 浮动定位
- 层定位
-
接下来看看这章具体内容吧。
盒子模型
页面中的所有元素都可以看成一个盒子。
-
盒子模型的组成
- content 内容
- height高度
- width宽度
- padding内边距（填充），就是内容和边框之间的空白
- border边框
- margin外边距。当页面上有多个盒子的时候，通过外边距设置距离。
-
属性的子属性
- -top
- -bottom
- -left
- -right
-
overflow属性
- overflow属性定义了超出盒子的内容应当怎么显示。
- hidden超出部分不可见
- scroll显示滚动条
- auto，如果没有超出，不显示，超出部分显示滚动条。
-
设定顺序
-
top,right,bottom,left（顺时针）
-
例如
margin:1px 2px 3px 4px -
如果省略后面两个值例如
padding 10px 20px，那么top和down的值都是10px,right和left的值都是20px -
如果省略最后一个值,例如
margin:1px 2px 3px那么left和right的值相同，都是2px
-
-
margin的合并
- 垂直方向上margin合并，水平不合并
- 具体参考margin合并 - 简书 (jianshu.com)
-
div水平居中
margin:0 auto- 水平方向上，margin设置为auto;垂直方向上，margin设置为0。
CSS定位概述
- 概念
- 确定盒子的位置
- 分类
- 文档流
- 浮动定位
- 层定位
- 文档流定位flow
- 默认情况，从上到下，从左到右
- 比如div就是从上到下排列，每个单独占一行
- 浮动float
- 如果我们要将盒子并排，就要用float
- 层定位layer
- 将不同的box叠加。
文档流定位
-
文档流的三种类型：
- block
- block单独占一行
- height、width、margin、padding都可以设置
- 常见的block元素：
<div>,<p>,<h1>,<ol>,<ul>,<table>，<form>
- inline
- inline不单独占一行
- width、height不可以设置、
- width就是文字或者图片内容的宽度，不可以改变
- 常见的inline元素:
<span>、<a> - inline元素之间有一个间距
- inline-block
- 不单独占一行
- 元素的height，width,margin,padding都可以设置
- 可以看成水平排列的block元素
- block
-
可以通过display属性设置定位方式，例如
a{ dispaly:block }display:none表示不被显示
浮动定位
-
float属性
- left-左浮动
- right-右浮动
- none-不浮动
-
浮动后原有位置丢失。
-
如果宽度不够，会下降（不是换行）
-
clear属性
- 清除：在清除的那一侧不会有浮动元素，如果有，那么会下降
- both：清除左右两边的浮动
- left/right：清除单侧的浮动
- none:默认值，需要移除已指定的清除值时使用。
-
举例：
-
首先定义一个网页总的container
<style> * { padding: 0; margin: 0; } body { font-size: 14px; } #container { margin: 0 auto; width: 1000px; height: 1500px; background-color: skyblue; } </style> <body> <div id="container"></div> </body>效果：
-
三行一列布局方式：
-
通常有页眉-主题-页脚结构。
-
定义三个部分
<div id="container"> <div id="header"> </div> <div id="main"> </div> <div id="footer"> </div> </div> -
定义header
#header { width: 100%; height: 100px; background-color: azure; margin-bottom: 5px; /**和主体部分5像素分割**/ } -
定义footer和main
#main { height: 500px; background-color: lightskyblue; margin-bottom: 10px; } #footer { height: 100px; background-color: bisque; } -
-
-
一行两列样式
-
比如边栏和主体有这种应用。
-
#aside { float: left; width: 200px; height: 500px; background-color: aqua; } #content { float: right; width: 750px; height: 500px; background-color: royalblue; } -
效果：
-
另一种方式：右侧的content向左浮动，并且添加margin
-
#content { float: left; width: 750px; height: 500px; margin-left: 50px; background-color: royalblue; }
-
-
综合使用
<body> <div id="container"> <div id="header"> <h1>导航</h1> </div> <div id="main"> <div id="aside"> <h1>边栏</h1> </div> <div id="content"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab voluptates autem eos beatae vel consequuntur officiis similique quibusdam, impedit expedita libero qui consequatur ratione corrupti harum illo dolor, vitae ipsum?</p> </div> </div> <div id="footer"> <p>页脚</p> </div> </div> </body>效果
-
层定位
-
网页元素能够像图层一样叠加
-
z-index设定层的重叠关系。
-
使用top、right、left、bottom进行相对值。
-
position属性
-
static：默认值。表示静态的，文档流定位方式。
-
fixed:固定定位，参照物为浏览器窗口，位置不随滚动条变化
-
举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #fix { width: 200px; height: 100px; border: 1px solid red; position: fixed; left: 100px; top: 50px; } #content { width: 900px; height: 2000px; border: 2px solid blue; float: right; } </style> </head> <body> <div id="fix"></div> <div id="content"></div> </body> </html>
左侧的红色框的位置不会随着右侧滚动条而发生变化。
红框圈起来的部分不会随着滚动条滑动。
-
-
relative:参照物为直接父元素。
- 定位为relative的元素脱离正常的文档流中，但是其在文档流中的原位置依然存在
- relative是相对于自己本来在文档流的位置，进行偏移。
-
absolute:绝对定位，参照物可以是直接父元素或者是间接父元素
- 定位为absolute的元素脱离正常的文档流中，但是其在文档流中的原位置不存在。
- absolute相对的是最近定义为absolute或relative的父层
- 通常将外层设置为relative，内部为absolute。这样父层移动子层跟着移动。
-
弹性盒子布局
- Flexbox Layout
- 弹性盒子可以拉大或者缩小以适应空间。
- 可以实现间隙的平均分配。
- 弹性盒子容器
- display属性
display:flex - flex-direction属性–行布局
- 取值为row,在水平方向上布局,从左到右布局
- 取值为row-reverse，从右到左布局
- flex-wrap属性
- nowrap
- wrap，会进行换行
- wrap-reverse,反向（从下到上换行）
- flex-flow,就是flex-direction和flex-wrap的综合
flex-flow:flex-direction flex-wrap;
- justify-content属性
- 对齐方式
- flex-start从主轴开始方向
- center
- flex-end
- space-between,空隙均分，两端对齐
- space-around。拉手对齐，左右两端也有空隙，最左端和最右端是1个单位空隙， 两个元素之间是2个单位空隙。
- align-items属性
- 元素在辅轴上的对齐方式。
- flex-start
- center
- flex-end
- stretch,去掉元素高度，拉伸当前元素在辅轴上的高度。
- align-content属性
- 对行进行设定
- flex-statt
- flex-end
- center
- space-between
- space-around
- stretch。默认值。行拉伸以占据剩余空间
- [前端]弹性盒子 align-items 与 align-content 的区别 - 知乎 (zhihu.com)
- display属性
- 弹性元素样式
- flex-grow，元素被拉大的比例
- 默认值为0，不被拉大
- 也可以取值为n，表示占据n份空间。比如有三个元素，占据1:2:3的空间，依次设置
flex-grow为1,2,3即可。
- flex-shrink，元素被压缩的比例
- 默认为1，表示等比例压缩
- 0表示不压缩。
- flex-basis属性
- 元素在主轴上的默认尺寸，优先级高于width
- order属性
- 设定子元素的排列顺序，数值越小越靠前
- flex-grow，元素被拉大的比例
网格布局
弹性盒子通常用于一行，网格用于多行。网格由网格容器和网格元素组成，一个网格元素可以占用多个单元格。
-
网格容器，包含间隙，行列，排列方式等
display:gridgrid-template-columns,gird-template-rows划分行列。取值:px,%,auto,fr（占比）,repeat()- 例如
grid-template-columns:1fr 2fr，分为两列，第一列占1/3,第二列占2/3 grid-template-columns:repeat(3 1fr)表示重复1fr三次
- 例如
grid-template-areas，命名单元格，相同名称的单元格被划分为同一个区域。grid-gap划分间距。grid-row-gapgrid-column-gap
justify-items,align-items水平对齐方式和垂直对齐方式。以及二合一的place-items- start
- end
- center
- 默认stretch
justify-content,align-content,place-content表示整个网格的对齐方式。- start,center,end,stretch
- space-around,space-evenly,space-between
-
网格元素样式
-
定位
-
grid-column-*和grid-row-*，定义了网格元素的位置。 -
注意使用线来定位，不是用格子。
-
-
比如有一个4*3的格子，就有5条横线和4条竖线，就可以用
-
grid-row-start:1 grid-row-end:3 grid-column-start:2 grid-column-end:4 -
这样的方式来进行定位.
-
也可以是
grid-row:1/3 gird-column:2/4或者
gird-area:1/2/3/4,顺序是:行起始位置,列起始位置,行终止位置,列终止位置.
-
-
justify-self,align-self,place-self单元格内部内容对齐方式.- start,end,center,stretch
-
精灵图
- 精灵图通过将多张小图拼在一张图中，减少了图片的请求量
- 在线生成精灵图CSS Sprites Generator Tool | Toptal®
五、CSS3
盒子圆角边框
-
属性名：
border-radius -
border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius。分别设置四个角 -
例如设置：
-
border-radius: 20px; -
显示圆角
-
同时也能设置椭圆
-
border-bottom-left-radius: 40px 10px; -
-
-
如果高度恰好等于直径，可以做出来如下效果
-
#fix { width: 300px; height: 40px; border: 2px solid red; border-radius: 20px; } -
阴影
-
box-shadow
-
可以设置：
- 水平、垂直偏移距离
- 模糊范围
- 阴影颜色
- 例如
box-shadow: 10px -20px 15px red;- 第一个参数表示水平偏移10px
- 第二个参数表示垂直偏移
-20px - 第三个阴影参数为15px
- 第四个参数表示阴影为红色。
文字与文本
-
text-shadow:设置文字阴影
-
格式
text-shadow:水平偏移 垂直偏移 大小 颜色例如
<h1 style="text-shadow: 1px 2px 3px gold">阴影来咯</h1>
-
word:wrap可以设置长单词强制换行- 取值：
normal或者break-word
- 取值：
-
@font-face
-
用户可以在网站下载需要的特殊字体
-
由于不同浏览器支持字体格式不同，需要提供多个格式的字体
-
Online Font Converter可以使用这个网站转换字体
-
-
转换好后，将所有格式的字体放进站点
fonts文件夹 -
@font-face{ font-family:字体名称; src:url(''), url(''), url(''); } -
例如
-
@font-face { font-family: 'Homeworkfont-Medium'; src: url('Homeworkfont-Medium.eot'); src: url('Homeworkfont-Medium.eot?#iefix') format('embedded-opentype'), url('Homeworkfont-Medium.svg#Homeworkfont-Medium') format('svg'), url('Homeworkfont-Medium.ttf') format('truetype'), url('Homeworkfont-Medium.woff') format('woff'), url('Homeworkfont-Medium.woff2') format('woff2'); font-weight: normal; font-style: normal; } h1 { font-family: 'Homeworkfont-Medium'; } -
-
2D转换
- 通过transform属性，不同函数取值。做到旋转、拉伸、移动、缩放的效果。使用trsf快速生成
rotate()旋转，单位：deg。例如transform: rotate(30deg);scale()缩放
过渡效果
-
transition属性
-
将元素从一个值过渡到另外一个值
-
子属性：
- transition-property:指定作用于哪个值
- transition-duration:持续时间
- transition-timing-function:变化方式
- linear 线性
- easy 慢快慢
- easy-in 慢快
- easy-out 快慢
-
a { font-family: 'Homeworkfont-Medium'; text-decoration: none; transition: all 1s; font-size: 100px; color: chartreuse; } a:hover { color: rgb(227, 6, 6); font-size: 200px; } -
-
animation动画，使用@keyframes规则
-
animation: name duration timing-function delay iteration-count direction fill-mode; -
p { font-family: 'Homeworkfont-Medium'; font-size: 100px; color: gray; animation: rainbow 50s ease-in-out; } p:hover { color: purple; } @keyframes rainbow { 0% { color: red; } 10% { color: orange; } 30% { color: yellow; } 50% { color: green; } 60% { color: skyblue; } 80% { color: blue; } 100% { color: purple; } } -
效果
3D变换
- 首先设置
transform-style: preserve-3d; - 使用
rotateX/Y/Z()进行设置
六、JavaScript
这一部分内容太多，记录一下我觉得记不住的备忘
JavaScript是一种基于JavaScript引擎的解释型语言；
弱类型语言；是面向对象编程
浏览器内核分为两部分：解析HTML、CSS的内容排版引擎和解释JS的引擎。
加入JS代码的方法
- 直接加入标签，例如
<div onclick="JS代码"></div> - 放在
<script></script>中，可以出现在任何位置 - 放在js文件中，然后
<script src="*.js"></script>该标记中不能出现js代码
JS输入输出
alert(msg)浏览器弹出console.log(msg)控制台输出prompt(msg)输入框
json
JSON.stringfy(obj)将对象转换为字符串JSON.parse(str)将字符串转换为obj
数组方法
var arr=[];
arr.indexOf(); //检索对应下标，如果没有返回-1;
-
将数组转化为字符串：
-
arr.toString()将数组转化为字符串 -
arr.join(分隔符),在数组转化为字符串的同时，指定分割符。例如
var demo = ['a', 'b', 'c', 'd']; console.log(demo.join('-'));输出
a-b-c-d
-
-
arr.push()添加元素
基本包装类型
将简单的数据类型包装为对象。
三个特殊的包装类型：String,Number,Boolean
字符串对象
- 字符串不可变，字符串值占用内存。改变字符串占用新的空间。
- 索引：
- 由于操作不会修改本身，返回的是一个新的字符串，原来的值被释放
- index=str.indexOf(查找内容,[num,起始位置]),例如
ans=str.indexOf('a',2)从字符串str索引2开始查找’a’。
- 查找：
str.charAt(num)str.charAt(num)返回对应的unicode码str[num]，H5
- 字符串操作
- concat(str1,str2,str3…)连接两个或多个字符串
- str.substr(start,num) 从str的start开始,截取num个字符
- str.slice(start,end)，从start取到end，end不取
- replace(a,b)将字符串中a替换为b
split('分隔符')返回一个数组
Javascript对象
-
对象可以是一个变量，也可以包含多个变量，以
name:value表示。 -
var car = {name:"Fiat", model:500, color:"white"}; -
对象方法：
var obj= { name:function() {方法体} } -
利用new创建对象
var obj = new Object();//创建空对象 obj.属性=值;//添加了属性 obj.f=function(){ }//添加了方法 -
利用构造函数创建对象
-
例如
-
function 构造函数名(){ this.属性=值; this.方法=function(){}; } new 构造函数名(); -
new 关键字过程
- new关键字首先在内存中创建一个新的对象
- this的上下文为这个创建的对象
- 执行构造函数里面的代码
- 返回
this
-
-
遍历对象属性
-
for(var k in obj) { console.log(k);//属性名 console.log(obj[k]);//属性值 }
-
内置对象
- JS对象分为三类：自定义对象、内置对象、浏览器对象
- JavaScript 标准内置对象 - JavaScript | MDN (mozilla.org)
DOM
DOM简介
- 文档：一个页面就是一个文档,document
- 元素.element
- 节点：网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中用node表示
获取元素
-
通过ID获取
getElementById('name')返回完整的标签,Element对象。console.dir()打印对象
-
根据标签获取
-
getElementsByTagName()返回带有指定标签名的对象的集合 -
<div id="name"> <p>nana</p> <p>lulu</p> <p>taffy</p> </div> <script> var a = document.getElementsByTagName("p"); console.log(a); </script>-
-
如果页面中没有这个元素，返回空的伪数组
-
-
可以指定获取父元素中的子元素
-
element.getElementsByTagName() -
<div id="name"> <p>nana</p> <p>lulu</p> <p>taffy</p> </div> <div id="age"> <p>20</p> <p>23</p> </div> <script> var a = document.getElementById("name"); var b = document.getElementById("age"); console.log(a.getElementsByTagName("p")); console.log(b.getElementsByTagName("p")); </script> -
-
-
-
通过类名获得元素
-
getElementsByClassName(类名) -
querySelector('选择器')只返回第一个对象-
querySelector('.类名') -
querySelector('#id') -
querySelector(‘标签名’)
-
例如有两个class为test的标签，返回第一个
-
<div id="name" class="test"> <p>nana</p> <p>lulu</p> <p>taffy</p> </div> <div id="age" class="test"> <p>20</p> <p>23</p> </div> <script> var a = document.querySelector('.test') console.log(a); </script> -
-
-
querySelectorAll()返回指定选择器的所有对象-
<div id="name" class="test"> <p>nana</p> <p>lulu</p> <p>taffy</p> </div> <div id="age" class="test"> <p>20</p> <p>23</p> </div> <script> var a = document.querySelectorAll('.test') console.log(a); </script> -
-
-
-
获取特殊元素
document.body
-
document.documentElement获取html元素- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XUXSQIP8-1664346881801)(C:\Users\Anti\AppData\Roaming\Typora\typora-user-images\image-20220918135316085.png)]
自定义属性
element.getAttribute('属性')获取自定义属性
<div cc="value"></div>
<script>
console.log(document.querySelector('div').getAttribute('cc'));
</script>
-
输出value
-
element.setAttribute('属性', '值'); -
<div cc="value"></div> <script> var cc = document.querySelector('div'); cc.setAttribute('cc', '233'); console.log(cc.getAttribute('cc')); </script> -
将属性cc值改为233
-
H5新增方案：
- 自定义属性
data-开头，比如data-index element.dataset.属性，获得自定义属性- 或者是
element.dataset['属性']
- 自定义属性
事件
-
事件由三部分组成：事件源 事件类型 事件处理程序
-
事件源：事件被触发的对象
-
事件类型：比如鼠标点击、按键盘等
-
事件处理程序
-
btn.onclick = function(){} -
常用事件
-
onload 和 onunload 事件会在用户进入或离开页面时被触发。
-
onchange 字段内容改变时触发
-
onmouseover和onmouseout：鼠标移到对应元素上方或移出时触发函数
-
onmousedown,onmouseup,onclick。鼠标点下、抬起、点击事件
-
操作元素
- innerText
- 更改标签内的内容
- 不识别html标签
- innerHTML
- 保留标签和换行、空格
- 这两个都是可以读写的
- 可以直接修改属性
- src、href
- id、alt、title
操作表单
-
表单通过value修改值
-
<button> 按钮 </button> <input type="text" name="" id=""> <script> bt = document.querySelector("button"); inp = document.querySelector("input"); bt.onclick = function () { inp.value = "click"; bt.disabled = true; } </script>
- 案例：密码隐藏
- ```html
<body>
<div id="box">
<label for="">
<img src="闭眼.jpg" alt="眼睛" id="eye">
</label>
<div class="box1">
<input type="password" id="password">
</div>
</div>
<script>
var eye = document.querySelector("#eye");
var pwd = document.querySelector("#password");
eye.onclick = function () {
if (pwd.type == "password") {
pwd.type = "text";
this.src = "睁眼.jpg";
}
else {
pwd.type = "password";
this.src = "闭眼.jpg";
}
}
</script>
</body>
操作样式
-
element.style行内样式操作 -
element.className类名样式操作 -
element.classList.add('类名')添加类名 -
element.classList.remove('类名')移除类名 -
<div> <label for="butt">OK</label> <input type="button" id="butt"> </div> <script> butt = document.getElementById("butt"); butt.onclick = function () { butt.style.backgroundColor = 'red';//改变了背景颜色 } </script> -
焦点
-
获得焦点：onfocus,失去焦点：onblur
-
<body> <input type="text" id="inp" value="充电宝"> <script> inp = document.querySelector('#inp'); inp.onfocus = function () { if (inp.value == "充电宝") inp.value = ""; inp.style.color = 'black' } inp.onblur = function () { if (inp.value == "") inp.value = "充电宝"; inp.style.color = 'rgb(214, 214, 214)'; } </script> </body>
-
-
改变类
this.className=‘类名’
tip 关于只能用this实现函数事件的原因
<ul class="baidu">
<li><img src="1.png" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.png" alt=""></li>
<li><img src="4.png" alt=""></li>
</ul>
<script>
var imgs = document.querySelector('.baidu').querySelectorAll('img');
var body = document.body;
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
上面的代码实现了点击更换背景图片的功能。但是将 body.style.backgroundImage = 'url(' + this.src + ')';改为 body.style.backgroundImage = 'url(' + imgs[i].src + ')';就错了。
原因是函数作用域不同，在执行时onclick事件对应函数时i = imgs[length]，超出数组范围。
解决方案：闭包 - JavaScript | MDN (mozilla.org)
-
function getSrc(i) { return function () { body.style.backgroundImage = 'url(' + imgs[i].src + ')'; } } for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = getSrc(i); } -
也可以使用匿名闭包
-
for (var i = 0; i < imgs.length; i++) { (function (i) { imgs[i].onclick = function () { body.style.backgroundImage = 'url(' + imgs[i].src + ')'; } } )(i); }
-
案例：设置Tab切换内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab</title>
<style>
.tab {
height: 1000px;
width: 1000px;
margin: auto;
background-color: aliceblue;
}
.bar {
width: 100%;
height: 64px;
background-color: azure;
display: flex;
flex-direction: row;
/* justify-content: space-around; */
align-items: center;
}
.tabhead {
color: azure;
width: 25%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: slategray;
}
.current {
background-color: aliceblue;
color: #00CC7E;
}
ul {
list-style-type: none;
}
li {
font-size: xx-large;
}
#content {
font-family: 'Script MT', Courier, monospace;
font-size: 24px;
background-color: aquamarine;
width: 100%;
height: 100%;
}
.con {
display: none;
}
.select {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="bar">
<div class="tabhead current">第1栏</div>
<div class="tabhead">第2栏</div>
<div class="tabhead">第3栏</div>
<div class="tabhead">第4栏</div>
<!-- <li>第1栏</li>
<li>第2栏</li>
<li>第3栏</li>
<li>第4栏</li> -->
</div>
<div id="content">
<div class="con select" id="c1">Alpha</div>
<div class="con" id="c2">Bravo</div>
<div class="con" id="c3">Charile</div>
<div class="con" id="c4">Delta</div>
</div>
</div>
<script>
var tabs = document.querySelectorAll(".tabhead");
var cons = document.querySelectorAll(".con");
// console.log(tabs);
for (var i = 0; i < tabs.length; i++) {
(function (i) {
tabs[i].onclick = function () {
for (var j = 0; j < tabs.length; j++) {
tabs[j].classList.remove('current');
cons[j].classList.remove('select');
}
tabs[i].classList.add('current');
cons[i].classList.add('select');
}
})(i);
}
</script>
</body>
</html>
- 通过添加类名，实现了内容的显示或隐藏操作。
节点操作
-
元素节点拥有
- nodeType
- 元素节点nodeType为1（主要操作）
- 属性节点nodeType为2
- 文本节点nodeType为3（包含空格、换行等）
- nodeName
- nodeValue
- nodeType
-
节点层级
node.parentNode获取最近父节点，如果找不到，返回null。node.childNodes获取所有子节点（包含元素和文本）。node.children()返回所有子元素节点。node.firstChild获取第一个子节点，node.firstElementChild返回第一个子元素节点node.lastChild获取最后一个子节点,node.lastElementChild获取最后一个子元素节点。node.nextSibling获取下一个兄弟节点(包含元素节点和文本节点等)node.previousSibling上一个兄弟节点node.nextElementSibling获取下一个兄弟元素节点。node.previousElementSibling
-
创建节点
-
document.createElement('tagName')创建节点 -
node.appendChild(child)添加一个子节点到最后。node为父级。 -
node.insertBefore(child1,child2)将child1添加到child2之前。 -
案例 评论区留言。通过插入列表项实现 <body> <textarea name="" id="" cols="30" rows="10"></textarea> <button>发布</button> <button id="del">删除</button> <ul> </ul> <script> var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var com = document.querySelector('ul'); var del = document.querySelector('#del'); btn.onclick = function () { if (text.value == '') return; else { var newcom = document.createElement('li'); newcom.innerText = text.value; text.value = ''; com.insertBefore(newcom, com.firstElementChild); } } del.onclick = function () { var tar = com.children[0]; if (tar != null) { com.removeChild(tar); } } </script> </body> -
node.removeChild(child)删除指定节点。 -
node.cloneNode()返回该节点的克隆节点- 如果括号中为空或参数为false，为浅拷贝。不复制里面的节点
- 如果参数为
true，为深拷贝
-
注册事件
- addEventListener 事件监听方式
eventTarget.addEventListener(type,listener[,useCapture]- 该方法将指定的监听器注册到evenTarget上。
type,事件类型。比如click,mouseoverlistener事件处理函数，会调用该监听函数useCapture可选函数。是一个布尔值。默认false
- 该方法支持一个元素同一个事件多个处理函数
element.removeEventListener('type',fn)。删除函数
DOM事件流
- 事件流描述了从页面接收事件的顺序。
- 事件发生时会在元素节点之间按照特定的顺序传播。
- 三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
- 如果addEventListener第三个参数是true，则处于捕获阶段。如果是
事件对象
javascript：Event事件对象 - 知乎 (zhihu.com)
-
写在函数
function()中，当作形参 -
<div class="son"></div> <script> var son = document.querySelector('.son'); son.addEventListener('click', function (e) { console.log(e) }); </script> -
例如上述代码，输出如下，记录了事件信息
-
事件对象属性或方法 说明 e.target 触发事件的对象 e.type 事件类型 e.preventDefault() 该方法阻止默认事件 e.stopPropagation() 阻止冒泡 - 比如
e.preventDefault()阻止默认跳转
- 比如
事件委托
-
原理：不是每个子节点单独设置事件监听器，而是将事件监听器设置在父节点上，然后利用冒泡原理影响每个子节点
-
例如：用ul注册点击事件，然后通过事件对象的target找到点击的li
-
只操作了一次DOM
-
举例,如下只操作了一次。
-
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> var ul = document.querySelector('ul'); ul.addEventListener('click', function (event) { event.target.style.backgroundColor = 'red'; }); </script>
常用的鼠标事件
-
contextmenu用于控制鼠标右键菜单-
document.addEventListener('contextmenu',function(e){ e.preventDefault(); }) -
用于取消右键
-
-
selectstart选中文字-
document.addEventListener(`selectstart`, function (e) { e.preventDefault(); }) -
禁止选中文字
-
-
鼠标事件对象
-
PointerEvent -
-
e.clientX -
e.clientY点击的坐标，client是相对于浏览器窗口而言的 -
e.pageX,e.pageY相对于文档的坐标，受滚动条影响 -
e.screenX,e.screenY相对于电脑屏幕
-
-
mousemove鼠标移动事件-
document.addEventListener('mousemove', function (e) { console.log(e.pageX + ' ' + e.pageY); img.style.top = e.pageY + 'px'; img.style.left = e.pageX + 'px'; }) -
图片跟随鼠标
-
键盘事件
keydownkeyupkeypressevent.keyCode为触发改键的ASCII值
BOM
概述
- BOM 是浏览器对象。BOM缺乏标准/兼容性较差
- BOM的顶级对象是window。(还包含浏览器上方那栏)
- BOM学习浏览器交互相关
- tip:特殊属性：window.name
常见事件
-
窗口加载事件
window.onload=function()P{}或者window.addEventListener('load',fn) -
DOMContentLoaded事件：仅当DOM加载完成。不包括哦样式表。图片，flash等 -
调整窗口大小
window.onresizewindow.innerwidth当前宽度
-
定时器
-
window.setTimeout(调用函数[,延迟的毫秒数])当毫秒到了执行函数var timer = setTimeout(fn,1000); clearTimeout(timer);//清除定时器 -
setInterval(回调函数[,间隔时间]) -
clearInterval()清除指定定时器
-
-
全局作用下，
this指向window
JS执行队列
-
JS是单线程语言
-
H5允许同步和异步
- js中的同步和异步 - Yellow_ice - 博客园 (cnblogs.com)
- 同步
- 异步：异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程，当我们打开网站时，像图片的加载，音乐的加载，其实就是一个异步任务
-
常见的异步任务
- 普通事件
- 资源加载
load、error等 - 定时器
-
先执行同步任务，再依次按照顺序执行回调函数
location对象
-
location是window提供的一个属性，因为返回对象也被称为location对象
-
location用于获取url
-
URL
-
protocol://host[:port]/path/[?query]#fragment对象属性 返回值 location.href 整个url location.host 主机名 location.port 返回端口号 location.pathname 路径 location.search 参数 location.hash 片段 (#后面的内容)
-
- 通过
location.href=url实现跳转新的页面 - location常见方法
location.assign(url)跳转指定页面，记录历史（可以后退）location.replace(url)跳转页面，不记录历史location.reload()重新加载当前页面
Navigator对象
navigator.userAgent获得浏览器、系统信息等
history对象
back()后退forward()前进go(n)。n是前进的参数。比如go(1)是前进一步，go(-2)是后退2步
七、网页特效
offset
- 获取元素带有定位父元素的位置
- 获取元素自身大小
- 返回的素质不带单位
element.offsetTop距离顶部距离element.offsetLeft距离左侧距离offsetWidth获取当前宽度（包含margin）offsetHeight获取高度offsetParent获取带定位的父亲offset是只读属性。只能用style修改
client
- clientTop上边框大小
- clientLeft左边框大小
- clientWidth宽度
- clientHeight高度
- client不包含边框，包含padding
scroll
- 得到元素大小、滚动距离。包含padding,不包含border和margin
scrollHeight的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。scrollTop是距离内容顶部的高度大小scrollLeftscroll滚动事件，当滚动条发生变化时触发。
动画
-
原理：利用定时器，逐渐改变css样式。
-
var mover = function () { box.style.left = (box.offsetLeft + 1) + 'px'; if (box.offsetLeft >= 500) { console.log('clear'); clearInterval(move); } } var move = setInterval(mover, 50); -
缓动动画
- 改变运动速度
移动端
touch事件
touchstart开始触摸touchmove手指移动touchend停止触摸
touchEvent
touchEvent.touches触摸列表touchEvent.targetTouches正在触摸目标对象的列表touchEvent.changedTouches改变的手指列表- 通过
changedTouches获得touchend的信息
click延迟
- 由于手机有双击缩放，click有延迟
本地存储
- sessionStorage（会话存储）
sessionStorage.setItem('key',value)sessionStorage.getItem('key')sessionStorage.removeItem('key')sessionStorage.clear()清除所有数据
- localStorage(本地存储，永久生效，不同页面也可以生效)
- 方法和sessionStorage相似
八、jQuery
jQuery的使用
- 官网下载jQuery
- 语法：
$(selector).action()
入口函数
-
$(document).ready(function(){}) -
或者
$(funtion(){});
jQuery对象
- jquery获取的是jquery对象
$(selector)获得一个伪数组$('div')[index]转换为DOM对象$('div').get(index)- jQuery隐式迭代，会对数组中所有元素进行操作
事件
鼠标
hover(*inFunction,outFunction*)
常用API
选择器
-
-
$("p:first")第一个p元素 -
$("[href]")带有href属1性的元素 -
$("a[target='_blank']")target属性等于_blank的元素 -
:eq(index)选择第index个 -
修改css样式
-
.css('key','value')修改值 -
.css('key')返回值 -
$(this).index得到当前迭代中的索引号 -
$('div').addClass("className") -
$('div').removeClass("className") -
$('div').toggleClass("className")切换类名。有变没有，没有变有
Jquery效果
-
显示
show([speed,[easing],[fn]]).speed可以是"slow",“normal”,“fast”。也可以是毫秒值hide()toggle()
-
滑动
- 参数如上
slideDown()slideUp()slideToggle()
-
动画排队
- 多次触发会使动画排队执行
- 用
.stop()停止排队
-
透明度
fadeIn(speed)fadeOut(speed)fadeToggle()fadeTo(speed,opacity,callback)变到指定透明度
-
动画函数
-
$(*selector*).animate({*params*}*,speed,callback*); -
params是css样式,属性名可以不带引号 -
$("button").click(function(){ $("div").animate({left:'250px'}); });
-
拷贝
$.extend([deep],tar,obj[,obj2])- 将n个obj拷贝给tar
- deep=false 浅拷贝
- deep=true 深拷贝
jQuery HTML
获取属性值
.prop('key')获取原生属性.prop('key','val)设置.attr('key')获取自定义属性.attr('key',val)设置自定义属性.data()获取/设置h5data-开头的 自定义属性。
DOM
-
.text()获取文字内容，.text('val')修改文字内容 -
.html() -
.val()获得表单值 -
.toFixed(n)获得n位小数
遍历
-
父级
.parent()获取父节点.parents('selctor')返回指定的祖先.parentsUntil('selctor')返回和指定元素之间的祖先
-
后代
-
children()直接子元素 -
find()所有后代，直至最后一个
-
-
同辈
-
siblings() -
next() -
nextAll() -
nextUntil() -
prev() -
prevAll() -
prevUntil()
-
-
过滤
.first().last().eq().fliter('selctor')返回符合selctor的集合.not('selctor')
-
.each(function(index,element){})遍历集合。index为当前索引。element为当前遍历的元素 -
$.each($('div'),fn)用于遍历数据
标签创作
var li = $(<li>创建</li>)创建一个新的li标签.append()在最后面添加.prepend()在最前面添加.after()在该文本后添加.before()在该文本前添加.remove()删除指定元素.empty()清空内部
尺寸
-
width() height()不包含padding -
innerWidth() innerHeight()包含padding -
outerWidth() outerHeight()包含border -
outerWidth(true) outerHeight(true)包含margin -
offset()相对于文档的偏移坐标。- 有
left top两个属性 - 可以通过
.offset({top:10,left:10})这样修改
- 有
-
position()相对于父亲的定位- 不能设置
-
scrollTop()- 被卷去的大小
- 也可以设置
-
$(function () { $('.nav').click(function () { $("html,body").stop().animate({ scrollTop: 0 }, 'fast', function () { console.log("top"); }); }) }) -
设置返回顶部的动画
事件
-
事件注册
$(element).事件（fn）element.on('一个或多个事件 用空格隔开',[selector(子元素选择器)],fn)。- 完成事件委托
- 可以绑定动态创建的元素
.one()触发一次的事件
-
事件解除
$('div').off()解除div上所有事件$('div').off('event')解除event$('div').off('event','selector')
-
自动触发
ele.trigger('type')ele.triggerHandler('type')不会触发元素的默认行为
-
事件对象
fn(e){}获得事件对象
多库共存
- 把$改为jQuery
var xx=jQuery.conflict()
jQuery插件
-
瀑布流
-
图片懒加载
-
全屏滚动
-
Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)
九、动手实践
- 用两天撸了一个插件出来 B站分p、合集视频统计进度插件，可视化图表_AntiO2的博客-优快云博客
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
