4.document属性
案例:点击一个按钮,被点击的按钮显示“呜呜”,其他按钮显示“哈哈”。
案例:十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。 (btn.disabled = true )
练习:加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第三个文本框中。
4.document属性
1. document是window对象的一个属性,因为使用window对象成员的时候可以省略window.,所以一般直接写document
2. document的方法:
2.1 write:向文档中写入内容。writeln,和write差不多,只不过最后添加一个回车
<input type="button" value="点击" onclick="document.write('<font color=red>你好</font>')" />
在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起
<script type="text/javascript">
document.write('<font color=red>你好</font>');
</script>
write经常在广告代码、整合资源代码中被使用。见备注
内容联盟、广告代码、cnzz,不需要被主页面的站长去维护内容,只要被嵌入的js内容提供商修改内容,显示的内容就变了。
2.2 getElementById 方法(非常常用),根据元素的Id获得对象,网页中id不能重复。也可以直接通过元素的id来引用元素,但是有有效范围、form1.textbox1之类的问题,因此不建议直接通过id操作元素,而是通过getElementById
(*)getElementsByName,根据元素的name获得对象,由于页面中元素的name可以重复,比如多个 RadioButton 的name一样,因此getElementsByName返回值是对象数组。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript"> //radio单选(集合)
f1 = function () {
var radios = document.getElementsByName("sex"); for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
alert(radios[i].value); break;
}
}
} //checkbox多选
function f2() {
var s = "";
var checkboxs = document.getElementsByName("number"); for (var i = 0; i < checkboxs.length; i++) {
if (checkboxs[i].checked) {
s
+= checkboxs[i].value + ";"
;
}
}
alert(s);
}
</script>
</head>
<body>
<input type="radio" value="man" checked="checked" name="sex" />男
<input type="radio" value="woman" name="sex" />女
<input type="radio" value="yao??" name="sex" />人妖? <input type="button" onclick="f1()" value="click" />
<br />
<div>
<input type="checkbox" name="number" checked="checked" value="1" />1
<input type="checkbox" name="number" value="2" />2
<input type="checkbox" name="number" value="3" />3 <input type="button" onclick="f2()" value="click" />
</div>
</body>
</html>
(*)getElementsByTagName,获得指定标签名称的元素数组,比如getElementsByTagName("p")可以获得所有的<p>标签。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
//全选
function Allchecked() {
//触发事件的对象 全选的checkbox
var obb = event.srcElement;
//获取所有的input标签
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
//判断当前的input对象是不是checkbox
if (inputs[i].type == "checkbox") {
inputs[i].checked = obb.checked;
}
}
} //取消全选
function oneChecked() {
//获取所有的input标签
var inputs = document.getElementsByTagName("input");
//全选框 for (var i = 0; i < inputs.length; i++) {
//判断当前的input对象是不是checkbox
if (inputs[i].type == "checkbox") {
//判断当前的input对象不是全选时
if (inputs[i].id != document.getElementById('chkAll')) {
//假设所有checkbox被选中
var ischeckAll = true;
//再循环一次
for (var j = 0; j < inputs.length; j++) {
if (inputs[j].type == "checkbox" && inputs[j].id != "chkAll") {
//判断是否被选中
if (!inputs[j].checked) {
ischeckAll = false;
break;
}
}
}
//
document.getElementById('chkAll').checked = ischeckAll;
}
}
}
} </script>
</head>
<body>
<div>
<input type="checkbox" id="chkAll" value="全选" onclick="Allchecked()" />全选
<br />
<input type="checkbox" value="A" onclick="oneChecked()" />吃饭
<br />
<input type="checkbox" value="B" onclick="oneChecked()" />睡觉
<br />
<input type="checkbox" value="C" onclick="oneChecked()" />玩电脑
<br />
<input type="button" onclick="reverseChecked()" value="反选" />
</div>
</body>
</html>
案例:全选反选(完整代码)
-
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title></title>
-
<script type="text/javascript">
-
//1.全选
-
function Allchecked() {
-
//触发事件的对象 全选的checkbox
-
var obb = event.srcElement;
-
//获取所有的input标签
-
var inputs = document.getElementsByTagName("input");
-
for (var i = 0; i < inputs.length; i++) {
-
//判断当前的input对象是不是checkbox
-
if (inputs[i].type == "checkbox") {
-
inputs[i].checked = obb.checked;
-
}
-
}
-
}
-
//2.取消全选
-
function oneChecked() {
-
//获取所有的input标签
-
var inputs = document.getElementsByTagName("input");
-
//全选框
-
for (var i = 0; i < inputs.length; i++) {
-
//判断当前的input对象是不是checkbox
-
if (inputs[i].type == "checkbox") {
-
//判断当前的input对象不是全选时
-
if (inputs[i].id != document.getElementById('chkAll')) {
-
//假设所有checkbox被选中
-
single();
-
}
-
}
-
}
-
}
-
//3.反选
-
function reverseChecked() {
-
//获取所有的input标签
-
var inputs = document.getElementsByTagName("input");
-
for (var i = 0; i < inputs.length; i++) {
-
//判断当前的input对象是不是checkbox
-
if (inputs[i].type == "checkbox") {
-
//1.判断当前的input对象不是全选时
-
if (inputs[i].id != document.getElementById('chkAll')) {
-
//取反
-
inputs[i].checked = !inputs[i].checked;
-
}
-
}
-
}
-
single();
-
}
-
//4.判断所有子checkbox是否被选中
-
function single() {
-
var inputs = document.getElementsByTagName("input");
-
var ischeckAll = true;
-
//再循环一次
-
for (var j = 0; j < inputs.length; j++) {
-
if (inputs[j].type == "checkbox" && inputs[j].id != "chkAll") {
-
//判断是否被选中
-
if (!inputs[j].checked) {
-
ischeckAll = false;
-
break;
-
}
-
}
-
}
-
document.getElementById('chkAll').checked = ischeckAll;
-
}
-
</script>
-
</head>
-
<body>
-
<div>
-
<input type="checkbox" id="chkAll" value="全选" onclick="Allchecked()" />全选
-
<br />
-
<input type="checkbox" value="A" onclick="oneChecked()" />吃饭
-
<br />
-
<input type="checkbox" value="B" onclick="oneChecked()" />睡觉
-
<br />
-
<input type="checkbox" value="C" onclick="oneChecked()" />玩电脑
-
<br />
-
<input type="button" onclick="reverseChecked()" value="反选" />
-
</div>
-
</body>
</html>
案例:点击一个按钮,被点击的按钮显示“呜呜”,其他按钮显示“哈哈”。
-
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title></title>
-
<script type="text/javascript">
-
window.onload = function () {
-
var haha = document.getElementsByTagName("input");
-
for (var i = 0; i < haha.length; i++) {
-
if (haha[i].type == "button") {
-
//注册onclick事件
-
haha[i].onclick = function () {
-
//alert(i); //i的值等于7,因为onload加载完i值等于最后的6,然后再循环1次
-
for (var i = 0; i < haha.length; i++) {
-
if (haha[i].type == "button") {
-
haha[i].value = "哈哈";
-
}
-
}
-
//触发事件的对象
-
event.srcElement.value = "呜呜";
-
}
-
}
-
}
-
};
-
</script>
-
</head>
-
<body>
-
<div>
-
<input type="button" value="哈哈" name="haha" /><br />
-
<input type="button" value="哈哈" name="haha" /><br />
-
<input type="button" value="哈哈" name="haha" /><br />
-
<input type="button" value="哈哈" name="haha" /><br />
-
<input type="button" value="哈哈" name="haha" /><br />
-
<input type="button" value="哈哈" name="haha" /><br />
-
<input type="button" value="哈哈" name="haha" /><br />
-
</div>
-
</body>
</html>
.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}
.src_container .titlebar{ background-color:#d4dfff; border:1px solid #4f81bd; border-bottom:0; padding:3px 24px; margin:0; width:auto; line-height:120%; overflow:hidden; text-align:left; font-size:12px}
.src_container .toolbar{ display:inline; font-weight:normal; font-size:100%; float:right; cursor:hand; color:#00f; text-align:left; overflow:hidden}
.toolbar span.button{ display:inline; font-weight:normal; font-size:100%; cursor:hand; color:#00f; text-align:left; overflow:hidden; cursor:pointer;}
.src_container div.clientarea{ background-color:white; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; height:auto; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}
.src_container ol.mainarea{ padding:0 0 0 52px; margin:0; background-color:#f7f7ff !important}
.number_show{ padding-left:52px !important; list-style:decimal outside !important}
.number_show li{ list-style:decimal outside !important; border-left:1px dotted #4f81bd}
.number_hide{ padding-left:0px !important; list-style-type:none !important}
.number_hide li{ list-style-type:none !important; border-left:0px}
ol.mainarea li{ display:list-item !important; font-size:12px !important; margin:0 !important; line-height:18px !important; padding:0 0 0 0px !important; background-color:#f7f7ff !important; color:#4f81bd}
ol.mainarea li pre{color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}
ol.mainarea li pre.alt{ background-color:#f7f7ff !important}
案例:十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。
(btn.disabled = true )
-
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title></title>
-
<script type="text/javascript">
-
var count = 10;
-
//设置计数器
-
var tmrId = setInterval("test()", 1000);
-
function test() {
-
var btn = document.getElementById("btn");
-
if (count > 0) {
-
aa = Date();
-
btn.value = "请仔细阅读(" + count + ")秒";
-
count--;
-
} else {
-
btn.value = "同意";
-
btn.disabled = false;
-
clearInterval(tmrId);
-
}
-
}
-
</script>
-
</head>
-
<body>
-
<div>
-
<input id="btn" type="button" value="设置" disabled="disabled" />
-
</div>
-
</body>
-
</html>
倒计时中 --- 》
练习:加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第三个文本框中。
练习:图片浏览器。
-
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title></title>
-
<script type="text/javascript">
-
window.onload = function () {
-
var ul = document.getElementById("meinv");
-
//获取ul中的a标签
-
var nv = ul.getElementsByTagName("a");
-
for (var i = 0; i < nv.length; i++) {
-
//为ul下的a标签注册onclick事件
-
nv[i].onclick = function () {
-
var img = document.getElementById("i1");
-
//img的地址等于当前点击a标签地址
-
img.src = event.srcElement.href;
-
//防止跳转
-
return false;
-
}
-
}
-
}
-
</script>
-
</head>
-
<body>
-
<ul id="meinv">
-
<li><a href="image/1.jpg">美女1</a></li>
-
<li><a href="image/2.jpg">美女2</a></li>
-
<li><a href="image/3.jpg">美女3</a></li>
-
<li><a href="image/4.jpg">美女4</a></li>
-
</ul>
-
<br />
-
<img id="i1" src="data:image/1.jpg" />
-
</body>
</html>