03 前端篇（JS）

参考博客：http://www.cnblogs.com/yuanchenqi/articles/5980312.html

JavaScript包括三部分： ECMAScript、DOM、BOM

Javascript在开发中大多数情况下是基于对象的，也是面向对象的。

ECMAScript：语法、类型、语句、关键字、保留字、运算符、对象

JavaScript 引入方式：

1. 直接编写：建议放在 body 的最后

<script>

alert(“hello div”)

</script>

2. 导入文件：建议放在 head 里面

<script src=”hello.js></script>

变量：var

注释方式：1. //     2. /* */

数据类型： 1. Number，包括整型和浮点型  2. String   3. Boolean   4. Null   5. Undefined：undefined

NaN：当字符串转换成数字失败时，就是NaN，属于 Number数据类型

NaN 数据在表达式中结果一定为 false，除了 !=

typeof：数据类型查询，只能检测基本数据类型，对象不能检测

逻辑运算符:

ECMAScript：

native object：

host object： DOM 、BOM

DOM： document.write

BOM：alert(“111”)

 

 function 创建方式：

1. function func() {
       alert(123);
       return 8;
   }

   var ret = func()
   alert(ret)

2. var func2 = new function ("1", "n", "函数体") ;

instanceof：检测对象类型   s instanceof String

字符串：

两种创建方式：1. var s=“hello” 2. var s2=new String（“hello”）

方法：

1. s.length

2. 遍历

3. 编排方法：s.italics()  s.bold() s.anchor()

4.大小写转换: s.toUpperCase()  s.toLowerCase()

5. 获取指定字符： s.charAt(3)//取对应位置的字符

s.charCodeAt(3)//取对应位置字符的ASCII值

6. 查询字符串： s.match(“l”)//返回一个数组，里面是所有匹配结果   s.search(“l”)//得到第一个匹配结果的索引值

7. s.replace(“E”,”e”);  s.split(“E”); s.concat(“ world”)// 进行字符串拼接

8. 截取字符串： s.substr(1, 2)  //从索引 1 开始往后取 2 个元素

s.substring(1,3) //从索引1 取到索引2

s.slice(1, -2)  //后面的位置可以取负数，也是左闭右开

9. 根据元素取索引 s.indexOf(“l”)   s.lastIndexOf(“l”)

数组 Array：

创建方式： 1. var arr=[1,2,3] 2. var arr2=new Array(1,2,3,4)

//如果采用初始化对象方式创建数组，如果里面只有一个值且是一个数字，那么数字表示的是长度，而不是内容  var arr=new Array(3)

//数组是可变长的

数组对象的方法：

1. [“hello”,”world”].join(“---”)
2. 栈操作：push、pop（在栈顶部操作）  unshift、shift（在栈底部操作）

arr5.push(13)

var ret = arr5.pop()//删除最后一个元素，返回值是删除元素的值

arr5.unshift(45)

arr5.shift

3. 排序：sort reverse

arr5.reverse() //反转,直接更改数组

arr5.sort（）

4. concat： 连接数组   b=a.concat(4,5)

5. toString()         // a.toString() 用 ’,’ 连接数组内的每个元素

Date 对象：

1. 创建方式： var date_obj=new Date();

正则对象：

 

Math 对象：

 

Window 对象方法：

alert（）：显示带有一段消息和一个确认按钮的警告框

confirm（）：显示带有一段消息以及确认按钮和取消按钮的警告框

prompt（）：显示可提示用户输入的对话框

setInterval（）：循环的，按照指定的周期（以毫秒计）来调用函数或计算表达式

clearInterval（）：取消由setInterval设置的timeout

setTimeout（）：只一次，在指定的毫秒后调用函数或计算表达式

clearTimeout（）：取消由setTimeout设置的timeout

document.getElementById(“clock”)

document.getElementsByClassName(“div2”)

 

History 对象方法：

history内部三种方法：forward、back、go   history.go(-1|1)

一个属性length：保存的是 history 的历史页面个数

 

location：

onclick=”location.reload()”   刷新

onclick = “location.href=’http://www.baidu.com’”

DOM对象：

HTML中所有内容都是节点（NODE）

整个文档是一个文档节点（Document 对象）

每个HTML元素是元素节点（element对象）

html元素内的文本是文本节点（text 对象）

注释是注释节点（comment对象）

节点（自身属性）：

attributes：节点的属性节点

nodeType：节点类型

nodeValue：节点值

nodeName：节点名称

innerHTML：节点（元素）的文本值,即 text 值

导航属性：

parentNode：节点的父节点

firstChild：节点下第一个子元素    #text

lastChild：节点下最后一个子元素

childNodes：节点（元素）的子节点

parentElement：

firstElementChild：

lastElementChild：

children：子节点元素

nextElementSibling：下一个兄弟节点标签

previousElementSibling：上一个兄弟节点标签

访问HTML元素（节点）：

getElementById（）

getElementsByTagName（） ：  p、div

getElementsByClassName（）

getElementsByName（）:  <p name=”lily”> hello p </p>

全局查找：

在document下查找：   document.xxx

局部查找：   局部查找不可以通过 id 、name        var ele = document.getElementsByClassName(“div3”)

var ele2 =ele.getElementsByTagName(“p”)

HTML DOM Event：

onclick：点击

ondblclick：双击

onfocus：元素获得焦点   // 练习：输入框

onblr：失去焦点

onchange：域的内容被改变，应用场景

onkeydown：按下键盘某个键

onkeypress：键盘被按下并松开

onkeyup：键盘被松开

onload：一张页面或一幅图像。放在body标签上，当页面记载完成后才会去执行对应函数的内容。

window.onload=function(){ .....}

onmousedown：按下鼠标

onmousemove：移动鼠标

onmouseout：鼠标离开指定区域会触发

onmouseover：鼠标一进入指定区域就会触发

onsubmit：只能绑定在 form 标签上

event.stopPropagation()：阻止事件传播

标签的增删改查：

添加： createElement（“p”）    appendChild（son）

删除：removeChild（last_son）

改：ele.innerHTML 、ele.innerText   前者可以解析字符串内的标签

ele.style.fontSize=”30px”

elementNode.setAttribute(name,value)

elementNode.getAttribute(name)

elementNode.className

elementNode.classList.add(“big”)

elementNode.classList.remove(“big”)

DHTML: dynamic html（动态html）

<a href=”javascript:void(0)”>hello</a>,实现的功能和 onclick 一样，javascript 就是一个伪协议