javascript DOM 控制標籤小結

前言：近些天感受到了DOM建立標籤的好處，就大量的運用了這塊，也遇到了些許問題，現總結下！

驗證事件

HTML:

<ul>

<li>

<input type="text" id="txtVali" runat="server"/>

</li>

<li><input type="submit" id="btn" runat="server" value="Enter"/>

</ul>

SCRIPT:

// 說明：如果此時txtVali文字框是空，給出重新輸入的提示。

<script type="text/javascript">

function $(str){return document.getElementById(str);}

$('<%=btn.ClientID%>').onclick=function()//<%=%>指令碼裡是可以用這個寫法綁定背景資料值的，也就是說可以用這個寫法結合指令碼編寫

//給btn按鈕賦點擊事件賦於了一個實體

{

 if($('<%=txtVali.ClientID%>').value=="")//如果文本值是空

{

 var span=document.createElement("span");

span.className="spMes";//設定span的樣式

span.id="span";

span.innerHTML="小子，你要給文字框輸入一個值呀！";

if($("span")==null)//這裡要做個判斷不然會無限添加的，很雷人！因為如果你建立一個sapn並且設定了ID為span用$(str)方法就能在頁面中找到

$('<%=txtVali.ClientID%>').parentNode.appendChild(span);//找到文字框的父節點並追加節點sapn

return false;
}

return true;
}

//當我們發現提示要給文字框輸入值時，在文字框裡輸入了值後就提示資訊就要隱藏掉的，不然會給我會覺的這程式寫的不人性化

$('<%=txtVali.ClientID%>').onclick=function()

{

 $('<%=txtVali.ClientID%>').parentNode.removeChild($("span"));//這種寫法相容性很高通過找到文字框的父節點去移除節點sapn

document.body.removeChild($("span"));//這種寫法相容性要差些，有時會報參數不正確！
}

</script>

 javascript結合後台代碼進行編程

<input type=“text" id="txt" onclick="if('<%= Method()%>'=='True'){alert('可以執行點擊事件');}else{alert('丫的沒許可權呀！')}"/>

C#

public bool Method()

{

 if(Request.QueryString["UID"]==null)

{

 return false;
}

return true;

}

 給多個標籤賦於事件的方法

var items=document.getElementsByTagName("li");

for(var i=0;i<items.length;i++)

{

items[i].onmouseover=function(this){this.className="red";}

items[i].onmouseout=function(this){this.className="fff";}//我在這裡就把items[i]放了進來，結果只有最後一個li有事件。要改成this，不可變數引用地址

}