我家小花儿

这个屌丝很懒，什么也没留下！

热门标签

【前端】Html+Css+JavaScript基础知识点_javascript代码含有css和html

作者：我家小花儿 | 2024-02-22 06:29:22

踩

javascript代码含有css和html

0、软件安装

使用vscode进行开发安装中文插件

Vue学习笔记_lucky友人a的博客-CSDN博客软件下载点击

1、HTML

1、HTML（Hyper Text Markup Language）中文译为：超文本标记语言，HTML标签与标签之间的关系可分为：父子关系（嵌套关系），兄弟关系（并列关系）

2、h系列标签
文字都有加粗 • 文字都有变大，并且从h1 → h6文字逐渐减小 • **独占一行**

3、p段落标签
段落之间存在间隙而且**独占一行**

4、br换行标签
单标签让文字强制换行

5、hr水平线标签
单标签在页面中显示一条水平线 <hr/> /可以省略

6、文本格式化标签

7、标签里的属性
标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分

8、img图片标签
单标签
src属性属性名src 属性值目标图片的路径
alt属性替换文本
title 提示文本
./同级目录下可省略 2个./上级
还有width和height属性属性值：宽度和高度（数字）
如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
• 如果同时设置了width和height两个，若设置不当此时图片可能会变形

9、audio音频标签
双标签第二个属性显示播放的控件
第二个属性后面加autoplay 可以自动播放部分浏览器不支持
加loop 循环播放目前支持mp3 mav ogg

10、video视频标签
谷歌浏览器中配合muted属性可静音其他属性和音频一样支持MP4 、WebM 、Ogg

11、a链接标签
称呼： a标签、超链接、锚链接
双标签，href里是链接地址也可以是# 表示空链接，点击之后回到网页顶部

• a标签默认文字有下划线（代码里的点去百度）
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
可添加target属性属性值有_self也是默认的跳转覆盖原网页，_blank弄出新窗口保留原

12、无序列表
在网页中表示一组无顺序之分的列表，如：新闻列表
ul标签表示无序列表整体，只能包li标签，li标签可以包含一切
列表的每一项前默认显示圆点标识

13、有序列表
在网页中表示一组有顺序之分的列表，如：排行榜
ol标签表示有序列表整体，只能包li标签
列表的每一项前默认显示序号标识

14、自定义列表
在网页的底部导航中通常会使用自定义列表实现
dl标签表示自定义列表整体，dt表示主题 dd是针对主题的每一项 dd前默认缩进
dl只允许包含dt/dd，dt/dd可以包一切

无序列表最常用，有序列表偶尔用，自定义列表底部导航用

15、表格的基本标签
标签的嵌套关系：table > tr > td
table 表格整体包多个tr
tr 表格每行可包td
td 表格单元格包内容
table标签第一个属性边框宽度 ,宽高样式推荐css
th 表示表头单元格通常第一行，默认加粗居中
宽高都是数字就行

16、表格的结构标签（了解）
• thead：表格头部
• tbody：表格主体
• tfoot：表格底部
表格结构标签内部用于包裹tr标签，表格的结构标签可以省略

17、合并单元格
通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他
不能跨结构标签合并

18、input系列标签（表单标签单标签）
在网页中显示收集用户信息的表单效果，如：登录页、注册页
input标签可以通过type属性值的不同，展示不同效果

input标签 <input type=""> 前面可以写文字，写什么显示什么
text 文本框属性placeholder="这里是框框里提示的文字经常用"
password密码框写的会加密属性placeholder="这里是框框里提示的文字经常用"
radio 单选框 name属性性别举例子name="sex" 分组有相同name的单选框为一组一组只有一个被选 checked属性默认选中
checkbox 多选框 checked属性默认选中
file文件选择想多选上传加个属性multiple 没有属性值

submit 提交数据给后端服务器加个value=“按钮名称写这”
reset 重置加个value=“按钮名称写这”
button 普通按钮加个value=“按钮名称写这” 需要配合js
想要提交和重置就需要父标签 form来管理

value属性：用户输入的内容，提交之后会发送给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 = value的属性值

19、button按钮标签
• 谷歌浏览器中button默认是提交按钮
• button标签是双标签，更便于包裹其他内容：文字、图片等
type属性值（同input的按钮系列）

20、select下拉菜单标签
在网页中提供多个选择项的下拉菜单表单控件
select标签：下拉菜单的整体
option标签：下拉菜单的每一项属性值selected：下拉菜单的默认选中

21、textarea文本域标签
在网页中提供可输入多行文本的表单控件
• cols：规定了文本域内可见宽度
• rows：规定了文本域内可见行数
右下角可以拖拽改变大小，实际开发时针对于样式效果推荐用CSS设置

22、label标签
比如这个点女就可以圈起来了，不用点中圈圈
常用于绑定内容与表单标签的关系
使用方法①： 1. 使用label标签把内容（如：文本）包裹起来 2. 在表单标签上添加id属性 3. 在label标签的for属性中设置对应的id属性值
使用方法②： 1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来 2. 需要把label标签的for属性删除即可

23、没有语义的布局标签div和span
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

24、有语义的布局标签（了解）
在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

25、字符实体

26、补充

2、CSS

1、css是什么？

CSS：层叠样式表（Cascading style sheets）
CSS 标点符号都是英文状态下的
每一个样式键值对写完之后，**最后需要写分号**

2、写在哪里以及哪些选择器？

常见引入方式：内嵌式、外联式、行内式

class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

实际开发中，类选择器用的最多
• id一般配合js使用，除非特殊情况，否则不要使用id设置样式
• 实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

3、字体和文本样式

谷歌默认字体大小是16px，没单位不生效
font-size字体大小单位px即像素
font-weight 字体粗细 **没有单位**，400正常，100-900范围
font-style 是否倾斜 italic倾斜 normal不倾斜（默认）

font-family 字体1，字体2... 默认微软雅黑属性值可以直接写宋体、楷体
从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体,
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

无衬线字体（sans-serif）比如黑体第一个比较常用衬线字体（serif）比如宋体等宽字体每个字体宽度一样
/* 电脑没有雅黑则黑体，没黑体则sans-serif */
font-family: 微软雅黑,黑体,sans-serif;

样式重叠最下面的生效，**后面覆盖前面**

font (复合属性)
取值：
• font : style weight size family; 可以省略style weight

属性名text-indent 文本缩进
取值：数字加px 数字加em（1em=1个字符大小）
首行缩进2个字符 2em；

浏览器默认左对齐
text-align文本水平对齐方式也是内容对齐方式比如文本、span、a、input、img标签（这个就是图片，它父标签是body，设置样式body）
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
属性值 left **center** right

text-decoration 文本修饰
属性值 underline 下划线常用
line-through 删除线不常用
overline 上划线基本不用
none无线很常用去超链接线

line-height即行高=文字高度+上间距+下间距控制一行的上下间距
属性值可以数字+px或者当前font-size的倍数
复合语句font：style weight size/line-height family；
font:italic 777 30px/2 宋体; 2就是2倍
应用：1. 让单行文本**垂直居中**可以设置 line-height : 文字**父元素高度**
2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距

谷歌浏览器调试 f12 找到样式自己的css 可以点击属性值按键盘上下，可以添加属性，在最后一个属性值那按tab就换行了，可以写

颜色常见取值 3原色红绿蓝
十六进制写法#000000 黑简写#000 #ff0000简写#f00
rgba表示法 a表透明度0到1 rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )
rgb写法关键字写法如red

标签水平居中方法总结 margin : 0 auto 0上下间距 auto左右居中

4、选择器进阶

复合选择器
1、后代选择器儿子孙子都会选，那个第一个p不会变红
选择器1 选择器2{css}

2、子代选择器 > 只选儿子
选择器1 >选择器2{}

3.并集选择器同时选择多组标签，设置相同的样式
选择器1，选择器2{}

4.交集选择器选中页面中同时满足多个选择器的标签
选择器之间是紧挨着的，没有东西分隔
选择器1 选择器2{} p.box{} p标签里的这个类

hover伪类选择器 **鼠标悬停在元素上的状态任何标签都能加**
选择器：hover{}
a:hover{
color: red;
}
<a href="#">超链接</a>

emmet语法通过简写语法，快速生成代码

a{导航$}*4
在href里快速添加，按住alt+shift，选中4个加#就行

提示css 单词的首字母
w300+h200+bgc

5、背景相关属性

background-color bgc 默认透明 rgba(0,0,0,0) 背景颜色
一般在布局中会习惯先给盒子设置背景颜色

background-image:url(路径) bgi 背景图片
• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

background-repeat：属性值 bgr 背景平铺 repeat 为默认属性值默认水平垂直都平铺
还有**no-repeat不平铺** repeat-x横着 repeat-y竖着铺

background-position：**水平方向垂直方向** 属性值里有空格 bgp 背景位置 0 0 就是左上角
属性值填right bottom下数字px center ...
背景色和背景图只显示盒子里面 -30就外面了

复合语句
background：color image repeat position 这个不按顺序，最好按
background:pink url(./1.jpg) no-repeat center center;

img标签来实现重要图片
background-image 图片放div里，不重要放背景

6、元素显示模式

块级元素 :
1、独占一行（一行只能显示一个）
2.、宽度默认是父元素的宽度，高度默认由内容撑开
3.、可以设置宽高
如：div、p、h系列、ul、li、dl、dt、dd**、form、header、nav、footer……

行内元素：
1、一行可以显示多个
2.、宽度和高度默认由内容撑开
3.、不可以设置宽高
如：a、span、b、u、i、s、strong、ins、em、del

行内块元素：
1、一行可以显示多个
2、可以设置宽高
如：input、textarea、button、select……

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

元素显示模式转换
改变元素默认的显示特点，让元素符合布局要求
display：属性名

块级元素一般是作为大容器 p标签不能嵌套div p h 等块级元素
a标签内部可以嵌套任何元素，除了自己

margin-top: calc((100vh - 200px)/2);

/* 这计算可以永远垂直居中,不受缩放影响 */

7、css的继承性

子元素有默认继承父元素样式的特点
可以继承的常见属性(**文字控制属性都可以继承**)
1、color
2.、font-style、font-weight、font-size、font-family
3.、text-indent、text-align
4.、line-height
...
常见应用场景：
1、可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
2、直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

超链接的蓝色，不能继承，像h1这种字体也不会。我没有就继承我爹的，我有就不继承

8、css的层叠性和优先级

1、给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2、给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

优先级或者叫权重
谁的范围广谁的优先低

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

!important写在属性值的后面，分号的前面！

复合选择器就是多个样式。每个样式数**行内个数，id个数，类个数，标签个数**，按这顺序数，如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
!important如果不是继承，则权重最高，天下第一！

1、先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
2. 通过权重计算公式，判断谁权重最高

9、盒子模型：

页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

边框：border
复合属性**border：10px solid red;** 粗细线颜色不分顺序快捷键 bd+tab 10是粗细 solid实线 dashed虚线 dotted点线 **单独设置边框border-方向名词** **会撑大盒子，类似于纸箱**

内边距：padding

属性名：padding - 方位名词
➢ 属性值：数字 + px

外边距：margin
设置和内边距一模一样，就位置不一样

撑大需要减，可以变成css3盒子模型，加box-sizing:border-box; 就不需要手动减法，内减模式

清除默认内外边距 *{margin：0；padding：0；} 这样式一定要有

去掉ul>li的符号 ul{list-style: none;}

外边距折叠现象 :
合并现象垂直布局的块级元素，上下的margin会合并，结果为最大那个，解决，只给一个盒子设置margin即可

外边距的塌陷子级坑父级子元素的margin-top会作用在父元素上，导致父元素一起下移动在父样式添加overflow：hidden;设置浮动

行内元素如span 标签的margin和padding的-top和-bottom不生效，可以加行高解决问题line-height

10、浮动

结构伪类选择器：
1、作用：根据元素在HTML中的结构关系查找元素
2、优势：减少对于HTML中类的依赖，有利于保持代码整洁
3、场景：常用于查找某父级选择器中的子元素
E:first-child{} 匹配父元素第一个子元素
E:last-child{} 最后一个
E:nth-child(n){} 第n个，1就是第一个
E:nth-last--child(n){} 倒数第n个
n可以是公式，n从0开始：偶数2n、2n+1奇数，-n+5前五个，n+5后五个。4n是4的倍数

伪元素：css模拟出的标签效果工作里用装饰性的不重要的小图
::before 在父元素内容的前面添加一个伪元素
::after 在父元素内容的后面添加一个伪元素
必须设置content属性才能生效
伪元素默认是行内元素 dispaly

标准流
又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则
1、块级元素：从上往下，垂直布局，独占一行
2、行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

浮动
1、早期作用：图文环绕
2.、现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右

css里 float：left，right

特点：盒子脱离标准流浮动元素比标准流高半个等级，可以覆盖标准流的元素，浮动标签顶对齐
浮动后的标签具备行内块特点，**一行显示多个设置宽高**
浮动的元素不能通过text-align:center或者margin:0 auto

css书写顺序
1浮动/display
2盒子模型 margin border padding
3文字样式
这样浏览器执行效率高

写网页第一步 *{m0+p0}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
/* 清除默认内外边距和添加内减模式这样div就不会撑大 */
}

清除浮动的方法有哪些？
1、直接设置父元素高度
2、额外标签法
3、单伪元素清除法
4、双伪元素清除法
5.、给父元素设置overflow : hidden

11、布局定位（完）

标准流
1、块级元素独占一行 → 垂直布局
如：**div、p、h系列、ul、li、dl、dt、dd**、form、header、nav、footer……
2、行内元素/行内块元素一行显示多个 → 水平布局

浮动
1、可以让原本垂直布局的块级元素变成水平布局
定位
1、可以让元素自由的摆放在网页的任意位置
2. 一般用于盒子之间的层叠情况

设置定位的方式
属性名position 后面需要偏移值方向上下左右英文
属性值：
relative 相对定位常用配合绝对定位组CP（**子绝父相**）在页面中占位置 → 没有脱标
设置偏移值：水平+垂直就近各取一个
position: relative;
left: 100px;
top: 100px;
/* 改变位置参照原来位置而且占有原来位置，左上为准*/

absolute 绝对定位
脱标不占位置具备行内块特点（在一行共存，宽高生效）
有父级没有定位，就以窗口浏览器为参照，父级一般用相对定位，**子绝父相**
不能使用margin居中
div{
position: absolute;
left: 50%;
/* margin-left: -150px; */
top: 50%;
/* margin-top: -150px; */
transform: translate(-50%,-50%);
/* 上面这更方便 */
width: 300px;
height: 300px;
background-color: pink;

}
fixed 固定定位
脱标不占位置位置参考浏览器窗口具备行内块特点

static静态定位一般用不到就是默认标准流

标准流<浮动<定位
默认定位的盒子后来者居上，默认z-index的值是0
加z-index：整数越大显示顺序越往上必须和定位用

垂直对齐方式
vertical-align：
属性值：baseline 默认基线对齐 top顶部 middle 中部 bottom 底部

浏览器遇到行内和行内块标签当文字处理。默认文字按基线对象
比如2个input标签一个文本一个按钮，加个垂直对齐就行

光标类型
cursor
属性值
default 默认是箭头
pointer 小手
text 工字形可以复制
move 十字光标

边框圆角
属性名border-radius
取值一般数字+px、百分比
4个不同值左上、右上、右下、左下
盒子的百分50就是正圆
胶囊取盒子高度的一半盒子本身是长方形

溢出部分
属性名overflow
属性值
visible 默认溢出可见
hidden 溢出隐藏
scroll 无论溢出，显示滚轮
auto 根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏
visibility:hidden；占位隐藏不常用
display:none 常用

元素整体透明度
opacity 取值0-1 0完全透明

精灵图
项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

将精灵图设置背景图片都使用内标签 span、b、i
先测试精灵图里那个图标的大小，bgi设置背景图默认左上角量水平和垂直像素
background-position: 0 0; 背景图位置水平和垂直

background-size: contain;等比例缩放背景图大小可以是数字px、百分比 cover 覆盖

text-shadow文字阴影
取值h-shadow水平偏移必选
v-shadow 垂直偏移必选，下面是可选
blur模糊度
color阴影颜色

盒子阴影 box-shadow
取值h-shadow水平偏移必选
v-shadow 垂直偏移必选，下面是可选
blur模糊度
spread 阴影扩大
color阴影颜色
inset阴影改内部阴影默认外

过渡 transition 常配合hover使用
让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

如果变化的多，写all表示所有，谁变化谁加过渡属性
过渡的属性过渡的时长数字+s
div{
width: 400px;
height: 400px;
background-color: pink;
transition: width 1s;
}
div:hover{
width: 600px;
}

12、补充

CSS的书写顺序

3、JavaScript

1、初识JavaScript

(ECMAScript)js语法+bom+dom组成JavaScript(JS)

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

**文档对象模型**（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的**标准编程接口**。

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS 有3种书写位置，分别为行内、内嵌和外部

注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

<input type="button" value="点我试试" οnclick="alert('Hello World')" / > 行内不推荐
< script>alert('Hello World~!'); < /script> 内嵌
< script src="my.js"></ script> 外部

// 用来注释单行文字（快捷键 ctrl + / ）

vscode里修改
输入输出语句：

变量：
变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。
var 是一个 JS关键字，用来声明变量

命名规则：
由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
推荐翻译网站：有道爱词霸

JS 把数据类型分为两类：
简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

数字型 Number
alert(Number.MAX_VALUE); // 1.7976931348623157e+308 最大
alert(Number.MIN_VALUE); // 5e-324 最小

alert(Infinity); // Infinity 无穷大
alert(-Infinity); // -Infinity 小
alert(NaN); // NaN 非数值

isNaN() 判断一个变量是否为非数字的类型，返回 true 或者数字则false
var usrName = "andy";
console.log(isNaN(userName)); // true ，"andy"是一个非数字

字符串型 String
字符串型可以是引号中的任意文本
HTML 标签里面的属性使用的是双引号，JS 这里我们更**推荐使用单引号**

字符串转义符

字符串的 length 属性可以获取整个字符串的长度
alert(s.length);

字符串拼接
字符串 **+** 任何类型 = 拼接之后的新字符串

案例代码
var age = prompt('请输入您的年龄');
var str = '您今年已经' + age + '岁了';
alert(str);

typeof 可用来获取检测变量的数据类型
var num = 18;
console.log(typeof num) // 结果 number

转换为字符串
更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换

转换为数字型（重点）

转换为布尔型
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

2、运算符

算术运算符

递增运算符
++num 前置递增 **先自加，后返回值**
var num = 10;
alert(++num + 10); // 21

num++ 后置递增 **先返回原值，后自加**
var num = 10;
alert(10 + num++); // 20

比较运算符

逻辑运算符

与必须2边都正确才是正确或只要一个对就是对

运算优先级

3、分支

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构

if else语句
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert("这个年份是闰年");
} else { // 剩下的是平年
alert("这个年份是平年");
}

三元表达式
表达式1 ? 表达式2 : 表达式3;
如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
// 三元表达式表达式？表达式1 ：表达式2
var result = time < 10 ? '0' + time : time; // 把返回值赋值给一个变量
alert(result);

switch 语句
switch( 表达式 ){
case value1:
// 表达式等于 value1 时要执行的代码
break;
case value2:
// 表达式等于 value2 时要执行的代码
break;
default:
// 表达式不等于任何一个 value 时要执行的代码
}

var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
case '苹果':
alert('苹果的价格是 3.5/斤');
break;
case '榴莲':
alert('榴莲的价格是 35/斤');
break;
default:
alert('没有此水果');
}

4、循环

for( 初始化变量; 条件表达式; 操作表达式 ){
//循环体语句
}

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}
外层循环执行一次，内层循环要执行全部次数

var star = '';
for (var j = 1; j <= 3; j++) {
for (var i = 1; i <= 3; i++) {
star += '☆'
}
// 每次满 3个星星就加一次换行
star += '\n'
}
console.log(star);

var row = prompt('请输入您打印几行星星:');
var col = prompt('请输入您打印几列星星:');
var str = '';
for (var i = 1; i <= row; i++) {
for (j = 1; j <= col; j++) {
str += '☆';
}
str += '\n';
}
console.log(str);

var str = ''
for (var i = 1; i <= 9; i++) { // 外层for控制行数 9行
for (var j = 1; j <= i; j++) { // j 控制列数列数和行数是一样的 j <= i
str += j + " × " + i + " = " + i * j + '\t';
}
str += '\n';
}
console.log(str);

while (条件表达式) {
// 循环体代码
}
使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
先执行一次循环体代码
再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

do {
var love = prompt('你是谁？');
} while (love != '我是你')
alert('登录成功');

continue 关键字用于立即跳出本次循环，继续下一次循环
break 关键字用于立即跳出整个循环（循环结束）

5、数组

// 普通变量一次只能存储一个值
var num = 10;
// 数组一次可以存储多个值
var arr = [1,2,3,4,5];

创建数组
var arr = new Array(); // 创建一个新的空数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];

数组的索引
// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);

遍历数组
var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
console.log(arrStus[i]);
}

使用“数组名.length”可以访问数组元素的数量（数组长度）。
var arrStus = [1,2,3];
alert(arrStus.length); // 3

var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
average = sum / arr.length;
console.log('这组数的和是：' + sum);
console.log('这组数的平均值是：' + average);

冒泡排序

是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小）。
将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序，输出： 1，2，3，4，5

var arr = [5, 4, 3, 2, 1];
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);

6、函数

函数在使用时分为两步：声明函数和调用函数。
// 声明函数
function 函数名() {
//函数体代码
}
function 是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum

// 调用函数
函数名(); // 通过调用函数名来执行函数体代码

/*
计算1-100之间值的函数
*/
// 声明函数
function getSum(){
var sumNum = 0;// 准备一个变量，保存数字和
for (var i = 1; i <= 100; i++) {
sumNum += i;// 把每个数值都累加到变量中
}
alert(sumNum);
}
// 调用函数
getSum();

return 语句的语法格式如下：
function 函数名（）{
...
return 需要返回的值；
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
在使用 return 语句时，函数会停止执行，并返回指定的值
如果函数没有 return ，返回的值是 undefined
function getMax(num1, num2) {
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 2));
console.log(getMax(11, 2));
用函数求任意一个数组中的最大值
//定义一个获取数组中最大数的函数
function getMaxFromArr(numArray){
var maxNum = 0;
for(var i =0;i < numArray.length;i++){
if(numArray[i] > maxNum){
maxNum = numArray[i];
}
}
return maxNum;
}
var arrNum = [5,2,99,101,67,77];
var maxN = getMaxFromArr(arrNum); // 这个实参是个数组
alert('最大值为：'+ maxN);

return 语句之后的代码不被执行。
return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

创建一个函数，实现两个数之间的加减乘除运算，并将结果返回
var a = parseFloat(prompt('请输入第一个数'));
var b = parseFloat(prompt('请输入第二个数'));
function count(a, b) {
var arr = [a + b, a - b, a * b, a / b];
return arr;
}
var result = count(a, b);
console.log(result);

函数都是有返回值的
如果有return 则返回 return 后面的值
如果没有return 则返回 undefined

利用函数封装方式，翻转任意一个数组
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);
利用函数封装方式，对数组排序 -- 冒泡排序
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
输入一个年份，判断是否是闰年（闰年：能被4整除并且不能被100整数，或者能被400整除）
function isRun(year) {
var flag = false;
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
flag = true;
}
return flag;
}
console.log(isRun(2010));
console.log(isRun(2012));

7、对象

万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

对象是由属性和方法组成的。

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

现阶段我们可以采用三种方式创建对象（object）：
利用字面量创建对象
利用 new Object 创建对象
利用构造函数创建对象

对象字面量：
就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。
{ } 里面采取键值对的形式表示
键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
调用
对象里面的属性调用 : 对象.属性名，这个小点 . 就理解为“ 的 ”
对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号
console.log(star.name) // 调用名字属性
console.log(star['name']) // 调用名字属性
star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

利用new Object创建对象
跟我们前面学的 new Array() 原理一致
var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}

Object() ：第一个字母大写
new Object() ：需要 new 关键字
使用的格式：对象.属性 = 值;

利用构造函数创建对象
是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

构造函数用于创建某一类对象，其**首字母要大写**
构造函数要和 **new 一起使用**才有意义构造函数中不需要 return 返回结果

function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sayHi = function() {
alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
}
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);

new 在执行时会做四件事情：
1、在内存中创建一个新的空对象。
2、让 this 指向这个新的对象。
3、执行构造函数里面的代码，给这个新对象添加属性和方法。
4、返回这个新对象（所以构造函数里面不需要return）。

**遍历对象属性**
for...in 语句用于对数组或者对象的属性进行循环操作。
for (变量 in 对象名字) {
// 在此执行代码
}

for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}

8、内置对象

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
Math.PI       // 圆周率
Math.floor()    // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版就近取整注意 -3.5 结果是 -3
Math.abs()       // 绝对值
Math.max()/Math.min()   // 求最大和最小值

random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
得到一个两数之间的随机整数，包括两个数在内
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

日期对象
获取当前时间必须实例化
var now = new Date();
console.log(now);

Date() 构造函数的参数
如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date('2019-5-1') 或者 new Date('2019/5/1')
如果Date()不写参数，就返回当前时间
如果Date()里面写参数，就返回括号里面输入的时间

9、数组对象

instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

添加删除数组元素的方法

有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[i]);
}
}
console.log(newArr);

数组排序

var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
return b - a; // 降a序
// return a - b; // 升序
});
console.log(arr);

数组索引方法

数组转换为字符串

查询

根据字符返回位置

字符串操作方法（重点）

replace() 方法用于在字符串中用一些字符替换另一些字符。
replace(被替换的字符串，要替换为的字符串)；

split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]

toUpperCase() //转换大写
toLowerCase() //转换小写

4、JavaScript之Web API

1、了解

DOM树是什么
 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

DOM的核心思想
 把网页内容当做对象来处理
document 对象
 是 DOM 里提供的一个对象
 所以它提供的属性和方法都是用来访问和操作网页内容的
 例：document.write()
 网页所有内容都在document里面

查找元素DOM元素就是选择页面中标签元素

2、获取DOM对象

document.getElementById('id');

document.getElementsByTagName('标签名');
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
操作里面的元素就需要遍历

element.getElementsByTagName('标签名');
父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

h5新增：
document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合

document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

document.querySelectorAll('选择器'); // 根据指定选择器返回

querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');

有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。

获取特殊元素
doucumnet.body // 返回body元素对象
document.documentElement // 返回html元素对象

执行事件的步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）

页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框。
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('你好吗');
};

改变元素内容
element.innerText
从起始位置到终止位置的内容, 但它去除 html 标签，同时空格和换行也会去掉

element.innerHTML
起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

当鼠标点击二维码关闭按钮的时候，则关闭整个二维码。
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 2.注册事件程序处理
btn.onclick = function() {
box.style.display = 'none';

可以利用 for 循环设置一组元素的精灵图背景
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 让索引号乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/128900