对表单和表格的操作

单行文本框应用
.focus {
     border: 1px solid #f00;
     background: #fcc;
}

   $(function(){
        $(":input").focus(function(){
              $(this).addClass("focus");
        }).blur(function(){
              $(this).removeClass("focus");
        });
    })
也可以写成
   $(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);
             }
        });
    })

对多行文本框的操作
$(function(){
        var $comment = $('#comment');  //获取评论框 comment为一个<textarea id="comment" rows="8" cols="20"></textarea>
        $('.bigger').click(function(){ //放大按钮绑定单击事件
              if( $comment.height() < 500 ){
                   $comment.height(  $comment.height() + 50 ); //重新设置高度，在原有的基础上加50
              }
        })
        $('.smaller').click(function(){//缩小按钮绑定单击事件
                if( $comment.height() > 50 ){
                    $comment.height( $comment.height() - 50 ); //重新设置高度，在原有的基础上减50
                }
        });
    });

也可以用
    $(function(){
        var $comment = $('#comment');  //获取评论框
        $('.bigger').click(function(){ //放大按钮绑定单击事件
           if(!$comment.is(":animated")){ //判断是否处于动画
              if( $comment.height() < 500 ){
                      $comment.animate({ height : "+=50" },400); //重新设置高度，在原有的基础上加50
              }
            }
        })
        $('.smaller').click(function(){//缩小按钮绑定单击事件
           if(!$comment.is(":animated")){//判断是否处于动画
                if( $comment.height() > 50 ){
                    $comment.animate({ height : "-=50" },400); //重新设置高度，在原有的基础上减50
                }
            }
        });
    });
这样有种过渡的效果
    $(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);
            }
        });
    });


复选框应用
 $(function(){
     //全选
     $("#CheckedAll").click(function(){
         $('[name=items]:checkbox').attr('checked', true);
     });
     //全不选
     $("#CheckedNo").click(function(){
        $('[type=checkbox]:checkbox').attr('checked', false);
     });
     //反选
     $("#CheckedRev").click(function(){
          $('[name=items]:checkbox').each(function(){
            //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
            //$(this).attr("checked", !$(this).attr("checked"));
           
            //直接使用JS原生代码，简单实用
            this.checked=!this.checked;
          });
     });
     //输出值
    $("#send").click(function(){
        var str="你选中的是：/r/n";
        $('[name=items]:checkbox:checked').each(function(){
            str+=$(this).val()+"/r/n";
        })
        alert(str);
    });
  })

 $("#CheckedAll").click(function(){
            //所有checkbox跟着全选的checkbox走。
            $('[name=items]:checkbox').attr("checked", this.checked );
     });
     $('[name=items]:checkbox').click(function(){
                //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。
                var $tmp=$('[name=items]:checkbox');
                //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
                $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);

            /*
                //一行做过多的事情需要写更多注释。复杂选择器还可能影响效率。因此不推荐如下写法。
                $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length);
            */
     });


下拉框应用
$(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(){ //绑定双击事件
        //获取全部的选项,删除并追加给对方
        $("option:selected",this).appendTo('#select2'); //追加给对方
    });
    //双击选项
    $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
    });
});
实现这种效果，请注意两个select控件的选项的VALUE不要重复


表单验证
$(function(){
        //如果是必填的，则加红星标识.
        $("form :input.required").each(function(){
            var $required = $("<strong class='high'> *</strong>"); //创建元素
            $(this).parent().append($required); //然后将它追加到文档中
        });
         //文本框失去焦点后
        $('form :input').blur(function(){
             var $parent = $(this).parent();
             $parent.find(".formtips").remove();
             //验证用户名
             if( $(this).is('#username') ){//判断是否是id为username的输入框
                    if( this.value=="" || this.value.length < 6 ){
                        var errorMsg = '请输入至少6位的用户名.';
                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                    }else{
                        var okMsg = '输入正确.';
                        $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                    }
             }
             //验证邮件
             if( $(this).is('#email') ){
                if( this.value=="" || ( this.value!="" && !/.+@.+/.[a-zA-Z]{2,4}$/.test(this.value) ) ){
                      var errorMsg = '请输入正确的E-Mail地址.';
                      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else{
                      var okMsg = '输入正确.';
                      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
             }
        }).keyup(function(){
           $(this).triggerHandler("blur");
        }).focus(function(){
             $(this).triggerHandler("blur");
        });//end blur

       
        //提交，最终验证。
         $('#send').click(function(){
                $("form :input.required").trigger('blur');
                var numError = $('form .onError').length;
                if(numError){
                    return false;
                }
                alert("注册成功,密码已发到你的邮箱,请查收.");
         });

        //重置
         $('#res').click(function(){
                $(".formtips").remove();
         });
})

对表格的操作

table        { border:0;border-collapse:collapse;}
td    { font:normal 12px/17px Arial;padding:2px;width:100px;}
th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even        { background:#FFF38F;}  /* 偶数行样式*/
.odd        { background:#FFFFEE;}  /* 奇数行样式*/
.selected        { background:#FF6500;color:#fff;}


<table>
        <thead>
            <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td><input type="checkbox" name="choice" value=""/></td>
                <td>张山</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>李四</td><td>女</td><td>浙江杭州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>
                <td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>找六</td><td>男</td><td>浙江温州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>


  $(function(){
        $("tbody>tr:odd").addClass("odd");
        $("tbody>tr:even").addClass("even");
        $('tbody>tr').click(function() {
            //判断当前是否选中
            var hasSelected=$(this).hasClass('selected');
            //如果选中，则移出selected类，否则就加上selected类
            $(this)[hasSelected?"removeClass":"addClass"]('selected')
                //查找内部的checkbox,设置对应的属性。
                .find(':checkbox').attr('checked',!hasSelected);
        });
        // 如果复选框默认情况下是选择的，则高色.
        $('tbody>tr:has(:checked)').addClass('selected');
  })


表格的关闭

<table>
        <thead>
            <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
            <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
            <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>

            <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
            <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr>

            <tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
            <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
            <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>


$(function(){
    $('tr.parent').click(function(){   // 获取所谓的父行
            $(this)
                .toggleClass("selected")   // 添加/删除高亮
                .siblings('.child_'+this.id).toggle();  // 隐藏/显示所谓的子行
    }).click();
})


表格的筛选
筛选：
<input id="filterName" />
<br/>

</div>

<table>
    <thead>
        <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody>
        <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
        <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
        <tr><td>找六</td><td>男</td><td>浙江温州</td></tr>
        <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
        <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
        <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr>
        <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr>
        <tr><td>李四</td><td>男</td><td>湖南长沙</td></tr>
    </tbody>
</table>

  $(function(){
       $("#filterName").keyup(function(){
          $("table tbody tr")
                    .hide()
                    .filter(":contains('"+( $(this).val() )+"')")
                    .show();
       }).keyup();
  })


控制表格的字体大小
<div class="msg">
    <div class="msg_caption">
        <span class="bigger" >放大</span>
        <span class="smaller" >缩小</span>
    </div>
    <div>
        <p id="para">
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text. This is some text. This is some text. This is some
        text. This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text.
        </p>
    </div>
</div>

$(function(){
        $("span").click(function(){
            var thisEle = $("#para").css("font-size");
            var textFontSize = parseFloat(thisEle , 10);
            var unit = thisEle.slice(-2); //获取单位
            var cName = $(this).attr("class");
            if(cName == "bigger"){
                   if( textFontSize <= 22 ){
                        textFontSize += 2;
                    }
            }else if(cName == "smaller"){
                   if( textFontSize >= 12  ){
                        textFontSize -= 2;
                    }
            }
            $("#para").css("font-size",  textFontSize + unit);
        });
    });


选项卡的应用
<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">时事</li>
            <li>体育</li>
            <li>娱乐</li>
        </ul>
    </div>
    <div class="tab_box">
         <div>时事</div>
         <div class="hide">体育</div>
         <div class="hide">娱乐</div>
    </div>
</div>

$(function(){
        var $div_li =$("div.tab_menu ul li");
        $div_li.click(function(){
            $(this).addClass("selected")            //当前<li>元素高亮
                   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
            $("div.tab_box > div")       //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
                    .eq(index).show()   //显示 <li>元素对应的<div>元素
                    .siblings().hide(); //隐藏其它几个同辈的<div>元素
        }).hover(function(){
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");
        })
    })

 *{ margin:0; padding:0;}
 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
 .tab { width:240px;margin:50px;}
 .tab_menu { clear:both;}
 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989;

border-bottom:none;}
 .tab_menu li.hover { background:#DFDFDF;}
 .tab_menu li.selected { color:#FFF; background:#6D84B4;}
 .tab_box { clear:both; border:1px solid #898989; height:100px;}
 .hide{display:none}


怎么样给网页换皮肤？
 <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
  <ul id="skin">
        <li id="skin_0" title="灰色" class="selected">灰色</li>
        <li id="skin_1" title="紫色">紫色</li>
        <li id="skin_2" title="红色">红色</li>
        <li id="skin_3" title="天蓝色">天蓝色</li>
        <li id="skin_4" title="橙色">橙色</li>
        <li id="skin_5" title="淡绿色">淡绿色</li>
    </ul>

    <div id="div_side_0">
        <div id="news">
            <h1 class="title">时事新闻</h1>
        </div>
    </div>

    <div id="div_side_1">
        <div id="game">
            <h1 class="title">娱乐新闻</h1>
        </div>
    </div>


        $(function(){
            var $li =$("#skin li");
            $li.click(function(){
                switchSkin( this.id );
            });
            var cookie_skin = $.cookie( "MyCssSkin");
            if (cookie_skin) {
                switchSkin( cookie_skin );
            }
        });
        function switchSkin(skinName){
                 $("#"+skinName).addClass("selected")                 //当前<li>元素选中
                              .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
                $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
                $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });//此需要引用JQuery的cookie插件，保存网页选取的皮肤信息
        }

如何用一张图片作为按钮不同状态的转换？
原来是通过CSS来实现：
#skin_0.selected{
    background-position:0px 15px !important;//!important 提升指定样式规则的应用优先权。
}
#skin_0{
    background-position:0px 0px;
}