為了須要，最近開始學習JS相關知識。基本的方式是通過看視訊以及查閱相關手冊。并動手實踐，親手寫出每一個小案例，以下是相關代碼（每一個案例用分隔線隔開）。
<!DOCTYPE html>
<html>
<head>
<title>設定一個元素是否可見</title>
<meta charset="utf-8">
</head>
<style type="text/css">
.tips{width:370px;background:#CCC;display:none;}
</style>
<script type="text/javascript">
//定義一個函數
function show_or_hide()
{
//通過id來擷取一個元素
var objl =document.getElementById("get_p");
// 這樣的是行内樣式的寫法,形如：<p style="display:none;"></p>
if(objl.style.display == 'block')
objl.style.display = 'none';
else
objl.style.display = 'block';
}
</script>
<body>
<!-- 加入點選事件 -->
<input type="button" value="隐藏/顯示" onclick="show_or_hide()" title="能夠點選我一下">
<p id="get_p" class="tips" >
從前有座山，山上有座廟。廟裡有個帥哥寫代碼
</p>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>滑鼠移入移出事件</title>
<meta charset="utf-8">
</head>
<style type="text/css">
#get_input{background:yellow;}
</style>
<script type="text/javascript">
function over_bg_color()
{
var obj = document.getElementById('get_input');
// 這樣的是行内樣式的寫法,形如：<p style="background:red;"></p>
obj.style.background='red';
}
function out_bg_color()
{
var obj = document.getElementById('get_input');
obj.style.background='yellow';
}
</script>
<body>
<!-- 加入滑鼠移入移出事件 -->
<input id="get_input" type="button" value="隐藏/顯示"onmouseover="over_bg_color()" onmouseout="out_bg_color()" >
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>二級菜單</title>
<meta charset="utf-8">
<style type="text/css">
#nav{height:50px;background:red;margin:50px auto 0px;}
a
{
float:left;width:250px;line-height:50px;
text-align:center;color:#FFF;text-decoration:none;
}
#detailed
{
width:250px;height:200px;background:red;
position:relative;border-top:2px solid yellow;
display:none;left:0px;
}
</style>
<script type="text/javascript">
function show_detailed(index)
{
var obj = document.getElementById('detailed');
// 設定元素可見
obj.style.display='block';
var move_left = 250*index-250;
move_left = move_left+"px";//将結果轉換成字元串
obj.style.left =move_left;
}
function hide_detailed()
{
var obj = document.getElementById('detailed');
obj.style.display='none';
}
</script>
</head>
<body>
<div id="nav">
<!-- 這樣的直接在行内為元素加入事件不美觀，能夠寫在JS裡面 -->
<a href="#" onmouseover="show_detailed(1)"onmouseout="hide_detailed()"> 首頁</a>
<a href="#" onmouseover="show_detailed(2)"onmouseout="hide_detailed()">家電</a>
<a href="#" onmouseover="show_detailed(3)"onmouseout="hide_detailed()">手機</a>
<a href="#" onmouseover="show_detailed(4)"onmouseout="hide_detailed()">付款方式</a>
<a href="#" onmouseover="show_detailed(5)"onmouseout="hide_detailed()">客服</a>
</div>
<div id="detailed">
<a href="#">一</a>
<a href="#">二</a>
<a href="#">三</a>
<a href="#">四</a>
</div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>改變物體外觀</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:200px;}
#change_box{width:300px;height:300px;background:#CCC;}
</style>
<script type="text/javascript">
function change_color(want_color)
{
var obj = document.getElementById('change_box');
obj.style.background = want_color;
}
function change_size(width_size,height_size)
{
var obj = document.getElementById('change_box');
obj.style.width = width_size+'px';
obj.style.height = height_size+'px';
}
</script>
</head>
<body>
<input type="button" value="變黃" onclick="change_color('yellow')">
<input type="button" value="變綠" onclick="change_color('green')">
<input type="button" value="變紅" onclick="change_color('red')">
<input type="button" value="變大" onclick="change_size(500,600)">
<input type="button" value="變小" onclick="change_size(100,200)">
<div id="change_box"></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>JS為元素加入事件</title>
<meta >
<meta charset="utf-8">
</head>
<body>
<input id="btn1" type="button" value="按鈕" onclick="abc()" />
<script type="text/javascript">
// 以下這個擷取元素的代碼要寫在該目标 元素的以下
// 由于程式是從上到下運作的。不然的話會報錯
var obtn = document.getElementById('btn1');
function abc()
{
alert('這是一個彈窗');//能夠是單引號。也能夠是雙引號
}
//obtn.onclick=abc;//這樣的是直接在JS裡面為元素加入事件的寫法
//這裡函數不能加括号
</script>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>全選反選按鈕</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:150px;background:#CCC;}
</style>
</head>
<body>
<input type="button" id="btn_all" value="全選"></input>
<input type="button" id="btn_reversed" value="反選"></input>
<input type="button" id="btn_no" value="都不選"></input>
<div id="ware">
<input type="checkbox" ></input><input type="checkbox" ></input>
<input type="checkbox" ></input><input type="checkbox" ></input>
<input type="checkbox" ></input><input type="checkbox" ></input>
</div>
</body>
<script type="text/javascript">
function choose_all()
{
var obj = document.getElementById('ware');
//從一個目标元素中再擷取元素
//以下是通過html元素名字來擷取，結果是數組
var ch_b = obj.getElementsByTagName('input');
for(var i=0; i <= ch_b.length; i++)
//以下的語句相似于：<input type="checkbox" checked="true"></input>
ch_b[i].checked = true;
}
function choose_no()
{
var obj = document.getElementById('ware');
var ch_b = obj.getElementsByTagName('input');
for(var i=0; i <= ch_b.length; i++)
ch_b[i].checked = false;
}
function choose_reversed()
{
var obj = document.getElementById('ware');
var ch_b = obj.getElementsByTagName('input');
for(var i=0; i <= ch_b.length; i++)
ch_b[i].checked = ( ch_b[i].checked == true )? false:true;
}
//我并沒有直接document.getElementById('');這樣擷取元素
//按理說要先擷取元素，再來操作。不然是不行的，
//我也不知道為什麼我的這段代碼卻能夠
btn_all.onclick = choose_all;
btn_no.onclick = choose_no;
btn_reversed.onclick = choose_reversed;
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>頁籤</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:150px;}
#xuan_xiang_ka{width:208px;height:350px;}
.title{height:50px;}
.title input{height:50px;width:50px;float:left;border:1px solid #CCC;margin-left:2px;}
.active{background:#5CB85C;}
#content_box{background:yellow;}
#content_box div{display:none;}/*設定子元素不可見*/
</style>
</head>
<body>
<div id="xuan_xiang_ka">
<div class="title">
<input class="active" type="button" value="新聞1"></input>
<input type="button" value="新聞2"></input>
<input type="button" value="新聞3"></input>
<input type="button" value="新聞4"></input>
</div>
<div id="content_box" >
<div style="display:block;">
從前有座山1
</div>
<div>
從前有座山2
</div>
<div>
從前有座山3
</div>
<div>
從前有座山4
</div>
</div>
</div>
</body>
<script type="text/javascript">
var an_niu = document.getElementsByTagName('input');
var temp =document.getElementById('content_box');
var wen_zhang =temp.getElementsByTagName('div');
for(var i=0; i < an_niu.length; i++)
{
an_niu[i].index = i;//為每一個按鈕加入序号
an_niu[i].onclick = function ()
{
for(var j=0; j < an_niu.length; j++)
{
an_niu[j].className = '';//清除類
wen_zhang[j].style.display = 'none';
}
this.className = 'active';//目前按鈕加入活動類
wen_zhang[this.index].style.display ='block';//目前頁籤可見
//思路：在點選一個頁籤之前，把其它的頁籤都影藏，并清除類
//之後再為目前的頁籤加入屬性
}
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>innerHTML練習</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:50px;}
div{border:1px solid red;width:260px;height:200px;padding:20px;}
</style>
</head>
<body>
<input id="text1" type="text"></input>
<input id="btn1" type="button" value="設定文字"></input>
<div id="div1">
從前有座山
</div>
</body>
<script type="text/javascript">
var btn1 = document.getElementById('btn1');
var text1 = document.getElementById('text1');
var div1 = document.getElementById('div1');
btn1.onclick = function ()
{
// 讓div裡面的文字是text裡面的文字
div1.innerHTML = text1.value;
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>月曆頁籤</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0px;padding:0px;}
.ware{background:yellow;padding:15px 0px 15px 15px;width:285px;margin:100px auto;overflow:hidden;}
.month{overflow:hidden;}
span{float:left;width:80px;line-height:80px;text-align:center;font-size:16px;color:#FFF;font-weight:bold; margin-right:15px;margin-bottom:15px; background:#999;}
.tips{background:red;clear:both;width:240px;padding:15px;font-weight:bold;color:#FFF;}
.active{background:#FFF;color:black;}
</style>
</head>
<body>
<div class="ware">
<div class="month">
<span class="active">1</span><span>2</span><span>3</span>
<span>4</span><span>5</span><span>6</span>
<span>7</span><span>8</span><span>9</span>
<span>10</span><span>11</span><span>12</span>
</div>
<div id="setText" class="tips">
</div>
</div>
</body>
<script type="text/javascript">
var obj_month = document.getElementsByTagName('span');
var objTips = document.getElementById('setText');
var arr =[
'這個月有元旦',
'我們一起過春節吧',
'這個月有38婦女節',
'4月分有什麼節日呢？',
'哈哈勞動節快到了',
'可惜兒童節不屬于我們',
'貌似有建黨節吧',
'這個月有建軍節吧麼麼哒',
'教師節到了。給老師一份祝福吧',
'一起看閱兵式吧',
'光棍節到了，有木有非常傷心～',
'聖誕節不是中國的～'
];
// 預設顯示第一個月
objTips.innerHTML = '<p>1月活動'+'</p>'+arr[0];
for(var i=0; i < obj_month.length; i++)
{
obj_month[i].index = i;
obj_month[i].onmousemove = function ()
{
for(var j=0; j < obj_month.length; j++)
obj_month[j].className = '';
this.className = 'active';
objTips.innerHTML = '<p>'+(this.index+1)+'月活動'+'</p>'+arr[this.index];
}
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>數組周遊</title>
<meta charset="utf-8">
</head>
<body>
</body>
<script type="text/javascript">
var colorS =['yellow','blue','green','pink','black'];
for( var x in colorS)//x 是下标
{
alert(colorS[x]);
//alert(x);
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>屬性用變量取代</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:400px; padding-top:200px;}
#box{width:300px;height:300px;background:yellow;}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="點選我一下下～" id="btn"></input>
</body>
<script type="text/javascript">
var value = 'background';
var oBtn = document.getElementById('btn');
var oBox = document.getElementById('box');
oBtn.onclick = function ()
{
oBox.style[value] = 'red';
//等同于 oBox.style.background = 'red';
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>依據參數個數實作對應功能</title>
<meta charset="utf-8">
</head>
<body>
<div id="J_box" style="width:300px;height:240px;background:#CCC;margin:100px;"></div>
</body>
<script type="text/javascript">
var oBox = document.getElementById('J_box');
function css ()
{
if(arguments.length == 2)
alert(arguments[0].style[arguments[1]]);
if(arguments.length == 3)
arguments[0].style[arguments[1]] = arguments[2];
}
css(oBox,'width','800px');
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>擷取非行間樣式</title>
<meta charset="utf-8">
<style type="text/css">
#J_box{width:300px;height:240px;background:#CCC;margin:100px;}
</style>
</head>
<body>
<div id="J_box"></div>
</body>
<script type="text/javascript">
var oBox = document.getElementById('J_box');
if(oBox.currentStyle)
alert(oBox.currentStyle.width);//IE
else
alert(getComputedStyle(oBox,false).width);//FF
//採用變量的寫法 alert(getComputedStyle(oBox , false)['width']);
</script>
</html>
<script type="text/javascript">
// 函數封裝
// function getStyle(obj,name)
// {
// if( obj.currentStyle)
// return obj.currentStyle[name];//obj.currentStyle.width;
// else
// return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width;
// }
</script>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>數組的基本操作</title>
<meta charset="utf-8">
</head>
<body>
</body>
<script type="text/javascript">
var arr = [1,3,5,7,9,10];
var add = [100,200,300,400,500];
//arr.push(6);//尾部追加一個元素
//arr.pop();//尾部删除一個元素
//arr.unshift('lijun');//頭部追加元素
//arr.shift();//頭部删除一個
//arr.splice(3,2)//删除元素 起點 長度 從0開始算
//arr.splice(3,0);//從下标3開始，依次删除0個元素
//arr.splice(3,2,6,7);//從下标3開始。依次删除2個。然後加入6,7元素
//arr.concat(add);//兩個字元串連接配接，可是兩個數組并沒有變
//alert(arr.join('***'));//記得加引號，相鄰數組元素間加入分隔符,不會真的改變數組
/*var temp = ['aaa','xxx','dddd','ssss','eeee','bbbbb'];
alert(temp.sort());*/ //數組排序，僅僅能排字元串
/*var temp =[6,7,45,8,6,10,7,8,45,1,14,89,39];
alert(temp.sort(
function(num1,num2)
{
return num1 - num2;
}
));*/ //數組排序，排數字
// 數組排序的時候要依據實際情況修改，比如傳遞的是li或者其它元素，
// 要把最後在比較的是數值比較
alert(arr);
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>定時器的使用</title>
<meta charset="utf-8">
</head>
<body>
<input id="kai" type="button" value="開啟"></input>
<input id="guan" type="button" value="關閉"></input>
</body>
<script type="text/javascript">
//setInterval 間隔
//setTimeout 延時
var okai = document.getElementById('kai');
var oguan = document.getElementById('guan');
function say()
{
alert('您好~');
}
okai.onclick = function ()
{
temp = setInterval(say,2500);//函數僅僅寫名字不加括号，變量也是全局的，不然等下以下不能關閉
}
oguan.onclick = function()
{
clearInterval(temp);//這個被關閉的變量是全局的。不要定義成局部的。
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>數字時鐘。須要相關圖檔輔助</title>
<meta charset="utf-8">
<style type="text/css">
body{background:#555;}
.timeBox{width:300px;margin:200px auto;}
span{font-size: 50px;}
</style>
</head>
<body>
<div class="timeBox">
<img src="./images/0.png"><img src="./images/0.png">
<span>:</span>
<img src="./images/0.png"><img src="./images/0.png">
<span>:</span>
<img src="./images/0.png"><img src="./images/0.png">
</div>
</body>
<script type="text/javascript">
function setNumberToStr(number)
{
// 把數字弄成兩位數的，并轉換成字元串
if(number < 10)
return '0' + number;
else
return '' + number;
}
// 擷取系統時間
function realTime()
{
var oDate = new Date();
var hour = oDate.getHours();//擷取小時
var minute = oDate.getMinutes();//擷取分鐘
var second = oDate.getSeconds();//擷取秒
return setNumberToStr(hour) + setNumberToStr(minute) + setNumberToStr(second);
}
function setTime()
{
var otime = document.getElementsByTagName('img');
var howTime = realTime();//目前時間 轉換成字元串格式後存入數組
for(var i=0; i < otime.length; i++)
otime[i].src = './images/'+howTime[i]+'.png';
}
setTime();//這個是為了解決重新整理的時候所有顯示０的情況，也能夠把一秒設定更小
setInterval(setTime,1000);
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>字元串查找、系統時間</title>
<meta charset="utf-8">
</head>
<body>
</body>
<script type="text/javascript">
var times = "我是一個大帥哥";
alert(times.charAt(0));//用來查找字元串中某個坐标中的内容
// 不能是數組。僅僅能是字元串
var odate = new Date();
//alert(odate.getFullYear());
//alert(odate.getMonth()+1);//月份少1
// alert(odate.getDate());//星期幾
//alert(odate.getHours());//擷取小時
//alert(odate.getMinutes());//擷取分鐘
//alert(odate.getSeconds());//擷取秒
//alert(odate.getDay());//周日是０
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>孩子節點</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function()
{
var oUl = document.getElementById('ul1');
//alert(oUl.childNodes.length);//節點的個數，會包含文本節點。
//for(var i=0; i < oUl.childNodes.length; i++)
//alert(oUl.childNodes[i].nodeType);//節點的類型 文本節點->3 元素節點->1
//alert(oUl.children.length);節點的個數，不包含文本節點。
for(var i=0; i < oUl.children.length; i++)
oUl.children[i].style.background = 'red';
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
</html>
<!--
DOM節點
childNodes children nodeType
parentNode offsetParent
-->
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>父節點</title>
<meta charset="utf-8">
<style type="text/css">
body{padding-left:400px;padding-top:200px;}
a{margin-left:100px;}
</style>
<script type="text/javascript">
window.onload = function()
{
//var oUl = document.getElementById('ul1');
//alert(oUl.children[i].parentNode);//錯誤的寫法//////////////////////////////
//var oSoon = document.getElementById('soon');
//alert(oSoon.parentNode);//擷取某個元素的父節點
var oA = document.getElementsByTagName('a');
for(var i=0; i < oA.length; i++)
{
oA[i].onclick = function()
{
this.parentNode.style.display = 'none';
//a的父親就是li，讓li隐藏
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>從前有座山
<a href="#">隐藏</a>
</li>
<li>山上有座廟
<a href="#">隐藏</a>
</li>
<li>廟裡有個老和尚
<a href="#">隐藏</a>
</li>
<li>老和尚對着小和尚說
<a href="#">隐藏</a>
</li>
<li>我們這裡有座山
<a href="#">隐藏</a>
</li>
<li>裡面有個老和尚
<a href="#">隐藏</a>
</li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>父級的元素中</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function()
{
// 通過html标簽來擷取元素。傳回的是數組。
//能夠在後面加坐标指定要擷取某個元素
var demo1 = document.getElementsByTagName('ul');
var demo2 = document.getElementsByTagName('li');
alert(demo2[2].offsetParent);//父級的元素中（有定位屬性的父級的元素中）
}
</script>
</head>
<body>
<ul>
<li>從前有座山</li>
<li>山上有座廟</li>
<li>廟裡有個老和尚</li>
<li>老和尚對着小和尚說</li>
<li>我們這裡有座山</li>
<li>裡面有個老和尚</li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>孩子節點</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function()
{
// 這是比較便捷的寫法，讓某些類擁有一些樣式
// var oLi = document.getElementsByTagName('li');
// for(var i=0; i < oLi.length; i++)
// if(oLi[i].className == 'bgRed')
// oLi[i].style.background = 'red';
var oul = document.getElementsByTagName('ul')[0];
for(var i=0; i < oul.childNodes.length; i++)
if(oul.childNodes[i].className == 'bgRed')
oul.childNodes[i].style.background = 'red';
}
</script>
</head>
<body>
<ul>
<li class="bgRed">從前有座山</li>
<li>山上有座廟</li>
<li>廟裡有個老和尚</li>
<li class="bgRed">老和尚對着小和尚說 </li>
<li>我們這裡有座山</li>
<li class="bgRed">裡面有個老和尚</li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>代碼塊封裝思想</title>
<meta charset="utf-8">
<script type="text/javascript">
function getByClass(oParent,oClass)
{
var oReturn = [];//存放結果
// 擷取該元素以下的所有元素
var oElem = oParent.getElementsByTagName('*');
for(var i=0; i < oElem.length; i++)
if(oElem[i].className == oClass)
oReturn.push(oElem[i]);
return oReturn;
}
window.onload = function()
{
var oul = document.getElementsByTagName('ul')[0];
//0搜集的結果都放在這裡
var oChange = getByClass(oul,'bgRed');
for(var i=0; i <oChange.length; i++)
oChange[i].style.background = 'red';
}
</script>
</head>
<body>
<ul>
<li class="bgRed">從前有座山</li>
<li>山上有座廟</li>
<li>廟裡有個老和尚</li>
<li class="bgRed">老和尚對着小和尚說 </li>
<li>我們這裡有座山</li>
<li class="bgRed">裡面有個老和尚</li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>DOM 方式操作元素屬性</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function()
{
var oa =document.getElementsByTagName('a')[0];
// 擷取：getAttribute(名稱)
// 設定：setAttribute(名稱，值)
// 删除： removeAttribute(名稱)
oa.setAttribute('title','哈哈~');
}
</script>
</head>
<body>
<a href="#">我非常帥</a>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>加入節點</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementsByTagName('input')[1];
var oTxt = document.getElementsByTagName('input')[0];
var oUl = document.getElementsByTagName('ul')[0];
oBtn.onclick = function()
{
var oLi = document.createElement('li');//建立一個元素
var inBeforeLi = document.getElementsByTagName('li')[0];
if(inBeforeLi)
oUl.insertBefore(oLi,inBeforeLi)//在某個元素之前追加
else
oUl.appendChild(oLi);//末尾追加
oLi.innerHTML = oTxt.value;
}
}
</script>
</head>
<body>
<input type="text"></input>
<input type="button" value="建立li"></input>
<ul>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>删除節點</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
var oA = document.getElementsByTagName('a');
var oUl = document.getElementsByTagName('ul')[0];
for(var i=0; i < oA.length; i++)
oA[i].onclick = function()
{
oUl.removeChild(this.parentNode);
}
}
</script>
</head>
<body>
<ul>
<li>111<a href="#">删除</a></li>
<li>222<a href="#">删除</a></li>
<li>333<a href="#">删除</a></li>
<li>444<a href="#">删除</a></li>
<li>555<a href="#">删除</a></li>
<li>666<a href="#">删除</a></li>
<li>777<a href="#">删除</a></li>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>節點碎片</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
// 建立一個節點碎片
var temp = document.createDocumentFragment();
for(var i=0; i<25; i++)
{
var oLi = document.createElement('li');
// 向節點碎片中加入孩子節點
temp.appendChild(oLi);
}
// 直接給要加入節點的元素加入 已經存在的碎片
document.getElementsByTagName('ul')[0].appendChild(temp);
}
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>表格基本屬性</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
var oTab = document.getElementsByTagName('table')[0];
// alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
var oldColor = '';//記錄原來的顔色
// 表格隔行換色，滑鼠移入換色，移出換回原來的顔色
for(var i=0; i < oTab.tBodies[0].rows.length; i++)
{
if( i % 2 )//奇偶行數
oTab.tBodies[0].rows[i].style.background = '#CCC';
else
oTab.tBodies[0].rows[i].style.background = '#555';
oTab.tBodies[0].rows[i].onmouseover = function()
{
oldColor = this.style.background;
this.style.background = 'green';
}
oTab.tBodies[0].rows[i].onmouseout = function()
{
this.style.background = oldColor;
}
}
}
</script>
</head>
<body>
<table border="1px" width="500px">
<thead>
<td>ID</td ><td>姓名</td><td>年齡</td>
</thead>
<tbody>
<tr>
<td>1</td><td>李俊</td><td>18</td>
</tr>
<tr>
<td>2</td><td>李白</td><td>96</td>
</tr>
<tr>
<td>3</td><td>小明</td><td>17</td>
</tr>
<tr>
<td>4</td><td>李俊</td><td>18</td>
</tr>
<tr>
<td>5</td> <td>李白</td><td>96</td>
</tr>
<tr>
<td>6</td><td>小明</td><td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>表格自己主動添加行數</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
// 直接讀取某行某列的值
// alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
var oTab = document.getElementsByTagName('table')[0];
var oname = document.getElementsByTagName('input')[0];
var oage = document.getElementsByTagName('input')[1];
var obtn = document.getElementsByTagName('input')[2];
var id = oTab.tBodies[0].rows.length;
obtn.onclick = function()
{
// 建立1個行
var oTr = document.createElement('tr');
// 建立第1個列
var oTd_1 = document.createElement('td');
oTd_1.innerHTML = ++id;
// 加入到行裡面
oTr.appendChild(oTd_1);
//建立第2個列
var oTd_2 = document.createElement('td');
oTd_2.innerHTML = oname.value;
oTr.appendChild(oTd_2);
//建立第3個列
var oTd_3 = document.createElement('td');
oTd_3.innerHTML = oage.value;
oTr.appendChild(oTd_3);
// 加入一行行
oTab.appendChild(oTr);
}
}
</script>
</head>
<body style="padding-left:400px;padding-top:100px;">
姓名：<input type="text"></input>
年齡：<input type="text"></input>
<input type="button" value="加入"></input>
<table border="1px" width="500px">
<thead>
<td>ID</td ><td>姓名</td><td>年齡</td>
</thead>
<tbody>
<tr>
<td>1</td><td>李俊</td><td>18</td>
</tr>
<tr>
<td>2</td><td>李白</td><td>96</td>
</tr>
<tr>
<td>3</td><td>小明</td><td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>表格自己主動删除單元格</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
var oTab = document.getElementsByTagName('table')[0];
// 這個凝視是在為表格加入行的時候，加入删除操作單元格的時候的代碼
// 貌似通過JS加入的單元格并不會有點選事件
// var oTd_4 = document.createElement('td');
// oTd_4.innerHTML = '<a href="#">删除</a>';
// oTr.appendChild(oTd_4);
// oTab.appendChild(oTr);
var oA = oTab.getElementsByTagName('a');
for(var i=0; i < oA.length; i++)
{
oA[i].onclick = function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
}
}
</script>
</head>
<body style="padding-left:400px;padding-top:100px;">
<table border="1px" width="500px">
<thead>
<td>ID</td ><td>姓名</td><td>年齡</td><td>編輯</td>
</thead>
<tbody>
<tr>
<td>1</td><td>李俊</td><td>18</td><td><a href="#">删除</a></td>
</tr>
<tr>
<td>2</td><td>李白</td><td>96</td><td><a href="#">删除</a></td>
</tr>
<tr>
<td>3</td><td>小明</td><td>17</td><td><a href="#">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>表格搜尋</title>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload = function()
{
var oTab = document.getElementsByTagName('table')[0];
var obtn = document.getElementsByTagName('input')[1];
var oname = document.getElementsByTagName('input')[0];
obtn.onclick = function()
{
for(var i=0; i< oTab.tBodies[0].rows.length; i++)
{
// 輸入要搜尋的名字，必須全然一樣才幹比對
if(oname.value == oTab.tBodies[0].rows[i].cells[1].innerHTML)
oTab.tBodies[0].rows[i].style.background = 'yellow';
else
oTab.tBodies[0].rows[i].style.background = '';
}
}
//忽略大寫和小寫搜尋
// obtn.onclick = function()
// {
// for(var i=0; i< oTab.tBodies[0].rows.length; i++)
// {
// var sTxt = oname.value;
// var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML;
// if( sTxt.toLowerCase() == sTab.toLowerCase() )
// oTab.tBodies[0].rows[i].style.background = 'yellow';
// else
// oTab.tBodies[0].rows[i].style.background = '';
// }
// }
// 單個keyword模糊搜尋
// obtn.onclick = function()
// {
// for(var i=0; i < oTab.tBodies[0].rows.length; i++)
// {
// var oTabName = oTab.tBodies[0].rows[i].cells[1].innerHTML;
// if( oTabName.search(oname.value) != -1)
// oTab.tBodies[0].rows[i].style.background = 'blue';
// else
// oTab.tBodies[0].rows[i].style.background = 'red';
// }
// }
// 多keyword模糊搜尋
// obtn.onclick = function()
// {
// for(var i=0; i < oTab.tBodies[0].rows.length; i++)
// {
// var oTabName = oTab.tBodies[0].rows[i].cells[1].innerHTML;
// var arr = oname.value.split(' ');//用空格把字元串切割
// oTab.tBodies[0].rows[i].style.background = '';//不要寫在以下的if else中
// for(var j=0; j < arr.length; j++)
// {
// if( oTabName.search(arr[j]) != -1 )
// oTab.tBodies[0].rows[i].style.background = 'blue';
// }
// }
// }
}
</script>
</head>
<body style="padding-left:400px;padding-top:100px;">
姓名：<input type="text"></input>
<input type="button" value="搜尋"></input>
<table border="1px" width="500px">
<thead>
<td>ID</td ><td>姓名</td><td>年齡</td>
</thead>
<tbody>
<tr>
<td>1</td><td>李俊</td><td>18</td>
</tr>
<tr>
<td>2</td><td>李白</td><td>96</td>
</tr>
<tr>
<td>3</td><td>小明</td><td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>字元串查找</title>
<meta charset=" utf-8">
<script type="text/javascript">
var str = 'asdfghjkl';
alert(str.search('kl'));//查找這個k在字元串中的第幾個位置。7 沒有-1
</script>
</head>
<body>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>加入孩子節點，會先删除原來所在的位置</title>
<meta charset=" utf-8">
<style type="text/css">
ul{background:yellow;margin-bottom:20px;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementsByTagName('input')[0];
var oUl1 = document.getElementsByTagName('ul')[0];
var oUl2 = document.getElementsByTagName('ul')[1];
oBtn.onclick = function()
{
//var temp = oUl1.getElementsByTagName('li')[0];
var temp = oUl1.children[0];
oUl2.appendChild(temp);//這個是在一個元素加入孩子節點。
//oUl1.removeChild(temp);//這步驟能夠省略。上面那個代碼會先删除再加入。
}
}
</script>
</head>
<body style="padding-left:400px;padding-top:100px;">
<ul>
<li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li>
<li>7</li><li>8</li><li>9</li>
</ul>
<ul></ul>
<input type="button" value="移動"></input>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>清單排序</title>
<meta charset=" utf-8">
<style type="text/css">
ul{background:yellow;margin-bottom:20px;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementsByTagName('input')[0];
var oLi = document.getElementsByTagName('ul')[0].children;
var arr = [];
oBtn.onclick = function()
{
for(var i=0; i < oLi.length; i++)
arr[i] = oLi[i];
//alert(arr[0] === oLi[0]);
arr.sort(function(li1,li2){return parseInt(li1.innerHTML) - parseInt(li2.innerHTML);});
for(var i=0; i < arr.length; i++)
document.getElementsByTagName('ul')[0].appendChild(arr[i]);
// 原本以為排序好後清單的長度是原來的兩倍
// 可是不是。預計是加入孩子節點的時候，就把原來的節點給删除了。 ![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)