[Web基础笔记]JavaScript部分

简介

• ECMAScript：核心
• DOM：文档对象
• BOM：浏览器对象

编写自定义的JavaScript函数

<sricpt type="text/javascript">  var xx  = function xx(){..}</script>

注意

html最好还是从外部文件来包含js代码（用src属性指向url）

面向对象

创建类的原型

//第一种var 类 = new Oblect();类.属性 = ..;类.方法 = function(){..}//第二种var 类 = {  属性 : ..,  方法 : function(){..}};

创建对象

//第一种：工厂模式（套进函数里）funciton xx(){var o = new Object();o.属性 = ...;o.方法 = function(){..};return o;}var 对象 = xx();//进行创建对象//第二种：构造函数模式function xx(){this.属性 = ...;this.方法 = function(){...};}var 对象 = new xx();//进行创建//第三种：原型模式function xx(){xx.prototype.属性:...;xx.prototype.方法 = function{...};}var 对象 = new xx(); //第四种：原型+构造（对象间属性不干扰，各对象共享一个方法）function xx(){this.属性 = ...;xx.prototype.方法 = function(){...};var 对象 = new xx();//第五种：动态原型（推荐使用）function xx(){this.属性 = ...;if(typeof this.方法!="function"){  xx.propotype.方法 = function(){...}  }}var 对象 = new xx();

继承

//第一种：原型链继承funciton 父类();function 子类();子类.prototype = new 父类();//第二种：组合继承（推荐）父类.call(this.父参)//继承属性用call子类.prototype = new 父类()//继承方法用原型//第三种：原型式继承var 子类 = object(父类);//或 = object.create(父类,{属性:{...}});

加载JS函数

function loadScript(url){var script = document.createElement("script");script.type = "text/javascript";script.src = url;document.body.appendChild(sript);}

加载动态样式

<link rel="stylesheet" type="text/css" href="链接"/>

事件处理

addEventListener(参数)/removeEventListener(参数)

其中参数=处理事件名，处理函数，布尔值（真：在捕获阶段调用，假：在冒泡阶段调用）

var EventUtil = { /*    参数说明：            element：要操作的对象            type：事件名称            handler：事件处理程序函数*/    addHandler: function(element, type, handler){        if (element.addEventListener){            element.addEventListener(type, handler, false);        } else if (element.attachEvent){            element.attachEvent("on" + type, handler);        } else {            element["on" + type] = handler;        }    },    removeHandler: function(element, type, handler){        if (element.removeEventListener){            element.removeEventListener(type, handler, false);        } else if (element.detachEvent){            element.detachEvent("on" + type, handler);        } else {            element["on" + type] = null;        }    }};