【前端】Html+Css+JavaScript基础知识点

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("这个年份是平年");
   }

var score = prompt('请您输入分数:');
if (score >= 90) {
alert('宝贝,你是我的骄傲');
} else if (score >= 80) {
alert('宝贝,你已经很出色了');
} else if (score >= 70) {
alert('你要继续加油喽');
} else if (score >= 60) {
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( 初始化变量; 条件表达式; 操作表达式 ){
    //循环体语句
}


var num = prompt('请输入次数:');
for ( var i = 1 ; i <= num; i++) {
    console.log('笨蛋~');

一个人1到100岁:
for (var i = 1; i <= 100; i++) {
 if (i == 1) {
    console.log('这个人今年1岁了, 它出生了');
 } else if (i == 100) {
    console.log('这个人今年100岁了,它死了');
  } else {
       console.log('这个人今年' + i + '岁了');
  }
}
1累加到100
var sum = 0;
for(var i = 1;i <= 100; i++){
        sumNum += i;
}
console.log('1-100之间整数的和 = ' + sum);

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在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);

var arrNum = [2,6,1,77,52,25,7];
var maxNum = arrNum[0]; // 用来保存最大元素,默认最大值是数组中的第一个元素
// 从0 开始循环数组里的每个元素
for(var i = 0;i< arrNum.length; i++){
    // 如果数组里当前循环的元素大于 maxNum,则保存这个元素和下标
    if(arrNum[i] > maxNum){
        maxNum = arrNum[i]; // 保存数值到变量 maxNum
    }
}
数组转换为字符串
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
for (var i = 0; i < arr.length; i++) {
    str += arr[i];
}
console.log(str);
新建一个数组,里面存放10个整数( 1~10), 要求使用循环追加的方式输出: [1,2,3,4,5,6,7,8,9,10]
var arr = [];
for (var i = 0; i < 10; i++) {
    arr[i] = i + 1;
}
console.log(arr);
将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来,放入新数组。
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 定义一个变量 用来计算 新数组的索引号
var j = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 给新数组
        newArr[j] = arr[i];
        // 索引号 不断自加
        j++;
    }
}
console.log(newArr);
或者
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 给新数组
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);
将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后,形成一个不包含 0 的新数组。
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];   // 空数组的默认的长度为 0 
// 定义一个变量 i 用来计算新数组的索引号
for (var i = 0; i < arr.length; i++) {
    // 找出大于 10 的数
    if (arr[i] != 0) {
        // 给新数组
        // 每次存入一个值,newArr长度都会 +1  
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

冒泡排序

是一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)。
将数组 [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';
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lucky小维

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值