第1个实例:循环单击变色
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>1111</h1>
<h1>222</h1>
<h1>333</h1>
<h1>444</h1>
<h1>555</h1>
</body>
<script>
var one = document.getElementsByTagName('h1');
for(i=0;i<one.length;i++){
one[i].setAttribute('num',0);
one[i].οnclick=function(){
num=parseInt(this.getAttribute('num'));
if(num%2==0){
this.style.background = "#ccc";
}else{
this.style.background = "#f0f";
}
this.setAttribute('num',num+1);
}
}
</script>
</html>
第2个实例:点击显示行号
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>1111</h1>
<h1>222</h1>
<h1>333</h1>
<h1>444</h1>
<h1>555</h1>
</body>
<script>
var one = document.getElementsByTagName('h1');
for(i=0;i<one.length;i++){
one[i].setAttribute('num',i+1);
one[i].οnclick=function(){
this.innerHTML = this.getAttribute('num');
}
}
</script>
</html>
第3个实例:点击标题隐藏、显示内容
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>linux</h1>
<p>linuxlinuxlinuxlinuxlinuxlinuxlinuxlinuxlinuxlinux</p>
<h1>php</h1>
<p>phpphpphpphpphpphpphpphpphpphpphpphpphpphpphpphpphp</p>
<h1>java</h1>
<p>javajavajavajavajavajavajavajavajavajavajavajavajava</p>
</body>
<script>
var one = document.getElementsByTagName('h1');
var ps = document.getElementsByTagName('p');
for(i=0;i<one.length;i++){
one[i].setAttribute('line',i);
one[i].setAttribute('num',0);
ps[i].id = i;
one[i].οnclick=function(){
num=parseInt(this.getAttribute('num'));
line=this.getAttribute('line');
nextp = document.getElementById(line);
if(num%2==0){
//下边的span标签隐藏
nextp.style.display='none';
}else{
//下边的span标签显示
nextp.style.display='block';
}
this.setAttribute('num',num+1);
}
}
</script>
</html>
第4个实例:选择下拉菜单里的值并显示_新方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
</style>
</head>
<body>
<form action="javascript:">
<p>选择城市:</p>
<p>
<select id="sid">
<option value="北京" order="1">北京</option>
<option value="上海" order="5">上海</option>
<option value="广州" order="20">广州</option>
</select>
</p>
</form>
<p><input type="button" value="选择" id="btn"></p>
</body>
<script>
var btn = document.getElementById("btn");
var sid = document.getElementById("sid");
btn.onclick = function(){
idx = sid.selectedIndex;
opts = sid.options;
alert(opts[idx].value); //通过options里的value属性来获取值-value是标准属性
alert("城市排名:"+opts[idx].getAttribute("order")); //通过order属性来获取值-order是非标准属性,所以用getAttribute来获得。
}
</script>
</html>
第4个实例:选择下拉菜单里的值并显示_旧方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
</style>
</head>
<body>
<form action="javascript:">
<p>选择城市:</p>
<p>
<select id="sid">
<option value="请选城市">选择城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
</p>
</form>
<p><input type="button" value="选择" id="btn"></p>
</body>
<script>
var btn = document.getElementById("btn");
var sid = document.getElementById("sid");
btn.onclick = function(){
document.write(this.value = sid.value);
}
</script>
第5个实例:鼠标移入移出特效
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>1111111111111111</h1>
<h1>22222222222222</h1>
<h1>33333333333333</h1>
<h1>44444444444444</h1>
<h1>55555555555555</h1>
</body>
<script>
var one = document.getElementsByTagName('h1');
for(i=0;i<one.length;i++){
one[i].οnmοuseenter=function(){
this.style.background="#ccc";
}
one[i].οnmοuseleave=function(){
this.style.background="#fff";
}
}
</script>
</html>
第6个实例:多选、反选和全不选
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<form action="">
<p>选择爱好:</p>
<p>
<label>
<input type="checkbox" name="" id="">篮球
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id="">足球
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id="">游泳
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id="">逛街
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id="">音乐
</label>
</p>
</form>
<p>
<button id="all">全选</button>
<button id="notall">全不选</button>
<button id="unall">反选</button>
</p>
</body>
<script>
var all = document.getElementById('all');
var notall = document.getElementById('notall');
var unall = document.getElementById('unall');
inputs = document.getElementsByTagName('input');
//全选
all.onclick = function(){
for(i=0;i<inputs.length;i++){
inputs[i].checked = true;
}
}
//全不选
notall.onclick = function(){
for(i=0;i<inputs.length;i++){
inputs[i].checked = false;
}
}
//反选
unall.onclick = function(){
for(i=0;i<inputs.length;i++){
//方法1:三元运算符a?1:2;
//inputs[i].checked = inputs[i].checked?false:true;
//方法2:一元运算符 !
inputs[i].checked = !inputs[i].checked;
}
}
</script>
</html>