前端之JavaScript

一、ECMAjavascript核心基础语法
1、是一种基于对象和事件驱动的、并具有安全性能的解释性脚本语言（代码不进行预编译）
2、网页中引用js的方式
　（1）内部js文件
　　　 ＜script type=“text/javascript"＞＜/script＞
　（2）外部js文件（不能写成单标签，不能写内部js）
　　　 ＜script type=“text/javascript” src=“index.js"＞＜/script＞
　（3）直接在html标签中
　　　 ＜input type=“button” value=“弹出信息” οnclick=“javascript:alert(‘欢迎你’)”/＞
3、变量声明和赋值
　　var width=20；
　　var y,z=10;
　　x=88；
4、数据类型
　（1）基本类型
　　　 未定义：undefined
　　　 空类型：null
　　　 数值类型：number
　　　 字符串类型：String
　　　 布尔类型：boolean
　（2）引用类型：
　　　 对象、函数、数组
5、typeof()
　　判断一个值或变量究竟属于那种数据类型，Null或引用类型返回Object类型的结果
6、String(是一种对象)的方法
　　 indexof（str，index）从第index个字符开始查找
　　 charAt(index)返回指定位置的字符
　　 substring(index1,index2)返回index1和index2之间的字符串，包括index1，不包括index2
　　 split(str) 将字符串分割为字符串数组
7、数组
　（1） 三种定义方式
　　　　var friut=new Array(3);
　　　　　 friut[0]=“apple”;
　　　　　 friut[1]=“orande”;
　　　　　 friut[2]=“banana”;
　　　　 var friut1=new Array(“apple”,“orande”,“banana”);
　　　　 var friut2=[“apple”,“orande”,“banana”];
　（2）数组常用方法和属性
　　　 长度length
　　　 连接数组元素join() 例：var str=friut.join(”-”); 　　//str=”apple- orande- banana”
　　　 排序sort()
　　　 往数组添加元素，返回数组长度push() 例：var size=friut.push(“peach”); 　//数组friut长度成4
　（3）数组的遍历方式
　　　 for(var i=0;i<friut.length;i++){}
　　　 for(var i in friut){} 　　　　 //注：i还是数组的下标
8、运算符号
　（1） 常用运算符
　　　　算术运算符：+ - * / % ++ –
　　　　 比较运算符：> < >= <= == != === !==
　　　　 逻辑运算符：&& || ！
　　　　 赋值运算符：= += -=
　（2） =＝和===区别
　　　　 ==：等于，用于一般比较，比较时数据类型可以不同，”1”==1返回true
　　　　 ===：全等于，用于严格比较，只要数据类型不匹配就返回false，”1”===1返回false
9、注释
　　 单行//
　　 多行/* */
10、常用的输入/输出
　　 document.write(“页面输出!”);
　　 console.log(“控制台输出！”);
　　 alert(“警告提示!”);
　　 var pwd=prompt(“提示信息”,“输入框的默认信息”);
　　　 document.write(pwd);
11、调试
　　 在浏览器右击选择检查——>Sources——>打断点调试
12、js函数
　 （1）常用系统函数
　　　　 parseInt(“字符串”) 返回整数
　　　　parseFloat(“字符串”) 返回浮点数
　　　　 isNaN(x) 检查是否是非数字
　 （2）自定义函数
　　　　 function 函数名(参数1，参数2，…){
　　　　　　 js语句；
　　　　　　 [return 返回值]
　　　　 }
　 （3）函数自动加载
　　　　 函数名();
　　　　 Window.function(){}
13、事件
　　 Onload ：页面加载时触发
　　 Onclick：单击时触发
　　 Onmouseover：鼠标悬浮时触发
　　 Onkeydown：某个键盘按键被触发
　　 Onchange：域的内容被改变时触发
　　
二、浏览器对象模型(BOM)

1、Window对象的属性
　（1）History对象
　　　　 方法：back()加载前一个URL
　　　　　　　forward() 加载前下一个URL
　　　　　　　go(-1)等价back()后退，go(1)等价forward()前进
　（2）Location对象
　　　　属性：href设置或返回完整的URL
　　　　　　　 host设置或返回主机名和当前URL的端口号
　　　　　　　 hostname设置或返回当前URL的主机名
　　　　方法：reload()重新加载当前文档
　　　　　　　 replace()用新的文档替换当前文档
　（3）Document对象（DOM下面详解）
　　　 属性：referrer返回载入当前文档的URL
　　　　　　url返回当前文档的url
　　　 方法：getElementById()返回对拥有指定id的第一个对象的引用
　　　　　　 getElementsByName()返回带有指定名称的对象的集合
　　　　　　 getElementsByTagName()返回带有指定标签名的对象的集合
　　　　　　 write()
2、Window对象的方法
　 window.方法名()，window为全局对象，可省略
　 （1）prompt()显示可提示用户输入的对话框
　 （2）alert("")显示带有一个提示信息和一个确定按钮的警示框
　 （3）confirm()显示可提示用户输入的对话框
　 （4）open(“弹出窗口的url”,”窗口名称”,”窗口特征”)打开一个新的浏览器窗口
　（5）close()关闭浏览器窗口
　 （6）setTimeout(“调用的函数”,等待的毫秒数)在指定的毫秒数后调用函数或计算表达式
　（7）setInterval(“调用的函数”,间隔的毫秒数)按照指定的毫秒来调用函数或表达式
　 清除函数：clearTimeout(myTime) 和clearInterval(myTime)，var myTime=setTimeout();
　刷新window.reload();
3、js内置对象：
　　Array：用于在单独的变量名中存储一系列的值
　　String：用于支持对字符串的处理
　　Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
　　　　　 ceil()向上取整
　　　　　 floor()向下取整
　　　　　 round()四舍五入取整
　　　　　 random()返回0-1的随机数
　　Date：用于操作日期和时间

三、文档对象模型（DOM）

1、访问节点
　 （1）使用getElement系列方法访问指定节点
　　　　getElementById()
　　　　getElementsByName()
　　　　getElementsByTagName()
　（2）根据层次关系访问节点
　　　　获取父节点:parentNode
　　　　 获取子节点集合:childNodes
　（3）火狐会把标签之间的空格、换行等当成文本节点，为了准确找到相应的元素，使用以下属性
　　　 返回节点的第一个子节点firstElementChild
　　　 返回节点的最后一个子节点lastElementChild
　　　 下一个节点nextElementSibling
　　　 上一个节点previousElementSibling
2、设置或获取普通标签内容：innerHTML属性 　　 innerTEXT属性（标签也会显示）
　　设置或获取表单内容:value属性
3、节点信息
　　 nodeName：节点名称
　　nodeValue：节点值
　　 nodeType：节点类型
4、节点操作
　（1）操作节点属性：
　　　 setAttribute(“属性名”,“属性值”)
　　　 getAttribute(“属性名”)
　（2）创建节点:
　　　 createElement(“标签名称”)
　（3）插入节点
　　　 A.appendChild（B） 　把B节点追加至A节点的末尾
　　　 insertBefore(“A”,“B”) 　把A节点插入到B节点之前
　　　 cloneNode(true) 　 复制某个节点，选true则节点的所有后代节点也都会被克隆
　（4）删除节点：delNode.parentNode.removeChild(delNode)
　（5）替换节点:oldNode.parentNode.replaceChild(newNode,oldNode);