jquery第五章练习 jquery第五章上机作业

jQuery对表单、表格的操作以及更多应用

一、表单应用

1.单行文本框应用

（1）获取和失去焦点改变样式
         HTML代码如下：
         <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>
         CSS样式如下：
         .focus{
                  border: 1px solid #f00;
                  background: #fcc;
}
         jQuery代码如下：
        
$(function(){
         $(":input").focus(function(){
                  $(this).addClass("focus");
         }).blur(function(){
                  $(this).removeClass("focus");
         });
});
2.多行文本框应用
（1）高度变化
例如，某网站的评论框，有放大缩小功能。实现效果如下：
         HTML代码如下：
         <form>
                  <div class="msg">
                          <div class="msg_caption">
                                   <span class="bigger">放大</span>
                                   <span class="small">缩小</span>
                          </div>
                          <div>
                                   <textarea id="comment" rows="8" cols="20">
                                            多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.
                                   </textarea>
                          </div>
                  </div>
         </form>
         jQuery代码如下：
$(function(){
         var $comment = $('#comment');
         $('.bigger').click(function(){
                  if (!$comment.is(":animated")) {
                          if($comment.height() < 500){
                                   $comment.animate({height : "+=50"},400);
                          }
                  }
         })
         $('.small').click(function(){
                  if (!$comment.is(":animated")) {
                          if($comment.height() > 50){
                                   $comment.animate({height: "-=50"},400);
                          }
                  }
         });
});
（2）滚动条高度变化
         与控制高度的方法相同，只不过此处需要控制的是另一个属性，即scrollTop。将以上代码改成如下：
$(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);
                          }
         });
});
3.复选框应用
         对复选框的最基本应用，就是对复选框进行全选、反选和全不选等操作。
         首先在空白网页中创建一个表单，其中放入一组复选框，HTML代码如下：
         <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="提交">
         </form>
         通过判断checked属性来判断是否选中，如果checked的值为true说明被选中，如果checked的值为false说明未被选中。jQuery代码如下：
$(function(){
         $("#CheckedAll").click(function(){
                  $('[name = items] : checkbox').attr('checked',true);
         });
         $("#CheckedNo").click(function(){
                  $('[name = items]:checkbox').attr('checked',false);
         });
         $("#CheckRev").click(function(){
                  $('[name = items]:checkbox').each(function(){
                          this.checked = !this.checked;
                  });
         });
});
4.下拉框应用
（1）将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方。
HTML代码如下：
         <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="add_all">全部添加到右边>></span>
                  </div>
         </div>
         <div class="centent">
                  <select multiple id="select1" style="width:100px;height:160px;">
                  </select>
                  <div>
                          <span id="remove"><<选中删除到左边</span>
                          <span id="remove_all"><<全部删除到左边</span>
                  </div>
         </div>
jQuery代码如下：
$(function(){
         $("#add").click(function(){
                  var $options = $('#select1 option:selected');
                  $options.appendTo("#select2")
         });
         $("#add_all").click(function(){
                  var $options = $('#select1 option');
                  $options.appendTo('#select2');
         });
         $("#select1").dblclick(function(){
                  var $options = $("option:selected",this);
                  $options.appendTo("#select2");
         });
});
5.表单验证
         以一个简单的用户注册为例。首先新建一个表单，HTML代码如下：
         <form method="post" action="#">
                  <div class="int">
                          <label for="username">用户名：</label>
                          <input type="text" id="email" 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>

在表单内，class属性为“required”的文本框时必须填写的，因此需要将它与其他的非必须填写表单元素加以区别，即在文本框后面追加一个红色的小星号。可以使用append()方法来完成。