js(自用)

js

js：是一种嵌入网页的程序段。是一种解释型语言，被浏览器执行。
增强了与客户端的交互功能。
一种直译式脚本语言，是一种动态类型、弱类型（定义变量时，不一定需要初始化）、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。

作用：
响应网页中的事件，并作出处理。
验证数据
监测浏览器的版本和类型
处理cookie

内嵌（标签中,一般放在head标签中
方式2:独立的js文件（外联）
通过script标签的src属性导入
方式3:在标签上写js代码（内联）
在onclick属性你写js代码
外联优点：结果、表现、行为分离。

js中变量声明:
var 变量名=初始化值;
var 变量名;
变量名=初始化值;
注意:
var可以省略 建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略

js的数据类型:
引用类型：Object 、Function
原始类型:(5种)
Null
String
Number
Boolean
Undefined
通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型
typeof 变量|值;
若变量为null,使用typeof弹出的值 object
使用typeof的返回值
undefined - 如果变量是 Undefined 类型的 （未初始化的变量和函数无明确返回值时）
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的

运算符:
比较运算符: > >= < <=
若两边都是数字 和java一样
若一般为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字在进行比较 3>“2”
若一般为数字,另一边为字符串,返回一个false 3>“hello”
两边都是字符串的时候,比较ascii
等性运算符 == ===
== :只判断值是否相同
===:不仅判断是否相同,还要判断类型是否相

js数组可以存放任意类型。
创建数组的三种方式
var ary1 = []
var ary2 = new Array(5);

isNaN()
parseInt()
parseFloat()

encodeURI();进行

函数的定义:
方式1:
function 函数名(参数){
函数体;
}
方式2:
var 函数名=function(参数){
函数体;
}

DOM(文档对象模型)

每一个元素都是一个节点，文档节点 document、元素节点 element、属性节点 attribute、文本节点 text、注释节点

同级节点称为同胞节点
父节点（parentNode）可以拥有任意个子节点（childNode），第一个子节点（firstChild），最后一个子节点（lastChild），
下一个同胞节点、（nextSibiling）、上一个同胞节点（previousSibiling）。

获取节点的方法：
document.getElementById(“id值”):获取一个特定的元素
document.getElementsByTagName(“标签名”):通过标签名获取一种元素(多个)
document.getElementsByClassName(“class属性的值”):通过class属性获取一类元素(多个)
document.getElementsByName(“name属性的值”):通过name属性获取一类元素(多个)

document.qureySelecton(“p span”);css选择器，就是p元素下的第一个span元素；
document.qureySelectorAll（“p span”）;css选择器就是p元素下的所有span元素；

nodeName：节点名字（节点名/#text）。
nodeValue：节点的值（nodeValue/null）。
nodeType ：节点类型
document.documentElement : 取得元素节点
ownerDocument：节点所属文档
firstChild,lastChild：第1个/最后一个节点。
childNodes：所有子节点列表
previousSibling：前一个兄弟节点，没有则为null。
nextSibling：后一个兄弟节点，没有则为null。
hasChildNodes()：是否有子节点，返回true/false
attributes：元素节点的属性对象集合。

createElement(name)-创建元素节点
createTextNode(text)-创建文本节点
createAttribute(name)-创建属性节点
createComment(text)-创建注释节点
createDocumentFragment()-创建文档碎片节点，提高效率
removeChild(node)-删除子节点
replaceChild(newNode,oldNode)-替换子节点
insertBefore(newNode,oldNode)-插入到指定位置
cloneNode(是否包含子节点)-复制节点

appendChild(node) ：添加元素节点到childNodes中
removechild(node)：从childNodes中删除节点
replaceChild(newNode,oldNode)：替换节点
insertBefore(newNode,refNode):在refNode前插入节点

操作节点的属性
setAttribute()，getAttribute()

直接获得节点对象的某个属性值，元素节点.属性名，返回一个属性的值，获得class的值使用className

设置或者获取节点的标签体， innerHTML元素内的所有内容，并识别html元素
dom对象.innerHTML;获取
dom对象.innerHTML="";设置

js事件

事件流：冒泡型事件流，捕获型事件流

传统事件绑定
一、取得id = div1的元素节点。
var div1 = document.getElementById(“div1”);
//设置元素节点的onclick属性
div1.onclick = function(){alert(“div1 被点了”);}
或
function divClick(){alert(‘点中’);}
div1.onclick=divClick;

现代事件绑定
var div1 = document.getElementById(“div1”);
//添加事件处理程序,true:捕获阶段; false:冒泡阶段
div1.addEventListener(“click”,click1,false);
//删除事件处理程序
div1.removeEventListener(“click”,click1,false);
function click1(){
alert(“div1 is click…”);
}

提示：删除事件处理程序时，阶段要相同。
传统事件处理程序是在冒泡阶段添加的。

常见的事件:
焦点事件:
onfocus
onblur
表单事件:
onsubmit
onchange 改变
页面加载事件:
onload
鼠标事件：
onclick：点击
ondblclick:双击
onmousedown:按下
onmouserup:弹起
onmousemove:移动
onmouserover:悬停 （移动到某个元素上面）
onmouserout:移出
onmousewheel:滚轮
键盘事件
onkeydown:按下
onkeyup:弹起
onkeypress:按住

事件对象：event，事件点击产生是创建
ie
window.event;
非ie，第一个参数默认事件对象
元素对象.on事件名称=function(event){
}

元素对象.on事件名称=function(){
var event= arguments[0];
}

相对于客户区的坐标
clientX 返回当事件被触发时，鼠标指针的水平坐标。
clientY 返回当事件被触发时，鼠标指针的垂直坐标。

相对于屏幕的坐标
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。