jQuery对表单的操作

Posted 2020-10-03 苯宝宝

表单的组成部分：表单标签、表单域、表单按钮

<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‘);
});