创建对象的两种常用方式
//构造函数/原型方式 函数内找属性,原型找方法
function Car(sColor,IDoors,Impg){
this.color = sColor;
this.door = IDoors;
shi.mgp = Imgp;
}
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car("red",3,4);
car1.showColor();
var car2 = new Car("blue",4,5);
car1.showColor();
//动态原型方法
function Car(sColor,IDoors,Impg){
this.color = sColor;
this.door = IDoors;
shi.mgp = Imgp;
//判断原型赋予了
if(typeof Car._initialized == "undefined"){
alert(this.color);
}
Car._initialized = true;
}
var car1 = new Car("red",3,4);
car1.showColor();
var car2 = new Car("blue",4,5);
car1.showColor();
//利用str 和利用原型进行字符添加的性能比较
1:定义StringBuffer类
function StringBuffer(){
this._strings_ = new Array;
}
//添加方法
StringBuffer.prototype.apppend = function(str){
this._strings_.push(str);
}
//toString的方法
StringBuffer.prototype.toString = function(){
return this.strings_.join("");
}
----------------------------
var d1 = new Date();
var str = "";
for(var i =0; i < 10000; i++){
str += "text";
}
var d2 = new Date();
-----------------------------
var oBuffer = new StringBuffer();
d1 = new Date();
for(var i = 0; i <1000; i++){
oBuffer.append("text");
}
var sResult = buffer.toString();
d2 = new Date();
-------------------------------
结果就是利用原型的执行速度比自己拼装的快50%-66%
//利用原型实现自己的一些方法,好比在自己建立一个可以找到到数组中某一个元素的位置
Array.prototype.indexOf = function(vItem){
for(var i =0; i < this.length; i++){
if(vItem == this.[i]){
return i;
}
}
return -1;
}
var aColors = new Array("red","green","yellow");
alert(aColors.indexOf("green"));
//DOM对table的操作
<html>
<head>
<script type="text/javascript">
//利用table的属性对table进行操作
function addTable(){
//创建Table元素
var oTable = document.createElement("table");
//设置元素的属性
oTable.setAttribute("border","1");
oTable.setAttribute("width","100%");
//创建tBody
var oBody = document.createElement("tbody");
//然后把oBody加到table中
oTable.appendChild(oBody);
//然后创建单元格
oBody.insertRow(0);
oBody.rows[0].insertCell(0);
oBody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));
oBody.rows[0].insertCell(1);
oBody.rows[0].cells[1].appendChild(document.createTextNode("cell 1,2"));
oBody.insertRow(1);
oBody.rows[1].insertCell(0);
oBody.rows[1].cells[0].appendChild(document.createTextNode("cell 2,1"));
oBody.rows[1].insertCell(1);
oBody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));
document.body.appendChild(oTable);
}
//利用appendChild拼装
function addTable1(){
//创建Table元素
var oTable = document.createElement("table");
//设置元素的属性
oTable.setAttribute("border","1");
oTable.setAttribute("width","100%");
//创建tBody
var oBody = document.createElement("tbody");
//然后把oBody加到table中
oTable.appendChild(oBody);
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("cell 1,1"));
tr.appendChild(td);
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode("cell 1,1"));
tr.appendChild(td1);
oBody.appendChild(tr);
var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode("cell 1,1"));
tr1.appendChild(td1);
var td12 = document.createElement("td");
td12.appendChild(document.createTextNode("cell 1,1"));
tr1.appendChild(td12);
oBody.appendChild(tr1);
document.body.appendChild(oTable);
}
</script>
</head>
<body onload = "addTable1();">
</body>
<html>
//js对NodeIterator的操作
<html>
<head>
<script type="text/javascript">
var ite = null;
function makeList(){
var oDiv = document.getElementById("div1");
var oFilter = new Object();
oFilter.acceptNode = function(oNode){
return (oNode.tagName == "p")? NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT;
};
ite = document.createNodeIterator(oDiv,NodeFilter.SHOW_ELEMENT,oFilter,false);
var oOutPut = document.getElementById("text1");
var oNode = ite.nextNode();
while(oNode){
oOutPut.value += oNode.tagName + "\n";
oNode = ite.nextNode();
}
}
</script>
</head>
<body>
<div id = "div1">
<p>hello <b>world!</b></p>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
<textarea rows="10",cols="40" id="text1"></textarea><br/>
<input type= "button" value="Make List" onclick="makeList()" />
</body>
</html>
//js对元素的增删改查
增加:
var text = document.createTextNode("hello");
var pElement = document.createElement("p");
pElement.appendChild(text );
删除:
var pElement= document.getElementsByTag("P")[0];
pElement.parentNode.removeChild(pElement);
修改:
var oldElement= document.getElementsByTag("P")[0];
var text = document.createTextNode("new");
var newElement = document.createElement("p");
newElement.appendChild(text);
oldElement.parentNode.replace(newElement,oldElement);