javaScript概述
JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
JavaScript 是基于对象和事件驱动的,主要应用在客户端.
JavaScript 简称 JS, 和java没有关系
JavaScript 是基于对象的语言,java是面向对象的语言(javaScript可以不用对象就完成功能,对象特别难理解)
JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
w3cschool教程是非常好的教程,可去学习
javaScript的作用
JavaScript 可以对事件作出响应
JavaScript 可以读写 HTML 元素
JavaScript 可被用来验证数据
(网页中可以想到的都能做,随心所欲,网页丰富多彩)
javaScript的特点
交互性(信息的动态交互)
安全性(不允许直接访问本地硬盘)
跨平台性(依靠浏览器解释执行,和平台无关)
javaScript和JScript的关系(了解)
JScript可以看做是javaScript分化出来的,有区别,但两者都遵循ECMAScript规范,即基本语法都一致
在html中使用javaScript
* 直接嵌入
在任意位置添加<script>标签,并在其中写入脚本代码
* 引入外部脚本文件
在任意位置添加<script>标签,并使用src属性指定外部脚本文件位置
例:
直接嵌入
<body>
<p>段落</p>
<script>
alert("你好");
</script>
</body>
引入外部脚本文件
<body>
<p>段落</p>
<script src="a.js"></script>
</body>
a.js文件内容:alert("你好");
注意:
引入外部文件的<script>中再写代码不会执行
JavaScript的组成
* 核心(ECMAScript)
规定了:语法,类型,语句,关键字,保留字,运算符,内置对象
* 文档对象模型(DOM)
文档对象模型把文档描述为树,元素为每个节点,可以轻松地删除、添加和替换节点。
* 浏览器对象模型(BOM)
可以对浏览器窗口进行访问和操作。
说明:
文档对象模型是js操作页面的接口
浏览器对象模型是js操作浏览器的接口.
兼容性问题:
不同的浏览器有不同的方式解析代码
ECMA几乎没有兼容性问题
DOM有一些兼容性问题
BOM几乎不兼容
语法
严格区分大小写
每条语句用分号结束(不写分号也可以,默认把行末作为语句的结尾)
浏览器按照自上而下的顺序解析网页,遇到脚本代码直接执行
注释
* 单行注释://
* 多行注释:/* */
变量
* javaScript是一种弱类型的语言
* 任何类型的变量都使用关键字var声明,无需明确的类型声明,例:var i = 1; var str = "123";
变量不声明也可以使用,但是是全局的(后面详说)
变量名必须以字母或下划线开始,余下的字符可以是下划线、美元符号或任何字母或数字字符
* 推荐的变量命名规则:
匈牙利类型标记法:在变量前附加一个小写字母，说明该变量的类型。例如，i 表示整数，s 表示字符串
前缀:数组 a,布尔型 b,浮点型（数字） f,函数 fn,整型（数字） i,对象 o,正则表达式 re,字符串 s,变型（可以是任何类型） v
数据类型
* 原始类型
存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。
原始类型占据的空间是固定的(String除外)，所以可将他们存储在较小的内存区域 - 栈中。这样存储便于迅速查寻变量的值。
* 引用类型
存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。
如果一个值是引用类型的，那么它的存储空间将从堆中分配。由于引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。
相反，放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响。
* 5 种原始类型:
Undefined : 已声明未赋值的变量的值就是undefined,当函数没有返回值时,返回值也是undefined
Null : 表示对象为空.值 undefined 实际上是从值 null 派生来的，因此注意: undefined == null。
Boolean : true 和 false
Number : 分为 整数 和 浮点数,Infinity表示无限大,NaN表示非数字,注意:1/2==0.5
String : 用双引号或单引号括住
typeof运算符
* 判断一个值属于哪种类型。
例:alert (typeof 86); //输出 "number"
* 对变量或值调用 typeof 运算符的返回值
undefined - 如果变量是 Undefined 类型的 (未声明,或已声明未赋值的变量会返回undefined)
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
function - 如果变量是一个函数
常用作用:根据参数的类型不同,方法执行的操作不同,如jQuery的选择器
变量的作用域
* 局部变量:在函数中声明的变量,只能在当前函数内部使用
* 全局变量:不在函数内部声明的变量,可以在任何地方使用
变量不声明直接使用,则变量被视为全局的.不管在哪声明
运算符
* 算术运算符: + - * / % ++ --
加号不仅用于两个数字相加,也用于连接两个字符串
注意: 数值并不是默认整形,1/2==0.5
* 赋值运算符: = += -= *= /= %=
* 比较运算符: == === != > < >= <=
===:全等,值和类型都相等
* 逻辑运算符: && || !
* 条件运算符: 条件?值1:值2;
* 位运算符: & | ^
* 可以用()改变运算符的优先级
不同的类型也可以使用==比较
* ==比较规则(了解):
如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。
如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。
如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。
如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。
值 null 和 undefined 相等。
在检查相等性时，不能把 null 和 undefined 转换成其他值。
如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。
如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。
* ||运算符的另一种作用
如果两边的值不是boolean,会将为真的那个值返回回来.常用来处理兼容问题
如:
var a = false || 'abc'; //abc
var a = 0 || 12; //12
var a = null || new Date(); //new Date()
类型转换
* 转换为字符串
任何类型都有toString()方法,数值的toString方法还可以加参数进行进制转换
* 转换为数字
* parseInt() 和 parseFloat() , 只能转换字符串
* parseInt() 可以起到舍去小数的作用
例:
var iNum1 = parseInt("12345red"); //返回 12345
var iNum1 = parseInt("56.9"); //返回 56
var iNum1 = parseInt("red"); //返回 NaN
* parseInt() 可以进行进制转换
例:
var iNum1 = parseInt("11", 2); //返回 3
var iNum2 = parseInt("11", 8); //返回 9
parseFloat和parseInt类似,可以多解析一个小数点
* 强制类型转换
Boolean(value) - 把给定的值转换成 Boolean 型
Number(value) - 把给定的值转换成数字（可以是整数或浮点数）
String(value) - 把给定的值转换成字符串
* Boolean() 函数
下面是返回结果及对应情况
true : 非0数组,非空字符串,非空对象
false : 0,空字符串,null,undefined
* Number() 函数
Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似，只是它转换的是整个值，而不是部分值。
用 Number() 进行强制类型转换，"1.2.3" 将返回 NaN，因为整个字符串值不能转换成数字。如果字符串值能被完整地转换，Number() 将判断是调用 parseInt() 方法还是 parseFloat() 方法。
非空对象 --> NaN null --> 0 undeined -->NaN false --> 0
* String() 函数
强制转换成字符串和调用 toString() 方法的唯一不同之处在于，对 null 和 undefined 值强制类型转换可以生成字符串而不引发错误,生成对应字符串
* 隐式类型转换
* javaScript中隐式类型转换非常常见,如:
当使用除加号外的算术运算符时,两边的数据会隐式转换为数值型
当需要布尔类型值时,如if的条件中,非布尔类型会被转换为布尔型
* 最重要的隐式类型转换(重点):
其它类型 --> 数值型
其它类型 --> 布尔型
规则就是强制类型转换中Boolean(),Number()函数的规则
条件语句,循环语句
* 条件语句同java(if,switch)
* 循环语句同java(while,do while,for)
* break,continue同java(都有标号)
* for in语句
语法
for (变量 in 对象)
{
在此执行代码
}
注意
中间是 in , 不是冒号
for in语句可以用来遍历数组,则变量的值为数组的下标
for in语句可以用来遍历对象,则变量的值为对象的属性名称
弹出框
* 提示框:alert("文本")
* 确认框:confirm("文本")
* 用户输入框:prompt("文本","默认值")
ECMAScript内置对象
* Array
* Boolean
* Date
* Math
* Number
* String
* RegExp
* Functions
* Events
函数(Function)
* 语法
function 函数名(参数列表) {
函数体;
}
注意:参数列表没有参数类型,写参数名称即可
* 调用
函数名(参数);
例:
function sayHi(name){
alert("你好,"+name);
}
sayHi("李老师");
* 使用return返回值,但是方法中不用声明返回值类型
例:
function sayHi(name){
return "你好,"+name;
}
var msg = sayHi("李老师");
alert(msg);
* 注意
当没有返回值时,用变量接收,则变量的值为undefined
调用函数时的参数个数可以和函数声明时的参数个数不同
* Function对象
* 在js中,函数实际上是一个对象
function sayHi(name){
alert("你好,"+name);
}
相等于
var sayHi = new Function("name","alert(\"你好,\"+name);")
所以,声明两个同名的函数,调用会调用后面的那个.
Function 对象的方法: valueOf() 方法和 toString() 方法。这两个方法返回的都是函数的源代码，在调试时尤其有用。
不推荐这种声明函数的方式,存在性能问题,只要理解在js中,函数实际上是一个对象即可
* 匿名函数
* 示例:
function(name){
alert("你好,"+name);
}
* 匿名函数可以立即执行,如:
(function(name){
alert("你好,"+name);
})("123");
* 匿名函数可以存到一个变量中:
var fun = function(name){
alert("你好,"+name);
}
变量fun指向一个匿名函数,就是指向一个函数对象.
调用:fun("李老师")
* 匿名函数在事件中普遍存在.
* 注意 匿名函数大括号后面要加分号,不然在合并为一行后报错
* 函数声明的三种方式
第一种
function 函数名(参数列表){
函数体
}
第二种
var 变量名 = new Function(参数列表,函数体);
第三种
var 变量名 = function(参数列表){
函数体
}
推荐使用第一种和第三种
* arguments关键字
如果方法声明时没有参数,但在调用时,传递了参数,则在方法中可以使用arguments 数组访问到传递的参数
例:
function sayHi(){
alert("你好,"+arguments[0]);
}
sayHi("李老师");
可以模拟方法重载
数组(Array)
* 概述
数组是ECMAScript中的内置对象Array
数组的作用是：使用单独的变量名来存储一系列的值。
数组是JS中的唯一容器
* 创建方式
var 数组名 = new Array(); //创建一个长度为0的数组
var 数组名 = new Array(长度); //默认值undefined
var 数组名 = new Array(元素1, 元素2, ...);
var 数组名 = [元素1, 元素2, ...]; //任何时候都可以使用
* 访问方式
获取 : 数组名[下标];
赋值 : 数组名[下标] = 值;
* 数组的长度
数组可以改变长度
通过length属性可获得数组的长度
通过给length属性赋值可以改变数组的长度
给数组不存在的索引的元素赋值,数组也会自动增长长度,其中的元素填充为undefined
如: var arr = [1,2,3];
arr[5] = 0;
alert(arr); //输出 1,2,3,,,5
当访问时发现数组下标越界,则不报错,返回undefined
* 数组的方法
* 添加
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
* 删除
pop() 删除并返回数组的最后一个元素
shift() 删除并返回数组的第一个元素
* 排序
sort() 对数组的元素进行排序 ,默认按字符串顺序排序,自定义排序可向sort方法传递一个函数参数,函数有两个参数,返回一个数字
reverse() 颠倒数组中元素的顺序。
* 连接
join() 把数组的所有元素组成一个字符串。元素通过指定的分隔符进行分隔。
concat() 连接两个或更多的数组，并返回结果.(连接一个空数组可实现复制数组)
* 添加或删除或替换
splice() 删除元素，并向数组添加新元素
* 其它
slice() 从某个已有的数组返回选定的元素
toString() 把数组转换为字符串，并返回结果。可直接打印数组内的元素值
toLocaleString() 把数组转换为本地数组，并返回结果。
valueOf() 返回数组对象的原始值
* 自定义排序:
var arr = [1,674,23,9];
arr.sort(function(num1,num2){
return num1-num2;
});
alert(arr);
* splice方法的应用:
splice(索引,删除个数,插入元素...)
1. 删除
arr.splice(2,3); //索引2的位置删除三个元素
2. 插入
arr.splice(2,0,'a','b'); //在索引2的位置插入'a'和'b'
3. 替换
arr.splice(2,2,'a','b'); //将索引为2的位置后的两个元素替换为'a'和'b'
* 小练习:数组去重,数组复制
字符串(String)
* 概述
字符串是js中的基本类型,引用类型String包装了字符串,提供了许多处理字符串的方法
* 定义方式
var 变量名 = new String();
var 变量名 = new String("值"); //typeof 返回 object
var 变量名 = "值"; //typeof 返回 string
上述的声明方式使用时没有什么区别,不过是用new关键字就在堆中分配空间,变为引用类型了
* 字符串长度
length
* 常用方法
* 获取
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。文字-->编码
fromCharCode() 从字符编码创建一个字符串。编码-->文字.通过String.调用
获取字符也可以使用[],如str[1],但是IE6不兼容
* 查找
indexOf() 查找指定字符串第一次出现的位置,没有找到返回-1
lastIndexOf() 查找指定字符串最后一次出现的位置,没有找到返回-1
search() 检索与正则表达式相匹配的值。就是indexOf 加上 正则
* 匹配和替换
match() 找到一个或多个正在表达式的匹配。返回数组
replace() 替换与正则表达式匹配的子串。替换一个还是全部替换取决于正则表达式的模式
* 比较
localeCompare() 用本地特定的顺序来比较两个字符串。可以用来比较汉字
* 截取
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
都可以有一个或两个参数,第一个表示开始位置,第二个表示结束位置.没有第二个表示截取到尾部
区别:
slice 不取结束位置 把负参数看为倒数第几个数
substring 不取结束位置 把负参数变为0
substr 取结束位置 把负参数变为0
* 其它
concat() 连接字符串。
split() 把字符串分割为字符串数组。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
valueOf() 返回某个字符串对象的原始值。
日期(Date)
* Date 对象用于处理日期和时间。
* 创建方式:
var 变量名 = new Date();
var 变量名 = new Date(毫秒值);
var 变量名 = new Date(年,...); //参数个数不固定,依次为 年 月 日 时 分
* 常用方法:
getXXX方法 和 setXXX方法
FullYear,Month,Date,Hours,Minutes,Seconds,Milliseconds,Day 分别表示 年月日时分秒毫秒星期
注意:月份返回0~11,星期返回0~6
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
setTime() 以毫秒设置 Date 对象。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串
Math
* Math 对象用于执行数学任务。
* Math的属性和方法都不需要对象,直接通过Math调用即可
* 常用属性
E 返回算术常量 e，即自然对数的底数（约等于2.718）。
PI 返回圆周率（约等于3.14159）。
* 常用方法
abs(x) 返回数的绝对值。
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sqrt(x) 返回数的平方根。
正则表达式(RegExp)
* RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
* 正则表达式语法与java中的正则表达式语法相同
* 创建方式
var 变量名 = new RegExp(pattern,attributes);
var 变量名 = /pattern/attributes;
pattern为正则表达式的字符串.
attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、不区分大小写的匹配和多行匹配。可以进行组合,如gi
* 常用属性
lastIndex 一个整数，标示开始下一次匹配的字符位置。
source 正则表达式的源文本。
* 常用方法
exec(str) 检索字符串中指定的值。返回找到的值，并确定其位置。
test(str) 判断字符串是否符合正则。返回 true 或 false。
说明:
exec方法和java中的find方法一样.每次只查找一次.返回一个数组(包含所有的分组).用lashIndex属性获得下次开始的位置
exec方法正则要使用全局匹配g,否则死循环?
test方法不是完全匹配，部分匹配也可为true。完全匹配要用到^和$
* 支持正则表达式的 String 对象的方法
search 检索与正则表达式相匹配的值。 indexOf+正则
match 找到一个或多个正则表达式的匹配。 返回数组,但不会返回分组的内容
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。
* 示例:
* 查看邮箱是否是合法邮箱
var str = "1123734918@qq.com";
var re = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var b = re.test(str);
alert(b);
* 查找字符串中单词长度为3的所有单词
var str = "abc welcome to my home, but you can't speak";
var re = /\b[a-zA-Z]{3}\b/g;
var s = "";
while( (s=re.exec(str))!=null){
alert(s + " 索引为:"+(re.lastIndex-s[0].length)+"到"+(re.lastIndex-1));
}
* 将所有叠词替换为一个字符
var str = "1aa2bb3ccc4ddd5";
var re = /(.)\1+/g;
var s = str.replace(re,"$1");
alert(s);
错误
* JavaScript 抛出错误
当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。
* 捕获语法 try catch
try
//在这里运行代码
}catch(err){
//在这里处理错误
}
try 语句测试代码块的错误。
catch 语句处理错误。
* throw 语句创建并抛出异常
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
例: throw "出错了";
JSON
* 对象的简化写法
* 格式:
var 对象名称 = {
属性名称 : 属性值 ,
属性名称 : 属性值
}
例:
var obj = {
a : 5,
b : "123",
d : [1,2,3,4]
e : function(){}
};
* 调用:
对象名称.属性名称
例:
obj.a;
obj.e();
* 注意:
属性值可以为任意类型
多个组合之间用逗号分隔
json和数组可以任意嵌套
属性名称也可以加引号,加不加引号效果一样
可以使用fon in语句遍历json的所有属性
DOM(文档对象模型)
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
HTML DOM
* 概述
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
DOM就是将标签型文档封装为对象,提供属性和方法对文档进行操作
文档对象是document
* 节点
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
根据 DOM，HTML 文档中的每个成分都是一个节点。
文档节点: 整个文档是一个文档节点
元素节点: 每个 HTML 标签是一个元素节点
文本节点: 包含在 HTML 元素中的文本是文本节点
属性节点: 每一个 HTML 属性是一个属性节点
注释节点: 注释属于注释节点
* 节点层级关系
节点树中的节点彼此拥有层级关系。
父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点
在html文档中,<html> 节点没有父节点；它是根节点
HTML DOM 对象
* Document
* Element
* Attribute
* Event
* 每个标签都有对应的对象
标签的属性就是对象的属性,给对象新添加一个属性,标签也多一个属性.
Document 对象
* 每个载入浏览器的 HTML 文档都会成为 Document 对象。
* Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
* 常用属性:
body 提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie 设置或返回与当前文档有关的所有 cookie。
domain 返回当前文档的域名。
referrer 返回载入当前文档的文档的 URL。 即父窗口的url.注意:本地页面会出问题
title 返回当前文档的标题。
URL 返回当前文档的 URL。
* 常用方法:
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
注意:write方法会清空页面,所有事件失效
Element 对象
* 在 HTML DOM 中，Element 对象表示 HTML 元素。
* 属性和方法
注意:
下面的方法和属性未经过整理.跳过即可,不便于学习.后面有经过整理分类的.
参见后面的 重要属性,访问节点,增删节点,设置和获取样式.
只要知道后面常用的方法全部来自于此对象即可
element.appendChild() 向元素添加新的子节点，作为最后一个子节点。
element.attributes 返回元素属性的 NamedNodeMap。
element.childNodes 返回元素子节点的 NodeList。
element.className 设置或返回元素的 class 属性。
element.clientHeight 返回元素的可见高度。
element.clientWidth 返回元素的可见宽度。
element.cloneNode() 克隆元素。
element.firstChild 返回元素的首个子。
element.getAttribute() 返回元素节点的指定属性值。
element.getAttributeNode() 返回指定的属性节点。
element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
element.id 设置或返回元素的 id。
element.innerHTML 设置或返回元素的内容。
element.insertBefore() 在指定的已有的子节点之前插入新节点。
element.lastChild 返回元素的最后一个子元素。
element.nextSibling 返回位于相同节点树层级的下一个节点。
element.nodeName 返回元素的名称。
element.nodeType 返回元素的节点类型。
element.nodeValue 设置或返回元素值。
element.offsetHeight 返回元素的高度。
element.offsetWidth 返回元素的宽度。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetParent 返回元素的偏移容器。
element.offsetTop 返回元素的垂直偏移位置。
element.parentNode 返回元素的父节点。
element.previousSibling 返回位于相同节点树层级的前一个元素。
element.removeAttribute() 从元素中移除指定属性。
element.removeAttributeNode() 移除指定的属性节点，并返回被移除的节点。
element.removeChild() 从元素中移除子节点。
element.replaceChild() 替换元素中的子节点。
element.scrollHeight 返回元素的整体高度。
element.scrollLeft 返回元素左边缘与视图之间的距离。
element.scrollTop 返回元素上边缘与视图之间的距离。
element.scrollWidth 返回元素的整体宽度。
element.setAttribute() 把指定属性设置或更改为指定值。
element.setAttributeNode() 设置或更改指定属性节点。
element.style 设置或返回元素的 style 属性。
element.tagName 返回元素的标签名。
element.title 设置或返回元素的 title 属性。
* 重要属性
节点名称(nodeName):
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
节点值(nodeValue):
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
节点类型(nodeType):
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
element.tagName 返回元素的标签名。
element.className 设置或返回元素的 class 属性。
element.style 设置或返回元素的 style 属性。
element.id 设置或返回元素的 id。
element.title 设置或返回元素的 title 属性。
访问节点
* 获取根节点
<html>标签: document.documentElement
<body>标签: document.body
* 获取元素节点
getElementById(id) 获取指定id的元素节点,由document调用
getElementsByName(name) 返回带有指定名称的对象集合,由document调用
getElementsByTagName(tegName) 获取指定标签名称的元素的数组
childNodes 获取子节点的数组(会获取空文本节点,有兼容性问题)
children 获取子节点的数组(只获取元素节点)
parentNode 返回父节点
offsetParent 返回用来定位此元素的父元素
firstChild | firstElementChild 返回第一个子元素(IE | FF)
lastChile | lastElementChild 返回最后一个子元素(IE | FF)
previousSibling | previousElementSibling 返回上一个同级元素(IE | FF)
nextSibling | nextElementSibling 返回下一个同级元素(IE | FF)
* 获取和修改属性节点
getAttribute(string) 获取属性值
setAttribute(name,value) 设置属性值
removeAttribute(name) 删除属性
* 获取和修改文本节点
innerText 获取或设置文本节点的内容,只能由元素节点调用(不兼容)
innerHTML 获取或设置文本节点的内容,也包括HTML标记符
* 通过class属性获取元素
function getByClass(oParent, sClass){
var aEle=oParent.getElementsByTagName('*');
var result=[];
var re=new RegExp('\\s*'+sClass+'\\s*', 'i');
for(var i=0;i<aEle.length;i++){
if(re.test(aEle[i].className)){
result.push(aEle[i]);
}
}
return result;
}
* 获取表单元素的内容:
获取文本框对象的内容:obj.value
获取复选框或单选框的选中状态:obj.checked
获取下拉列表的选中项索引,文本和值:obj.selectedIndex , obj.options[obj.selectedIndex].text 和 obj.value
* 注意:
tr的父节点是tbody,tbody的父节点是table
操作元素属性的方法
非dom方式
元素.属性 = 值;
元素['属性'] = 值;
以上二者完全等效
dom方式
setAttribute(名称,值);
getAttribute(名称);
removeAttribute(名称);
非dom方式不兼容
增删节点
* 创建节点
createElement(string) 创建元素节点
* 添加节点
appendChild(节点) 在最后追加元素或文本节点,由父节点调用
insertBefore(节点,已有节点) 在已有节点前插入节点,由父节点调用
setAttribute(name,value) 可修改属性值,如果属性不存在,则创建属性节点
innerHTML 可变相添加节点
* 删除节点
removeChild(子节点) 删除子节点
removeAttribute(name) 删除属性
innerHTML 可变相删除节点
* 替换节点
replaceChild(新节点,旧节点) 替换元素中的子节点
* 复制节点
cloneNode(boolean) 复制节点.参数决定是否复制属性及子节点
* 注意:
innerHTML属性最常用,但innerHTML属性在少数情况下有兼容性问题
如:使用下拉列表时用innerHTML在IE9中添加option不成功.用createElement方法就可以
使用createElement方法 和 innerHTML属性 创建出来的元素,和普通元素没有区别
如果被添加的节点原来在页面中存在,则相当于移动,原来的节点消失.可应用于排序
* 常用操作:
* 创建li并插入到列表最前
window.οnlοad=function(){
var aInput = document.getElementsByTagName("input");
var oUl = document.getElementsByTagName('ul')[0];
aInput[1].οnclick=function(){
var oLi = document.createElement("li");
oLi.innerText = aInput[0].value;
var aLi = oUl.getElementsByTagName('li');
if(aLi.length>0){
oUl.insertBefore(oLi,aLi[0]);
}else{
oUl.appendChild(oLi);
}
}
}
<input><input type="button" value="添加">
<ul></ul>
* 自己练习做个留言板
留言包括姓名和内容,分别用两个元素显示.还要有删除功能
设置和获取样式
* 样式是HTML中的一个对象:Style对象.
Style对象是Element对象的一个属性style
* css属性名称和Style对象的属性名称的对应规则:
元素的css属性都可以通过Style对象设置.非常方便.但是css属性名称和Style对象的属性名称并不完全相同.对应规则如下:
一般是相同的
当css属性名称中有-时,Style的属性名称为:-去掉,后面紧跟的单词首字母大写,如 list-style 对应的属性 listStyle
不对的参见w3cschool手册
* 设置样式
obj.style.属性 = 值
注意:别忘了加单位
* 获取样式
* 获取行间样式
obj.style.属性
* 获得计算后的样式
IE : obj.currentStyle.属性
FF : getConputedStyle(obj,false).属性
注意:不能获取复合样式,如background.只能分开获取,如backgroundColor
* 其它便捷获取样式的属性
element.clientHeight 返回元素的可见高度。 (不包含边框和外边距)可由document.documentElement调用,表示文档可见区宽度
element.clientWidth 返回元素的可见宽度。(不包含边框和外边距)
element.offsetHeight 返回元素的高度。 (包含边框,不包含外边距)
element.offsetWidth 返回元素的宽度。 (包含边框,不包含外边距)
element.offsetLeft 返回元素的水平偏移位置。 (根据定位元素的左上角计算得出)
element.offsetTop 返回元素的垂直偏移位置。 (根据定位元素的左上角计算得出)
element.scrollLeft 返回滚动条在水平位置上滚动的距离。
element.scrollTop 返回滚动条在垂直位置上滚动的距离。 非Chrome可由document.documentElement调用,Chrome可由document.body调用
element.scrollWidth 返回元素的整体宽度。
element.scrollHeight 返回元素的整体高度。 可由document.documentElement调用,表示文档宽度(加滚动条)
* 获取样式方法示例:
function getStyle(obj, attr){ //此方法可取出元素的style属性
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr]; //非IE
}
}
Event 对象
* 事件对象获取方式
IE : window.event
FF : 事件函数的参数
即: var e = window.event||参数;
* HTML 4.0事件
* 窗口
onload 一张页面或一幅图像完成加载。
onresize 窗口或框架被重新调整大小。
onunload 用户退出页面。
说明:文档是从上往下解释执行的,所以当文档没有加载时就获取其中的元素会报错.可以将操作放置到window.onload事件中执行
* 鼠标
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousedown 鼠标按钮被按下。 (左键或右键)
onmouseup 鼠标按键被松开。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmousemove 鼠标被移动。
说明:要点击页面时执行操作,应该document加onclick事件,body在没有内容时撑不起来
* 键盘
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
说明:
获取按下的键:事件对象.keyCode(FF在onkeypress事件中要用:事件对象.which)
onkeypress擅长获取字符,可以识别大小写,不识别大小键盘数字,不能捕获功能键.在不同浏览器中取到的值(IE:keyCode,FF:which)相同
onkeydown和onkeyup比较底层,只能识别一个键的按下和放开,无法识别大小写字母,可以识别大小键盘数字,可以捕获到功能键,在不同浏览器(都用keyCode)获取到的功能键和符号的值可能不同
当一直按着某个键的时候,onkeydown和onkeypress不停调用,onkeyup只在结束时调用一次
* 表单
onfocus 元素获得焦点。
onblur 元素失去焦点。
onchange 域的内容被改变。 通常用于下拉列表.复选框也可以用
onreset 表单重置.点击重置按钮会触发,手动调用表单的reset方法会触发
onsubmit 表单提交.点击提交按钮会触发,手动调用表单的submit方法不会触发
onselect 文本被选中。 获取选中文本IE:document.selection.createRange().text FF:oInput.value.substring(oInput.selectionStart,oInput.selectionEnd)
* 其它
onabort 图像的加载被中断。
onerror 在加载文档或图像时发生错误。
* HTML 5常用事件:
oncontextmenu 当上下文菜单被触发时运行的脚本。如:右键菜单弹出前
不必在乎是哪个版本的事件,能用就行
* 常用属性
altKey "ALT" 是否被按下。
button 哪个鼠标按钮被点击。 (不兼容,IE 左1右2. FF 左0右2)
clientX 鼠标指针的水平坐标。 原点为可视区左上角,通常和scrollLeft一起使用
clientY 鼠标指针的垂直坐标。
ctrlKey "CTRL" 键是否被按下。
metaKey "meta" 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 鼠标指针的水平坐标。 原点为电脑屏幕左上角
screenY 鼠标指针的垂直坐标。
shiftKey "SHIFT" 键是否被按下。
type 返回事件类型
keyCode 在键盘事件中获取按下的键(FF在onkeypress事件中要用which属性)
srcElement|target 获取事件源(IE|FF),事件委托有用
说明:
clientX不是根据文档左上角定位的,是根据可视区左上角定位的
要获取根据文档左上角定位的坐标,可通过:
//element.scrollTop 返回滚动条在垂直位置上滚动的距离。 非Chrome可由document.documentElement调用,Chrome可由document.body调用
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var top = e.clientY + scrollTop;
* 事件冒泡
* 概述
当事件在某一DOM元素被触发时，事件将不断向父级元素传递，直到它遇到有该事件类型处理程序的节点
如果在事件处理程序中没有停止事件的传播，事件将继续向父级传递,一直通过DOM冒泡直至到达文档根。
* 阻止事件冒泡
事件处理函数中:事件对象.cancelBubble = true;
* 默认行为
* 概述
浏览器默认的行为,如 右键菜单,超链接跳转,表单提交
* 阻止默认行为
事件处理函数中:return false;
* 事件绑定
* 目的
为同一个事件上绑定多个处理函数
* 绑定
IE : attachEvent(事件名,函数)
FF : addEventListener(事件名,函数,是否捕获) //是否捕获写false就好,事件名不加on
说明: 多个函数执行顺序,IE是后绑定先执行,FF是先绑定先执行
兼容方法:
function addEvent(obj, ev, fn){
if(obj.attachEvent){
obj.attachEvent('on'+ev, fn);
}else{
obj.addEventListener(ev, fn, false);
}
}
* 解除绑定
IE : detachEvent(事件名,函数)
FF : removeEventListener(事件名,函数,是否捕获)
兼容方法:
function removeEvent(obj, ev, fn){
if(obj.detachEvent){
obj.detachEvent('on'+ev, fn);
}else{
obj.removeEventListener(ev, fn, false);
}
}
* 事件委托(事件代理)
* 概述
利用冒泡的原理把事件处理函数加到父级元素上(可以利用事件源属性获取发生事件的子元素)
* 好处
提高性能
后面添加的元素,也会拥有被添加的事件
* 小例子
为ul添加事件,使鼠标移入的li背景变红,移出还原
var oUl = document.getElementById('ul1');
oUl.onmouseover = function(ev){
var e = window.event||ev;
var obj = e.srcElement||e.target;
if(obj.tagName.toUpperCase()=='LI'){ //防止移入ul,ul背景变红
obj.style.background='red';
}
}
oUl.onmouseout = function(ev){
var e = window.event||ev;
var obj = e.srcElement||e.target;
if(obj.tagName.toUpperCase()=='LI'){
obj.style.background='';
}
}
//这样,如果动态添加li,则新添加的li也拥有事件
* 小练习
* 跟随鼠标的div(页面高度定为2000px)
* 键盘控制div移动
* ctrl+回车 提交留言(将文本框的内容放到文本域中)
* 菜单显示和隐藏(点击按钮显示div,点击别处隐藏div)
* 只能输入数字的文本框
* 拖拽(div根据鼠标移动位置)(答案参见最下面)
* 省市二级联动(第二个下拉列表的选项根据第一个下拉列表选择的值不同而不同)(答案参见最下面)
超链接不跳转时href的写法
不要写<a href="#">,页面还是有变化.可以写:
<a href="javascript:void(0);">
<a href="javascript:;">
文档碎片(了解)
当进行大量插入时,先将元素插入到文档碎片中,再将文档碎片一次插入到文档中
浏览器只渲染一次,可以提高效率(理论上)
例:
var oFrag = document.createDocumentFragment();
for(var i=0;i<100;i++){
oLi = document.createElement('li');
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
DOM优化(了解)
* 尽量减少DOM操作
innerHTML和Dom方法 在不同的浏览器下效率不同,可有选择的使用
克隆节点比创建节点快
集合的长度和dom对象用局部变量存储
* 减少重排和重绘
* 重排:改变页面的内容(元素大小或位置)
* 重绘:浏览器显示内容
注意添加顺序,先设置好内容再添加.不要先添加再设置内容
文档碎片
* 事件委托
练习题答案
拖拽
鼠标点下添加鼠标移动事件,鼠标松开取消鼠标移动事件
FF的Bug,第二次拖不动.阻止默认事件即可
防止用户拖出窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#div{width:100px; height:100px; background:red; position:absolute;}
</style>
<script>
window.οnlοad=function(){
var oDiv=document.getElementById("div");
//当鼠标摁下时记录鼠标距div左上角的距离 鼠标移动时根据鼠标位置计算div的位置 鼠标松开时移除事件函数
oDiv.οnmοusedοwn=function(e){
var ev=e||event;
var x=ev.clientX-oDiv.offsetLeft; //记录鼠标距div左边的距离
var y=ev.clientY-oDiv.offsetTop; //记录鼠标距div顶部的距离
if(oDiv.setCapture){ //处理选中文字时无法拖动的BUG 鼠标点击时可生成一个透明层
oDiv.setCapture();
}
document.οnmοusemοve=function(e){
var ev=e||event;
var left=ev.clientX-x; //left为div移动后的左边距 根据鼠标位置计算div的位置
var top=ev.clientY-y; //top为div移动后的上边距
if(left<0){ //防止div移出窗口
left=0;
}else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){
left=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if(top<0){ //防止div移出窗口
top=0;
}else if(top>document.documentElement.clientHeight-oDiv.offsetHeight){
top=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=left+"px"; //设置div的位置
oDiv.style.top=top+"px";
}
document.οnmοuseup=function(){ //当鼠标松开时移除事件函数
document.οnmοusemοve=null;
document.οnmοuseup=null;
if(oDiv.releaseCapture){ //同上面对应的 处理选中文字时无法拖动的BUG 鼠标松开时释放透明层
oDiv.releaseCapture();
}
}
return false; //阻止默认动作 否则当拖动时鼠标移出窗口 再拖动时会出问题
}
}
</script>
</head>
<body >
<div id="div"></div>
</body>
</html>
省市二级联动
<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>标题</title>
<style>
select { width:120px;}
</style>
<script>
window.οnlοad=function(){
var oSelectArr = document.getElementsByTagName('select');
var data = {
"北京市":["昌平","海淀","东城","西城","门头沟"],
"河北省":["石家庄","保定","廊坊","沧州","张家口"],
"天津市":["静海","武清","蓟县","宝坻","塘沽"],
"山东省":["济南","青岛","烟台","威海","泰安"],
"内蒙古":["巴彦淖尔三三旗","青岛","烟台","威海","泰安"]
};
//初始化省份下拉列表的值
for(var attr in data){
var option = document.createElement('option');
option.innerHTML = attr;
option.setAttribute("value",attr);
oSelectArr[0].appendChild(option);
}
//当选择省份时,改变下拉列表的市
oSelectArr[0].onchange = function(){
//清空原来的选项
oSelectArr[1].options.length = 0;
//获得选择的省份的市
var value = oSelectArr[0].value;
var arr = data[value];
//创建为选项并添加到下拉列表中
for(var i in arr){
var option = document.createElement('option');
option.innerHTML = arr[i];
option.setAttribute("value",arr[i]);
oSelectArr[1].appendChild(option);
}
}
}
</script>
</head>
<body>
省份:
<select>
<option>--请选择--</option>
</select>
市:
<select>
<option>--请选择--</option>
</select>
</body>
</html>
javaScript基础
最新推荐文章于 2020-06-29 14:52:14 发布
3993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
