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,不可变量引用地址
}