记录我的旅程3之JavaScript Dom学习笔记

下面我们接着旅程2继续我们的Dom征程。在这片博文中我完成了document属性的所有介绍，并在最后用几个小案例充分的讲解了这些知识点。这些里面有些特效很常见，在我们网站注册的时候我们会限制单击控件的时间，让用户有足够的时间读完协议控件才能可用，实现注册。

document属性1

(1) document是window对象的一个属性，因为使用window对象成员的时候可以省略window,所以一直写document。

(2) document的方法

1) write：向文档写入内容，writeln和write差不多，只不过最后添加一个回车。

document.write("<a href='http://www.baidu/com'>百度</a>");

</script>

注释：在onclick等事件中写的代码会冲掉页面的内容，只有在页面加载过程中write才会与原有内容结合在一起。

2) write经常在广告代码，整合资源代码中被广泛的使用。

(3) getElementById方法(非常有用)，根据元素的Id获得对象，网页中Id不能重复，也可以直接通过元素的Id来引用元素，但是有有效范围之类的问题，因此不建议通过Id操作对象，而是通过getElementById。

function btnClick() {

var txt = document.getElementById("textBox1");

//alert(txt.value);

alert(textBox1.value);

}

function btnClick2() {

var txt = document.getElementById("textBox2");

//alert(txt.value);

//alert(textBox2.value) //这句话是错误的

alert(form1.textBox2.value);

}

</script>

</form>

注释：建议使用getElementById获取对象

(4) getElementByName，根据元素的name获取对象，由于页面中元素的name可以重复，比如：多个RadioButton的name一样，因此getElementByName返回值是对象数组

function btnClick() {

var radios = document.getElementsByName("gender");

/*在JS中下面的代码不像C#中的foreach，并不是遍历每一个元素，而是遍历Key

for (var r in radios) {

alert(r.value);

}*/

for (var i = 0; i < radios.length; i++) {

var radio = radios[i];

alert(radio.value);

}

</script>

(5) getElementsByTagName，获得指定标签过程的元素数组，比如：getElementByTagName(“P”)可以获得所有的<p>标签。

function btnClick1() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

input.value = "韩迎龙";

}

案例1：当单击某个控件的时候某个控件的属性变化案例，也就是我们的控件上面显示的是”哈哈”，但是当我们单击的时候就会变成”Hello”，当我们单击其他的时候前面的控件恢复原始状态。

function initEvent() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

input.onclick = btnClick; //单击控件的onclick事件

}

function btnClick() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

//window.event.srcElement——>取得引发事件的控件

if (input == window.event.srcElement) {

input.value = "Hello";

}

else {

input.value = "哈哈";

}

</script>

</body>

案例2：十秒钟后协议文本框的注册按钮才能够点击，时钟倒数(btn.disabled=true)。

思路 1.注册按钮初始化状态不可用，disabled

2.启动定时器，setInterval,设定一个初始值为10的全局变量，1秒钟运行一次CountDown方法，在CountDown方法中对全局变量倒数，然后将到数值写在注册按钮上面(请仔细阅读协议(还剩8秒))

3.直到全局变量值<=0,就让注册按钮可用，将按钮的文本设置为”同意”。

var leftSeconds = 10;

var intervalId;

function CountDown() {

var btnReg = document.getElementById("btnReg");

if (btnReg) { //如果网页速度非常慢的话，可能定时器运行的时候控件还没有加载

if (leftSeconds <= 0) {

btnReg.value = "同意";

btnReg.disabled = "";

clearInterval(intervalId); //停止定时器

}

else {

btnReg.value = "请仔细阅读协议(还剩" + leftSeconds + "秒)";

leftSeconds--;

} } }

intervalId = setInterval("CountDown()", 1000);

</script>

<body>

</body>

案例3：加法计算器，两个文本框中输入数据，点击[=]按钮将相加的结果放在第三个文本框中。

function CalClick() {

var value1 = document.getElementById("txt1").value;

var value2 = document.getElementById("txt2").value;

value1 = parseInt(value1, 10);

value2 = parseInt(value2, 10);

document.getElementById("txtResult").value = value1 + value2;

}

</script>

<body>

</body>

案例3：美女时钟，每一秒循环显示一个美女，考虑(当最后一秒的时候变成个位数)。

//var now = new Date(); 不要写在这里，否则取得的时间不变

function FillTwoLen(i) {

if (i < 10) {

return "0" + i;

}

else {

return i;

}

function Refersh() {

var imgMM = document.getElementById("imgMM");

if (!imgMM) {

return;

}

var now = new Date();

var fileName = FillTwoLen(now.getHours()) + "-" + FillTwoLen(now.getSeconds()) + ".jpg";

imgMM.src = "images/" + fileName;

}

setInterval("Refersh()", 1000);

</script>

</body>

posted @ 2012-06-11 11:26 Kencery 阅读(595) 评论(0) 编辑收藏举报

刷新页面返回顶部

怪才(Kencery)

菜鸟的里程中只有奋斗，别无其他

记录我的旅程3之JavaScript Dom学习笔记

公告