JQuery操作textarea,input,select,checkbox方法

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

  
  
  
  *{
    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;
  }
  

  
  


  

效果图如下:

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

再来一个input标签,代码:

  
  
  
  body{
    font : normal 12px/17px Arial;
  }
  div{
    padding :2px;
  }
  input,textarea{
    width : 12em;
    border :1px solid #888;
  }
  .focus{
    border : 1px solid #f00;
    background : #fcc;
  }
  
  
  


  

效果图如下:

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

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

  
  
  
* { 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;
}

  
  


  
    
      选项1
      选项2
      选项3
      选项4
      选项5
      选项6
      选项7
    
    
      选中添加到右边>>
      全部添加到右边>>
    
  

  
    
      选项8
    
    
      <<选中删除到左边
      <<全部删除到左边
    
  

效果图如下:

将左边的选项移到右边,且可双击,可多选添加,哈哈,写代码的时候很有意思,

操作checkbox

html

全部选择

 取消选择

 反向选择   
 
A
  B
 C
 
D
 E
 F

 Jquery部分

//全部选择
 $("#all").click(function(){ 
 $("input[name='checkbox1']").each(function(){
  $(this).attr("checked",true);
 }); 
 });

普通javascirpt部分：

function checkAll(){
 for(i=0;i

取消选择代码:


Jquery部分：



//取消选择
 $("#delAll").click(function(){ 
 $("input[name='checkbox1']").each(function(){
  $(this).attr("checked",false);
 }); 
 });


普通javascript部分：



function delAll(){
 for(i=0;i

反向选择代码：


Jquery部分： 



//反向选择
 $("#antiAll").click(function(){
 $("input[name='checkbox1']").each(function(){
  $(this).attr("checked",!this.checked);
   });


普通javascript部分：



function antiAll(){
 for(i=0;i