码迷,mamicode.com
首页 > Web开发 > 详细

jQuery第五章

时间:2016-01-29 00:04:26      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:

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">选中添加到右边&gt;&gt;</span>

                          <span id="add_all">全部添加到右边&gt;&gt;</span>

                  </div>

         </div>

         <div class="centent">

                  <select multiple id="select1" style="width:100px;height:160px;">

                  </select>

                  <div>

                          <span id="remove">&lt;&lt;选中删除到左边</span>

                          <span id="remove_all">&lt;&lt;全部删除到左边</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()方法来完成。

jQuery第五章

标签:

原文地址:http://www.cnblogs.com/koto/p/5167636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!