|
改变文本框的获得焦点的样式 代码如下:
<form action="#" method="POST" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="username">名称：</label> <input id="username" type="text"> </div> </fieldset> </form> 首先在css中添加一个类名为focus的样式。 css代码如下： 代码如下:
.focus { border: 1px solid #f00; background: #fcc; } 然后为文本框添加获取和失去焦点事件 代码如下:
$(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); }); 多行文本框的作用 设置评论框的最小高度和最大高度： 代码如下:
<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> 1,当单击“放大”按钮后，如果评论框的高度小于500px,则在原有高度的基础上增加50px; 2.当单击“缩小”按钮后，如果评论框的高度大于50px,则在原有高度的基础上减少50px; 代码如下:
$(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); } } }) }) 滚动条高度的变化 控制多行文本框滚动条的变化： 代码如下:
$(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); }) }) 复选框的应用 基本应用：对复选框进行全选，反选，全不选操作。 代码如下:
<form> 你爱好的运动？<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="乒乓球"/>乓球球 <input type="button" id="CheckedAll" value="全选"/> <input type="button" id="CheckedNo" value="全不选"/> <input type="button" id="CheckedRev" value="反选"/> <input type="button" id="send" value="提 交"/> //全选 $("#CheckedAll").click(function(){ $('[name=items]:checkbox').attr('checked',true); }); //全不选 $("#CheckedNo").click(function(){ $('[name=items]:checkbox').attr('checked',false); }); //反选 $("#CheckedNo").click(function(){ $('[name=items]:checkbox').each(function(){ this.checked = !this.checked; })); //提交按钮 $("#send").click(function(){ var str = "你选中的是：\r\n"; $('[name=items]:checkbox:checked').each(function(){ str += $(this).val()+'\r\n'}) alert(str); ); |