javaScript总结

JavaScript(行为)：最早叫(EcmaScript)，版本es6
JS特点：
脚本语言：
程序不需要编译。
运行时才能翻译成机器语言(动态解释执行)
每执行一次就要翻译一次，效率低，依赖解释器，但具有跨平台性(各种浏览器/操作系统)。
弱类型语言：
变量在使用前无须声明，由解释器在运行时检查其数据类型
必须依赖浏览器(只能在浏览器内执行)
Java特点(编译型语言)：
程序执行前需要执行一个专门的编译过程，把程序编译成为机器语言的文件，运行时不需要重新编译，直接使用编译结果，
执行效率高，依赖编译器，跨平台性差



嵌入JS的使用：从上到下执行
1、嵌到元素内部
href="javascript:方法();"onclick="方法()";
2、script标签：
<script></script>
3、引用外部JS文件
<script src="" type="javascript"></script>
外部创建JS默认是GBK格式


注释：
跟Java是一样的
定义变量：
var 计算机会根据内容自动判断数据类型以及内存分配的大小。
语法：
跟Java一样的语法：
if、switch、for、while、do while。

数据类型：
定义类型：var:
内存中存放的基本类型：
number :包含所有整数和浮点数;(数据类型装不下了 Infinity(无穷大))
boolean :true/false;
string :" " / ' ';
undefined :表示一个已经创建但是没有初始值的变量;(是null的子类)
null :表示某个变量值为空
NaN:表示非数字
判断数据类型：typeof 变量名
加载顺序，先把变量和引用不赋值加载到内存中，再一步步往下执行。


数据转换：
自动转换：
任何数据类型与string相 + 结果都是string，除了加法，数据操作自动转换成int(如果有一个数据转换失败会得到NaN)



强制转换
toString(): 转换为字符串
parseInt等等(): 转换时取字符前的数据做转换，如果没字符则全部转换(取有效数据做转换，如果有不能转的则返回)
强制转换可以转换10进制数

运算符：
== 比较左右两边变量的值，不考虑数据类型；
=== 比较左右两边变量的值，数据类型也必须相同
除了===和+运算符，其他的表达式都会自动转型

函数：
命名函数“
不需要规定形参的数据类型，数据类型根据传递进来的值自动确定
需要返回就直接return，不需要返回就不用return
function add(num){}

匿名函数
表示对当前操作绑定一个唯一的行文
var t = function(){}
标签对象.onclick = function(){}

window.onload(页面加载完成)
内部函数：
function find(){
return function(){
console.info("");
}
}
调用内部方法：
1、var res = find();
res();

2、find()();
回调函数：
两个函数，第一个函数作为参数传递给第二个函数，就把第一个函数称为回调函数
function a(num){
return num*2
}
function b(a,b){
return a+b;
}
var m = b(10,a(5));
匿名回调函数：
标签对象.addEventListenr("click",function(){});
这个function()就称为匿名回调函数
命名回调：
function add(){
alert("");
}
setTimeout(add,毫秒数);

alert();弹出框
prompt();弹出输入框
console.info();控制台打印
confirm();确定框

内存中存放的引用类型：
原生对象：
JavaScript所提供的、独立于宿主(浏览器)的对象：
Object/Function/Array/String/Boolean/Number/Date/RegExp(正则表达式)/多种Error/Arguments/JSON
new 对象(); 对象.方法()/属性;
字符串：
substr(开始,几位);截取指定位置的字符串
布尔：
new Boolean()：除了0/null/""是false，其余的是true
数组：
new Array(); 1个参代表数组长度，1个以上参是值，对数据类型没有限制
数组+数组做拼接，结果为string数组.concat(数组)，结果为数组对象
日期：
Date(); 可以作为一个函数调用
new Date(); 得到当前时间(参数传1970-01-01到现在的毫秒数创建一个Date对象)
方法：
to...String();返回各种格式表达式
getFulYear(); 得到年
getMonth(); 得到月份(从0开始);
getDay(); 得到天数(获取星期几)
getHours(); 得到时
getMinutes; 得到分
getSeconds; 得到秒

JSON:
表示一个对象，这个对象是非常小的，用于存储数据，轻量化对象
创建：
{key:value,key:value};
取数据：
对象.key;
对象[key/下标];

正则表达式：
创建：/规则/; 或者 new RegExp("规则");
开头^结尾$
使用验证：
.test(验证的内容);


内置对象：
所提供的、独立于宿主(浏览器)环境的对象，这些对象在JavaScript程序执行时就已经存在，内置对象实际上也是原生对象，
但与原生对象不同的是，内置对象不需要显示的初始化，因为它已经初始化了
Global:
无法直接访问，提供了一些方法和属性，将所有全局的方法收集在一个对象中，直接访问对象的属性和方法。
使用：
encodeURI("")：对中文进行转码:
decodeURI("")：对转码过的中文进行解码：
eval(""): 将字符串解析成JS代码执行;
parseInt(""): 将字符串转换为number
parseFloat(""):将字符串转换为number
Math:
可以直接使用这个对象
Math.romdon():得到一个随机数
Math.floor(): 取整

宿主对象(DOM/BOM)：
指宿主环境(浏览器)有关的对象，所有的BOM和DOM(html的DOM树)对象都是宿主对象
BOM:
浏览器对象模型
window对象是BOM的顶层对象
setTimeout(简单的js代码(调方法/"alert('')") , 毫秒数);延迟执行
clearTimeout(延迟执行的返回值);消除延时执行
实现动态效果需要用到递归
用for循环实现会产生闭包(for执行完了，而内部的setTimeout都没执行完)(闭包：动态增加属性来保存状态)

setInterval(简单的js代码(调方法/"alert('')") , 毫秒数);循环延迟执行(动态效果)
cleanInterval(循环延迟执行的返回值);

confirm("确定？");确定框(返回一个布尔值)
prompt(); 输入框(返回输入的字符串)

window.open();打开一个新窗口
4个参数：
1、url，如果省略会使用空白页面
2、窗体title
3、窗体的样式
4、boolean值(忽略)
window.close();关闭窗口(通过窗体对象去掉close);
window.location.href="url";跳转
window.history.back();返回上一级并且保存上一次的操作状态
window.history.go(上一级:-1,下一级：1);可以跳转多级目录(参数默认是-1)并且保存上一次的操作状态
window.history.forward();下一级目录(前提是必须使用过go或者back)并且保存上一次的操作状态

navigator是一个独立的对象，使用它提供浏览器获取操作系统的一些信息
window.navigator.language();获取到浏览器使用的语言
window.navigator.onLine();返回浏览器是否处于在线模式
window.navigator.appName();浏览器正式的名字
window.navigator.appVersion();浏览器版本

screen获取浏览器屏幕信息
window.screen.width/heigth();获取浏览器屏幕的宽/高
window.location.reload(true);刷新页面

DOM:
文档对象模型：
浏览器将网页加载到内存时，首先为整个文档创建一个document对象，然后从出现的第一个标记开始一个个加载，每加载一个
标签、注释、文本或属性当做一个节点，当加载完成后形成了一个倒挂钩的结构，这就是DOM树结构

节点类型：
文档节点 Document 根节点
文档类型节点 DicynebtType 即引用<DOCTYPE>
元素节点 Ekement 标签 返回值1
文本节点 Text 标签的文本或CDataSection内包含的普通文本，返回值3
属性节点 Attr 元素的属性：返回值2
CdataSection 通常是文本节点和注释节点的父类，返回值
注释节点 Comment 注释 返回值
所有标签都是元素节点，换行是文本节点，元素节点返回值是1，属性节点返回2，文本节点返回值是3

元素节点使用(元素 点)：
childNodes 获取元素下所有的子节点(包含元素节点和文本节点)
children 获取元素下所有的子元素节点
firstchild 获取IE浏览器元素下第一个子元素节点
firstElementChid获取标准的DOM文档元素下的第一个子元素节点(谷歌/火狐)
lastElementChild获取到元素的最后一个子元素节点
previousElementSibling获取到元素的前一个兄弟元素节点
nextElementSibling获取到元素的后一个兄弟元素节点
parentNode 获取到元素的父元素节点
offsetParen 获取到定位父元素节点(position:除了默认定位都可以获取到)
document.createElement("元素类型")创建一个节点
创建的节点对象.innerHTML("");元素中的内容
父节点.appendChild(要加入的节点);添加子节点(默认添加到所有子节点的最后);
父节点.insertBefore(要加入的节点,参数放的位置);添加子节点(放在第二个参数前面);
nodeValue(只针对文本节点);
removeChild(节点)删除节点
document.location.reload();刷新页面


元素对象 . 属性 操作元素的属性


属性节点使用(元素 点)：
attrbutes 获取元素的属性集合(得到的属性和设置的属性顺序相反)
setAttribute("key":"value");增加属性
removeAttribute("key");删除指定属性
getAttribute("key");获取指定属性的值
元素 . 属性 获取指定属性的值
元素 . 属性 = " ";设置指定属性的值

文本节点(元素 点)：
document.createTextNode("文本");创建一个文本节点
appendChild(文本节点);追加文本节点(默认在最后，需要调整位置用到insertBefore)
appendData("文本");追加文本(默认在最后);
insertData(起始位置,"文本");追加文本(指定位置追加)
deleteData(起始位置,长度);删除文本(从第几位删，删除多长)
replaceDate(起始位置,长度,"替换的内容");替换文本

表格操作()：
table对象 . insertRow(位置)新增一行
行对象 . insertCell(位置)新增一列
行对象 . table对象 .deleteRow(位置)删除一行
deleteCell(位置)删除一列
table对象 .rows();获取所有行
行对象 . cells();获取所有列
列表操作：
ul对象 . replaceChild(新的li内容,目标li);替换节点
cloneNode(boolean值);克隆节点(true:克隆当前节点以及节点的子节点,false:只克隆当前的这个节点)
下拉框操作：
select对象 . options获取所有下拉框
select对象 . options[下标].text获取指定下拉框的文本
select对象 . options[下标].value获取value属性
select对象 . selectedIndex获取被选中元素的下标 配合select对象 . options [select对象 . selectedIndex]使用

样式表操作：
元素对象 . style 获取当前元素的内联样式 返回JSON对象{}
样式对象 . 样式(width)获取样式表中的属性
样式对象 . 样式(width) = "";设置样式(覆盖掉原来的值)
样式对象[下标] 获取键的名字
方法：(设置的是css的元素的原名)
元素对象 . style . getPropertyValue("属性");获取属性值
元素对象 . style . removeProperty("属性");删除属性
元素对象 . style . setProperty("属性","值");设置属性(增加)


document.styleSheets;获取所有(内部/外部)样式表(一个<style>标签属于一个样式表),返回样式表集合
样式表 . cssRules();获取到样式表的所有样式信息(.p1{}/.a1{})(IE不支持：IE使用rules();)
样式信息 . style();获取到具体某套样式的css信息(width,height)

表单操作：
document.forms获取页面所有表单(集合)
form对象集合["form1"]默认按照name属性找到form对象,如果没有name属性默认按照id属性找
表单对象.name 通过name属性获取表单对象下的表单元素(或表单元素集合)
表单元素.value 通过value属性获取表单元素的值

单选框：
表单对象.name 通过name属性获取表单对象下的表单元素集合
表单元素.value 单选按钮的value直接返回被选中的值
复选框：
表单对象.name 通过name属性获取表单对象下的表单元素集合
if(表单对象.checked)再取 表单对象.value;因为复选框是可以选中多个的所以需要循环做判断！





JS选择器：
document.getElementById("id");通过id属性得到元素对象
document.getElementsByClassName();通过class属性得到元素数组
document.getElementsByName();通过name属性得到元素数组
document.getElementsByTagName();通过元素找节点

事件：
事件流：操作一个元素的时候，页面上不止一个事件在触发
冒泡：从小到大触发
捕获：从大到小触发
因为各个浏览器早期设计有差异，IE默认就是冒泡，只支持冒泡
标准的DOM浏览器既支持冒泡又支持捕获
标准的DOM浏览器既支持冒泡又支持捕获
(现代指派事件)
addEventListenr用于绑定事件
IE:attachEvern();
参数1：参数事件的类型
参数2：参数事件执行的行为
参数3：控制冒泡还是捕获(默认冒泡)
(传统指派事件)
元素对象.onclick = 方法(绑定时不能加括号，加了的话表示立即执行而不是绑定)
(元素内部属性事件)
元素属性内部 onclick="方法名()" 看成是字符串，只有在点击了div才会触发事件，将字符串转换为js代码


event对象:
代表当前事件的状态
只要有事件触发都会产生一个event对象，事件结束，event对象消失
onclick:方法(event);
匿名函数： function(event){}//第一个参数都默认是event


鼠标事件：
onclick 单击
dblclick 双击
onMouseover 鼠标移入
onMouseout 鼠标移出
onMousedown 鼠标按下
onMouseup 鼠标弹起
void(0) 表示不执行任何内容
键盘事件：
onkeydown 键盘按下
onkeyup 键盘弹起
onkeypress 按压键盘
event.keyCode 获取按键
html事件：
下拉框事件：
onchange 下拉选项改变事件/复选框改变事件
onfocus 获取到光标，触发事件(验证)
onblur 失去光标，触发事件(验证)
window.onload 页面加载完成后触发(绑定一个匿名函数)
onsubmit="return 方法()"阻止表单提交(方法需要返回值boolean);
onreset 表单重置按钮的单机事件