DOM操作

JS中的函数

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法

函数声明：

function fnName () {…};使用function关键字声明一个函数，再指定一个函数名，叫函数声明。

函数表达式：

var fnName = function () {…};使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。

匿名函数：

function () {}; 使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。

 

函数声明和函数表达式不同之处在于：

一、Javascript引擎在解析javascript代码时会‘函数声明提升'（Function declaration Hoisting）当前执行环境（作用域）上的函数声明。

而函数表达式必须等到Javascirtp引擎执行到它所在行时，才会从上而下一行一行地解析函数表达式。

二、函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以fnName()形式调用。

在function前面加！、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果，而（）、！、+、-、=等运算符，都将函数声明转换成函数表达式。

消除了javascript引擎识别函数表达式和函数声明的歧义，告诉javascript引擎这是一个函数表达式，不是函数声明，可以在后面加括号，并立即执行函数的代码。

 

作用域：

javascript中没用私有作用域的概念，如果在多人开发的项目上，你在全局或局部作用域中声明了一些变量，可能会被其他人不小心用同名的变量给覆盖掉。

根据javascript函数作用域链的特性，可以使用这种技术可以模仿一个私有作用域，用匿名函数作为一个“容器”。

“容器”内部可以访问外部的变量，而外部环境不能访问“容器”内部的变量，所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突，俗称“匿名包裹器”或“命名空间”。

JQuery使用的就是这种方法，将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中，在全局作用域中调用JQuery代码时，可以达到保护JQuery内部变量的作用

声明函数并提供参数列表:

我们可以使用arguments数组获取函数的参数列表. arguments数组封装了调用者传递过来的参数列表.

function doClick(a, b){ return arguments[0]+arguments[1]; }

在js调用函数过程中,只检测函数名,不检测参数列表,如果参数名称匹配,则直接调用.在目标函数中,可以使用arguments访问传递过来的参数列表.

js中没有函数的重载,如果出现相同函数名的两个函数,后一个有效.

Javascript的面向对象编程简介

JS是一款支持基于面向对象编程的弱类型脚本语言.

js中创建对象的方式1: ``` 创建一个Person类 function Person(){ this.name="zs"; this.age=15; this.aihao=["吃","喝","玩","乐"];

this.play=function(){
    alert("我在玩,赶紧过来一起呀!");
};

} var p=new Person(); console.log(p.name+","+p.aihao[0]) p.play() ```

Javascript中的dom操作

###常见事件:
1. onclick 单击
2. onsubmit 表单提交
3. onblur 焦点失去事件
4. onload 标签加载完毕事件
5. onchange 下拉列表框更改下拉项事件

###常见API:（任何封装架构都基于以下四点）
1. 查找页面中的标签?
var e=document.getElementById("id属性值");
var ary=document.getElementsByTagName("标签名")
var ary=document.getElementsByName("name属性")
父标签=e.parentNode;
子标签数组=e.childNodes;

2. 操作标签的内容文本?
e.innerHTML
e.innerText

3. 操作文本框中的内容?
e.value

4. 操作标签的css样式属性?
e.style.color="red";
e.style.fontSize="18px";
e.style.backgroundColor="blue";
e.style.backgroundImage="url('img/a.jpg')";
...

e.className="样式类名"

 

###完善登录页面中的表单验证

一个完整的表单验证业务,需要包含两大部分:
1. 每个表单控件都需要进行数据验证.
* onblur焦点失去事件.
* js中的正则表达式.
* js使用dom相关api操作网页.
2. 当提交表单时,需要保证每个控件提交的数据都合法.如果有一个不合法,则阻止表单的提交.
```
当表单提交时,将会触发表单的onsubmit事件监听.
<form onsubmit="return checkForm();"></form>

function checkForm(){
return checkName() && checkPwd() && checkEmail();
}

浏览器当把页面加载完毕后,将会把整篇html文档解析为一颗DOM树,我们可以使用js的dom相关的API方法,通过一定的方式获取这篇文档中的一个或多个标签对象,然后再使用API操作这些标签.

常见API:

1> 通过id获取标签对象: 通过id属性值,寻找一个标签 var p=document.getElementById("p");

2> p就相当于:内容文本整体. 如果访问以及修改p标签的内容文本呢? var text=p.innerHTML; p.innerHTML="修改成的目标文本";

3> 如果获取了input文本框对象,我们可以访问文本框中填写的内容: var input=document.getElementById("xxx"); var v=input.value; input.value=""; //修改文本框中的内容