jQuery對錶單的操作

標籤：add   添加   表單標籤   判斷   rem   scrolltop   使用   round   ima   

表單的組成部分：表單標籤、表單域、表單按鈕

<form><fieldset><legend><label><input><textarea>

1.單行文字框——擷取和失去焦點改變樣式

當文字框擷取焦點後，它的顏色有變化；失去焦點後恢複為原來的樣式，可使用css中的偽類選擇符實現該功能

CSS代碼：input:focus,textarea:focus{      border:;background:;}　

問題：IE6不支援除了超連結元素外的：hover偽類別選取器

解決辦法：

第一、x在css中添加一個類名為focus的樣式

.focus{       border:;       background:;}

第二、為文字框添加擷取和失去焦時間點事件

$(function(){        $(":input").focus(function(){                 $(this).addClass("focus");}).blur(function(){                  $(this).removeClass("focus");        });});

 

2.多行文字框

（1）高度變化

$comment.height($comment.height()+50);等同於$comment.animate({height:"+=50"},400);

$(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()<500){                               $comment.animate({height:"-=50"},400);                        }               }        })});

（2）捲軸高度變化

通過控制多行文字框的捲軸的變化，使文字框裡的內容滾動，此處只需要控制屬性scrollTop

 

3.複選框

對複選框進行全選、反選、全不選

（1）全選、全不選——可通過控制元素的checked屬性來實現。如果屬性checked的值為true，說明被選中；如果值為false，說明沒被選中。

全選：

$("#CheckedAll").click(function(){      $(‘[name=items]:checkbox‘).attr(‘checked‘,true);});

全部選：

$("#CheckedAll").click(function(){      $(‘[name=items]:checkbox‘).attr(‘checked‘,false);});

（2）反選——迴圈每一個複選框進行設定，取它們值得反值，即：如果是true設定為false，如果是false設定為true，可使用非運算子  “！” 

$("#CheckedRev").click(function(){      $(‘[name=items]:checkbox‘).each(function(){           $(this).attr(‘checked‘,！$(this).attr("checked"))；      });});

checked==！$(this).attr("checked")

簡化後代碼：

$("#CheckedRev").click(function(){      $(‘[name=items]:checkbox‘).each(function(){           this.checked=!this.checked;      });});

（3）提交：複選框被選中後，使用者單擊"提交"按鈕，將選中項的值輸出。可通過val()方法或取選中的值

$("#send").click(function(){      var  str=”你選中的是：\r\n“;      $(‘[name=items]:checkbox:checked‘).each(function(){                 str+=$(this).val()+"\r\n";      });       alert(str);});

 

4.下拉框

通過中間的按鈕，將左邊選中的選項添加到右邊，也可以將右邊的選項添加到左邊，或者雙擊選項，將其添加給對方

HTML代碼：

<div>         <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>         <select multiple  id="select2" style="width:100px;height:160px;">         </select>       <div>            <span id="remove">選中刪除到左邊</span>            <span id="remove_all">全部刪除到左邊</span>      </div>     </div> 　　

 第一個功能：將下拉式清單中被選中的選項添加給對方，首先擷取下拉式清單中被選中的選項，然後將當前下拉式清單中選中的選項刪除，最後將刪除的選型添加到對方

$(‘#add‘).click(function(){        var options=$(‘#select1 option:selected‘);        var $remove=$option.remove();        $remove.appendTo(‘#select1‘);});

刪除和追加這兩個步驟可以用appendTo()方法直接完成，可簡化為：

$(‘#add‘).click(function(){        var options=$(‘#select1 option:selected‘);        $option.appendTo(‘#select1‘);});

　　

 

jQuery對錶單的操作