第六章 jQuery操作表单

最新推荐文章于 2024-11-12 15:47:14 发布

weixin_30302609

最新推荐文章于 2024-11-12 15:47:14 发布

阅读量74

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/shenming/p/4119056.html

版权

http://www.cnblogs.com/shuibing/p/4087177.html

1.单行文本框的应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body{ font:normal 12px/17px Arial; } div{ padding:2px; } input, textarea { width: 12em; border: 1px solid #888; } .focus { border: 1px solid #f00; background: #fcc; } </style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); if($(this).val() ==this.defaultValue){ $(this).val(""); } }).blur(function(){ $(this).removeClass("focus"); if ($(this).val() == '') { $(this).val(this.defaultValue); } }); }) </script> </head> <body> <form action="" method="post" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="username">名称:</label> <input id="username" type="text" value="名称" /> </div> <div> <label for="pass">密码:</label> <input id="pass" type="password" value="密码" /> </div> <div> <label for="msg">详细信息:</label> <textarea id="msg" rows="2" cols="20">详细信息</textarea> </div> </fieldset> </form> </body> </html>

　　2.多行文本框高度变化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font: normal 12px/17px Arial; } .msg { width: 300px; margin: 100px; } .msg_caption { width: 100%; overflow: hidden; margin-bottom: 1px; } .msg_caption span { display: block; float: left; margin: 0 2px; padding: 4px 10px; background: #898989; cursor: pointer; color: white; } .msg textarea { width: 300px; height: 80px; height: 100px; border: 1px solid #000; } </style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var $comment = $('#comment'); //获取评论框  $('.bigger').click(function () { //放大按钮绑定单击事件 if (!$comment.is(":animated")) { //判断是否处于动画 if ($comment.height() < 500) { $comment.animate({ height: "+=50" }, 400); //重新设置高度，在原有的基础上加50  } } }) $('.smaller').click(function () {//缩小按钮绑定单击事件 if (!$comment.is(":animated")) {//判断是否处于动画 if ($comment.height() > 50) { $comment.animate({ height: "-=50" }, 400); //重新设置高度，在原有的基础上减50 } } }); }); </script> </head> <body> <form action="" method="post"> <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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font: normal 12px/17px Arial; } .msg { width: 300px; margin: 100px; } .msg_caption { width: 100%; overflow: hidden; margin-bottom: 1px; } .msg_caption span { display: block; float: left; margin: 0 2px; padding: 4px 10px; background: #898989; cursor: pointer; color: white; } .msg textarea { width: 300px; height: 80px; height: 100px; border: 1px solid #000; } </style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var $comment = $('#comment'); //获取评论框  $('.up').click(function () { //向上按钮绑定单击事件 if (!$comment.is(":animated")) {//判断是否处于动画  $comment.animate({ scrollTop: "-=50" }, 400); } }) $('.down').click(function () {//向下按钮绑定单击事件 if (!$comment.is(":animated")) { $comment.animate({ scrollTop: "+=50" }, 400); } }); }); </script> </head> <body> <form action="" method="post"> <div class="msg"> <div class="msg_caption"> <span class="up">向上</span> <span class="down">向下</span> </div> <div> <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea> </div> </div> </form> </body> </html>

　　3.复选框应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //全选  $("#CheckedAll").click(function () { $('[name=items]:checkbox').attr('checked', true); }); //全不选  $("#CheckedNo").click(function () { $('[type=checkbox]:checkbox').attr('checked', false); }); //反选  $("#CheckedRev").click(function () { $('[name=items]:checkbox').each(function () { //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。 //$(this).attr("checked", !$(this).attr("checked")); //直接使用JS原生代码，简单实用 this.checked = !this.checked; }); }); //输出值  $("#send").click(function () { var str = "你选中的是：\r\n"; $('[name=items]:checkbox:checked').each(function () { str += $(this).val() + "\r\n"; }) alert(str); }); }) </script> </head> <body> <form method="post" action=""> 你爱好的运动是？ <br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br /> <input type="button" id="CheckedAll" value="全　选" /> <input type="button" id="CheckedNo" value="全不选" /> <input type="button" id="CheckedRev" value="反　选" /> <input type="button" id="send" value="提　交" /> </form> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script> $(function(){ //全选  $("#CheckedAll").click(function(){ if(this.checked){ //如果当前点击的多选框被选中  $('input[type=checkbox][name=items]').attr("checked", true ); }else{ $('input[type=checkbox][name=items]').attr("checked", false ); } }); $('input[type=checkbox][name=items]').click(function(){ var flag=true; $('input[type=checkbox][name=items]').each(function(){ if(!this.checked){ flag = false; } }); if( flag ){ $('#CheckedAll').attr('checked', true ); }else{ $('#CheckedAll').attr('checked', false ); } }); //输出值  $("#send").click(function(){ var str="你选中的是：\r\n"; $('input[type=checkbox][name=items]:checked').each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); }); }) </script> </head> <body> <form> 你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/> <input type="button" id="send" value="提　交"/> </form> </body> </html>

　　4.下拉框左右选择

View Code

　　5.表单验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[  $(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 okMsg = '输入正确.'; $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>'); } } //验证邮件 if ($(this).is('#email')) { if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) { var errorMsg = '请输入正确的E-Mail地址.'; $parent.append('<span class="formtips onError">' + errorMsg + '</span>'); } else { var okMsg = '输入正确.'; $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>'); } } }).keyup(function () { $(this).triggerHandler("blur"); }).focus(function () { $(this).triggerHandler("blur"); }); //end blur //提交，最终验证。 $('#send').click(function () { $("form :input.required").trigger('blur'); var numError = $('form .onError').length; if (numError) { return false; } alert("注册成功,密码已发到你的邮箱,请查收."); }); //重置 $('#res').click(function () { $(".formtips").remove(); }); }) //]]> </script> </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="submit" value="提交" id="send" /><input type="reset" id="res" /> </div> </form> </body> </html>