javascript

1.引入方式
1.内嵌式：例

2.外链式：例
3.行内式：例

2.注释语句
单行：//注释语句
多行：/注释语句/

3.输出方式
(window可省略)
alert(“内容”) 弹出框
document.write(“内容”):body内输出
console.log(“内容”):控制台输出

4.基本数据类型
string：“字符串”
number：数字
boolean：布尔 （true/false）
null：空值 （用来清空变量）
underfined ：表示变量不含有值
符合数据类型：对象（数组）

5.声明变量
var 变量名 声明多个用逗号隔开
let 变量名
运算符优先级
！>算术运算>关系运算>&&>||>赋值语句

对话框
1.警示对话框 alert() 无返回值
2.确认对话框 confirm() 有返回值：布尔
3.提示输入对话框 prompt() 有返回值：字符串/null

判断语句
单分支：if(条件){语句}：条件满足执行语句
多分支
if(条件1){
条件1
}else if(条件2){
语句2}else{语句n}
switch语句
switch(变量名)
{
case 常量1：
alert()；
break；
…
default:
alert();
}

循环
while(循环条件){循环操作} 先判断，再执行

do{ 至少执行一次
循环操作
}while(循环条件)

for（1初始化;2条件判断;4常量){3循环操作} 执行顺序：1234；
跳转语句
break：用于循环，break后的语句不执行直接跳出循环
continue：用于循环，跳出当前一轮循环，执行下一轮 。contin后语句不执行

函数
为了完成某一功能的程序指令（语句）的集合
1.系统内置函数
2.自定义函数
1例：
eval():强制转换为数字
isNaN():判断一个数是否是一个非数字
parseInt():取整

函数定义
function 函数名(参数(可无)){函数体}
函数内部声明的变量外面不能访问
return()：跳出函数；

内置对象
数学对象
Math.PI:圆周率 Math.round:四舍五入
Math.ceil:小数进1 Math.floor:舍去小数
Math.Max():最大值 Math.min():最小值
随机数
Math.random()*(上限-下限)+下限

Date对象
var n = new Date() 获取当前日期
getFullYear() 获取年 getMonth() 月（0-11）
getDate() 日期 getDay() 星期（0-6）
getHours() 小时 getMinutes() 分
getSeconds() 秒
getTime() 返回当前日期与1970年1月1日的事件差（毫秒）

字符串
var str = “”
indexOf(“字符”) 返回下标值，没有则-1
indexOf(“字符”,x) 从x开始找字符的下标值
charAt(下标值) 返回下标对应的字符
replace(“字符”,“替换字符”)：只能替换一个
replace(/字符/g,“替换字符”)：全部替换
lastIndexOf(“字符”) 从后开始查找字符
subStr(x,y) 从x开始，截取y个字符
subString(x,y) 从x开始到y的字符
length：字符串的长度

数组
indexOf(a):在数组中查找a的坐标 没有返回-1
push(a):把a添加到数组的最后
pop()：删除数组的最后一个
unshift(a):把a添加到数组的最前面
shift():删除数组的第一个元素
splice（a，b，c）：从a开始删除b个元素再添加c
a.concat(b):把数组b添加到数组a的后面

对象
创建：var dx = new Object{} 或 var dx = {}；
访问：dx.属性名 = ； dx[“属性名”]=;
遍历：
for（var x in 数组名）{console.log(x,数组名[x])}:遍历无序对象的所有元素
console.log(x); x为 对象的属性名 例 age =14 中的 age；
console.log(dx[x]); 输出对象的属性值 例age=14中的14；

Window对象
screen:屏幕属性
属性值：
width：宽。height：高。 availWidth：可用宽。 availHeight：可用高

history：历史记录属性
属性值：
back():后退一步。 forword():前进一步。
go(正则进，负则退)
length:历史记录的长度 从1开始

location属性
href：地址
其他：协议，域名，端口号。
方法：
reload()：刷新
href=“网址”:跳转
assign(“网址”):跳转，有历史记录
replace(“网址”):跳转，无历史记录

navigator对象
属性值
userAgent：识别当前浏览器是什么浏览器。

window.open 方法
打开一个新的窗口
open(url，name，feature)
url：打开的地址
name：打开的名称
feature “width=,heigth=,top=,left=”;宽高和距离左上角的位置

DOM
document.getElementById(“id值”)：通过id获取元素
document.getElementByName(name)：通过name名称获取元素
document.getElementsByTagName(“标签名”):通过标签名获取元素，可以获取多个
document.getElementByClassName(“类名”)：通过类名获取元素
document.querySelectorAll(css选择器)：通过css选择器的方法获取元素 例 body .css

获取和改变元素的内容
获取：
innerHtml：获取元素的内容，包括标签
innerText：获取元素的内容，过滤标签
改变：
innerHtml：设置元素的内容，包括标签
innerText：设置元素的内容，过滤标签

classList:类列表
add() 添加类
remove() 删除类
toggle() 切换类

el.style= 设置元素的行内css样式
例el.style.fontSize=14px

document.body body标签

event 事件
onclick 单击
onsubmit 提交事件
onblur 失去焦点
onfocus 获取焦点
onchange 发生改变
当浏览器区解析html标签完毕后会生成一个dom树形结构
会有三种类型节点：1.元素类型 2.文本类型 3.类型属性
节点之间的关系：1父子 2.兄弟
Dom核心方法
操作html有三种方式：1.html方式 2Dom核心方法 3.xml方式
Dom属性
属性操作
getAttribute(属性名)：获取属性
setAttribute(属性名，属性值)：设置属性
创建：createElement()
添加：append()
删除：parent.remove(被删除元素)
节点关系：1.parentElement:父亲节点 2.Children：子节点
3.firstElementChild:第一个子节点 4.lastElementChild：最后一个子节点
5.nextElementSibling：下一个兄弟子节点 6.previousElementSibling：上一个兄弟子节点

setInterval(函数名，时间（毫秒）):间隔调用
setTimeout(函数名，时间（毫秒）)：延迟调用
事件：onclick focu：获取焦点 blur：失去焦点

tabel表格操作
table.insertRow(0):插入行 tr.insertCell(0):插入列
tr.rowIndex:获取是第几行 table.deleteRow(index):删除行

nodetype：节点类型 1：元素节点 2：文本节点
nodeName：节点的名称
nodeValue：节点的值

js css操作
行内样式：例：el.style.fontSize = “13px”
传统css样式改变：例：el.className = “ha”;设置元素的类名
classList：add（） remove（） toggle（）
获取到css最终值：document.defaultView.getComputedStyle(el,null).css属性
css高度获取：
clientHeight：元素内容的高 offsetHeight：元素内容加边框的高
scrollHeight：元素内容加滚动条的高
距离获取：
scrollTop：顶部滚动的距离
scrollLeft：左右滚动的距离

javascript执行会阻塞html文档的渲染
javascript从上向下执行
javascript代码最好放在body最后面

add：添加 Event：时间 Listener：监听器 remove：移除
addEventListener：（事件名，事件处理函数）
removeEventListener：（事件名，事件处理函数） 移除事件监听器
后面的会覆盖前面的相同的语句

时间参数
target：时间参数
offsetX：相对于当前事件的左上角
offsetY
pageX:相对于页面的左上角
pageY
clientX：相对于浏览器的可视区域
clientY

键盘事件
keydown：键盘按下
keyup：键盘弹起
键盘事件的参数：keycode：键盘代码
keycode：键盘代码
enter：13 esc：27 左：37
上：38 右：39 下：40 空格：32

1.2
事件流：冒泡 捕获
阻止冒泡：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
相对于页面的偏移

clientX
相对于视口的偏移

offsetX
相对于当前元素的偏移

wheelDelta
鼠标滚动值（判断方向）

keyCode键盘值
是哪个键被按下了

stopPropagation()
阻止事件冒泡

preventDefault（）
阻止默认事件

拖动事件的参数

dataTransfer数据传递器

setData(k,v)
设置传输数据

getData(k)
获取传输数据

事件的绑定

1 html标签 调用
< div οnclick=“func()”>

2.script DOM 1 级
el.οnclick=function(e){} 匿名

el.οnclick=fun; 函数名式
function fun(){}

3.script DOM2
el.addEventListener(“click”,function(){})
el.addEventListener(“click”,fun);
function fun(){}

区别

标签调用 可操作性小， 方便理解

DOM1 后面的调用与前面代码一致，会覆盖前面

DOM2 最好

控制事件冒泡捕获

可以取消绑定

匿名函数式 复用性低