第一章
- 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]。
网友评论