网页制作学习2----实现对象的传递
2016-01-22 21:23
369 查看
现在大家做网络开发大都用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)
};
就用对象来进行调用。
现在我们来试着写一个库。
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)
};
就用对象来进行调用。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享