DOM – 4.doucument属性
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>
最新文章
- javaweb
- MyBatis魔法堂:Insert操作详解(返回主键、批量插入)
- JAVA编程思想(第四版)学习笔记----11.10 Map
- yaf扩展
- 浅谈Ddos攻击攻击与防御
- Android的快速开发框架afinal
- python编译以及反编译
- win7家庭版升级旗舰版
- Android Dialog 系统样式讲解及透明背景
- Core 发布至Linux
- 【NIO】dawn在buffer用法
- 用Iconv应对NodeJs对称加密技术在汉字编码与NoSQL的一些坑洞
- ggplot2 坐标系相关设置(coord)
- 《深入浅出Netty》【PDF】下载
- ";一不小心就火了";团队采访
- OpenTK学习笔记
- 理解Object.defineProperty函数中的get与set
- lwip协议栈移植(1)
- js中select标签中的option选择
- 2017-12-02 编程语言试验之Antlr4+JavaScript实现";圈4";