现在大家做网络开发大都用JavaScript库,JavaScript库就是把一般常用的代码组成一个js文件,像前面说的一样引用就可以。
现在我们来试着写一个库。
1、 首先在.html文件里面定义一些东西:
<div>介绍:<div id="box">id</div> DIV元素:是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。可定义文档中的分区或节(division/section)。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
<input>介绍: <input type="radio" name="sex" value="男"checked="checked" /> type是radio,表示单选按钮
<p>段落</p>
2、我是要通过id获取id值,通过name获取男,利用上面定义的三个对象进行三种取法:
第一种写法:
window.onload = function () {
alert(document.getElementById('box').innerHTML);//先获取到box这个对象之后要打印它里面的文本,所以用.innerHtml.
alert(document.getElementsByName('sex')[0].value);//注意,这里这个对象要写0,而且是value
alert(document.getElementsByTagName('p')[0].innerHTML);//这里通过第0个标签p来获取里面的内容。
};
A、这段要写在demo.js里面:window.onload后面的函数是页面加载后会执行的函数。
B、方法里面用到的那些getElementById或Name或TagName 都是document对象的方法,例如在页面里表单元素你可以给它设置id值,或name值来区别同种类型的不同元素,当你设置id document.getElementById("id")来得到这个元素,从而通过document.getElementById("id").value得到元素的值,类似的方法还有document.getElementsByName("name")通过元素名称呢个获得元素对象。document.getElementsByTagName("form")通过标签名称获得元素。
第二种写法:
如果我嫌写上面那堆很麻烦的话,那么我就写一个函数来专门定义这种传回对象的做法:
在base.js文件中写方法:
function $(id) {
returndocument.getElementById(id);}//定义一个传递对象的函数
这样demo.js里面再利用就简单了
window.onload = function () {
alert($('box').innerHTML);}
第三种写法:用对象来简化
这个对象里面有三个方法:
var Base = {
getId: function (id) {
returndocument.getElementById(id)
},
getName: function (name) {
returndocument.getElementsByName(name)
},
getTagName: function (tag) {
returndocument.getElementsByTagName(tag);
}
};
然后在demo.js里面要这样来进行调用:
window.onload = function () {
alert(Base.getId('box').innerHTML);
alert(Base.getName('sex')[0].value);
alert(Base.getTagName('p')[0].innerHTML)
};
就用对象来进行调用。