js总结

JS总结：

1、javascript的特点

是一种嵌入在网页中的程序段。(客户端脚本语言)

是一种解释型语言，被浏览器解释执行。

JavaScript借用了Java的名字，也使用了部分java的语法。

增强客户端的交互功能。

2、在网页中嵌入js的方式

内嵌式：

<script>

……

</script>

外联式：<script src="aa.js"></script>

直接编写在元素的事件属性中：<input type="button" value="提交" οnclick="alert()">

超链接伪URL方式：<a href="javascript: alert('hello World');">Click</a>

3、js变量的特点

弱类型，不一定要初始化。

弱类型是指变量任何数据都可以存放。可以存放数字，可以存放字符串，也可以存放对象的引用。

正因为javascript是弱类型的语言，所以形参不能指明变量的类型。

js变量定义：var x;

 

4、js原始类型：

undefined: 当声明的变量未初始化时，值为undefined。 当函数无明确返回值时，其调用结果也是undefined。

null：表示不存在的对象。，null是从Undefined派生来的。因此null==undefined

boolean：true或false

number：数字型，可以是整数，可以是浮点数

NaN表示非数字，它与自身不相等。一般发生在类型转换失败时，isNaN()较验是否为数字。

string：可用单引号或双引号声明。比较是否相等用==，方法大部分和java类似。长度：var x = "abc";alert(x.length);

5、使用typeof得到指定变量存放数据的类型。typeof(null) 返回object

使用instanceof判断变量指向对象是否匹配某个类型

var s = new String("hello world");

var b = s instanceof String;

alert(b); //输出true

6、自动类型转换规则

var x = "10"-2;结果：8 —— 自动将"10"转为Number类型

var x="10"+2;结果：'102'-------如有一个为字符串，则是连接

var s=9+2+"8";结果：'118' —— 先进行9+2结果为11，再和”8”连接

var x="2"*"3";结果：6 。自动将字符串转为整形

var y="4"*"abc";结果：NaN ——相乘如有一个为非数字NaN，则结果为非数字NaN

==比较内容，可以进行自动类型转换。===比较时，同时比较类型

alert(55=='55');结果为true; alert(55==='55');结果为false;

7、parseInt()和parseFloat，将字符串转化为number类型

var a = parseInt("1234px"); //返回1234

var b = parseInt("abc"); //返回NaN

8、正则表达式：

var x=/^a{2,8}$/;

alert(x.test("aaa"));

正则表达式一般用于表单验证。<form οnsubmit="return checkForm()"> 如果checkForm()返回false，则阻止表单提交

表单提交：表单对象.submit()

9、数组：

创建数组：var x = new Array();

var arr = [1,2,3,4,5,6,7,8];

arr.length; //数组长度

arr.push(100);//追加元素。

10、日期类型

function setDate(){

//创建日期对象

var date = new Date();

//得到年月日，时分秒

var str = (date.getYear()+1900)+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 ";

str += date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

spanObj.innerHTML = str;

}

//设置时间函数

var id=window.setInterval("执行代码",毫秒数);

//清除时间函数

window.clearInterval(id);

11、Global全局对象常用方法

isNaN()：判断是否是非数字

parseInt()：将字符串转化为整型，会将第一个非数字以后的字符全部忽略，转化失败为NaN

parseFloat()：将字符串转化为浮点型，转化失败为NaN

eval()。将字符串作为js代码执行。

eval("alert('abc')") 等价于 alert('abc');

12、js对象特点

a、js是基于原型的面向对象语言，只有对象，没有类，没有接口。

b、js的函数也是对象

c、js对象的属性和方法，可以在运行期间动态的添加和删除

 

13、访问、删除、遍历对象属性：

访问对象属性：对象.属性名 var obj = {id:1}; alert(obj.id);

对象["属性名"] var obj = {id:1}; alert(obj["id"]);

删除属性：delete 对象.属性名

遍历对象属性列表

for(var x in dog1){//x为属性名，dog1["属性名"]取该对象指定属性名的值

alert(x+" "+dog1[x]);

}

14、json格式对象

var x = {};

var obj = {name:'张三',age:30};

var arr = [{name:'张三',age:30},{name:'李四',age:24},{name:'王五',age:28}];

15、事件流

事件流意味着页面上不止一个元素可响应相同的事件。

事件冒泡(IE)。(先响应事件源，再响应父容器)

事件捕获(NetsCape)。(先响应父容器，再响应事件源)

事件处理(FireFox)。事件处理(可以选择先响应父容器，还是先响应事件源)

16、事件委派的方式：

传统事件：兼容性好，一个事件只能绑定一个函数：

div1.onclick = function(){

}

div1.οnclick=divClick;//只能写函数名

现代事件：一个事件可以绑定多个函数，但兼容性差。

一定要等待浏览器将元素加载完毕后，才能给元素添加事件。一般在window.onload中书写事件添加

17、事件处理程序返回值

如果事件中返回值为false，可以阻止元素默认行为

 

18、event对象：事件发生时，用于描述事件信息的对象。可以获得鼠标信息和键盘信息

var e;

if(window.event){

e=window.event;

} else if(arguments[0]){

e=arguments[0];

}

可以通过e.cancelBubble=true(IE)或e.stopPropagation()(firefox)中止事件传播

 

19、事件类型

鼠标事件：onclick(单击)、onmousemove(移动)、onmouseover(进入)、onmouseout(离开)

键盘事件：keydown(按下)、keyup(弹起)

html事件：window.onload(文档加载完毕后执行)、window.onunload(文档卸载完毕后执行)、onchange(下拉框选项变化执行)、onsumbit(表单提交执行)、onblur(失去焦点执行) onfocus(得到焦点执行)

刷新页面的时候，会触发load事件和unload事件。

20、跳转页面

location.href="aaa.html";

 

21、dom操作常见方法

createElement()创建新元素

appendChild() 追加元素

removeChild()删除元素

replaceChild()：替换元素

parentNode 父元素

hasChildNodes()判断是否有子元素

22、获得文本节点

元素节点.firstChild-获取文本节点

textNode.nodeValue="..." - 设置文本内容

23、访问元素节点：

getElementsByTagName(name)：得到元素指定标记子元素集合

getElementsByName(name)：得到指定name属性的元素集合

getElementById(id)：按ID得到元素对象

24、innerHTML：表示元素中间的文本。在老标准中，table和select不支持。

value属性一般只用于表单元素

 

25、改变元素的样式，需要style属性，如果样式中有-，则去掉-，采用驼峰命名法

元素对象.style.backgroundColor="red";

通过style属性操作的是内嵌样式。

改变元素对象的class属性：

<div class="aaa"></div>

对象.className="aaa";

26、 multiple：将下拉框变为列表框，可以选中多个选项。

判断下拉框选项是否选中：selected

判断复选框、单选框是否选中：checked