js笔记

JavaScript-注释很重要
单行注释，在注释内容前加符号 “//”
多行注释以"/“开始，以”/"结束。

嵌入类型：
外联：<scrirt src=""></script>
内联:<div onclick=""></div>
内嵌:<script></script>
a标签：<a href="javascript:""></a>

数据类型：
number数字类型
string字符串
boolearn布尔值（对true 除0之外 错fales 0）
undefiend空
unll 空对象
object 对象
字符串转布尔值除空字符串为都为true

运算符：

1, 算术运算符 "+" "-" "*" "/" "取余 %“
    算术运算符>赋值运算符
2.比较运算符（比较的结果会得到一个布尔值）
   >,< , ==  , >= ,  <=  ,（ !=）
   值和数据类型都相等（ === ）
   不全等（ !==）
3,逻辑运算符：
   并且  &&
   或者  ||  只要满足一个就返回true
   ! 非   取反 通常用来强制转换数据类型 取反结果一定是布尔值
4,赋值运算符 “=”  +=  -=   *=   /=
5,一元运算符：”++“ ”--“
    b=a++
    依旧是先运算 得到运算结果再赋值
     b=++a
     先赋值 ,再运算
6,三元运算符
   条件表达式 ？表达式1 ：表达式2
   等同于if（）{}else{}

数据类型转为布尔值
Boolean() 强制转换为布尔值
在比较运算符进行跨数据类型转换number优先级最高 所以不会优先转换number
布尔值可以转为number true 1 fales 0

数据类型转为number:
Number()
将全部数据类型强制转为number 如果不能转就会显示NaN
parseInt() 取整（先转number 然后取整）
parseFloat() 取浮点（先转number 然后取浮点）
比较NaN 不能用比较运算符 只能用isNaN

代码执行结构：
顺序结构
选择结构
循环结构

for循环.
for(var i=0:i<50:i++ ){ 循环体 }
for循环 先验证条件后循环

do while循环
var i=0
do{ 循环体 i++ }while(i<50)
do while循环 先循环后验证条件

while循环
var i=51
while (i<50){ 循环体}
while循环 先验证后循环
continue跳过本次循环

数组
var str="" 字面量创建字符串
数组是一个连续的储存空间
第一种创建数组的方法
var arr=[] 字面量创建 数组
第二种创建数组的方法
var arr=new Array()
arr[] 数组下标拿到值 数组下标从0开始
arr.length数组长度
字面量方法创建一个数组只有一个数字时var arr=[12] 表示数组长度为1 下标0为12
new Array(12)创建只有一个数的数组 表示这是个空数组 长度为12

操作数组
push()在数组最后一项加数据 返回值是改变数组的长度
shift()从数组的第0项开始删除
pop()从数组的最后一项开始删除
splice(起始下标，删除多少项)删除数组的某一项
splice(起始下标，删除几个，需要替换的内容）替换数组某一项
splice（起始下标，删除为0，插入的内容）插入内容
这几种方法都会改变原来数组

concat()数组合并 把两个数组拼在一起 不改变原数组 形成一个新数组
slice(起始下标，结束下标）数组的抽取
sort()数组排序 只能0到9排序 因为数组的项转成字符编码排序
join(连接)数组串联

Math 原生对象
随机数Math.random() 生成0到1之间的随机数
想要得到我自己的区间随机数 随机数*（大数-小数）+小数字
1到33之间
console.log(parseInt(random*(33-1)+1））
四舍五入Math.round()
向上取整Math.ceil()
向下取整Math.floor()
平方根Math.sqrt()
次方Math.pow()
绝对值Math.abs()

日期对象
var datel= new Date()日期对象
datel标准格式
datel.getFullYear()获取年
datel.getYear()1900年到这个日期年有多少年
datel.getMonth()月份从0开始 获取真实月getmonth后面加1
datel.getDay()获取星期几
datel.getDate()获取日
datel.getHours()获取时
datel.getMinutes()获取分
datel.getSeconds()获取秒
datel.getMilliseconds()获取毫米
datel.toLocaleString()获取系统语言日期
datel.toLocaleDateString()获取系统语言日期 只有年月日

字符串
var str="" 字面量创建字符串
var str1=new string("")
str返回数据类型为string
str1返回数据类型为object
字符串可以通过下标方式得到第几个字符 有点像数组的获取方式
字符串转布尔值除了空字符串是false 其他都是true
任何对象转布尔值 都为true 包括是空对象

操作字符串
.slice(起始下标，结束下标)截取字符串 截取起始下标和结束下标中间的东西
.substr(起始下标，截取多少个)截取字符串
.indexOF()字符第一次出现的下标位置 如果没出现返回-1
.replace(替换对象，替换内容)替换
.search(下标)查找字符
.split()分割字符串
.concat()拼接 组成一个新数组
常用的是加号拼接
.trim()清除前后空格

正则
正则的语法 /^规则表达式 $/
比较方法；
1，值为主 规则为次
值.math(规则）
如果满足这个规则，会返回一个数组，数组的第0个就是该值
如果不满足这个规则就会返回null
2,规则为主 值为次
规则.test(值）
返回布尔值
\d 代表数字 \w [a-zA-Z0-9] \D代表除了数字 \W除了a-zA-Z0-9
[]字符
{}只有一个数时表示只能输入多少个
{6，8}表示可以输入6到8个数
+不限位数

DOM文档对象模型
返回文档对象所有子节点
document.childNodes
document.body.childNodes获取文档对象中的body有哪些子节点
text是返回的文本节点（空格 回车 文本）
document后面只能是唯一的子节点

想要获取文档对象子节点下的东西可以通过下标：
document.body.childNodes[1]
改变节点的样式 在获取到的节点后加style和样式
document.body.childNodes[1].style.height=“100px”
样式会以内联的方式引入到div里 js改变样式优先级最高 样式以驼峰命名

常用获取节点的方法
document.getElementById() 通过id获取节点返回一个节点
document.getElementsByClassName() 通过class名字获取节点是一个集合
通过下标选中div改变样式
document.getElementsByTagName() 通过标签名获取节点是一个集合
通过下标选中div改变样式
document.getElementsByName() 通过标签的name属性获取节点是一个集合
通过下标选中div改变样式

节点操作：
1.替换节点
document.getElementById("")获取要被替换的节点的父亲
document.getElementById("")获取要被替换的节点
var p=document.createElement("")创建要替换的元素节点
var text=document.createTextNode("")创建这个元素节点里面的文本节点
p.appendChild(text)给新节点加文本
父节点。replaceChild(替换的新节点，要被替换的老节点）

2，插入节点
var p=document.createElement("")创建要插入的元素节点
var text=document.createTextNode("")创建这个元素节点里面的文本节点
p.appendChild(text)给新节点加文本
document.getElementById()获取目标div
目标div.appendChild(新节点）插后面
目标div.insertBefore(新节点,插在谁前面）插前面

3，复制节点
document.getElementById()获取需要复制的节点
document.getElementById()获取复制到目标div的节点
需要复制的节点。cloneNode(布尔值）
true 所有子节点都复制 fales只复制自己本身
目标div.appendChild(复制后的节点）

4，删除节点
父节点。removeChild(需要删除的节点)

删除多个节点
document.getElementById(）获取父节点
document.getElementByClassName()获取需要删除的子节点
for{let i=0;i<删除节点的长度；i++}{
父节点。removeChild(删除节点[i])
i–
}

事件绑定

传统绑定 ：
1.在标签里加事件
2.js绑定 节点。事件=funation(){}
在js绑定时 有函数名不能在函数名后面加括号 如果遇到需要传参数
的情况就可以绑定一个匿名函数 在这个匿名函数里执行有名字的函数
现代绑定
1.dom浏览器
节点。addEvenListener(“事件名没有on”，事件处理函数函数名没有括号||匿名函数，布尔值 true为捕获 false为冒泡 不写这个参数默认为冒泡）
2.ie浏览器
节点。attachEvent(“事件名”，事件处理函数）只能是冒泡

冒泡 从精准对象到不精准对象
捕获 从不精准对象到精准对象 ie浏览器不支持

解绑
传统绑定解绑
节点。事件=null
现代绑定解绑
节点。removeEventListener(“事件名没有on”，

事件

1.鼠标事件
onclick 鼠标点击事件
mouseover 鼠标移入事件
mouseout 鼠标移出事件
mousemove 鼠标移动事件
mousedown 鼠标按下
mouseup 鼠标抬起
dblclick 鼠标双击事件
2.键盘事件
keydown 键盘按下时
keyup 键盘抬起时
keypress 只有字符键可以监听
3.html事件
onload 页面加载完毕时
onfocus 聚焦
blur 失去焦点
onscroll 滚动条滚动
onresize 窗口改变
onchange 选中

evnet 事件对象
事件对象里记录了事件触发时 发生的所有事
window.event||argument[0] 获取事件对象里的东西
鼠标点击位置到点击元素的距离.offset X t.offsetY
鼠标点击位置到浏览器的距离.clientX .clientY

BOM 浏览器对象模型
document.documentElement.clientWidth 浏览器宽度
document.documentElement.clientHeight 浏览器高度
window。screenLeft 浏览器距离屏幕的水平位置
window。screenTop 浏览器距离屏幕的垂直位置
innerWidth窗口文档显示区宽度 不包括菜单栏工具栏和滚动条
innerHeight窗口文档显示区高度 不包括菜单栏工具栏和滚动条
outerWidth整个窗口宽度
window.open(路径，名字，特性 宽高等）打开新窗口
window.close()关闭窗口
history.go(参数 正代表前进 负代表后退）前进后退页数
history.forward()单纯前进一页
history.back()单纯后退一页
location.href 获取当前页面地址 或者把浏览器重新定向到一个新页面
navigator记录浏览器信息

计时器
setTimeout(函数，间隔时间单位毫秒）定时器 隔几秒执行一次
setInterval(函数，时间）循环定时器 每隔几秒执行一次
clearInterval(定时器名字)清除循环定时器
clearTimeout(定时器名字)清除定时器

获得form表单
1.document.getElementById()通过ID获得
2.document.forms 获取页面中所有的表单
3.document.forms[""]中括号里可以写id名 也可以写name属性的值

阻止默认行为
1.通过事件对象阻止
事件对象。preventDefault()
2.return false 用这种方法时必须在调用函数前面加一个return
.value 可以获得表单的值
.innerText="" 写文本
.stopPropagation（）阻止冒泡