第一章
JavaScript简史
- JavaScript是Netscape公司与sun公司合作开发，第一个版本出现在1995年推出的Netscape navigator 2 浏览器中
- 1998年10月完成第一级dom
第二章 语法
- 注释//或则/**/
变量
- 把那些会发生变化的东西称为变量 var abc="jasd";
数据类型
- 字符串
- 数值
- 布尔值
- 数组
- 对象
操作
- 算术运算符
- 条件语句if判断
- 比较操作符
- 逻辑操作符
- 循环语句 while循环 for循环
函数
- 允许你的代码随时调用的语句
变量作用域
-
全局变量--- 可以在脚本中任何位置被引用，包括函数内部
-
局部变量---只存在声明它的那个函数的内部，在那个函数的外部是无法引用的，作用域仅限于某个特定的函数
-
注意！！！ 如果在某个函数中使用var，那么这个变量就是局部变量，只存在于这个函数的上下文，反之，如果没有使用var，则视为全局变量，如果脚本里面已经存在一个与之同名的全局变量，这个函数就会改变那个全局变量的值
function abc(temp){ a = temp*temp; return abc; } var a= 5; var res = abc(3); console.log(a);//值为9
对象
-
属性是隶属与某个特定对象的变量
-
方法是只有某个特定对象才能调用的函数
-
对象就是由一些属性和方法组合在一起而构成的一个数据实体
-
属性和方法都是通过点“.”语法来访问
object.property//属性访问person.age; object.method()//方法访问person.walk();
内建对象
- 使用new关键字去初始化一个数组，其实就是创建一个array对象实例
- 数组的长度arrayname.length
- math对象，date对象。。。
宿主对象
- 由浏览器提供的预定义对象就是宿主对象
- 宿主对象包括form，image，element等
DOM
- D document
- O object
- 用户定义对象：由程序员自行创建
- 内建对象：内建在JavaScript语言内的对象，如Array,Math,Date...
- 宿主对象：由浏览器提供的对象
- M model 某种事物的表现形式
节点
- 表示网络的一个连接点，一个网络就是一些节点构成的集合
元素节点
- 元素 标签
文本节点
- 文本
属性节点
- 属性
获取元素
- getElementById
- 这个方法返回一个与那个有着对应id属性值的元素节点对应的对象
- getElementsTagName
- 返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素
- getElementByClassName
- 返回一个相同类名的元素的数组
- 还可以查找带有多个类名的元素 只需在参数中用空格分隔开
获取和设置属性
- getAttribute(attribute)获取元素的属性
- setAttribute(attribute) 修改元素的属性
非DOM解决方案
- element.value=“the new value”; 等价于element.setAttreibute("value","the new value");
事件处理函数
- 在特定事件发生时间调用特定的JavaScript代码 event=“JavaScript statement” onclick=“abc();”
- return false；认为这个链接没有被点击，而没有触发默认行为
childNodes属性
- 可以用来获取一个元素的所有子元素，它是一个包含这个元素全部子元素的数组：element.childNodes
- 其中也包括三种类型的节点还有空格和换行符等
nodeType属性
- node.nodeType
- nodeType属性总共有12种可能值
- 元素节点nodeType 属性值是1
- 属性节点的nodeType属性值是2
- 文本节点的nodeType属性值是3
nodeValue属性
- 用来得到和设置一个节点的值
- node.nodeValue
firstChild和lastChild属性
- 数组元素childNodes[0]等价于firstChild
- node.firstChild
- lastChild也一样
最佳实践
- open方法创建新的浏览器窗口
- Window.open(url,name,features)
- 这三个参数都是可选的
- 第一个参数是想在新窗口打开网页的url地址，如果省略这个参数，屏幕将弹出一个空白浏览器窗口
- 第二个是新窗口的名字，可以在代码中通过这个名字与新窗口进行通信
- 最后一个是一个以逗号分隔的字符串，内容是新窗口的各种属性（工具条，菜单条，初始位置，等等）
- Window.open("","popup","width=320,height=480");
"javascript:"伪协议
- “真”协议用来在因特网上的计算机之间传输数据包，如http协议，ftp协议
- 伪协议是一种非标准的协议，“Javascript：”伪协议可以让我们通过一个链接去调用JavaScript函数
内嵌的事件处理函数
渐进增强，平稳退化
对象检测
- if(!getElementById) return false;
性能考虑
- 尽量少访问DOM和尽量减少标记
- 合并和放置脚本 使用外部文件
- 压缩脚本
第六章
- window.onload=fun1;window.onload=fun2;只会执行第二个函数，我们可以创建匿名函数包裹 window.onload=function{
fun1();
fun2();
} - 使用addLoadEvent函数创建队列执行
第七章动态创建标记
- document.write
- innerHTML属性
dom方法
- createElement
- document.createElement("p")
- appendChild
- parent.appendChild(child)
- createTextNode
- document.createTextNode("abc")
在已有元素前插入一个新元素
- parentElement.insertBefore(newElement,targetElement)
- targetElement.parentNode.insertBefore(newElement,targetElement)
在现有方法后插入一个新的元素
-
DOM本身没有提供，不过我们可以自己编写
function insertAfter(newElement,targetElement){ var parent =targetElement.parentNode; if(parent.lastChild==targetElement){ parent.appendChild(newChild); }else{ parent.insertBefore(newElement,targetElement.nextSibling); } }
ajax
- readyState有5个可能值
- 0表示初始化
- 1表示正在加载
- 2表示加载完毕
- 3表示正在交互
- 4表示完成
- responseText用于保存文本字符串形式的数据
- responseXML用于保存XML数据
第九章CSS-DOM
- element.style.porperty
- style属性只能找到内联式的样式，找不到内嵌式和外部式的样式
- style可以改写样式
- className 语法：element.className=value
第十章 用JavaScript实现动画效果
- variable=setTimeout("function",interval)
- clearTimeout(variable)
第十一章
- modernizr 是一个开源JavaScript库，利用它的富特性检测功能，可以对HTML5文档进行更好的控制