web前端之锋利的jQuery六：jQuery对表单的操作
来源：互联网 发布：傅海峰张楠进四强 知乎 编辑：程序博客网 时间：2024/06/05 09:00
web前端之锋利的jQuery六：jQuery对表单的操作
一个表单主要是由三部分组成：
（1）表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法
（2）表单域：包含文本框、密码框、隐藏框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
（3）表单按钮：包括提交按钮、复位按钮和一般按钮，用于间数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。
1.单行文本框应用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>jQuery对表单的操作</title> <script type="text/javascript" src="../js/jquery-3.1.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(":input").focus(function(){//当输入域获得焦点 (focus) $(this).addClass("focus"); }).blur(function(){//当输入域失去焦点 (blur) $(this).removeClass("focus"); }); }); </script> <style type="text/css"> .focus{ border: 1px solid #f00; background: #fcc; } </style></head><body> <form action="#" method="POST" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="username">名称：</label> <input id="username" type="text"> </div> <div> <label for="pass">密码：</label> <input id="pass" type="password"> </div> <div> <label for="msg">详细信息：</label> <textarea id="msg"></textarea> </div> </fieldset> </form></body></html>2.多行文本框应用：
（1）高度的变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>jQuery对表单的操作</title> <script type="text/javascript" src="../js/jquery-3.1.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $comment=$("#comment");//获得评论框 $('.bigger').click(function(){ if(!$comment.is(":animated")){ if($comment.height()<500){ $comment.animate({height:"+=50"},400); } } }); $('.smaller').click(function(){ if(!$comment.is(":animated")){ if($comment.height()>50){ $comment.animate({height:"-=50"},400); } } }); }); </script></head><body> <form> <div class="msg"> <div class="msg_caption"> <span class="bigger">放大</span> <span class="smaller">缩小</span> </div> <div> <textarea id="comment" rows="8" cols="20"> 多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高 </textarea> </div> </div> </form></body></html>如改变滚动条高度变化就使用scrollTop方法来进行处理
3.下拉框应用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>jQuery对表单的操作</title> <script type="text/javascript" src="../js/jquery-3.1.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#add").click(function(){ var $options=$('#select1 option:selected'); $options.appendTo("#select2"); }); $("#addAll").click(function(){ var $options=$('#select1 option'); $options.appendTo("#select2"); }); $("#select1").dblclick(function(){ var $options=$('option:selected',this); $options.appendTo("#select2"); }); $("#remove").click(function(){ var $options=$('#select2 option:selected'); $options.appendTo("#select1"); }); $("#removeAll").click(function(){ var $options=$('#select2 option'); $options.appendTo("#select1"); }); $("#select2").dblclick(function(){ var $options=$('option:selected',this); $options.appendTo("#select1"); }); }); </script></head><body> <div class="centent"> <select multiple id="select1" style="width:100px;height:160px;"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> </select> <div> <span id="add">选中添加到右边>></span> <span id="addAll">全部添加到右边>></span> </div> </div> <div class="centent"> <select multiple id="select2" style="width:100px;height:160px;"></select> <div> <span id="remove"><<选中删除到左边</span> <span id="removeAll"><<全部删除到左边</span> </div> </div></body>4.表单验证：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>jQuery对表单的操作</title> <script type="text/javascript" src="../js/jquery-3.1.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("form :input.required").each(function(){ var $required=$("<strong class='high'>*</strong>"); $(this).parent().append($required);//把它追加到文档中 }); $("form :input").blur(function(){ var $parent=$(this).parent(); $parent.find(".formtips").remove(); //验证用户名 if($(this).is("#username")){ if(this.value=""||this.value.length<6){ var errorMsg='请至少输入6位用户名'; $parent.append("<span class='formtips onError'>"+errorMsg+"</span>"); }else{ var successMsg='输入正确'; $parent.append("<span class='formtips onSuccess'>"+successMsg+"</span>"); } } //验证邮箱 if($(this).is("#email")){ if(this.value=""||(this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){ var errorMsg='请输入正确的Email地址'; $parent.append("<span class='formtips onError'>"+errorMsg+"</span>"); }else{ var successMsg='输入正确'; $parent.append("<span class='formtips onSuccess'>"+successMsg+"</span>"); } } }); $("#send").click(function(){ $("form .required:input").trigger('blur'); var numError=$("form .onError").length; if(numError){ return false; }else{ alert("注册成功，密码已经发到邮箱，请查收"); } }); }); </script> <style type="text/css"> .high{ color:red; } </style></head><body> <form method="post" action=""> <div class="int"> <label for="username">用户名：</label> <input type="text" id="username" class="required" /> </div> <div class="int"> <label for="email">邮箱：</label> <input type="text" id="email" class="required" /> </div> <div class="int"> <label for="personinfo">个人资料：</label> <input type="text" id="personinfo"/> </div> <div class="sub"> <input type="button" value="提交" id="send" /> <input type="reset" id="res" /> </div> </form></body> 1 0
- web前端之锋利的jQuery六：jQuery对表单的操作
- web前端之锋利的jQuery八：jQuery插件的使用（表单验证、表单提交）
- web前端之锋利的jQuery一：认识jQuery
- web前端之锋利的jQuery二：jQuery选择器
- web前端之锋利的jQuery四：jQuery中的事件
- web前端之锋利的jQuery五：jQuery中的动画
- web前端之锋利的jQuery十：编写jQuery插件
- web前端之锋利的jQuery三：jQuery中的DOM操作
- 《锋利的jQuery》六、jQuery的表单与表格
- 【锋利的JQuery】0x05 JQuery对表单 表格的操作及作用
- 《锋利的jQuery》读书笔记 第5章 jQuery对表单、表格的操作及更多应用
- 锋利的Jquery【读书笔记】 -- 第五章 jQuery对表单表格的操作
- 《锋利的jQuery》第五章、 jQuery对表单和表格的操作
- 锋利的jQuery读书笔记-第5章 jQuery对表单、表格的操作及更多应用
- 锋利的jquery表单验证
- web前端之锋利的jQuery七：jQuery表格应用、其他应用
- 《锋利的jQuery》要点归纳（四）jQuery对表单、表格的操作及更多应用（上：表单应用）
- 《锋利的jQuery》要点归纳（四）jQuery对表单、表格的操作及更多应用（中：表格应用）
- UITableView footerRefresh后闪烁的问题
- storyboard navigationBar 颜色色差和标题颜色问题
- Java下利用Jackson进行JSON解析和序列化
- CocoaPods安装三方库报错 - Use the `$(inherited)` flag
- CXF如何获取Http对象
- web前端之锋利的jQuery六：jQuery对表单的操作
- 十四周项目二（1）
- RecyclerView 在有限的窗口中展示大量数据集
- linux如何通过杀死特定端口号的进程
- 51nod1215数组的宽度(单调栈)
- .Net中Remoting通信机制
- 遍历list并删除符合条件的数据
- 【Linux】netstat命令详解
- 点击空白关闭键盘
