JavaScript 学习笔记（四）…….style.display="none"、……"block"、list-style、href="javascript:……"、…….className

利用javascript实现“全选/全不选”实例

function checkAll() {
	var likes=document.getElementsByName("like");
	for(var i=0;i<likes.length;i++) {
		likes[i].checked=true;
	}
}
function noCheckAll() {
	var likes=document.getElementsByName("like");
	for(var i=0;i<likes.length;i++) {
		likes[i].checked=false;
	}
}

<form id="form1" method="post">
<div>
	<input type="checkbox" name="like" value="1" />军事
	<input type="checkbox" name="like" value="2" />人文
	<input type="checkbox" name="like" value="3" />社会
	<input type="checkbox" name="like" value="4" />科学
	<input type="checkbox" name="like" value="5" />政治
	<br />
	<input type="button" οnclick="checkAll()" value="全  选" />
	<input type="button" οnclick="noCheckAll()" value="全不选" />
</div>
</form>

END

 

function ifCheckAll() {
	var likes=document.getElementsByName("like");
	for(var i=0;i<likes.length;i++) {
		var ifChecked=document.getElementById("ifCK");
		if(ifChecked.checked==true) {
			likes[i].checked=true;
		}else {
			likes[i].checked=false;
		}
	}
}

<input id="ifCK" type="checkbox" name="like" οnclick="ifCheckAll()" />
<input type="checkbox" name="like" value="1" />军事
<input type="checkbox" name="like" value="2" />人文
<input type="checkbox" name="like" value="3" />社会
<input type="checkbox" name="like" value="4" />科学
<input type="checkbox" name="like" value="5" />政治

END

动态菜单实例

div{
	border:1px red solid;
	background-color:#FFFFCC;
	width:240px;
	height:180px;
	float:left;}

function show() {
	var obj=document.getElementById("div2");
	if(obj.style.display=="block") {
		obj.style.display="none";
	}else {
		obj.style.display="block";
	}
}

<form id="form1" method="post">
<!--<div id="container">-->
	<div id="div1"><input type="button" value="显示消失" οnclick="show()" /><p>div1</p></div>
	<div id="div2"><p>div2</p></div>
	<div id="div3"><p>div3</p></div>
<!--</div>-->
</form>

 END

a{
	text-decoration:none;}
a:link{
	font-size:14px;}
a:visited{}
a:hover{
	color:#66FF00;
	font-size:15px;}
a:active{}
ul{
	display:none;
	list-style:none;}

function show(obj) {
	var obj=document.getElementById(obj);
	if(obj.style.display=="block") {
		obj.style.display="none";
	}else {
		obj.style.display="block";
	}
}

<form id="form1" method="post">
<div id="container">
<a href="javascript:show('sub1')">学员管理</a>
<ul id="sub1">
	<li>111</li>
	<li>222</li>
	<li>333</li>
</ul>
<br />
<a href="javascript:show('sub2')">其它</a>
<ul id="sub2">
	<li>444</li>
	<li>555</li>
	<li>666</li>
</ul>
</div>
</form>

END

#container{
	width:900px;
	height:600px;
	margin:0 auto;}
ul{
	list-style:none;}
ul li{
	float:left;
	width:50px;
	font-size:16px;
	background-color:#6699CC;
	color:#fff;
	text-align:center;
	font-family:黑体;
	line-height:25px;}
a{
	text-decoration:none;}
a:link{}
a:visited{}
a:hover{}
a:active{}
.over{
	background-color:#3366FF;
	color:#f00;}
.out{
	background-color:#6699CC;
	color:#fff;}
table{}
tr{
	background-color:#6699CC;
	color:#fff;}
td{
	width:100px;
	border:1px #ccc solid;}

function over(obj) {
	/*obj.style.backgrondColor="#3366FF";
	obj.style.color="#f00";*/
	obj.className="over";
}
function out(obj) {
	/*obj.style.backgrondColor="#6699CC";
	obj.style.color="#fff";*/
	obj.className="out";
}
function init() {
	var lis = document.getElementsByTagName("li");
	//alert(lis.length);
	for(var i=0;i<lis.length;i++) {
		lis[i].οnmοuseοver=function() {
			this.className="over";
		}
		lis[i].οnmοuseοut=function() {
			this.className="out";
		}
	}
}
window.οnlοad=init;

<form id="form1" method="post">
<div id="container">
<ul>
	
	<li οnmοuseοver="over(this)" οnmοuseοut="out(this)">首页</li>
	<li οnmοuseοver="over(this)" οnmοuseοut="out(this)">相册</li>
	<li οnmοuseοver="over(this)" οnmοuseοut="out(this)">博客</li>
	<li οnmοuseοver="over(this)" οnmοuseοut="out(this)">关注</li>
	<li οnmοuseοver="over(this)" οnmοuseοut="out(this)">粉丝</li>
	
	<!--
	<li>首页</li>
	<li>相册</li>
	<li>博客</li>
	<li>关注</li>
	<li>粉丝</li>
	-->
</ul>
<br />
<hr />
<table>
	<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">
		<td>111</td>
		<td>222</td>
		<td>333</td>
	</tr>
	<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">
		<td>aaa</td>
		<td>bbb</td>
		<td>ccc</td>
	</tr>
	<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">
		<td>abc</td>
		<td>123</td>
		<td>def</td>
	</tr>
</table>
</div>
</form>

END