本文共 4306 字，大约阅读时间需要 14 分钟。

---

一、变量

JavaScript 的变量类型：

数值类型： number

字符串类型： string

对象类型： object

布尔类型：boolean

函数类型： function

JavaScript 里特殊的值：

undefined 未定义，所有js 变量未赋于初始值的时候，默认值都是undefined.

null：空值

NaN 全称是：Not a Number。非数字。非数值。

JS 中的定义变量格式：

var 变量名;

var 变量名= 值;

---

---

二、关系（比较）运算

等于： == 等于是简单的做字面值的比较全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型

---

三、逻辑运算

且运算： &&或运算： ||取反运算： !在JavaScript 语言中，所有的变量，都可以做为一个boolean 类型的变量去使用。0 、null、undefined、””(空串) 都认为是false；

&& 且运算。 有两种情况：

第一种：当表达式全为真的时候。返回最后一个表达式的值。

第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算

第一种情况：当表达式全为假时，返回最后一个表达式的值

第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且&& 与运算和||或运算有短路。

短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行

---

四、数组 ★

JS 中数组的定义：

格式：

var 数组名= []; // 空数组

var 数组名= [1 , ’abc’ , true]; // 定义数组同时赋值元素

---

五、函数 ★

① 方式一

使用的格式如下:

function 函数名(形参列表){

       函数体

}

在JavaScript 语言中，如何 定义带有返回值的函数？

只需要 在函数体内直接使用return 语句返回值 即可！

---

② 方式二

使用格式如下：

var 函数名= function(形参列表) { 函数体}

---

③ 注：在JS 中函数的重载会直接覆盖掉上一次的定义

---

④ 函数的arguments 隐形参数（只在function 函数内）

var fun = function (a) {
           alert(  "长度 = " +  arguments.length); // 长度为 3        alert("a的值： " + a); // 1        for (var i = 1 ; i <= arguments.length ; i++) {
    // 1,2,3            alert( "第"+i+"个数： " + arguments[i-1]);        }    }    fun(1,2,3); // 可以写多个参数

---

六、JS 中的自定义对象（扩展内容）

① Object 形式的自定义对象

对象的定义：var 变量名= new Object(); // 对象实例（空对象）变量名.属性名= 值; // 定义一个属性变量名.函数名= function(){
   } // 定义一个函数对象的访问：变量名.属性/ 函数名();

---

② {}花括号形式的自定义对象

对象的定义：	var 变量名= {
    // 空对象	属性名：值, // 定义一个属性	属性名：值, // 定义一个属性	函数名：function(){
   } // 定义一个函数};对象的访问：		变量名.属性/ 函数名();

---

七、JS 中的事件

① 常用的事件：

onload 加载完成事件： 页面加载完成之后，常用于做页面js 代码初始化操作onclick 单击事件： 常用于按钮的点击响应操作。onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。

---

② 事件的注册又分为静态注册和动态注册两种

静态注册事件：通过html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

动态注册事件：是指先通过js 代码得到标签的dom 对象，然后再通过dom 对象.事件名= function(){} 这种形式赋于事件响应后的代码，叫动态注册。

动态注册基本步骤：

1、获取标签对象

2、标签对象.事件名= fucntion(){}

---

③ onload 加载完成事件

---

④ onclick 单击事件

    
                   btn1        btn2

---

⑤ onblur 失去焦点事件

    
                   用户名：        密码：  

---

⑥ onchange 内容发生改变事件

    
                               ---学科---            数学            语文            英语                            ---年级---            一年级            二年级            三年级        

---

⑦ onsubmit 表单提交事件

---

八、DOM 模型

DOM 全称是Document Object Model 文档对象模型大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。

① Document 对象 ★

Document 对象的理解：第一点：Document 它管理了所有的HTML 文档内容。第二点：document 它是一种树结构的文档。有层级关系。第三点：它让我们把所有的标签都对象化第四点：我们可以通过document 访问所有的标签对象。

---

② Document 对象中的方法介绍 ★

document.getElementById(elementId)通过标签的id 属性查找标签dom 对象，elementId 是标签的id 属性值document.getElementsByName(elementName)通过标签的name 属性查找标签dom 对象，elementName 标签的name 属性值document.getElementsByTagName(tagname)通过标签名查找标签dom 对象。tagname 是标签名document.createElement( tagName)方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

---

getElementById 方法示例代码：

    
                   用户名：        校验
        

---

getElementsByName 方法示例代码：

    
                   java        c++        php
        全选        全不选        反选

---

getElementsByTagName 方法示例代码：

    
                   java        c++        php
        全选

---

createElement 方法示例代码：

---

③ 节点的常用属性和方法

节点就是标签对象

方法：通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点appendChild( oChildNode )方法，可以添加一个子节点，oChildNode 是要添加的孩子节点属性：childNodes属性，获取当前节点的所有子节点firstChild属性，获取当前节点的第一个子节点lastChild属性，获取当前节点的最后一个子节点parentNode属性，获取当前节点的父节点nextSibling属性，获取当前节点的下一个节点previousSibling属性，获取当前节点的上一个节点className用于获取或设置标签的class 属性值innerHTML属性，表示获取/设置起始标签和结束标签中的内容innerText属性，表示获取/设置起始标签和结束标签中的文本

---

④ 练习：DOM 查询练习

   
   
   
	
    
		
     
			你喜欢哪个城市?		
		
     
			
      
北京
			
      
上海
			
      
东京
			
      
首尔
		
     
		
     
		
     
		
     
			你喜欢哪款单机游戏?		
		
     
			
      
红警
			
      
实况
			
      
极品飞车
			
      
魔兽
		
     
		
     
		
     
		
     
			你手机的操作系统是?		
		
     
      
IOS
      
Android
      
Windows Phone
     
	
    
	
    
     		gender:		
     		Male		
     		Female		
     
		
     
		name:		
     	
    
   
   
	
    
     查找#bj节点
    
	
    
     查找所有li节点
    
	
    
     查找name=gender的所有节点
    
	
    
     查找#city下所有li节点
    
	
    
     返回#city的所有子节点
    
	
    
     返回#phone的第一个子节点
    
	
    
     返回#bj的父节点
    
	
    
     返回#android的前一个兄弟节点
    
	
    
     返回#username的value属性值
    
	
    
     设置#username的value属性值
    
	
    
     返回#bj的文本值
    
   

转载地址：http://rmao.baihongyu.com/