jquery中dom操作和事件的实例学习-表单验证

很显然，这样做能提升更好的用户体验。 html代码：复制代码代码如下: <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="required"/> </div></form> jquery代码：复制代码代码如下: <script type="text/javascript"> $(function(){ $('form :input').blur(function(){ var $parent=$(this).parent(); $parent.find(".formtips").remove(); if($(this).is('#username')) { if(this.value==""||this.value.length<6){ var msg="<span class='formtips error'>请输入至少6位用户名</span>"; $(msg).appendTo($parent); }else{ var msg="<span class='formtips success'>输入正确</span>"; $(msg).appendTo($parent); } } }).keyup(function(){ $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); }) }) </script> 好，现在来详细分析下里面的jquery语句。先看dom操作的语句 $('form:input') 这个是用来查找form元素下所以的<input>,<textarea>,<select>,<button>元素。类似的还有$(':text'),$(':checkbox')等。反正只要明白只有在表单内，通过表单选择器都能得到相应的元素。 parent()是找到匹配元素的父节点。find()是来搜索与表达式匹配的元素。remove()是用来删除元素。 is()是用一个表达式来检查当前选择器的元素集合，如果存在至少一个匹配元素，则返回 true。 appendTo()是把一个元素添加到令一个元素中 triggerHandler()这一个特点方法会触发元素上的特定事件。再看事件的语句。 keyup()是按键向上时触发。理解每个方法后应该不难理解上面的代码可能对于这句代码有疑问。 $parent.find(".formtips").remove(); 这句是为了保证后面提示的元素只有一个。如果没有这句，就会一直添加提示的元素。

　　推荐阅读

　　js获取浏览器的可视区域尺寸的实现代码

测试例子：复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" >>>详细阅读

本文标题：jquery中dom操作和事件的实例学习-表单验证

地址：http://www.17bianji.com/kaifa2/JS/23889.html

1/2 1