代码改变世界

DOM 高级编程笔记

2012-06-12 17:05  臭小子1983  阅读(400)  评论(0编辑  收藏  举报

第一章  深入了解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);
}