总结学过的JavaScript
入门
js是什么?
js即javascript，它是一种轻量级的脚本语言。运行在浏览器客户端.
js引入方式
内嵌式：所有js代码写到一个<script></script>,此script标签可以放到html的任何地方：
<script type="text/javascript">
js代码
</script>
外链式
所有的js代码写到一个外部js文件内（该文件后缀名为.js）,
在html内通过script上的src属性引入过来。
<script src="js文件"></script>
事件引入
在开始标签上通过加事件引入js代码
<button onclick="js代码">按钮</button>
注释方式
单行注释：//注释内容
多行注释：
/*
注释内容
*/
输出方式
警告框：alert()
向文档内部写入内容：document.write(内容)
控制台日志输出：console.log()
变量与数据类型
数据类型
基本数据类型
字符串类型 string
数字类型 number
布尔类型 Boolean：true / false
null
undefined
复合（引用）数据类型:对象
变量
变量命名规范:
1.必须以字母、下划线、美元符号$开头，后面以是字母、下划线、美元符号或数字。
2.变量区分大小写
3.变量名不能使用关键字和保留字
声明变量:var 变量名
初始化变量:var 变量名 = 变量值;
如：var a = 10；
变量的值可以任何一种类型
运算符
赋值运算符:= 一个等号,把右侧的值赋值给左侧变量
算术运算符
加号+:
1.加法运算 加号两侧同时为数字，进行加法运算
2.字符拼接 加号两侧的任何一侧为字符串，表示字符串拼接 得到结果是字符串类型
减号-
乘号
除号/
取余%
1.对应算术运算符号两侧同时为数字时进行对应运算。
2.符号两侧的任何一侧为非数字，运算时会把该侧强制转换成数字进行运算，转换成功进行对应算术运算，转换不成功，得到结果NaN(Not a Number)
+=
-=
*=
/=
%=
例如：
var a = 10；
a += 2； --->a = a + 2
自增与自减
a++
++a
a--
--a
a++
++a
等价于 a = a + 1
比较运算符(关系运算符)
大于 >
小于 <
等于 ==
不等于 !=
大于等于 >=
小于等于 <=
恒等 ===
返回值：布尔值 true / false
逻辑运算符
逻辑与 &&
true && true --->true
true && false --->false
false && true --->false
false && false --->false
逻辑与&&两侧同时为真才为真，其他情况都为假
逻辑或 ||
true || true --->true
true || false --->true
false || true --->true
false || false --->false
逻辑或||两侧同时为假才为假，其他情况都为真
逻辑非 !
!true -->false
!false -->true
非真即假，非假即真
检测数据类型
typeof(待检测的数据)
typeof 待检测的数据
window对象的方法
alert() 警告框 无返回值
confirm() 确认对话框 有返回值
返回值：布尔值
点击【确认】按钮，返回true，点击【取消】按钮，返回false
prompt(提醒文本，【默认】) 提示输入对话框
返回值:字符串 / null
点击【确认】按钮，返回输入框中的值(字符串类型)，点【取消】按钮，返回null
分支
单分支
if(条件){
语句;
}
如果条件成立，执行语句
双分支
if(条件){
语句1;
}else{
语句2;
}
条件成立（true），执行语句1，条件不成立（false）执行语句2.
多分支
if(条件1){
语句1；
}else if(条件2){
语句2；
}
...
else{
语句;
}
如果条件1成立(true),执行语句1；否则，看条件2是否成立，如果条件2成立(true),执行语句2，否则.... 如果条件1，条件2，.... 均不成立，执行else后的语句
一般常用来做区间段的判断，也可以用来做等值判断
等值判断 只能做等值判断
switch(表达式){
case 常量1:
语句1；
break;
case 常量2:
语句2；
break;
....
default:
语句;
}
如果表达式值是常量1，执行语句1，否则，看表达式的值是否是常量2，如果是常量2，执行语句2，否则... 如果表达式的值不是常量1，常量2，... ,执行default后的语句。
注:
常量必须是整数类型或字符串类型
循环
while循环
while(循环条件){
循环操作;
}
循环条件成立，执行循环操作(可能被执行多次)
特点：先判断，后执行
最少执行0次
do-while循环
do{
循环操作;
}while(循环条件);
先执行一次循环操作，再判断循环条件是否成立，条件成立，再次执行循环操作.
特点：先执行，再判断
不管条件是否成立，至少执行一次。
for循环
for(初始化变量 ; 循环条件 ; 变量更新){
循环操作;
}
循环条件成立，执行循环操作。
特点：先判断，再执行。
最少执行0次
执行顺序：初始化变量 ---> 循环条件(true) ---> 循环操作 ---> 变量更新
跳转语句
break:一般用在循环内,跳出整个循环 循环停止
continue:一般用在循环内,跳出当前循环 循环进入下一轮
数组
增删改查
IndexOf(A): 在数组里面查找A元素所在的下标 0开始
push(A): 把A添加的数组最后面
pop(): 删除数组最后一个
unshift(A): 把A添加到数组的最前面
shift(): 删除数组的第一个元素
splice(A,B): 删除数组中的B个元素从A下标开始
splice(A,B,C): 删除数组中的B个元素从A下标开始 再添加C元素
合并
A.concat(B): 把B合并在A的后面
创建数组
var arr = new Array()
var arr = [....]
length 数组长度
sort()排序
function asc(a,b){if(a>b){return 1}esle{return-1}}
function desc(a,b){if(a>b){return -1}esle{return 1}}
str.split("分隔符") 将字符分割为数组
arr.join(“连接符”) 将数组连接为字符串
arr.reverse() 反转
对象
定义：多个键值对应的集合，键是不重复
创建
var obj1 = new Object()
var obj2 = {....}
访问
obj.key
obj["key"]
写入
obj.key=value
obj["key"]=value
属性也可以是函数
obj.key = function(){};
访问 obj.key();
遍历
for(var key of arr){
console.log("键:",key);
console.log("值:",obj[key])
}
json
定义：javascript对象表现方式，本质是字符串
前后端传递数据通常用json字符串格式
值：null，true，false ，Object，String,Array,Number
JSON.stringify(obj) 把obj对象转换为json字符串
JSON.parse(str) 把字符串转换为javascript对象
DOM
选择器
document.getElementById（id）: 通过id来获取html元素 单个
document.getElementsByTageName（tag）: 通过tag标签名来获取html元素（累数组 多个）
document.getElementsByName（class）: 通过class类名来获取html元素（累数组 多个）
document.querySelectorAll（css选择器）: 通过css选择器来获取html元素（累数组 多个）
document.querySelectorcss（css选择器）: 通过css选择器来获取html元素（单个）
获取和改变层的内容
获取
innerHTML : 获取元素的内容 包括标签
innerText: 获取元素的内容 过滤标签
改变
innerHTML:设置元素的html内容
innerText: 设置元素的文本内容
定义
当浏览器去解析html标签完毕后会生成一个dom树形构
会有三种类型节点：
元素类型
文本类型
属性类型
节点之间会用关系
父子
兄弟
附：
操作html有三种方式
html方式
Dom 核心方式
xml方式
属性操作
getAttribute（属性名）
setAttribute（属性名，属性值）
创建
createElement（标签名）
添加
parent.append（被添加的元素）
parent.insertBefore(被提交的元素，在之前)
删除
parent.removeChild(被删除的元素)
节点关系
parentElement: 父元素节点
Children: 子节点
lastElementChild: 最后一个子节点
firstElementChild: 第一个子节点
nextElementSibling:下一个兄弟子节点
previousElementSibling : 上一个兄弟子节点
其他关系节点
parentNode: 父节点
firstChild: 第一个子节点
lastChild : 最后一个子节点
nextElementSibling : 下一个兄弟子节点
节点类型
nodeType:节点的类型
3 文本节点
1 元素节点
nodeValue : 节点的值
nodeName : 节点的名称
table表格操作
table.insertRow(0) :插入行
tr.insertCell（0）:插入列
tr.rowIndex :获取是第几行
table.deleteRow（index）: 删除行
间隔调用
setInterval（fn，time）
clearInterval()
延迟调用
setTimeout（fn；time）
clearTimeout()
事件
onclick
focus 获取焦点
blur 失去焦点
submite 提交
window
screen : 屏幕
width : 宽
height : 高
availWidth 可用宽
availWidth 可用高
history: 历史记录
back（）后退
forWard（）前进
go（2）前进两步
go（-3） 后退三步
length 历史记录的长度
location
属性: href地址
方法
reload（）刷新
assign() 跳转 有历史记录
replace（）跳转 没有历史记录
location.href=" ";
navigator
useAgent 浏览器头信息 : 可识别当前浏览器是什么浏览器
open（url，name，feature）: 打开一个新窗口
url 打开的地址
name 窗口名称
feature “ width=100，height=100,top=100,left = 100”
js css
行内样式: el.style.fontSize="18px"
传统class改变: el.className="red",设置元素的类名为red
classList
add（）添加
remove（）删除
toggle（）切换
获取到css最终值
document.defaultView.getComputedStyle(el,null).css属性
css中高度获取
clientHeight 元素内容的高
offsetHeight 元素内容+边框的高
scrollHeight 元素内容+滚动区域的高
滚动距离获取
scrollTop 元素滚动顶部的距离
scrollLeft 元素滚动左侧的距离
元素在页面中个位置
el.getBoundingClientRect()
top : 距浏览器可视区域顶部的距离
left
width
height
el.offsetTop
e.offsetLeft
距离已定位的父亲（body）元素距离
事件
事件
事件流:冒泡、捕获
阻止冒泡
e.stopPropagation()
阻止默认事件
e.preventDefault()
常用事件
键盘
onkeydown：按下
onkeyup：弹起
onkeypress：键盘按下
窗口
onscroll：滚动
onresize：调整大小
onload：加载
onunload：卸载
鼠标
右键菜单：oncontextMenu
鼠标滚动：onmousewheel
wheelDelta
向下 -150
向上 150
鼠标拖放
ondragstart：开始拖动
ondragover：拖放在元素上面
ondrop：拖放松开
鼠标单击 onclick
双击 ondblclick
鼠标经过 onmouseover
鼠标离开 onmouseout
表单
onchange表单发生改变
onblur 失去焦点
onfocus 获取焦点
onsubmit 提交
事件参数
target 目标
srcElement事件元素
x,y
pageX：相对于页面的偏移
client：相对于视口的偏移
offset：相对于当前元素的偏移
wheelDelta：鼠标滚动值（判断方向）
keyCode键盘值：是哪个键被按下了
stopPropagation()：阻止事件冒泡
preventDefault（）：阻止默认事件
拖动事件的参数
dataTransfer数据传递器
setData(k,v)：设置传输数据
getData(k)：获取传输数据
事件的绑定
1 html标签 调用：
< div onclick="func()">
2.script DOM 1 级：
el.onclick=function(e){} 匿名
el.onclick=fun; 函数名式：
function fun(){}
3.script DOM2
el.addEventListener("click",function(){})
el.addEventListener("click",fun);
function fun(){}
区别
标签调用 可操作性小， 方便理解
DOM1 后面的调用与前面代码一致，会覆盖前面
DOM2 最好：
1.控制事件冒泡捕获
2.可以取消绑定
匿名函数式 复用性低
本地存储
cookie：
1. 保存在客户的小量数据（2k）
2. 有时间限制 会过期
3. 服务器端可以修改，浏览器端（前端）也可以修改
4. 每次发送http请求都会携带cookie
5. cookie有域名限制，只能获取同一个域名的cookie
cookie
名称=值：name=value;
过期时间=日期：;expires = d;
访问路径=路径：;path=/;
sessionStorage
localStorage
|本地存储
定义
1. 可以存5M内容 （各浏览器不一样）
2. 不会过期，不会销毁
3. 不会被发送到服务器
4. api完善 操作简单
setItem(name,value)：存储数据
getItem(name)：获取本地数据
removeItem(name)：删除本地数据
clear()：清空当前域名所有本地数据
类型隐式转换：布尔值
定义:当非布尔类型的数据要参与布尔运算时候会被自动换行为布尔
数字
0 为false
非0 为true
字符串
空 为false
非空 为true
undefined 转为false
null 转换为false
数组 都会被转换为true
函数的参数有形参，没有实参 运行的时候 值为undefined 转布尔为false
类型隐式转换，转字符串
类型隐式转换，转数字
字符串模板
定义用 ``
变量用 ${变量名}
sessionStorage
功能与方法与localStorage一致但是关闭浏览器 数据清空
正则RegExp
作用
匹配，捕获有规律的字符串
创建
表达式 /表达式/
实例化Reg new RegExp(表达式,修饰符)
正则修饰符
g 全局匹配
i 忽略大小写
m 多行
正则的方法
re.test(str)：字符串是否匹配正则
re.exec(str) ：匹配捕获匹配到字符串
匹配到字符串
index：字符串所在字符的下标
input：字符串
如果re是全局正则，exec可以循环执行多次 匹配不到返回null
字符串与正则相关方法
match
非全局：
匹配到字符串
index：字符串所在字符的下标
input：字符串
全局
返回一个匹配到的字符串数组
replace(正则,新的的字符)：$0-$1
正则元字符
\d 数字
\w 0-9 a-z A-Z _
\s 空白 空格
\D 非\d 除了数字
\W 除了\w
\S 除了\s
. 任意字符（除了\n之外）
\ 转义特殊字符
| 或者
() 分组
\n 换行
\b : 匹配边界 字符串的开头和结尾 空格的两边都是边界 =>不占用字符串位数
^ : 限定开始位置 => 本身不占位置
$ : 限定结束位置 => 本身不占位置
[a-z] : 任意字母 []中的表示任意一个都可以
[^a-z] : 非字母 []中^代表除了
[abc] : abc三个字母中的任何一个 [^abc]除了这三个字母中的任何一个字符
正则次数
? 0次或者1次
* 0次或者多次
+ 一次或者多次
{n} : 正好n次；
{n,} : n到多次
{n,m} : n次到m次
boostrap
引入文件
1. bootstrap.css
2. jquery
3.bootstrap.js
网友评论