JavaScript和DOM编程艺术
1、W3C标准:只要代码符合这个标准一般就可以不用考虑浏览器的兼容性,此标准是用DOM语法设计。 2、js的注释有“//”,“/*……*/”,虽说可以用“<!-->”但不推荐。 3、js中变量可以不声明就用,但不推荐这样,声明变量用var。 4、js中区分大小写。 5、js的变量名可以是字母、数字、美元符号、下划线。 6、js中可以随意改变某个变量的数据类型。 7、如果双引号里包含双引号,则用反斜杠进行转义,如var name="I\"m lh"就是I"m lh。 8、数组很灵活,定义为不同类型:var name=["aa",11,false]、var name=Array("aa",11,false) 9、数组中的任何一个元素都可以把一个数组作为它的值,如var names=Array();names[0]=name; 10、关联数组:元素的下标可以是字符串,如:var lennon=Array();lennon["name"]="tom";lennon["age"]=30; 11、typeof用来判断操作数的类型。 12、getElementsByTagName("*")方法中的参数可以是通配符,表示获得文档中所有的元素。 13、获得某个属性的值用getAttribute("属性名"); 14、setAttribute()方法修改属性值,但是在浏览器查看源代码时不会显示它修改后的值。 15、childNodes(孩子节点元素):当body中只有一个标签且标签下有内容时,会是两个元素;当body中同一级的有一个以上标签时,childNodes不会统计标签下的内容。 16、nodeType(节点的类型):元素节点为1、属性节点为2、文本节点为3,用于判断当前节点的类型。nodeValue(节点的值). 17、伪协议即“javascript:”的引用,此方法不常用,因为如果浏览器禁用了js就会无操作了,没有给网站预留退路(浏览器禁用了js后也能正常操作,只是效果没那么好)。 18、为了让HTML文档的内容全部加载完后再加载head中js要用window.οnlοad=函数名,或者把匿名函数绑定到onload事件上,如window.οnlοad=function(){方法名,……}。 19、判断浏览器是否支持某属性或方法:if(document.方法名或者属性名) return false; 方法名不要写圆括号,因为我们不用调用它的方法。 20、把事件绑定到id的属性值上,类似div+css的用法,如<a id="aid">aaa</a> 在js中可以给id绑定事件document.getElementById("aid").οnclick=function(){alert("aa");},这种 方法类似为<a οnclick="alert("aa");"></a>。 21、innerHTML的方式插入内容会把原来标签中的内容都覆盖。 22、当文档的MIME类型是application/xhtml+xml的xhtml时不会执行innerHTML和document.write(); 23、creatElement是创建一个元素节点、parent.appendChild(创建的元素节点)把创建的元素节点插入到某个元素中。 24、createTextNode(要插入的内容)创建一个文本节点。 25、让浏览器把XHTML当作XML对待前要引用MIME类型为application/xhtml+xml,xhtml必须要符合xml的规范,标签必须用小写字母,如以<a></a>标签,而html可以写成<a />。 26、改变某个元素的呈现效果用CSS;改变某个元素的行为用DOM;根据某个元素的行为去改变它的呈现效果用DOM嵌套CSS。
悟透JavaScript
1、js函数可以被赋值给一个变量,如function myfunc(){}与var myfunc=function(){}两种函数的写法是等价的。此变量也可以被随意赋值并用到任意地方。 2、js中可以有多个相同函数名存在,但是运行结果会与最后那个函数一样,相当于把最后那个函数执行了多次, 如:function aa(){alert('aa');}与function aa(){alert('bb');},运行结果是弹出两次bb。如果把它们写在两个js中,则会顺序弹出各自内容,因为js是 一段一段执行的。 3、任何一个js函数都可以为其动态地添加或去除属性,如:function Person(){with(arguments.callee) alert(name);} Person.name="aa"; Person();给Person的name属性赋了aa。 4、with(arguments.callee):其中arguments.callee表示初始值就是正被执行的 Function 对象,用于匿名函数,with()作用是代替某个对象, 如有obj.name="aa";with(obj); alert(name);用了with之后再引用那个属性就只要写name不用写obj.name了。 5、对象和函数可以象数组一样,用属性名或方法名作为下标来访问并处理,如 var anObject = {}; //一个对象 anObject.aProperty = "Property of object"; //对象的一个属性 anObject.aMethod = function(){alert("Method of object")}; //对象的一个方法 //主要看下面: alert(anObject["aProperty"]); //可以将对象当数组以属性名作为下标来访问属性 anObject["aMethod"](); //可以将对象当数组以方法名作为下标来调用方法 for( var s in anObject) //遍历对象的所有属性和方法进行迭代化处理 alert(s + " is a " + typeof(anObject[s])); 6、this 是一个特殊的内置参数,根据this 参数,您可以访问到“这个”对象的属性和方法,但却不能给this 参数赋值。 7、prototype原型:每个对象都有prototype属性,如果所有的对象都具有同样的方法或者属性,就可以用prototype设置方法或者属性 对象可以掩盖原型对象的那些属性和方法,一个构造函数原型对象也可以掩盖上层构造函数原型对象既有的属性和方法。这种掩盖 其实只是在对象自己身上创建了新的属性和方法,只不过这些属性和方法与原型对象的那些同名而已。如: function Person(name){ this.name = name; }; Person.prototype.company = "Microsoft"; //原型的属性 Person.prototype.SayHello = function(){ //原型的方法 alert("Hello, I'm " + this.name + " of " + this.company); }; var BillGates = new Person("Bill Gates"); BillGates.SayHello(); //由于继承了原型的东西,规规矩矩输出:Hello, I'm Bill Gates var SteveJobs = new Person("Steve Jobs"); SteveJobs.company = "Apple"; //设置自己的company 属性,掩盖了原型的company 属性 SteveJobs.SayHello = function(){ //实现了自己的SayHello 方法,掩盖了原型的SayHello 方法 alert("Hi, " + this.name + " like " + this.company + ", ha ha ha "); }; SteveJobs.SayHello(); //都是自己覆盖的属性和方法,输出:Hi, Steve Jobs like Apple, ha ha ha BillGates.SayHello(); //SteveJobs 的覆盖没有影响原型对象,BillGates 还是按老样子输出 8、为了避免将子类构造函数的prototype 设置为一个父类的对象实例造成的浪费,如:用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步:第一步是建立一个新对象;第 二步将该对象内置的原型对象设置为构造函数prototype 引用的那个原型对象;第三步就是将该对象作为this 参数调用构造函数,完 成成员设置等初始化工作。我们可以将原型对象作为通用函数的参数,让通用函数返回创建的对象。如: function New(aClass, aParams){ //通用创建函数 function new_(){ //定义临时的中转函数壳 aClass.Create.apply(this, aParams); //调用原型中定义的的构造函数,中转构造逻辑及构造参数 }; new_.prototype = aClass; //准备中转原型对象 return new new_(); //返回建立最终建立的对象 }; var Person = {//定义的类 Create: function(name, age){ this.name = name; this.age = age; }, SayHello: function(){ alert("Hello, I'm " + this.name); }, HowOld: function(){ alert(this.name + " is " + this.age + " years old."); } }; var BillGates = New(Person, ["Bill Gates", 53]); //调用通用函数创建对象,并以数组形式传递构造参数 BillGates.SayHello(); BillGates.HowOld(); alert(BillGates.constructor == Object); //输出:true 每次创建完对象退出New 函数作用域时,临时的new_函数对象会被自动释放。由于new_的prototype 属性被设置为 新的原型对象,其原来的原型对象和new_之间就已解开了引用链,临时函数及其原来的原型对象都会被正确回收了。上面代码的最后 一句证明,新创建的对象的constructor 属性返回的是Object 函数。其实新建的对象自己及其原型里没有constructor 属性,那返回 的只是最顶层原型对象的构造函数,即Object。