用JQuery编写textarea,input,checkbox,select

今天学习怎样用JQuery编写一些小的代码,小小的试了一下编写一个textarea,代码如下:

<!DOCTYPE HTML><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style type="text/css" media="screen">  *{    margin :0;    padding :0;    font : normal 12px/17px Arial;  }  .msg{    width :300px;    margin : 100px;  }  .msg_caption{    width :100%;    overflow : hidden;    margin-botton : 1px;  }  .msg_caption span{    display : block;    float : left;    margin :0 2px;    padding :4px 10px;    background :#898989;    cursor : pointer;    color : white;  }  .msg textarea{    width :300px;    height : 80px 100%;    border :1px solid #000;  }  </style>  <script type="text/javascript" src='/images/loading.gif' data-original="../jquery1.11.js"></script>  <script type="text/javascript" charset="utf-8">  $(function(){      var $comment = $("#comment");      $('.bigger').click(function(){//绑定扩大按钮        if(!$comment.is(":animated")){//判断对象是否处于动画状态,不是才执行里面代码          if($comment.height()<500){            $comment.animate({              height : "+=50"            },1000);//重新设置高度,在原来的基础上+50          }        }        });      $('.smaller').click(function(){//绑定缩小按钮        if(!$comment.is(":animated")){//判断对象是否处于动画状态,不是才执行里面代码          if($comment.height()>50){            $comment.animate({              height : "-=50"            },1000);//重新设置高度,在原来的基础上-50          }        }        });      })  </script></head><body>  <form action="" method="post">  <div class="msg">    <div class="msg_caption">      <span class="bigger" >放大</span>      <span class="smaller" >缩小</span>    </div>    <div>      <textarea id="comment" rows="8" cols="20">C/S之间通过任意的协议通信，一般要求有特定的客户端。比如QQ就是C/S模式，你的桌面上的QQ就是腾讯公司的特定的客户端，而服务器就是腾讯的服务器。再比如你看的网络电视也是如此，比如你的桌面上的iqiyi、视频软件等，这些软件都是C/S模式的，他们要求在用户有特定的客户端(Socket)。而B/S模式是靠应用层的http协议进行通信的（当然也要靠底层的好多协议支持），一般不需要特定的客户端，而是需要有统一规范的客户端，那就是你的浏览器！Web页就是B/S 模式，也就是说咱们说的网站就是B/S模式。 </textarea>    </div>  </div></form></body></html>

效果图如下:

可以流畅的放大缩小,这就是JQuery特效的优点.

再来一个input标签,代码:

<!DOCTYPE HTML><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style type="text/css" media="screen">  body{    font : normal 12px/17px Arial;  }  div{    padding :2px;  }  input,textarea{    width : 12em;    border :1px solid #888;  }  .focus{    border : 1px solid #f00;    background : #fcc;  }  </style>  <script type="text/javascript" src='/images/loading.gif' data-original="../jquery1.11.js"></script>  <script type="text/javascript" charset="utf-8">$(function(){    $(":input").focus(function(){      $(this).addClass("focus");      if($(this).val() == this.defaultValue){        $(this).val("");          };      }).blur(function(){        $(this).removeClass("focus");        if($(this).val() == ''){          $(this).val(this.defaultValue);          };        });    //addClass:为每个匹配的元素添加指定的类名，一个或多个用空格分开，添加属性    //val():获得或者更改value属性对应的值    //defaultValue():获取默认值的value    //removeClass():删除对应的class属性    });  </script></head><body>  <form action="" method="post" id="regForm">    <fieldset>      <legend>个人基本信息</legend>      <div>        <label for="username">名称:</label>        <input id="username" type="text" value="名称" />      </div>      <div>        <label for="pass">密码:</label>        <input id="pass" type="password" value="密码" />      </div>      <div>        <label for="msg">详细信息:</label>        <textarea id="msg" rows="2" cols="20">详细信息</textarea>      </div>    </fieldset>  </form></body></html>

效果图如下:

添加一个焦点和失去焦点,默认值,再设置一个得到焦点时的背景颜色

第三个呢,写了一个select,这个东西一般在QQ空间和淘宝中使用比较广泛,所以也比较有兴趣,代码如下:

<!DOCTYPE HTML><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">* { margin:0; padding:0; }div.centent {  float:left;  text-align: center;  margin: 10px;}span {   display:block;   margin:2px 2px;  padding:4px 10px;   background:#898989;  cursor:pointer;  font-size:12px;  color:white;}</style>  <script type="text/javascript" src='/images/loading.gif' data-original="../jquery1.11.js"></script>  <script type="text/javascript" charset="utf-8">  $(function(){      //移动到右边      $("#add").click(function(){        //获取选中的项,删除然后再移动到右边,这里是选择移动;        $('#select1 option:selected').appendTo('#select2');        });      //移动到左边      $("#remove").click(function(){        $('#select2 option:selected').appendTo('#select1');        })      //全部到右边      $("#add_all").click(function(){        $('#select1 option').appendTo('#select2');        })      //全部到左边      $("#remove_all").click(function(){        $('#select2 option').appendTo('#select1');        })      //双击选项      $('#select1').dblclick(function(){        //这里先定位#select1这个大的选择框,然后定位到里面的被选择的元素组陈的集合          //this就是表示这个集合,当我们按Ctrl或者shift的时候,我们操作的就是这个集合          //$("option:selected",this).appendTo("#select2");        $("option:selected",this).appendTo("#select2");        })      //双击选项      $('#select2').dblclick(function(){        $("option:selected",this).appendTo("#select1");        })      });  </script></head><body>  <div class="centent">    <select multiple="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>    </select>    <div>      <span id="add" >选中添加到右边&gt;&gt;</span>      <span id="add_all" >全部添加到右边&gt;&gt;</span>    </div>  </div>  <div class="centent">    <select multiple="multiple" id="select2" style="width: 100px;height:160px;">      <option value="8">选项8</option>    </select>    <div>      <span id="remove">&lt;&lt;选中删除到左边</span>      <span id="remove_all">&lt;&lt;全部删除到左边</span>    </div>  </div></body></html>

效果图如下: