理解JavaScript库

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>理解JavaScript库</title>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>

<body>
<div id="box">id</div>
<input type="radio" name="sex" value="男" checked="checked" />
<p>段落</p>
</body>

</html>

base.js

/*
函数式
function $(id) {
    return document.getElementById(id);
}
*/

/*
对象式
*/
var Base = {
    getId : function (id) {
        return document.getElementById(id)
    },
    getName : function (name) {
        return document.getElementsByName(name)
    },
    getTagName : function (tag) {
        return document.getElementsByTagName(tag);
    }
};

demo.js

/*
window.onload = function () {
    alert(document.getElementById('box').innerHTML);
    alert(document.getElementsByName('sex')[0].value);
    alert(document.getElementsByTagName('p')[0].innerHTML);
};

window.onload = function () {
    alert($('box').innerHTML);
}


window.onload = function () {
    alert(Base.$('box').innerHTML);
    alert(Base.$$('sex')[0].value);
	alert(Base.$$$('p')[0].innerHTML)
};

*/


window.onload = function () {
    alert(Base.getId('box').innerHTML);
    alert(Base.getName('sex')[0].value);
    alert(Base.getTagName('p')[0].innerHTML)
};

猜你喜欢