jQuery对表单的操作代码集合

<br><form action="#" method="POST" id="regForm"> <br><fieldset> <br><legend>个人基本信息</legend> <br><div> <br><label for="username">名称：</label> <br><input id="username" type="text"> <br></div> <br></fieldset> <br></form> <br> <br>首先在css中添加一个类名为focus的样式。 <br>css代码如下： <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>.focus { <br>border: 1px solid #f00; <br>background: #fcc; <br>} <br> <br>然后为文本框添加获取和失去焦点事件 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>$(function(){ <br>$(":input").focus(function(){ <br>$(this).addClass("focus"); <br>}).blur(function(){ <br>$(this).removeClass("focus"); <br>}); <br>}); <br> <br>多行文本框的作用 <br>设置评论框的最小高度和最大高度： <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><form> <br><div class="msg"> <br><div class="msg_caption"> <br><span class="bigger">放大</span> <br><span class="smaller">缩小</span> <br></div> <br><div> <br><textarea id="comment" rows="8" cols="20">多行文本框高度变化</textarea> <br></div> <br></div> <br></form> <br> <br>1,当单击“放大”按钮后，如果评论框的高度小于500px,则在原有高度的基础上增加50px; <br>2.当单击“缩小”按钮后，如果评论框的高度大于50px,则在原有高度的基础上减少50px; <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>$(function(){ <br>var $comment = $('#comment'); //获取评论框 <br>$('.bigger').click(function(){ <br>if(!$comment.is(":animated")){ //判断是否处于动画 <br>if($comment.height() < 500){ <br>$comment.animate({height : "+=50"}, 400); <br>} <br>} <br>}) <br>$('.smaller').click(function(){ <br>if(!$comment.is(":animated")){ //判断是否处于动画 <br>if($comment.height() > 50){ <br>$comment.animate({height : "-=50"}, 400); <br>} <br>} <br>}) <br>}) <br> <br>滚动条高度的变化 <br>控制多行文本框滚动条的变化： <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>$(function(){ <br>var $comment = $('#comment'); <br>$('.up').click(function(){ <br>if($comment.is(":animated")){ <br>$comment.animate({scrollTop : "-=50"}, 400); <br>} <br>}) <br>$('.down').click(function(){ <br>if($comment.is(":animated")){ <br>$comment.animate({scrollTop : "+=50"}, 400); <br>}) <br>}) <br> <br>复选框的应用 <br>基本应用：对复选框进行全选，反选，全不选操作。 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><form> <br>你爱好的运动？<br/> <br><input type="checkbox" name="items" value="足球"/>足球 <br><input type="checkbox" name="items" value="篮球"/>篮球 <br><input type="checkbox" name="items" value="羽毛球"/>羽毛球 <br><input type="checkbox" name="items" value="乒乓球"/>乓球球 <br><input type="button" id="CheckedAll" value="全选"/> <br><input type="button" id="CheckedNo" value="全不选"/> <br><input type="button" id="CheckedRev" value="反选"/> <br><input type="button" id="send" value="提 交"/> <br>//全选 <br>$("#CheckedAll").click(function(){ <br>$('[name=items]:checkbox').attr('checked',true); <br>}); <br>//全不选 <br>$("#CheckedNo").click(function(){ <br>$('[name=items]:checkbox').attr('checked',false); <br>}); <br>//反选 <br>$("#CheckedNo").click(function(){ <br>$('[name=items]:checkbox').each(function(){ <br>this.checked = !this.checked; <br>})); <br>//提交按钮 <br>$("#send").click(function(){ <br>var str = "你选中的是：\r\n"; <br>$('[name=items]:checkbox:checked').each(function(){ <br>str += $(this).val()+'\r\n'}) <br>alert(str); <br>); <br></li><li>            </li><li>                                </li></ol></pre></li></ol></pre></li></ol></pre></li></ol></pre></li></ol></pre></li></ol></pre>