admin管理员组文章数量:1794759
HTML5+CSS3+JavsScript 菜鸟学习笔记
目录
HTML
HTML概述
HTML基础
基本标签
表格（table）
背景
HTML HTML概述
系统架构
B/S架构 Browser/Server 浏览标记
C/S架构 Client/Server 客户端/服务器
W3C（world wide web） 世界万维网联盟（制定了HTML的规范）
HTML是超文本标记语言（标记：标签 使用大量标签；超文本：流媒体、图片、声音等）
HTML基础 基本标签1、<!doctype html> html5语法（解释文档类型） （！加tab 可自动生成） html不区分大小写 meta charset=“utf-8”浏览器采用xxx字符集打开
2、换行 <br >
3、水平线<hr>
4、font标签 字体标签
6、实体符号（以&开始 以；结束）
< < 小于号 > >大于号  空格
表格（table） <table border='1px' width='100px' height='100px'>//可以设置样式 <thead>//表头 <tr>//行 <th>//单元格 列 <input type="checkbox" id="all">//复选框 </th> <th>商品</th> <th>价钱</th> </tr> </thead> <tbody id="one">//表格内容 <tr>//行 <th> <input type="checkbox"> </th> <th>1</th> <th>1</th> </tr> <tr> <th> <input type="checkbox"> </th> <th>1</th> <th>1</th> </tr> <tr> <th> <input type="checkbox"> </th> <th>1</th> <th>1</th> </tr> <tr> <th> <input type="checkbox"> </th> <th>1</th> <th>1</th> </tr> </tbody> </table>1、单元格合并 行合并 rowspan=“” 删下不删上（同一行） 列合并 colspan=“”（不同行）
2、th标签(标题单元格 居中加粗)
thead、tbody、tfoot(非必须 便于js的编写)
背景 background：url（路径）图片 <img src=“” title='标题' alt=''>
超链接<a href=“路径/本地地址” talent=""></a> href hot reference 热引用 talent:_blank新窗口 _self _top _parent
作用： 1、通过超链接从浏览器向服务器发送请求 B---请求（request）-----S S---响应（response）-----B
超链接提交的数据是固定的
列表 表单（form）概述
1、作用：收集用户信。提交数据给服务器 2、<form action="请求路径"></from>
3、action 作用：指定提交数据给哪个服务器（请求路径中的端口对应的服务器） 格式： action？name=value&name=value&name=value
有name才能提交
method 属性（超链接 默认get） get：信会显示在浏览器地址栏上 post：不会---
input 输入框
下拉列表select（选择） option value=”“
multiple=”multiple“ size=”下拉列表显示个数
input type=”submit/button“ name=”“ submit 提交表单数据 button 普通按钮 reset 重置清空 radio 单选按钮 file 选择文件 text 文本 password 密码 checkbox 复选框
单选按钮必须要有value hidden 在网页上不显示 但还是会提醒
value控件 readonly和disabled 都不能修改 但disabled不提交数据
控件maxlength和minlength 设置文本框数字
文本域 textarea 没有value
表单验证h5新增类型：
设置表单元素必填 required
如何使用正则 pattern
提交表单时不验证 novalidate/formnavalidate
元素的id属性
在html文档当中。任何元素（节点）都有id属性，id属性是该节点的唯一属性，不能重复
作用：便于获取元素、节点 javascript通过id获取节点对象来进行增删改查
HTML文档是一棵树，叫DOM树（document）。 树上有节点，每个节点都有唯一的id。
div和span概述
可以称为图层/盒子，方便布局 div独占一行 块级元素 span不会
盒子套盒子 可以通过x坐标和y坐标进行定位 标记: 优先级 1
CSSCSS概述
层叠样式表
三大特性
层叠性
继承性
可以继承的样式 文本 字体 段落 颜色
text- font- line- color
优先级
权重
继承/* 0 元素选择器 1 类选择器/伪类选择器 10 id选择器 100 行内样式 style=“”1000 ！important 无穷大
a链接 不参与继承
权重会叠加 但不会进位
是一种标记语言 美化html 实现结构和样式分离
CSS基础元素显示模式
块元素div h p ul ol li dl dt dd table tr form 等元素
独占一行
可以设置宽高 内外边距
宽度默认是父级元素的100%
当块级元素的宽度超过父元素宽度时 不会自动换行
行内元素a span em strong
默认宽度是本身内容宽度
一行可以有多个元素
行内元素只能放文本或者其他行内元素（a除外）
行内块元素 img input th td
可以实现块级元素在同一行 但中间会有缝隙
默认宽度为本身内容宽度
宽高 行高 内外边距可以设置
转换模式
display
block
inline
inline-block
css语法规范选择器
作用：选择标签
分类
基础选择器 标记: 优先级 1
标签选择器 例如：div span等 标记: 优先级 1
类选择器 例如：.box等 标记: 优先级 1
id选择器 例如：#box 标记: 优先级 2
只能出现一个 不能同名
搭配js使用
通配符选择器 * 标记: 优先级 2
复合选择器 标记: 优先级 1
由两个或三个基础选择器组合
分类
后代选择器 ul li 标记: 优先级 1
子选择器 div>p 选择元素1最近一级子元素 标记: 优先级 2
并集选择器 div, span, p 标记: 优先级 1
伪类选择器
链接伪类 标记: 优先级 1
声明顺序：LVHA ：link ：visited ：hover //鼠标经过 ：active //点击 标记: 优先级 2
结构伪类
：focus 用于获得焦点的表单元素（input） 标记: 优先级 1
一条或多条声明
css文本属性 标记: 优先级 2
color
常见颜色英文 rgb代码 常用十六进制 #000000//黑色 标记: 优先级 1
常用颜色
#000黑 #FFF白 #808080灰色 #FF0000红色 #008绿色 #0000FF蓝色 #FFFF00黄色 #00FFFF青色 标记: 优先级 2
text-align 文本对齐
只作用于块级元素 可继承 让块级元素内行内元素实现居中（不一定是文字） 标记: 优先级 1
text-decoration 文本装饰
none underline overline//上划线 line-through//删除线
text-indent 首行缩进
line-height 行高
css背景 标记: 优先级 1
background-color
background-image：url（）
background-repeat
background-position：x，y
background：颜色 图片 平铺 滚动 位置（可省略） rgba（0， 0， 0， 0.x）透明度 标记: 优先级 1
background-attachment：srcoll/fixed
css边框、阴影 标记: 优先级 1
border-radius：左上角 右上角 右下角 左下角 圆角边框
盒子阴影 box-shadow:水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 默认为外部阴影（outset）inset 为内部阴影
文字阴影 text-shadow：水平阴影 垂直阴影 模糊距离 阴影颜色
css布局 标记: 优先级 1
1、核心：用CSS来摆放盒子位置
2、布局流程 标记: 优先级 2
确定版心（可视区） 标记: 优先级 1
网页的主体内容
清除内外边距 标记: 优先级 2
分析页面的行列模块 标记: 优先级 2
制作结构
css初始化 标记: 优先级 1
相同样式 并集选择器
3、元素的隐藏和显示 标记: 优先级 1
display：none 隐藏元素 标记: 优先级 1
不保留位置（脱标）
visibility：hidde/visible 标记: 优先级 1
保留位置
block 显示元素/块级元素
css字体 标记: 优先级 2
font-family
font-size
font-weight
font-style：normal/italic斜体
CSS的定位机制 标记: 优先级 1
普通流（标准流/文档流) 标记: 优先级 2
总结重点：竖向上布局找标准流 横向上布局找浮动 空间上布局找定位 标记: 优先级 1
浮动 标记: 优先级 1
1、会脱离标准流，不占位置，会影响标准流（漂在标准的上面） 标记: 优先级 1
2、设置为行内块元素可实现块级元素在同一行，但是盒子之间会有间隙 标记: 优先级 1
特性：浮 漏 特 标记: 优先级 1
首页创建包含块的概念。 就是说，浮动的元素总是和最近的父元素对齐，但不会超过内边距（padding和border）的范围 标记: 优先级 1
浮动的位置和上一个元素有关。 上一个元素有浮动，则浮动为顶部对齐 上一个元素为标准流，则对上一个元素的底部对齐 标记: 优先级 1
如果要实现一行对齐，则盒子内的所以元素都要设置浮动 标记: 优先级 2
块级元素和行内元素添加浮动之后，具有行内块的特性 标记: 优先级 1
行内块特性： 一行可以放多个 有宽度和高度 盒子大小由内容决定 标记: 优先级 1
父级元素不方便给高度的情况 标记: 优先级 1
清楚浮动的影响 浮动元素不占有位置，父亲没有高度，因此，下一个元素会浮上来，所以要清楚浮动带来的影响 标记: 优先级 1
方法
额外标签法 标记: 优先级 1
在浮动盒子后面添加一个空盒子 .clear
父级添加overflow 标记: 优先级 1
overflow：hidden/auto 会触发bfc
atfer伪元素清除浮动 标记: 优先级 1
.xx：after{ content: dispaly:block height:0 visibility:hidden clear:both } .xxx { *zoom:1;* ie6 7才能执行 //为了兼容性 }
双伪元素清除浮动 标记: 优先级 1
.xx：after .xx:before{ content: dispaly:table } .xx:after { clear:both } .xx{ *zoom:1; }
作用
让块级元素在一行显示 标记: 优先级 1
定位 标记: 优先级 1
css position属性 static 自动 标准流 无影响 left等偏移属性不影响 用来清除定位 flxed 固定
绝对定位和固定定位也和浮动类似 标记: 优先级 1
1、行内元素添加绝对或者固定定位（脱标） 可以直接设置高度和宽度 2、块级元素添加绝对或者固定定位 如果不给宽度 默认大小时内容的大小
脱标的盒子不会触发外边距塌陷（绝对定位 固定定位） 标记: 优先级 1
绝对定位（固定定位）会完全压住盒子 标记: 优先级 1
relative 相对 标记: 优先级 1
相对于自己的定位来移动位置
保留原位置 继续占有 不脱离标准流 标记: 优先级 1
absolute 绝对 标记: 优先级 1
以父亲为标准，如果父亲没有定位，则以文档（浏览器）为标准 标记: 优先级 1
完全脱离标准流 不占有位置 标记: 优先级 1
margin auto 居中无效 标记: 优先级 2
会转换为行内块元素
子绝父相 标记: 优先级 1
只要 子级是绝对定位，父级是绝对或者相对都可以 标记: 优先级 1
子绝父相
子绝父绝
绝对定位的盒子水平垂直居中 标记: 优先级 1
水平居中
先left 50%
再margin left 减一半
垂直居中
先top 50%
再margin top 减一半
可以先设置top和bottom为0
fixed 固定定位 标记: 优先级 1
脱离标准流 不占位置 不随着滚动条滚动 标记: 优先级 1
会转换为行内块元素
一定要写宽和高 除非有内容撑开
以浏览器的可视窗口为参照移动 标记: 优先级 1
叠放次序z-index 标记: 优先级 2
作用：调整重叠定位元素的堆叠顺序
取值：正负0 默认值为0 z-index：2
只有加了定位属性才有该属性
sticky 粘性定位
可以认为是相对定位和固定定位的混合
以浏览器的可视窗口为参照移动 标记: 优先级 1
会占有原先的位置 标记: 优先级 1
盒子模型 标记: 优先级 1
边框 border 标记: 优先级 1
border：width style color
border-style 标记: 优先级 1
none
solid 单实线 标记: 优先级 2
dashed 虚线
dotted 点线
border-collcapse ：collcapse//合并边框 标记: 优先级 1
控制相邻单元格的边框
盒子实际大小=内容区大小 +内边距大小+边框大小+外边距大小 标记: 优先级 2
外边距 margin 标记: 优先级 1
让块级元素水平居中 标记: 优先级 1
有宽度 标记: 优先级 2
margin：0 auto
行内元素和行内块元素水平居中 标记: 优先级 2
给父元素添加：text-align：center 标记: 优先级 1
外边距合并 标记: 优先级 1
注：内边距没有合并一说 浮动的盒子不会发生外边距合并 标记: 优先级 2
相邻块元素垂直外边距的合并 标记: 优先级 1
大的外边距覆盖小的 标记: 优先级 1
嵌套块元素垂直外边距的塌陷 标记: 优先级 1
外边距的效果显示在父元素之上 标记: 优先级 1
浮动、固定和绝对定位的盒子不会有塌陷问题 标记: 优先级 2
内边距 padding:上 右 下 左 标记: 优先级 1
会撑大盒子大小 可结合精灵图用于制作可根据大小变化的导航栏 标记: 优先级 1
内容
高级技巧 标记: 优先级 1
鼠标样式
cursor
default 默认
pointed 小手
move 移动
text 文本
轮廓 outline
去除轮廓线 outline：0/none； 标记: 优先级 1
防止文本拖拽
textarea resize：none；
精灵图（sprites） 标记: 优先级 1
作用：为了减少服务器接受和发送请求的次数 提高页面的加载速度 核心：将网页中一些小背景整合到一张大图中 标记: 优先级 1
使用：移动背景图片位置以控制显示区域 background-position 移动的距离就是这个目标图片的x和y坐标 一般都是往上往左移动 所以一般坐标都是负数（右边走时正值 左边走时负值） 标记: 优先级 1
滑动门 标记: 优先级 1
核心技术： 精灵图和padding撑开盒子
一般用来制作导航栏 div》ul》li》a》span》 设置a和span为行内块元素，只设置高度不设置宽度 标记: 优先级 1
a设置背景左侧 padding
span设置右侧 padding撑开 剩下的由文字内容撑开 标记: 优先级 2
2D变形 标记: 优先级 1
变形 transform 标记: 优先级 1
移动：translate（x,y）x和y都为负值 以父级的位置为准 translateX（x）
如果是百分比 以自己的宽度为准
旋转rotate（deg）
正值为顺时针 向左 负值为逆时针 向右、
设置旋转中心点
transform-origin：四个角 left top 等 精准的可用px
缩放：scale（x，y）可以只写一个参数 宽和高都缩放
倾斜 skew（x，y）正值为左倾斜，负值为向右倾斜
写在hover里面
过渡 transition 标记: 优先级 1
transition：宽度/高度/所有属性 width/height/all 花费时间 duration //必写 标记: 优先级 1
不要写在hover里面 标记: 优先级 1
运动曲线 timing-function（一般为ease 慢慢减速 ease-in 加速 ease-out 减速 linear 匀速） 标记: 优先级 2
delay 何时开始
3D变形 标记: 优先级 1
透视 perspesctive 标记: 优先级 1
原理：近大远小
添加父元素
视距越大 效果越不明显
translate3d（x，y，z） 标记: 优先级 1
translateZ是物体到屏幕的距离 Z是来控制物体近大远小的
透视知识一种展示形式 Z的值越接近透视设置的值 物体就越大
backface-visibilty：hidden 不是正面对象屏幕 就隐藏 标记: 优先级 2
animation 动画 标记: 优先级 1
定义动画 @keyframes 动画名称{ from/0% { transform：transtionX/Y（） } to/x%{ } } 标记: 优先级 1
引用动画 animation：动画名称 时间 （必写） 曲线 （ease） 何时开始（0） 播放次数（1） 是否反方向（normal/reverse/alternate） 标记: 优先级 2
多组动画
用百分比完成 标记: 优先级 1
伪元素after和before
类元素选择器 .xxx 伪类选择器 ：hover/active(点击)
是选取对象
伪元素选择器 ：：after 标记: 优先级 1
是插入一个元素（标签 盒子）只不过是行内元素 span a 标记: 优先级 1
鼠标经过出现边框 首先转换为block元素 再用绝对定位实现不占位置 标记: 优先级 1
box-sizing：border-box 把padding和margin算入width
伸缩布局 标记: 优先级 1
固定宽度
min-width max-width
display：flex 标记: 优先级 1
控制盒子的先后顺序 order
默认为0 数字越大 越后（可以为负值） 正序方式排序
排列方向 flex-diretion 标记: 优先级 1
flex-diretion： column 列排放 row 行排放 row-reverse 水平翻转 标记: 优先级 1
子元素排列顺序 标记: 优先级 1
justify-content x轴对齐 标记: 优先级 1
flex-start flex-end center 标记: 优先级 2
space-between 两端对齐 中间留空隙
标记: 优先级 2
space-around 相当于给每个盒子加了margin 标记: 优先级 1
align-items y轴对齐(单行) 标记: 优先级 1
flex-start
flex-end
center 标记: 优先级 1
stretch 相当于height：100% 标记: 优先级 1
是否换行 flex-wrap
nowrap 不换行/不换列 标记: 优先级 1
wrap 换行/换列 标记: 优先级 2
wrap-reverse 翻转
排列方向 换不换行 标记: 优先级 1
flex-flow： flew-direction flew-wrap
align-content 堆栈 对齐（多行） 标记: 优先级 1
flex-start
flex-end
center 标记: 优先级 1
stretch 相当于height：100%
space-between 两端对齐 中间留空隙
space-around 相当于给每个盒子加了margin 标记: 优先级 1
盒子模型布局稳定性 标记: 优先级 1
优先使用： width>paading>margin
宽度剩余法 高度剩余法 按高度or宽度来设置盒子里面设置小盒子大小
padding
有宽度会撑大盒子
块级元素会继承父元素的宽度 此时 子元素没有宽度 不会被padding撑大 标记: 优先级 1
css box-sizing 新属性 content-box 会影响盒子大小 border-box 不会
盒子溢出 overflow 标记: 优先级 2
visible 默认的 超出显示
auto 自动 超出就有滚动条 标记: 优先级 1
hidden 超出隐藏
JavaScript 标记: 优先级 1
编程语言：用来控制计算机的一系列指令 有固定的格式和词汇 标记: 优先级 2
汇编语言
高级语言
与标记语言的区别： 标记语言不用于向计算机发出指令 常用于格式化和链接 是用来被读取的 是被动的 编程语言有很强的逻辑和行为能力 标记: 优先级 1
历史：创始人-布兰登-艾奇 标记: 优先级 3
前端语言：处理界面//只能在浏览器运行 不能在后端处理数据 后端语言：处理数据 前端（浏览器）——http协议——后端（服务器） 标记: 优先级 1
三部分组成：ECMAScript 是js的标准 //语言核心：ES5和ES6 DOM 操纵HTML BOM操作浏览器 标记: 优先级 1
书写位置：1、在body中的script标签内书写 2、保存为.js文件 在body末尾声明 标记: 优先级 2
ECMAScript 标记: 优先级 1
数据类型 标记: 优先级 1
基本数据类型 值类型 标记: 优先级 1
没有字符型 string是基本类型 String（）内置函数 转换为字符串 标记: 优先级 2
返回的一般是值 数据本身 标记: 优先级 1
Number 数字型 默认0 //可以不同进制表示 并在控制台中转换为十进制 二进制前面加0b 八进制前面加0 十六进制前面加0x 标记: 优先级 1
即可以保存整数 也可以保存小数 标记: 优先级 2
范围：Number.MAX//MIN_VALUE
特殊值：+-Infinity无穷大/小 NaN是一个值 不是类型 非数字 不自等即 NaN == NaN //false 0除以0的结果是NaN 标记: 优先级 1
isNaN（）用来判断非数字 true/false 标记: 优先级 1
String 字符串型 标记: 优先级 1
有引号的就叫字符串型‘’or“” 标记: 优先级 2
嵌套 单引号包裹双引号 标记: 优先级 2
字符串转义字符 \\ 在引号里面使用 \\n 换行 \\\\斜杠\\ \\' “单引号or 双引号 \\t tab缩进 \\b 空格 blank 标记: 优先级 1
用+来拼接字符串 空字符串 var str=”“ 标记: 优先级 2
变量名+空字符串 可将此变量变为字符串类型 标记: 优先级 1
只要有字符串类型的拼接 最后结果就是字符串 标记: 优先级 1
变量名.length 表示字符串的长度 标记: 优先级 2
Boolean 标记: 优先级 2
只有 true（1）和false（0）两个值 标记: 优先级 1
Udefined 标记: 优先级 2
声明变量未赋值 标记: 优先级 2
和数字相加 结果是NaN 标记: 优先级 1
Null 标记: 优先级 1
空值
和数字相加 返回数字 标记: 优先级 1
typeof运算符 标记: 优先级 1
检测值或变量的类型 标记: 优先级 1
是运算符 不是函数 不需要加（） 标记: 优先级 2
检测null的类型为object 标记: 优先级 1
prompt取过来的值是字符型的 标记: 优先级 1
三个特殊的引用类型
Boolean
String
Number
控制台颜色
蓝色：数字型 灰色 underlined /null 黑色 字符串类型 浅蓝色 布尔型 标记: 优先级 2
字面量
在源代码中一个固定值的表示法 表示如何表达这个值 标记: 优先级 2
复杂数据类型 标记: 优先级 1
Object 对象
Array 数组
Function 函数
RegExp 正则表达式
Date
Map
Symbol
JS函数 标记: 优先级 1
语句的封装 方便代码块被重复使用 标记: 优先级 1
函数的定义与调用 标记: 优先级 2
命名函数：function 函数名（形参名 ）{语句块} 标记: 优先级 1
函数表达式：var 函数变量 = function（）{}； 标记: 优先级 2
调用： 函数名（）；
函数的参数和返回值 标记: 优先级 1
Js只有值传递 没有引用传递 对于复杂类型的传递 传递的不是引用 而是变量里面的值（引用的地址） 标记: 优先级 1
return 返回值 即退出函数 结合 if使用 一般不需要再写else 标记: 优先级 2
函数重载 标记: 优先级 1
arguments 表示他接受到的实参列表是一个类数组对象 function fun () { console.log(arguments); } fun(1,2,3,1,2) 类数组对象：所有属性均为从0开始的自然数序列，并且有length属性，和数组类似可以用方括号书写下标访问对象的某个属性值 但是不能调用数组的方法 标记: 优先级 1
参数个数不同形成重载 arguments.length 不同 参数个数即不同 标记: 优先级 2
构造函数 标记: 优先级 1
function Star（）{this.xx=xx this.sing = fucntion(xx){} } 标记: 优先级 1
var ldh = new Star（xx）//对象的实例化 new //在内存中创建一个空对象 this 指向整个对象 执行代码 返回新对象 标记: 优先级 2
利用构造函数创建对象的过程就叫对象的实例化 标记: 优先级 2
new Date（） 方法 用来获取当前时间 标记: 优先级 1
时间戳 当前时间距离 1970 1 1 号 的毫秒数 标记: 优先级 1
date.valueOf() date.getTime() 标记: 优先级 2
H5新增 Date.now（） 标记: 优先级 1
方法 var date1 = +new Date（） 标记: 优先级 1
没有参数就返回当前时间（可带参数） 标记: 优先级 1
getFullYear（）返回当前年份
getMonth（） 返回的月份小1 （0-11）
getDate（） 返回日期
getDay（）返回星期几 0 1 2 3.。。
getHours（） getMinutes（） getSecos()
把属性和方法封装到函数中 泛指某一类 标记: 优先级 1
JS面向对象 标记: 优先级 1
是一个具体的事物 是一组无序的相关属性（特征 名词）和方法（行为 动词）的集合 保存一组信 标记: 优先级 1
是引用类型值 复杂数据类型 object 标记: 优先级 1
== 和 === 没有区别 都是比较值和类型是否相同 比较为是否为内存中的同一个对象 标记: 优先级 1
创建对象 标记: 优先级 2
var obj={ x:xx, y:xx, hi:function(){ xxxx; } }
var obj = new object(); //创建了一个空的对象
对象的属性 标记: 优先级 1
访问属性 对象名.key 标记: 优先级 1
如果属性名以变量形式或者字符串存储 必须使用方括号访问
键值：属性名（key）和属性值（value） 标记: 优先级 2
key为字符串格式
对象的方法 标记: 优先级 1
某个属性值是函数 则被成为方法
key：function（）{}
调用：对象名.方法名（）
对象的遍历 标记: 优先级 1
for..in for( k in 对象名){} k //属性名 obj【k】//属性值 标记: 优先级 2
JS内置方法 标记: 优先级 1
sort（） 数组排序 这个方法的参数可以是函数 标记: 优先级 2
Math.abs（）绝对值 标记: 优先级 2
Math.floor(Math.random() * (max - min - 1)) + min math对象产生随机整数 标记: 优先级 1
xxx instanceof Array 检测是否所谓数组 Array.isArray（） 标记: 优先级 2
JS作用域 标记: 优先级 1
代码名字（变量）在某个范围内起作用和效果 伪类提高程序的可靠性和减少命名冲突 标记: 优先级 2
es6之前 全局作用域 局部作用域 标记: 优先级 2
Js中没有块级作用域
全局作用域 ：整个script标签 局部：在函数内部
全局变量和局部变量 标记: 优先级 1
全局变量：在全局作用域下 在浏览器关闭时才会销毁 比较占内存
局部变量：在局部作用域下 函数的形参也是局部变量 在程序执行完毕时就会销毁
如果没有用var声明 默认是全局变量 标记: 优先级 2
JS数组 标记: 优先级 1
概念：用来存储一组相关值的类型 复杂引用类型 标记: 优先级 2
定义 var arr=new Array（内容） var arr = 【】 var arr = new Array（长度） 标记: 优先级 2
若更改的数组项超过length-1 则会自动创造该项 即 js数组可以动态扩容 标记: 优先级 1
访问数组项 数组名【下标】不存在就返回underfined 数组长度 arr.length 更改数组值 arr[x]=x 增加数组项 arr[arr.length]=xx 标记: 优先级 2
数组的遍历 标记: 优先级 1
var arr=[1,2,3,4]; for (var i=0;i < arr.length;i++){ console.log(arr[i]); }
var arr=['a','b','c']; for (var i in arr){ console.log(i); console.log(arr[i]); } 标记: 优先级 2
i 是计数器 当索引号使用 arr【i】是数组第i个数组元素 标记: 优先级 1
冒泡排序 标记: 优先级 1
是一种排序算法 重复的走访过要排序的数列 一次比较两个元素 如果顺序错误就交换 直到不需要再交换为止 标记: 优先级 2
数组排序 标记: 优先级 1
翻转排序 reverse（） 标记: 优先级 2
冒泡排序 sort（） 标记: 优先级 1
arr.sort(function(a,b){ return a-b;//升序排列 b-a//降序排列 } )
数组转换字符串 标记: 优先级 2
toString（）
join（’分隔符‘）
根据位置返回字符 标记: 优先级 1
charAt（index）返回指定位置的字符
str（index） h5新增 获取指定位置的字符
charCodeAt(index) 获取指定字符的ASCIII（index索引号） 用来判断按了哪个键
常用对象 方法 标记: 优先级 1
push（xx） 在数组末尾加入新项 参数xx就是要加入的值 标记: 优先级 1
pop（） 用来删除数组的最后一项 标记: 优先级 2
unshift（） 在数组头部加入新项 标记: 优先级 1
splice（）截取字符 标记: 优先级 1
subString（第几个开始，要删除个数） 截取字符串 标记: 优先级 1
数组中查找给定元素的第一个索引（如果不存在返回-1 存在则返回索引号） indexOf（要查找的字符‘，【开始的位置】）//从第一个开始查找 lastIndecOf（） //末尾开始查找 标记: 优先级 1
replace（） 替换字符 只替换第一个字符 标记: 优先级 2
JS基础 标记: 优先级 1
输出语句 内置函数（“参数”）；or 内置函数.方法（“”）； 标记: 优先级 2
输入语句 prompt（）； 标记: 优先级 1
alert(“”)//弹出警告框 标记: 优先级 1
console.log(“”)//控制台输出
变量 标记: 优先级 1
计算机语言中能储存计算结果或能表示值的抽象概念 即存储数值的容器 作用：保存数据 本质：变量是内存里的一块空间 用来存储数据 声明变量就是去内存申请空间 标记: 优先级 1
定义变量：var a=“”；//变量的初始化 关键字 变量名=“变量值”； 标记: 优先级 2
改变变量的值 a=“”；
赋值= 标记: 优先级 1
a = b//把b赋值给a
变量/函数/对象的属性等的合法命名 标记: 优先级 1
只能由字母、数字、 _、$组成 但不能以数字开头 标记: 优先级 1
不能是关键字或者保留字 标记: 优先级 1
变量名大小写敏感 a和A是不同变量 标记: 优先级 2
一般为驼峰命名法（java） 下划线命名法：c c++ python golang sql 标记: 优先级 3
变量的默认值 标记: 优先级 3
没有赋值 undefined 标记: 优先级 2
常见错误 标记: 优先级 2
不用var定义 直接赋值 不会引发错误 但是会产生作用域问题（为全局变量） 标记: 优先级 1
使用strict模式：如果没有用var定义 不会被视为全局变量 会运行错误 “use strict”放在js代码的任意一行 标记: 优先级 1
变量声明提升：可以提前使用一个稍后声明的变量 而不会引发异常 //js特有 一般不使用 标记: 优先级 2
数据类型转换 标记: 优先级 1
转换为字符串
1、toString（）变量名.toString
2、String（变量名）强制转换
3、加号拼接空字符串//隐式转换 标记: 优先级 1
转换为数字型 标记: 优先级 1
parseInt（）得到的只能是整数 可去除单位 标记: 优先级 1
先将参数转换为字符串 再转为整数
parseFloat（） 转换为浮点数 标记: 优先级 1
js（- * /）隐式转换 利用算数运算隐式转换为数值型 标记: 优先级 2
Number（’字符串‘） //字符串不支持表达式 但可以直接放一个表达式 标记: 优先级 1
转换为布尔型
代表空、否定的值会转换为false 例如 0 null NaN undefined 标记: 优先级 1
其余都会true
字符串类型常用的内置方法 标记: 优先级 1
charAt(编号) 得到指定位置字符
substring（a,b）提取子串 左闭右开 从a开始到b（不包括b） substr（a,b）从a开始 长度为b slice（a,b） 从a开始到b（不包括b）可以是负数 表示倒数 标记: 优先级 1
toUpperCase（）将字符串变为大写
toLowerCase（）将字符串变为小写
indexOf()检索字符串 返回某个指定的字符串值在字符串中首次出现的位置 如果没有出现 返回-1 标记: 优先级 1
trim（）删除首尾空格
trimStart（）删除首部空格
trimEnd(）删除尾部空格
运算符 标记: 优先级 1
用于实现赋值 比较 算数运算等 标记: 优先级 3
算数运算符 标记: 优先级 1
隐式类型转换：如果参与运算的某操作数不是数字类型 js会自动转换为数字型 标记: 优先级 2
加减乘除取余（%） 标记: 优先级 1
浮点数直接运算会有误差 标记: 优先级 2
不能直接比较浮点数 标记: 优先级 1
表达式 标记: 优先级 1
表达式 标记: 优先级 1
由操作数（数字 变量等）和运算符组成的式子 标记: 优先级 1
任何表达式都会有返回值 标记: 优先级 1
2=1+1
自赋值运算符 标记: 优先级 1
前置递增运算符 ++age 先自加后返回 标记: 优先级 2
后置递增运算符 age++ 先返回后自加 标记: 优先级 2
作用：让代码更简洁
比较运算符 标记: 优先级 2
== 等于 默认转换数据类型 只要求值相同
===全等 要求数据类型和值都要相同
逻辑运算符
进行布尔值运算 返回值也是布尔值 经常用于判断运算
&& 逻辑与
子主题 3
流程控制 标记: 优先级 1
循环 标记: 优先级 1
for循环 标记: 优先级 1
双重for循环 外层循环一次 里层全部循环
先分析 再写代码
while循环 标记: 优先级 2
while（）{}
do{ }while（判断条件）
判断 标记: 优先级 1
switch（变量/表达式）{ case： break； default：(可不写) } 标记: 优先级 1
三元表达式： 条件表达式 ？ 表达式1：表达式2 标记: 优先级 2
if（测试条件）{ }else if { }else{ } 标记: 优先级 1
基本包装类型 标记: 优先级 2
把简单数据类型包装成复杂数据类型 从而拥有属性和方法
DOM 标记: 优先级 1
基本概念 标记: 优先级 1
Document Object Model 文档对象模型 是Javascript操作文档的接口 标记: 优先级 2
可以将HTML文档表示为文档树 整个文档就对应一个document对象 标记: 优先级 1
处理可扩展标记语言的编程接口 标记: 优先级 1
document 对象nodeType 属性值为9 //即document 节点 标记: 优先级 1
所有标签都是元素 element 所有内容都是节点 node 标记: 优先级 1
文档document 元素element 节点node 都是对象 标记: 优先级 1
子主题 5
操作元素 标记: 优先级 1
修改元素 标记: 优先级 1
修改元素内容 （可读写） 标记: 优先级 1
innerHTML = ’‘ 从起始位置到终止位置的内容 去除html标签 空格和换行也会去掉 标记: 优先级 1
innerText 保留html标签的内容 空格和换行也保留 标记: 优先级 2
修改元素属性 标记: 优先级 1
元素名.属性 = ’‘ 标记: 优先级 1
获取元素 标记: 优先级 1
getElementbyId() 通过id获取元素 标记: 优先级 1
getElementsByTagName（） 通过标签获取指定标签名的对象的集合（返回时数组 如果没有整个标签 则返回一个空的伪数组） 标记: 优先级 1
h5新增 getElementByClassName() 通过类名获取 标记: 优先级 2
querySelector（）返回指定选择器的第一个元素 需要加符号 . # 标记: 优先级 1
querySelector All（） 返回指定标签的所有元素 标记: 优先级 1
获取特定标签 body document.body html document.documentElement 标记: 优先级 2
修改元素样式 标记: 优先级 1
element.style 行内样式修改 修改元素单个样式 标记: 优先级 1
element.className = 'classname' 修改元素的className 适合多个样式 会覆盖原来的类名 element.className = '原类名 classname' 多类名选择器 可保留原类名 标记: 优先级 1
子主题 1
获取元素的属性值 标记: 优先级 1
element.属性名 主要是内置属性
element.getAttribute（’属性名‘） 自定义属性
设置元素的属性值 标记: 优先级 2
element..属性名 = ’‘
element.setAtrribute（’属性名‘，值）
自定义属性 标记: 优先级 2
data-开头
节点操作 标记: 优先级 1
子主题 1
事件基础 标记: 优先级 1
事件三要素
事件源 什么被触发 事件类型 是按钮还是其他 事件处理程序 函数赋值 标记: 优先级 1
本文标签： 菜鸟学习笔记JavsScript
版权声明：本文标题：HTML5+CSS3+JavsScript 菜鸟学习笔记 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686974069a124264.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论