第一章
- JavaScript起源于Netscape于微软的浏览器大战时期,由Netscape与Sun公司合作开发
- DOM是一套对文档内容进行抽象和概念化的方法。
- 一开始,各家浏览器厂商都有各自的一套DOM标准,后来由W3C结合各家优点推出一套新的DOM标准,目前基本所有浏览器都对这套DOM标准有这很好的支持。
第二章
数据类型
Js是一种弱类型语言,弱类型语言是指声明变量的时候不需要指定变量的类型,强类型语言需要指定,比如C/C++就是强类型的。
声明变量使用
var
关键字。JS不用提前声明变量,赋值语句会自动声明变量,但是不推荐这么做,最好提前声明。
在字符串中用反斜线\来转义。
主要有五种简单数据类型
String
,Number
,Boolean
,Undefined
,Null
和一种复杂数据类型Object
。-
各个数据类型的存储形式。
原始类型(primitive type):存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。如数字(Number)、字符串(String)、布尔(Boolen)、Null、Undefined。
引用类型(reference type):存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存处。引用类型就是对象,比如 Object,Number、String,Boolen,Date、Array 等等。
数组
数组是一个变量表示一个值的集合,其中每个值都是这个数组的一个元素。
-
声明数组的方法:
var arr = Array(3); var arr = Array();//不指明数组大小 var arr = Array("one", "two", "three");//声明的同时赋值
-
关联数组:
var lennon = Array(); lennon["name"] = "John"; lennon["year"] = 1940;
对象
对象也是用一个值表示一组值,对象的每个值都是它的一个属性。
JavaScript中的变量都是某种类型的对象。
-
对象使用点号获取属性和函数:
Object.propertyName; Object.functionName();
实例是对象的具体个体。
-
使用new关键字为对象创建新实例:
var jeremy = new Person();
内建对象: JavaScript中预先定义好的对象,比如
Array
,Date
,Math
宿主对象:由运行环境事先定义好的对象,在web应用里,运行环境就是指浏览器。包括
Form
,Image
,Element
,document
等。
操作
-
使用加号拼接字符串或变量:
var message = "hello " + "world" //hello world; var who = "world"; var message = "hello " + who;
-
数值和字符串拼接,结果会是一个更长的字符串:
var value = "10" + 20; //结果为"1020"
比较操作符号
- 执行相等操作的时候,建议使用"==="代替"==",会执行严格比较,会同时比较值和类型。
- 不等操作符"!="用"!=="代替,原因同上。
函数
- 变量作用域
- 全局变量:一旦声明可以在脚步的任何位置访问。
- 局部变量:只能在声明它的那个函数内部访问(需要用
var
关键字在函数内部声明)。
第三章 DOM
DOM
DOM 中的 D: document,具体到前端就是我们编写的网页文档
DOM 中的 O: object,就是第二章中提到的对象,有用户定义对象,内建对象,宿主对象
window 对象: 对应着浏览器窗口本身,这个对象的属性和方法统称 BOM (浏览器对象模型)
-
DOM中的M: Model-模型,代表某种事物的表现形式,DOM 把文档表示为一颗树的形式(数学意义上的树,类似家谱树),这里称为“节点树”:
节点
节点:网络术语,表示网络中的一个连接点,在 DOM 中表示文档树上的树枝和树叶。
元素节点:指文档中的各种元素,如
<body>
,<p>
等,<html>
为根元素。文本节点:各种元素包围着的文本内容,比如
<p>Hello world</p>
中的这个“Hello world”。-
属性节点:对元素进行描述的属性,比如大部分元素都有的
title
属性。 -
获取元素,有三种方法
-
getElementById
,根据给定的 ID 返回特定的元素节对象点,是 document 对象特有的函数document.getElementById("id");
-
getElementByTagName
,根据给定的标签名返回对象数组,每个对象对应文档里面有此标签的一个元素,可以使用通配符“*”来返回文档里的所有元素。document.getElementByTagName("h1")
-
getElementByClassName
,HTML5 加入,跟getElementByTagName
类似,返回一个对象数组,可以一次给定多个class name,以空格分隔,顺序无关。document.getElementByClassName("class1 class2");
-
-
对于不支持
getElementByClassName
的较老的浏览器,可以自己实现一个:function getElementByClassName(node, classname) { if (node.getElementsByClassName) { //使用现有方法 return node.getElementsByClassName(classname) } else { var results = new Array(); var elems = node.getElementsByTagName("*"); for (var i = 0; i < elems.lenth; i++) { if (elems[i].className.indexOf(classname) != -1) { results[results.length] = elems[1i]; } } return results; } }
获取和设置属性
-
getAttribute
函数用于获取属性- 只有一个参数--打算查询的属性名字;
- 只能通过元素节点对象调用;
- 如果没查询到对应属性,返回
null
。
object.getAttribute(attribute);
-
setAttribute函数用于设置属性,也只能通过元素节点对象调用:
object.setAttribute(attribute, value);
事件处理函数
在特定事件发生时调用特定的 JavaScript 代码。
-
有很多种事件处理函数,比如
onmouseover
,onmouseout
,onclick
等。event = "JavaScript statement(s)";
-
JavaScript代码包含在一对引号直接,这对引号之间可以放置多个 JavaScript 语句,用“;”隔开就行:
onclick = "showPic(this)";//this表示当前对象
-
在事件处理函数被触发之后,引号之间的 JavaScript 语句被执行,被调用的语句可以给这个事件处理函数返回一个值。返回
true
代表这个事件被触发了,false
代表没有触发,利用这点,可以拦截一些默认事件,比如下面这个链接,点击之后由于返回的是false
,浏览器认为这个事件没有被触发,所以不会发生跳转。<a herf="http://www.example.com" onclik="return false;">Click me</a>
一些常用属性
-
childNodes
属性:用于获取任何一个元素的所有子元素,是一个包含这个元素所有子元素的数组(子元素除了元素节点还包括很多其他节点)。 -
nodeType
属性:获取一个节点的节点类型,节点类型是通过数字表示:- 1代表元素节点;
- 2代表属性节点;
- 3代表文本节点。
-
nodeValue
属性:用于获得一个节点的值,一般元素节点的值是null,文本节点的值是它里面的文本内容。 -
firstChild
属性:获得一个节点的第一个子节点,等同于childNodes[0]
。 -
lastChild
属性:获得一个节点的最后一个子节点,等同于node.childNodes[node.childNodes.length-1]
。