`
lihong11
  • 浏览: 456940 次
  • 性别: Icon_minigender_2
  • 来自: 湖南
社区版块
存档分类
最新评论
阅读更多

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.onload=函数名,或者把匿名函数绑定到onload事件上,如window.onload=function(){方法名,……}。
19、判断浏览器是否支持某属性或方法:if(document.方法名或者属性名) return false; 方法名不要写圆括号,因为我们不用调用它的方法。
20、把事件绑定到id的属性值上,类似div+css的用法,如<a id="aid">aaa</a> 在js中可以给id绑定事件document.getElementById("aid").onclick=function(){alert("aa");},这种
方法类似为<a onclick="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。

 

1
3
分享到:
评论
1 楼 308202251 2013-01-09  
虽然,用了很长时间,不过还没总结过。

相关推荐

    看书阅读小程序源码

    4. **书签与笔记**:支持添加书签,记录阅读进度,同时可以撰写阅读笔记,方便回顾和分享。 三、商业与二次开发 1. **广告植入**:允许在小程序内嵌入广告,为开发者或运营者提供盈利途径。 2. **会员系统**:可以...

    study-code-notes:看书时写的笔记,vuepress项目。正在写的是,TUDO

    在这个"study-code-notes"项目中,你将有机会学习和实践这些JavaScript的核心概念,并了解如何使用Vuepress创建和组织你的技术笔记,提高学习和工作效率。无论是前端开发的基础巩固,还是进阶技术的掌握,这个项目都...

    read-boos:注意看书

    《read-boos:注解读书》项目是一个个人阅读笔记的集合,主要关注JavaScript技术领域。这个项目通过GitHub、PDF文档以及实体书籍的方式收集并整理了作者在学习过程中接触的书籍和资料,尤其强调了对作者及其相关资源...

    javascript-知识:JavaScript知识点梳理

    我也想看看我的知识点掌握程度到底怎么样,单纯的靠记笔记,针对单点知识写文章感觉效果很零碎,达不到架构化,没办法在感知到自己的现状,也就没办法系统的查漏补缺 通过思维导图,问答加上知识点补充文章,让知识...

    5款带后台的小程序源码分享给大家

    写笔记带后端 商城类完整demo:DFS:前端、PHP后端 喵喵小说 图片预览带后端 城市地图带后端 外卖搭伴拼团php后端 天气预报带后端 实时巴士带后端 客家旅运带后端 小程序完整demo:飞翔的小鸟:canvas实现...

    5款带后台的小程序模板

    写笔记带后端 商城类完整demo:DFS:前端、PHP后端 喵喵小说 图片预览带后端 城市地图带后端 外卖搭伴拼团php后端 天气预报带后端 实时巴士带后端 客家旅运带后端 小程序完整demo:飞翔的小鸟:canvas实现...

    5款带后台的微信小程序

    写笔记带后端 商城类完整demo:DFS:前端、PHP后端 喵喵小说 图片预览带后端 城市地图带后端 外卖搭伴拼团php后端 天气预报带后端 实时巴士带后端 客家旅运带后端 小程序完整demo:飞翔的小鸟:canvas实现...

    疯狂的java讲义源码-ReadingBooks:读书笔记整理

    因此,对我个人而言,看书至少能带来两方面的好处:把握知识的准确性和系统性。 度盘地址: 一、前端 1、 《JavaScript高级程序设计(第3版)》 学习JS和前端必读的书籍,比较厚但是很有干货涉及面比较广,里面的重要...

    VIP商用 在线读书学习手机页面模板.zip

    - `js` 文件夹包含了实现动态功能和交互的JavaScript代码。例如,可能有用于分页、滚动加载、书籍搜索等功能的脚本。 - `css` 文件夹则包含样式表,定义了页面元素的外观和布局。这些CSS文件可能包括主样式表、...

    PHP程序员基本要求和必备技能

    昨天在图书馆看书,看到《电脑报》上的一篇文章,题目为《30岁不是程序员的终点》,(详情可参看《电脑报》2010年第19期,G14版数字职场的文章)。大致内容是采访一位30岁的PHP高级程序员,他讲了一些关于PHP程序员...

    leetcode答案-DSA:数据结构+算法

    回顾我所用过的编程语言,有C++、C、Python、Objective-C、Swift、Java、JavaScript,那会我很难考虑清楚为什么会有这么多的语言。如今,通过编译原理这本书,我大致明白了为什么会有这么多语言。我试着回答一下这个...

    python+dtale2.9.1源码

    React是Facebook开发的一个JavaScript库,用于构建用户界面,特别是单页面应用。在D-Tale中,React负责创建动态、响应式的用户界面,让用户能够以可视化的方式探索和操作Pandas的数据框。React组件化的设计使得代码...

    2000个小程序精选源码(包含49个行业)

    ─分类持续更新中 │ ├─o2o行业(2个) │ │ 盒马鲜生.zip │ │ 轻客洗衣.zip │ │ │ ├─互联网行业(5个) │ │ 云文档.zip │ │ 仿ofo共享单车.zip │ │ 仿美团外卖.zip ...│ ...

Global site tag (gtag.js) - Google Analytics