第一章 深入了解DOM脚本编程
一、页面加载时浏览器内部操作顺序是：
1、HTML被解析
2、外部脚本、样式表被加载
3、文档解析过程中的内联的脚本被执行
4、HTML DOM构造完成
5、图像和外部内容被加载
6、页面加载完成
等待页面加载
window.onload = function(){
// 页面加载完成后触发
}
一、一些常见的缺陷
1、<script>标签出现在文档主体的<body>中.
2、依赖于浏览器的嗅探，而不是让浏览器来测试javascript
3、在锚元素中的href属性中编写javascript:前缀.
4、多于、重复的JS代码
二、对象检测
1、使用能力检测：也叫对象检测，是指在执行代码之前检测某个代码或者方法是否存在，如果对象方法存在表明浏览器能够使用些方法
if(document.body.getElementsByTagName()){ // 可以使用document.body.getElementsByTagName() }
三、不要使用javascript来生成内容
因为搜索引擎的爬虫和蜘蛛会搜索页面的内容，但不会搜索javascript
四、自执行的匿名函数
(function(arg){
alert(arg);
})("this is show in alert box");
五、javascript语法常见的陷阱
1、区分大小写：
function myFunction(){}
function MyFunction(){}
2、单引和双引号
var html = '<h1 class="a">aaaaa</h1>';
var html = "<h1 class=\"a\">aaaaa</h1>"; // 使用转义符
3、换行 html = ''code\";代码用\来换行
var html = '<li sdevindex="6">·\ <a target="_blank" href="http://house.focus.cn/news/2012-06-12/2066802.html" title=""><b>央行发特急文件警告:房贷利率最低仍为7折</b></a>\ </li>'; document.getElementsByTagName("body")[0].innerHTML = html;
4、可选的分号和花括号
用分号来结束一条或一行代码并不是必需的
alert(a) 会被解释成 alert(a);
if(a == b) 不会被解释成 if(a == b);
alert(a); alert(a);
而会按照if语句来解释
if(a == b){
alert(a);
}
5、匿名函数
第二章 创建可重用的对象
一、什么是对象
对象简单说是一组变量（属性）和函数（方法）的集合的实例，对象都是于类派生而来的，称为OO
二、继承
当创建自己的对象时，你可以扩展或者继承现有对象的属性和方法，
// 创建对象
var person = new Object();
person.getName = function(){}
person.getAge = function(){}
// 创建一个employee对象
var employee = {};
employee.getTitle = function(){ ... }
employee.getSalary = function(){ ... }
// 从person对象中继承方法
employee.getName = person.getName
三、添加静态方法
<script type="text/javascript"> var myObject = {}; myObject.nav = 'jeff'; // 添加一个属性 myObject.alertName = function(){ // 添加一个方法 alert(this.nav); } myObject.alertName(); // 执行添加的方法 </script>
四、添加公有方法
需求修改构造函数的原形prototype，他指的不是Prototype的JS框架,
<script type="text/javascript"> var myObject = {}; myObject.nav = 'jeff'; // 添加一个属性 myObject.alertName = function(){ // 添加一个方法 alert(this.nav); } myObject.alertName(); // 执行添加的方法 // 为对象添加公有方法 myObject.prototype.clearMessage = function(str){ alert(str); } myObject.clearMessage("ssss"); </script>
五、this是什么
第三章 DOM2核心和DOM2HTML
第四章 响应用户操作和事件
一、事件类型
对象事件、鼠标事件、键盘事件、表单事件。
对象事件：1、load、unload：载入事件 2、abort、error： 3、resize：改变浏览器窗口触发 4、scroll：滚动条事件
鼠标事件：侦听鼠标事件捕获响应用户的操作. 1、mousemove：移动连续 2、mouseover：移动到对象触发 3、mouseout：移出对象触发 4、mousedown：按下时触发 5、mouseup：释放时触发 6、click：单击 7、dbclick：双击
键盘事件：1、keydown：键按下时 2、keyup：键按释放 3、keypress：表示有一个键被按过
表单事件：1、submit：会在用户单击提交按钮，或者按下键盘中的某个键将表单提交到服务器时被调用 2、reset：表示单重置 3、blur：当前焦点 4、focus：离开焦点 5、change：
二、控制事件流和事件注册侦听器
var ulnode = document.getElementTagName("li");
for(var i=0; i=ulnode.lenght; i++){
}
第五章 动态修改样式和层叠样式表
一、CSSStyleSheet对象表示的是所有CSS样式表，包括外部样式表和使用<style type="text/css"></style>标签指定的嵌入式样式表。
CSSStyleSheet同样构建于其他的DOM2 CSS对象基础之上，
而CSSStyleRule对象表示的则样式表中的每条规则。
通过document.stylesheets属性可以取得文档中CSSStyleSheet对象的列表，其中每个对象有下列属性
type 始终为text/css
disabled 相应样式表是应于还是禁用于当前文档
href 样式表相对于当前文档的URL
title 分组样式标签
media 样式应用的目标设备类型(screen、print)
ownerRule 只读CSSRule对象，若样式用@import导入，表示其父规则
cssRules 只读cssRuleList列表对象，包含样式表中所有CSSRule对象
==========================================================
insertRule(rule,index) 添加新的样式声明
deleteRule(index) 从样式表中移除规则
二、CSSStyleRule对象
每个CSSStyleSheet对象内部包含着一组CSSStyleRule对象。这些对象分别对应着类似下面这样一条规则：
boyd{
font:lucida,verdana,sans-serif;
background:#c7600f;
color:#1a3800;
}
CSSStyleRule对象具有下列属性：
type 继承自CSSRule对象的一个属性，以0~6中的一个数字表示规则类型
cssText 以字符串形式表示的当前状态下的全部规则
parentStyleSheet 引用父CSSStyleRule对象
parentRule 如果规则位于另一规则中，该属性引用另一个CSSRule对象
selectorText 包含规则的选择符
style 与HTMLElement.style相似，是CSSStyleDeclaration对象的一个实例
三、CSSStyleDeclaration对象
表示一个元素的style属性，与CSSStyleRule对象类似，CSSStyleDeclaration具有下面属性：
cssText 以字符串形式表示的全部规则
parentRule 将引用CSSStyleRule对象
==========================================================
getPropertyValue(propertyName) CSS样式属性值
removeProperty(propertyName) 从声明中移除属性
setProperty(propertyName,value,priority) 设置CSS属性值
四、把样式置于DOM脚本之外
style属性
style属性本身是一个表示特定元素的所有不同CSS样式的CSSStyleDeclaration对象，通过style属性只能访问到在元素的style属性中以嵌入方式声明的CSS属性。换句话说，通过style属性无法访问到由多重样式表层叠而来或者从父元素继承的CSS属性。
element.style.backgroundColor = 'red'; //background-color被转换为大小写形式，必须的
//设置id为"example"的元素的样式
setStyleById('example',{
'background-color' : 'red',
'border' : '1px solid black',
'padding' : '1px',
'margin' : '1px'
});
function setStyle(elementid,styles){
var element = document.getElementById(elementid);
//循环遍历styles对象并应用每个属性
for(property in styles){
//非styles直接定义的属性
if(!styles.hasOwnProperty(property)) continue;
if(element.style.setProperty){
element.style.setProperty(uncamlize(property, '-'), styles[property], null);
} else {
element.style[camelize(property)] = styles[property];
}
}
return true;
}
//将word-word转换为wordWord
function camelize(s) {
return s.replace(/-(\w)/g, function(math,p1){
return p1.toUpperCase();
});
}
//将wordWord转换为word-word
function uncamelize(s, sep) {
sep = sep || '-';
return s.replace(/([a-z])([A-Z])/g, function (match, p1, p2){
return p1 + sep + p2.toLowerCase();
});
}
//基于className切换样式
element.className += 'newclass';
五、动态加载样式表和移除样式表
增加：
function addStyleSheet(url, meida){ var link = document.createElement("link"); link.setAttribute("href",url); link.setAttribute("rel","stylesheet"); link.setAttribute("type","text/css"); document.getElementsByTagName("head")[0].appendChild(link); }