jquery中dom操作和事件的实例学习-表单验证
2011-11-30 00:00
801 查看
很显然,这样做能提升更好的用户体验。
html代码:
jquery代码:
好,现在来详细分析下里面的jquery语句。
先看dom操作的语句
$('form:input') 这个是用来查找form元素下所以的<input>,<textarea>,<select>,<button>元素。
类似的还有$(':text'),$(':checkbox')等。反正只要明白只有在表单内,通过表单选择器都能得到相应的元素。
parent()是找到匹配元素的父节点。find()是来搜索与表达式匹配的元素。remove()是用来删除元素。
is()是用一个表达式来检查当前选择器的元素集合,如果存在至少一个匹配元素,则返回 true。
appendTo()是把一个元素添加到令一个元素中
triggerHandler()这一个特点方法会触发元素上的特定事件。
再看事件的语句。
keyup()是按键向上时触发。
理解每个方法后应该不难理解上面的代码
可能对于这句代码有疑问。 $parent.find(".formtips").remove();
这句是为了保证后面提示的元素只有一个。如果没有这句,就会一直添加提示的元素。
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();
这句是为了保证后面提示的元素只有一个。如果没有这句,就会一直添加提示的元素。
相关文章推荐
- jquery中dom操作和事件的实例学习-表单验证
- jquery中dom操作和事件的实例学习 下拉框应用
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- jquery中dom操作和事件的实例学习 下拉框应用
- jQuery学习笔记 —— 2. DOM操作和 3. 事件绑定
- jQuery学习之旅 Item8 DOM事件操作
- jQuery事件及DOM操作实例
- jQuery学习之旅 8 DOM事件操作
- jQuery学习笔记之DOM操作、事件绑定(2)
- 黑马程序员_学习日记63_710jQuery2(属性选择器、表单选择器、操作Dom节点、事件、动画)
- jQuery学习笔记之DOM操作、事件绑定(2)
- jQuery学习之旅 Item8 DOM事件操作
- jquery操作大全筛选dom事件动画表单等
- 【jQuery学习----表单验证】简单的EasyValidator验证框架
- jQuery 选择器、DOM操作、事件、动画
- jQuery学习之旅 4 细说DOM操作
- JQuery 实例学习系列(1):Ajax登陆验证
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
- 【学习笔记】锋利的jQuery(二)DOM操作