javascript高级程序设计总结之四

最新推荐文章于 2023-05-03 21:15:14 发布

lonpo

最新推荐文章于 2023-05-03 21:15:14 发布

阅读量710

点赞数

分类专栏： web 文章标签： javascript function prototype html chrome safari

本文链接：https://blog.csdn.net/jinking_xu/article/details/7051398

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

prototype原型的总结：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>PrototypeDemo</title>
		<meta name="description" content="" />
		<meta name="author" content="Administrator" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
	</head>
	<body>
		<div>
			<header>
				<h1>PrototypeDemo</h1>
			</header>
			<nav>
				<p>
					<a href="/">Home</a>
				</p>
				<p>
					<a href="/contact">Contact</a>
				</p>
			</nav>
			<div>
				<script type="text/javascript">
					function Person(){
					}
					/*
					Person.prototype.name = "kinger";
										Person.prototype.age = 29;
										Person.prototype.job = "Software Enginner";
										Person.prototype.sayName = function(){
											alert(this.name);
										};
					
					
					
					var person1 = new Person();
					person1.name = "lonpo";
					// alert(person1.name);
					person1.sayName(); //先查询实例person1是否有sayName（）方法，然后再找Person.prototype是否有该方法。
					
					var person2 = new Person();
					// person2.sayName();
					// alert(person1.hasOwnProperty("name"));
					// alert(person1 instanceof Person);
					
					// alert(person1.constructor == person2.constructor); //true
					// alert(person1.constructor == Person);
					// alert(Person.prototype.isPrototypeOf(person1));
					*/
					/*
					 * 如果var person1 = new Person();
						var person2 = new Person();放在前面定义，则alert（person1.name)就会出错，undefined。
						如果放在后面就没有任何问题。
					 */
					// var person1 = new Person();
					// var person2 = new Person();  //无法访问Person.prototype中的属性
					Person.prototype = {
						constructor : Person,
						name : "kinger",
						age : 29,
						job : "software Engineer",
						sayName : function(){
							alert(this.name);
						}
					}
					var person1 = new Person();
					var person2 = new Person();
					//alert(person1.name);
					//alert(person1.constructor == Person);
					
					/*
					//组合继承，集合了原型链和借用构造函数
					function SuperType(){
						this.colors = ["red", "blue", "green"];
					}
					SuperType.prototype.sayName = function(){
						alert(this.name);
					}
					function SubType(){
						SuperType.call(this);						
					}
					
					SubType.prototype = new SuperType();
					//下面的这条语句必须放在SubType.prototype = new SuperType();之后
					SubType.prototype.sayAge = function(){
						alert(this.age);
					}
					
					var instance1 = new SubType();
					instance1.colors.push("black");
					alert(instance1.colors);
					
					var instance2 = new SubType();
					alert(instance2.colors);
					*/
					/*
					//寄生组合式继承，借用构造函数和寄生式继承
					function inheritPrototype(subType, superType){
						var prototype = object(superType.prototype);
						prototype.constructor = subType;
						subType.prototype = prototype;
					}
					function SuperType(name){
						this.name = name;
						this.colors = ["red", "blue", "green"];
					}
					SuperType.prototype.sayName = function(){
						alert(this.name);
					}
					function SubType(name, age){
						SuperType.call(this, name);
						this.age = age;
					}
					
					inheritPrototype(SubType, SuperType);
					SubType.prototype.sayAge = function(){
						alert(this.age);
					}
					*/
					
					function createFunctions(){
						var result = new Array();
						for(var i = 0; i < 10; i++){
							result[i] = i;
						}
						return result;
					}
					
					var funcs = createFunctions();
					for(var i = 0; i < funcs.length; i++){
						document.write(funcs[i] + "<br />");
					}
					
					var name = "The window";
					
					var object = {
						name : "My Object",
						/*
						getNameFunc : function(){
													return function(){
														return this.name;
													}
												}
												*/
						
						getNameFunc : function(){
								return this.name;
						}
					}
					alert(object.getNameFunc());
				</script>
				
			</div>
			<footer>
				<p>
					© Copyright  by Administrator
				</p>
			</footer>
		</div>
	</body>
</html>

DOM1，DOM2、DOM3总结：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>DOM Demo</title>
		<style type="text/css">
			#myCss{
				background-color: red;
				border: 1px solid black;
			}
		</style>
		<link rel="stylesheet" href="mycss.css" />
	</head>
	<body>
		<div id="myDiv" class="id" title="Body" lang="en" dir="rtl">Hello world!</div>
		<input type="text" name="myElement" value="Text field">
		<div id="myElement">A div</div>	
		<div id="content">
			<p>This is a <strong>paragraph</strong> with a list following it.</p>
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</div>
		<div id="myCss" style="background-color: blue; width: 10px; height: 1200px;"></div>	
		<script type="text/javascript">
			var html = document.documentElement; //取得<html>元素
			//alert(html === document.childNodes[0]);
			//alert(html === document.firstChild);			
			var body = document.body; //取得<body>元素
			// alert(body === document.firstChild.childNodes[1]);
			// alert(body === document.firstChild.lastChild);
			var doctype = document.doctype; //取得对<!DOCTYPE>的引用			
			var originalTitle = document.title;
			document.title = "New page Title";
			
			var e = document.getElementById("myelement");
			var hasXmlDom = document.implementation.hasFeature("HTML", "1.0");
			// alert(hasXmlDom);
			
			var element = document.getElementById("myDiv");
			var id = element.attributes.getNamedItem("id").nodeType;
			var className = element.attributes["class"].nodeName;
			// alert(id);
			// alert(className);
			// alert(document.nodeName);
			var myDiv = document.getElementById("content");
			//myDiv.innerText = div.innerText; //去掉了所有的HTML标签
			
			//myDiv.innerText = "Hello World";
			//myDiv.innerText = "Hello & welcome, <b>\"reader\"!<\/b>";
			//firefox支持textContent，其他浏览器都支持innerText
			function getInnerText(element){
				return (typeof element.textContent == "string")? element.textContent : element.innerText;
			}
			function setInnerText(element, text){
				if(typeof element.textContent == "string"){
					element.textContent = text;
				}else{
					element.innerText = text;
				}
			}
			//setInnerText(myDiv, "Hello World");
			//alert(getInnerText(myDiv));
			//在IE中的innerHTML添加<script defer>和<style>元素
			//myDiv.innerHTML = "<script defer>alert('hi');</scr"+"ipt>";
			//myDiv.innerHTML = "_<script defer>alert('hi');</scr"+"ipt>"; //影响视觉，前面添加了_
			//myDiv.innerHTML = "<div> </div><script defer>alert('hi');</scr"+"ipt>";
			//myDiv.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');</scr"+"ipt>";
			//针对opera、firefox和IE
			//myDiv.innerHTML = "_<style type=\"text/css\">body{background-color: red;}</style>";
			//取得第一个子节点的值由很多种div.childNodes.item(0).data，div.firstChild.nodeValue
			//alert(myDiv.childNodes.item(0).data);
			//alert(myDiv.firstChild.nodeValue); 
			//alert(myDiv.childNodes[0].nodeValue);
			myDiv.removeChild(myDiv.firstChild);
			
			//针对safari和chrome
			//document.getElementsByTagName("head")[0].appendChild(div.firstChild);
			myDiv.style.cssText = "width: 100px; height: 100px; background-color: green";
			//alert(myDiv.style.length); //
			var myCss = document.getElementById("myCss");
			//alert(myCss.style.backgroundColor);
			//myCss.style只包括了<div id="myCss" style="background-color: blue; width: 10px; height: 25px;"></div>定义的
			//style样式，但是不包括<head>定义的嵌入样式，和外部样式
			//var computedStyle = document.defaultView.getComputedStyle(myCss, null);//FireFox,chrome,safari,opera
			//var computedStyle = myCss.currentStyle; //IE
			//alert(computedStyle.borderLeftWidth);
			// alert(computedStyle.border);
			var supportsDOM2Core = document.implementation.hasFeature("Core", "2.0");
			var supportsDOM3Core = document.implementation.hasFeature("Core", "3.0");
			var supportsDOM2HTML = document.implementation.hasFeature("HTML", "2.0");
			var supportsDOM2Views = document.implementation.hasFeature("Views", "2.0");
			var supportsDOM2XML = document.implementation.hasFeature("XML", "2.0");
			var supportsDOM2Style = document.implementation.hasFeature("StyleSheets", "2.0");
			var supportsDOM2Events = document.implementation.hasFeature("Events", "2.0");
			var supportsDOM2Traversals = document.implementation.hasFeature("Traversal", "2.0"); //FireFox不支持
			var supportsNodeInterator = (typeof document.createNodeIterator == "function");
			var supportsTreeWalker = (typeof document.createTreeWalker == "function");
			alert("" + supportsDOM2Traversals + supportsNodeInterator + supportsTreeWalker);
			//alert("" + supportsDOM2Core + supportsDOM3Core + supportsDOM2HTML + supportsDOM2Views + supportsDOM2XML + supportsDOM2Style+supportsDOM2Events);			
			//应该hasFeature（）函数的判断，得出opera，chrome，firefox都支持DOM2.0，但是不支持3.0，而IE不支持任何DOM2.0,DOM3.0
			var sheet = null;
			//alert(document.styleSheets.length); //包含了<link>和<style>这2个样式表
			for(var i = 0, len=document.styleSheets.length; i < len; i++){
				sheet = document.styleSheets[i];
				//alert(sheet.href);
			}
			//是否位于顶部
			function scrollToTop(){
				var element = document.body;
				if( element.scrollTop != 0){
					element.scrollTop = 0;
				}
			}
			//alert( document.compatMode == "BackCompat"); //混杂模式	
		</script>
		<input type="button" οnclick="scrollToTop()" value="向上" />
	</body>
</html>