1. JS的简介 概述: JavaScript, 是一门弱类型语言, 用来给页面增加动态功能的. //弱类型语言: 对数据的数据类型划分不精细(不明确). 特点: A. JavaScript 是一种轻量级的编程语言。 B. JavaScript 是可插入 HTML 页面的编程代码。 C. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 D. JavaScript 很容易学习。 JS的组成: ECMAScript: 定义了JS的基本对象和语法. BOM: Browser Object Model, 浏览器对象模型. DOM: Document Object Model, 文档对象模型. 2. JS的引入方式: A: 直接嵌入到HTML页面中. 写在<head>标签中的<script> <script> //JS代码 </script> B: 写在.js文件中,然后再页面中引入该.js文件. 写在<head>标签中的<script> <script src="引入的.js文件的路径"> //JS代码 </script> 3. ECMAScript的核心语法 基础语法: A: JS是区分大小写的. B: JS是弱类型语言, 所有的变量值都用var类型的变量接收. var v1 = "abc"; var v2 = 123; var v3 = false; var v4 = null; var v5; var v6 = new Array(); C: 每行语句末尾的分号可写可不写, 建议写上. D: JS中的注释方式和Java中的注释方式类似. //单行注释 /*多行注释*/ E: 由{}括起来的内容是代码块. 变量的命名规则: A: 变量名的组成必须是: 数字, 大小写字母, _, $四部分中组成. B: 数字不能开头. JavaScript中值的数据类型: 原始值: //可以理解为Java中基本类型的值 //存储在栈中, null除外(存储在堆中) String: //JS中没有字符的概念, 字符串用''或者""括起来效果是一样的. Number: //所有的小数和整数都是: Number值. Boolean: //值只有两个: false, true Null: //值只有一个: null Undefined: //值只有一个: undefined 我们可以通过typeof关键字, 来校验变量或者值是什么类型的值: 格式: typeof 值或者变量名 如果返回值是string, 说明是String类型的原值值. 如果返回值是number, 说明是Number类型的原始值. 如果返回值是boolean, 说明是Boolean类型的原始值. 如果返回值是undefined, 说明是Undefined类型的原始值. 如果返回值是object, 说明是一个引用类型的值或者Null类型的原始值. 引用值: //可以理解为Java中的引用类型的值. //存储在堆中. /* JS中是没有类的, JS是基于对象的. 可以理解为是: 面向对象. */ var b1 = false; //原始值 var b2 = new Boolean(true); //引用值, Boolean 对象是 Boolean 原始类型的引用类型。 var s1 = "abc"; //原始值 var s2 = new String("abc"); //引用值, String 对象是 String 原始类型的引用类型。 var n1 = 123; //原始值 var n2 = new Number(123) //引用值, Number 对象是 Number 原始类型的引用类型。 和Java中的代码对比: int a = 10; //Java中的基本类型 Integer ii = new Integer(10); //Java中的引用类型 Integer ii2 = 10; //JDK1.5的新特性: 自动装箱. 4. JavaScript中的类型转换 转成字符串: 变量名.toString(); 转成数字: parseInt(值), parseFloat(值); 强制类型转换: Boolean(给定的值); //把给定的值转成boolean类型, 值是非空字符串, 非零数字, 非null的情况下返回true, 其他返回false. String(给定的值); //把给定的值转成字符串. //类似于 值.toString()这种方式. Number(给定的值); //把给定的值转成数字. 如果给定的值是false和true, 那么则分别转成0和1. 5. JavaScript中的运算符 JavaScript中的运算符和Java运算符基本一致. 算术运算符: +, -, *, /, %, ++, -- 赋值运算符: =, +=, -=, *=, /=, %= 比较运算符: >, <, >=, <=, != , ==, ===(全等于) /* ==和===解释: ==: 只校验值是否相等. ===(全等于): 既校验值是都相等, 也校验值的类型是否相同. */ 逻辑运算符: &&, ||, ! 条件运算符: //和Java中的三元运算符一样. var num = num1 > num2 ? num1 : num2; 逗号运算符: //相当于同时声明多个变量. var num1 = 1, num2 = 2, num3 = 3; 6. JavaScript中的语句 和Java中非常类似, 需要注意的是: for循环的初始化条件的类型要写成var. 7. JavaScript的事件的概述 概述: 前面编写的JS代码都是直接在<script>标签中直接写的, 按照执行的顺序来讲, 只要页面加载到代码, 就会执行.这样写不够灵活, 一般JS的代码是由 用户某些行为 的触发来执行的.这些用户的行为, 就是事件. 常用事件: onclick: //鼠标单击事件 ondblclick: //鼠标双击事件 onmouseover: //鼠标悬浮事件 onmousemove: //鼠标移动事件 onmouseout: //鼠标移除事件 onkeyup: //键盘抬起事件 onfocus: //获取鼠标焦点事件 onblur: //失去鼠标焦点事件 onchange: //改变事件. 一般用于下拉列表, 可以用来做菜单联动. onsubmit: //提交事件. 可以用来做表单数据校验. onload: //页面加载事件 //JS事件一般结合 JS函数一起使用. 8. JavaScript的自定义函数 函数的定义格式: 格式一: 普通定义格式, 直接写. //注意: 直接写参数即可, 不需要写数据类型. function 函数名(参数1, 参数2){ } //示例: 计算两个数字的和 function sum(a,b){ return a + b; } 格式二: 匿名函数 //把函数绑定到事件上. onload = function() { } 9. JavaScript的全局函数 eval(): 将字符串当成脚本来执行. //Ajax会用. var s = "alert('aaa')"; eval(s); parseInt(); 转成整数 parseFloat(); 转成小数 toString(); 转成字符串 encodeURIComponent(); 把字符串编码为 URI 组件。 decodeURIComponent(); 解码一个编码的 URI 组件。 //缓存数据可以存在Cookie里边, 但是Cookie默认是不能存中文的, 就可以通过这两个方法对字符串进行编码和解码. 10. JavaScript的对象及数组 RegExp: 正则对象. 正则的校验有两种方式: String#match(); //字符串.match("正则表达式"); RegExp#test(); //正则表达式.test(字符串); 数组的定义: 直接定义: var arr = [1,2,3,"abc",true]; 对象方式定义: var arr = new Array(); arr[0] = 1; arr[1] = 2; var arr2 = new Array(3); //下边只能是0,1,2 var arr3 = new Array("a","b","c"); 11. JavaScript的BOM对象 BOM的概述: //Browser Object Model, 浏览器对象模型. 浏览器对象的分类: Window: Window是浏览器对象中最顶层的对象, 使用这个对象的时候可以window.xxx也可以将window省略. //即: window.alert()和alert()效果一样. alert(); 警告框 confirm(); 确认框 open(); 打开一个新的浏览器窗口或查找一个已命名的窗口 close(); 关闭浏览器窗口。 prompt(); //提示用户录入数据 setInterval(); 设置定时, 循环执行. //用法: setInterval("表达式", 间隔时间-毫秒); setTimeOut(); 设置定时, 执行一次. //用法: setTimeOut("表达式", 间隔时间-毫秒); clearInterval(); 清除定时 clearTimeOut(); 清除定时 History: 浏览器的历史对象. Location: 浏览器的控制页面跳转对象. Navigator: Screen: 12. DOM对象简介 概述: document Object Model, 文档对象模型. //所谓的文档模型指的就是: 把整个页面加载到内存形成树状结构, 也叫DOM树. /* 记忆: DOM对象是把整个文档(.html文件)加载到内存, 文档中的(元素标签,属性,文本)都是对象, 通过操作对象来实现, 修改或者修饰HTML页面的效果. */ 树状结构的特点: 1. 有且只有一个根节点. 2. 每个节点都有一个父节点和任意个子节点, 根节点除外. 3. 没有子节点的节点叫: 叶子节点. DOM树的特点: 1. 所有的元素标签都用: Element表示. 2. 元素标签的属性用: Attribute表示. 3. 文本内容用: Text表示. 4. 元素标签, 属性, 文本统称为: 节点(Node). 13. DOM对象的功能 //document对象的功能: 就是把整个页面加载到内存后形成的对象. 获取: document.getElementById("元素的id属性值"); //根据id获取元素, 获取的是一个. document.getElementsByName("元素的name属性值"); //根据name获取元素, 获取的是多个. document.getElementsByClassName("元素的class属性值"); //根据class获取元素, 获取的是多个. document.getElementsByTagName("元素的标签名"); //根据标签名获取元素, 获取的是多个. 创建: document.createElement("元素标签名"); //根据元素标签名创建指定的标签. document.createTextNode("文本值"); //创建指定的文本 <select> <option>--请选择--</option> <option>北京市</option> <option>上海市</option> </select> 14. Element对象的功能 节点1.appendChild(节点2); //把节点2添加到节点1中. 节点1.insertBefore(新节点, 旧节点); //把新节点插入到旧节点的前边. replaceChild(); removeChild(); 15. Element对象之: 常用属性 childNodes: //获取指定元素下所有的子节点 firstChild: //获取指定元素的 第一个子节点 lastChild: //获取指定元素的 最后一个子节点 parentNode: //获取指定元素的父节点 nodeName: //获取指定的节点名 nodeType: //获取指定的节点类型 nodeValue: //获取指定的节点值