第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].onclick=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].onclick=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].onclick=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].onmouseenter=function(){ this.style.background="#ccc"; } one[i].onmouseleave=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>