使用Jquery改变验证输入框,并使用display属性进行显示和隐藏
2014-08-13 15:31
936 查看
页面中会隐藏一个div块,通过js判断条件,使之显示,再使之隐藏。实现部分代码如下:
若显示,则隐藏,并删除该div内的所有子元素
html中
<div id="errordiv" class="box-alarm">
</div>
用来显示页面输入框的错误,但开始时和没有错误的时候就不需要显示啦,所以CSS设置div 的 display:none
JS文件中:
显示错误模块:
if(errordiv.style.display==""||errordiv.style.display=="none"){
errordiv.style.display="block";
}
var errordiv=document.createElement("div"); //新建错误提示div,放于errordiv中显示
errorspan.innerHTML="error";
$(errordiv).append(errordiv);
注意:第一次验证,读取CSS设置的display:none,这里的判断是errordiv.style.display=="" 不是“none”哦!
而 在js中由yerrordiv.style.display="none"赋值,则errordiv.style.display的值就为“none”
下面实现 隐藏错误模块,删除已经存在的错误提示
if(errordiv.style.display=="block"){
var errordiv=document.getElementById("errordiv");
errordiv.style.display="none";
$(errordiv).empty();
}
empty()这个函数用来删除被选元素的子元素,而remove()是删除被选元素及其子元素
errordiv 与 $(errordiv)肯定有区别的,但是区别在哪?哪位大牛能指教,我在这里常常混淆。
若显示,则隐藏,并删除该div内的所有子元素
html中
<div id="errordiv" class="box-alarm">
</div>
用来显示页面输入框的错误,但开始时和没有错误的时候就不需要显示啦,所以CSS设置div 的 display:none
JS文件中:
显示错误模块:
if(errordiv.style.display==""||errordiv.style.display=="none"){
errordiv.style.display="block";
}
var errordiv=document.createElement("div"); //新建错误提示div,放于errordiv中显示
errorspan.innerHTML="error";
$(errordiv).append(errordiv);
注意:第一次验证,读取CSS设置的display:none,这里的判断是errordiv.style.display=="" 不是“none”哦!
而 在js中由yerrordiv.style.display="none"赋值,则errordiv.style.display的值就为“none”
下面实现 隐藏错误模块,删除已经存在的错误提示
if(errordiv.style.display=="block"){
var errordiv=document.getElementById("errordiv");
errordiv.style.display="none";
$(errordiv).empty();
}
empty()这个函数用来删除被选元素的子元素,而remove()是删除被选元素及其子元素
errordiv 与 $(errordiv)肯定有区别的,但是区别在哪?哪位大牛能指教,我在这里常常混淆。
相关文章推荐
- jQuery通过改变input的type属性实现密码显示隐藏切换功能
- 使用jquery点击一个实现button或连接,进行以下div显示,在点击隐藏
- jquery validate使用class属性进行字段验证
- 使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
- 使用validate进行表单验证时土方法(appendTo)改变error显示的位置
- 使用jQuery的toggle()方法对HTML标签进行显示、隐藏操作
- 使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
- 使用jquery的验证插件进行客户端验证
- [jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
- 使用jQuery.Validate进行客户端验证(中篇) [1]
- [jQuery]使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由-目录及简介
- [jQuery]使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由-目录及简介
- jquery控制css的display(控制元素的显示与隐藏)
- [jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
- 使用JQuery validate插件进行客户端验证
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(中级篇-上)——不使用微软验证控件的理由
- 使用jQuery.Validate进行客户端验证
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由