prototype 关键字可以为 JS原有对象 或者 自己创建的类
中添加方法或者属性。
也可以实现继承。
例子:

大概的实现方式是:
在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片。
然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来。
这里比较麻烦地方是,如何计算img的位置,获得元素的相对于页面的绝对位置。通常是用offsetLeft和offsetTop,但这两个属性是元素的offsetParent指向的元素的相对位置,
如果offsetParent所指的元素是设置了浮动的或使用绝对定位,那么offsetLeft来获得绝对位置就不正确呢。
在这里我是将元素的所有父级元素的offsetTop之和来获得文档绝对位置的。

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
    <title></title>
    <script language=”javascript” type=”text/javascript”>
        function addRow() {
            var newTR =
document.getElementById(“testTable”).insertRow(document.getElementById(“testTable”).rows.length);
            var newNameTD = newTR.insertCell(0);
            newNameTD.innerHTML = “aa”;
            var newNameTD = newTR.insertCell(1);
            newNameTD.innerHTML = “<input name=’LastName’
id=’LastName’ type=’text’ />”;
            var newNameTD = newTR.insertCell(2);
            newNameTD.innerHTML = “<input name=’BirthDay’
id=’BirthDay’ type=’text’   />”;
            var newNameTD = newTR.insertCell(3);
            newNameTD.innerHTML = “<input name=’age’ id=’age’
type=’text’    />”;
        }
        function insertRow() {
            var oTable = document.getElementById(“table_info”);
            var oTr = oTable.insertRow();
            var oTd = oTr.insertCell();
            oTd.innerHTML = “新添加了一行”;
        }
        function insertRow2() {
            //获取table对象
            var table = document.getElementById(“table_info2”);
            //找到要添加button的td,这里以表格第一行第一列为例子
            var oTd = table.rows[0].cells[0];
            //添加button到td中,添加前吧td内容清空并赋予button的代码
            oTd.innerHTML = “<button
onclick=’insertRow22()’>添加收费</button>”;
        }
        function insertRow22() {
            var oTable = document.getElementById(“table_info2”);
            var oTr = oTable.insertRow();
            var oTd = oTr.insertCell();
            oTd.innerHTML = “新添加了一行”;
        }
        function insertRow3() {
            //获取table对象
            var table = document.getElementById(“table_info3”);
            //找到要添加button的td,这里以表格第一行第一列为例子
            var oTd2 = table.rows[0].insertCell();
            oTd2.innerHTML = “&nbps;”;
        }
        function tableDiv() {
            var maxRow = 4;
            var maxCol = 8;
            var strTbody = [“<table
border=’1′><tbody>”];
            for (var i = 0; i < maxRow; i++) {
                strTbody.push(“<tr>”);
                for (var j = 0; j < maxCol; j++) {
                    strTbody.push(“<td>test</td>”);
                }
                strTbody.push(“</tr>”);
            }
            strTbody.push(“</tbody></table>”);
            var obj = document.getElementById(“tableDiv”);
            obj.innerHTML = strTbody.join(“”);
        }
        function init() {
            var _table, _tbody, tr, td, text, maxRow, maxCol;
            var docBody = document.body;
            var _doc = document;
            maxRow = 5;
            maxCol = 8;
            _table = _doc.createElement(“table”);
            _table.border = “1”;
            _table.style.tableLayout = “fixed”;
            _tbody = _doc.createElement(“tbody”);
            _table.insertBefore(_tbody, null);
            docBody.insertBefore(_table, null);
            for (var i = 0; i < maxRow; i++) {
                tr = _doc.createElement(“tr”);
                _tbody.insertBefore(tr, null);
                for (var j = 0; j < maxCol; j++) {
                    td = _doc.createElement(“td”);
                    text = _doc.createTextNode(“Text”);
                    td.insertBefore(text, null);
                    tr.insertBefore(td, null);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <table id=”testTable” border=’1′ cellspacing=”1″>
            <tr>
                <th>
                    FirstName
                </th>
                <th>
                    LastName
                </th>
                <th>
                    BirthDay
                </th>
                <th>
                    age
                </th>
            </tr>
            <tr>
                <td>
                    Jim
                </td>
                <td>
                    Green
                </td>
                <td>
                    L.A
                </td>
                <td>
                    23
                </td>
            </tr>
            <tr>
                <td>
                    Andrew
                </td>
                <td>
                    Hou
                </td>
                <td>
                    Xi’an
                </td>
                <td>
                    25
                </td>
            </tr>
        </table>
        <input type=”button” id=”aaa” value=”+add new Row”
onclick=”addRow();” />
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type=”button” value=”按钮添加行”
onclick=”insertRow();” />
        <table id=”table_info” border=”1″>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type=”button” value=”按钮中添加行”
onclick=”insertRow2();” />
        <table id=”table_info2″ border=”1″>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type=”button” value=”连续添加列”
onclick=”insertRow3();” />
        <table id=”table_info3″ border=”1″>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </table>
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type=”button” value=”添加一个table”
onclick=”tableDiv();” />
        <div id=”tableDiv” />
    </div>
    <br />
    <hr />
    <br />
    <div>
        <input type=”button” value=”连续添加table” onclick=”init();”
/>
    </div>
</body>
</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>JS中 prototype 关键字的使用</title>
</head>
<script>
<!– demo1 JS中原有对象中 添加方法 –>
Number.prototype.add = function (num){
return this+num;
}
function but1_click(){
alert((3).add(8));
}
<!– demo2 JS中新建对象中, 添加属性 ,方法 –>
function Car(cColor,cWeight){
this.cColor = cColor;
this.cWeight = cWeight;
}
Car.prototype.drivers = new Array(‘zhangsan’,’lisi’);
Car.prototype.work = function (cLong){
alert(“我跑了”+cLong+”公里”);
}
function but2_click(){
var c = new Car(“red”,”5″);
c.drivers.push(‘zhaoliu’);
alert(c.drivers);
c.work(1);
}
<!– demo3 JS中新建对象中, 添加属性 ,方法 紧凑的写法 –>
function Rectangle(rWeight,rHeight){
this.rWeight = rWeight;
this.rHeight = rHeight;
if( typeof this._init == ‘undefined’){
Rectangle.prototype.test = function (){
alert(“test”);
}
}
this._init = true;
}
function but3_click(){
var t = new Rectangle(6,8);
t.test();
}
<!– demo4 prototype 继承 –>
function objectA(){
this.methodA = function (){
alert(“我是A方法”);
}
}
function objectB(){
this.methodB = function (){
alert(“我是B方法”);
}
}
objectB.prototype = new objectA();
function but4_click(){
var t = new objectB();
t.methodB();
t.methodA();
}
</script>
<body>
<h2> prototype 关键字的使用 </h2>
<hr />
<input id=”but1″ type=”button” value=”demo1″ onclick=”but1_click()”
/>
<input id=”but2″ type=”button” value=”demo2″ onclick=”but2_click()”
/>
<input id=”but3″ type=”button” value=”demo3″ onclick=”but3_click()”
/>
<input id=”but4″ type=”button” value=”demo4″ onclick=”but4_click()”
/>
</body>
</html>

//取元素的页面绝对 X位置
        var getLeft = function(El){
            var left = 0;
            do{
                left += El.offsetLeft;
            }while((El = El.offsetParent).nodeName != ‘BODY’);
            return left;
        };
        //取元素的页面绝对 Y位置
        var getTop = function(El){
            var top = 0;
            do{
                top += El.offsetTop;
            }while((El = El.offsetParent).nodeName != ‘BODY’);
            return top;
        };

代码如下: !DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“” html
xmlns=”…

关键字可以为 JS原有对象 或者
自己创建的类 中添加方法或者属性。 也可以实现继承。 例子: 复制代码
代码如下: !DOCTYPE html PUBL…

在设置窗口的scroll事件时,ie使用是document.documentElement,而其他的浏览器都使用document。
 接下来是要获得浏览器显示窗口现对于文档的位置,用了下面的代码来计算

复制代码 代码如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注