jquery之addclass与removeclass使用实例分析

实例出处：http://www.zhangxinxu.com/wordpress/2009/10/jquery之addclasas与removeclass使用实例/

HTML为：

<div class="zxx_out_box">
    <div class="zxx_in_box">
        <div class="zxx_main_con">
            <div class="zxx_fri_box">
                <h3 class="zxx_fri_title">创建新分组</h3>
                <div class="zxx_fri_body">
                    <div>
                        <strong class="g6">分组名称</strong><input class="zxx_fri_input" type="text" /><span class="g9 f9">（最多输入10个字符）</span>
                    </div>
                    <div class="mt5">
                        <strong class="g6">查找好友</strong><input class="zxx_fri_input" type="text" />
                    </div>
                    <div id="friSelectMenu" class="zxx_fri_num">
                        <a href="javascript:void(0);" class="fri_num_on" id="friSelectAll"><span>全部</span></a>
                        <a href="javascript:void(0);" id="friHaveSelected"><span>已选(<i id="selectNum">0</i>)</span></a>
                        <a href="javascript:void(0);" id="friUnSelected"><span>未选(<i id="unSelectNum">15</i>)</span></a>
                    </div>
                    <div id="zxxFriMain" class="zxx_fri_con">
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn111.xnimg.cn/photos/hdn111/20090907/2300/tiny_cOUQ_20502g204235.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">张宏达</span>
                                </span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn.xnimg.cn/photos/hdn321/20091019/0055/tiny_gXS2_3799d019116.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">陈露娜</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn111.xnimg.cn/photos/hdn111/20090502/0915/tiny_j0z2_51491p204236.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">张艳</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn211.xnimg.cn/photos/hdn211/20090404/23/05/tiny_QwFi_76100b204238.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">李胜兰</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn211.xnimg.cn/photos/hdn211/20090223/17/40/tiny_M7mp_30421j204238.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">刘菲</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn211.xnimg.cn/photos/hdn211/20090804/1155/tiny_Znhx_2284h204236.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">李朝霞</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn.xnimg.cn/photos/hdn221/20091018/1615/tiny_GzDq_32009a019118.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">黄雅娜</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn211.xnimg.cn/photos/hdn211/20090414/12/50/tiny_boVm_58452o204236.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">丁蓓蓓</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn511.xnimg.cn/photos/hdn511/20090607/2335/tiny_LOX6_57090k204237.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">刘晓静</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn.xnimg.cn/photos/hdn321/20090927/1445/tiny_Tiyk_125389j019117.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">马劲</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn311.xnimg.cn/photos/hdn311/20090827/2035/tiny_AUgn_4278k204236.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">张琬苓</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn511.xnimg.cn/photos/hdn511/20090319/20/05/tiny_qgyJ_137006h204234.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">蔡维佳</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn411.xnimg.cn/photos/hdn411/20090704/1605/tiny_sTnW_26362m204234.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">周益</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn411.xnimg.cn/photos/hdn411/20090615/2235/tiny_En0P_99950d204235.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">殷娜</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                        <span class="zxx_fri_list">
                            <a href="javascript:void(0);" class="zxx_fri_a">
                                <span class="b1"></span><span class="b2"></span>
                                <span class="b3">
                                    <img class="fri_head_img" src="http://hdn211.xnimg.cn/photos/hdn211/20090626/1455/tiny_fJYm_8527n204237.jpg" /><img class="fri_added_img" src="http://www.zhangxinxu.com/study/image/friend_selected.gif" />
                                       <span class="fri_name">郑明康</span>
                                </span>
                                <span class="b2"></span><span class="b1"></span>
                            </a>
                        </span>
                    </div><!--zxx_fri_con-->
                </div>
            </div> <!--zxx_fri_box-->           
        </div><!--zxx_main_con-->
    </div><!--zxx_in_box-->
</div><!-- zxx_out_box -->

CSS为：

@charset "utf-8";
/* CSS Document */
/* 基础样式 */
body{padding:0; margin:0; font-size:84%; background:#eeeeee; color:#333333; font-family:'宋体',Verdana, Geneva, sans-serif;}
ul,li,form,h1,h2,h3,h4,h5,h6,p{padding:0; margin:0; list-style-type:none;}
i,cite{font-style:normal;}
a{color:#34538b; text-decoration:underline;}a:hover{color:#F30; text-decoration:underline;}
.l{float:left;}.r{float:right;}.cl{clear:both;}img{border:0; max-width:100%;}
.tc{text-align:center;}.tr{text-align:right;}
.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vt{vertical-align:top;}
.ml2{margin-left:2px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml20{margin-left:20px;}.mr2{margin-right:2px;}.mr5{margin-right:5px;},mr10{margin-right:10px;}.mr20{margin-right:20px;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt20{margin-top:20px;}.mb2{margin-bottom:2px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb20{margin-bottom:20px;}
.f9{font-size:0.9em;}.f10{font-size:1em;}.f11{font-size:1.1em;}f12{font-size:1.2em;}f13{font-size:1.3em;}f14{font-size:1.4em;}f15{font-size:1.5em;}f16{font-size:1.6em;}
.fix{zoom:1;}.fix:after,.fix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
.rel{position:relative;}.abs{position:absolute;}
.zxx_out_box{width:70%; min-width:700px; border-left:1px solid white; border-right:1px solid white; margin:0 auto;}
.zxx_in_box{min-height:550px; _height:550px; border-left:1px solid #cccccc; border-right:1px solid #cccccc; background:white; padding:1em 2.5em 0;}
.zxx_header{padding:10px 20px 5px; border-bottom:1px solid #cccccc; overflow:hidden; zoom:1;}
.zxx_author_time{float:right; margin-top:34px; color:#787878; font-family:"Courier New", Courier, monospace;}
.zxx_title{font-size:1.6em; text-align:center; margin:20px 0;}
.zxx_main_con{padding:0 20px 20px;}
.zxx_footer{padding-bottom:25px; text-align:center;}
.zxx_test_list{padding:1em; font-size:1.1em; border-bottom:1px dashed #cccccc; line-height:1.4; overflow:hidden; zoom:1;}
.zxx_code{display:block; padding:10px; margin:5px 0; background:#eeeeee; border:1px dashed #cccccc; clear:both; zoom:1;}
.zxx_code xmp{margin:0; color:#00F; font-size:12px; white-space:pre-wrap; word-wrap:break-word;}
.zxx_btn{display:inline-block; background:url(../image/down_btn.png) no-repeat; padding-left:25px;}
.zxx_btn span{display:inline-block; height:45px; line-height:45px; background:url(../image/down_btn.png) no-repeat right top; padding:0 45px 0 20px; cursor:pointer;}
.zxx_btn:hover{text-decoration:none; color:#34538b;}

/* 样式控制开始 */
.zxx_fri_box{width:480px; margin:100px auto; border:1px solid #3777bc;}
.zxx_fri_title{height:26px; padding-left:5px; font:bold 14px/26px Verdana, Geneva, sans-serif; background:#3777bc; color:white;}
.zxx_fri_body{padding:10px;}
.zxx_fri_body .zxx_fri_input{width:150px; height:18px; border:1px solid #BDC7D8; margin:auto 5px; padding:2px 0 1px 2px; vertical-align:middle;}

.zxx_fri_num{padding:10px 0 8px; text-align:right; font-size:0;}/* 全部已选未选包裹层 */
.zxx_fri_num a{display:inline-block; margin-right:6px; padding-left:8px; font-size:12px; text-decoration:none;}/* 全部 已选 未选 按钮 */
.zxx_fri_num a span{display:inline-block; height:19px; padding-right:8px; line-height:19px; cursor:pointer;}/* 全部 已选 未选 按钮里的span */

.zxx_fri_num a.fri_num_on,.zxx_fri_num a:hover{background:url(http://www.zhangxinxu.com/study/image/fri_sel_num_bg.png) no-repeat; color:white; text-decoration:none;}
.zxx_fri_num a.fri_num_on span,.zxx_fri_num a:hover span{background:url(http://www.zhangxinxu.com/study/image/fri_sel_num_bg.png) no-repeat right top;}

.zxx_fri_con{height:400px; padding-left:10px; border:1px solid #cccccc; font-size:0; overflow-y:scroll; position:relative;}/* 包裹人物div */
.zxx_fri_list{display:inline-block; width:32%; padding:6px 0px 2px;}
.zxx_fri_a{display:block; padding:0 3px; color:#333333; text-decoration:none; position:relative; overflow:hidden; zoom:1;}
.zxx_fri_a .b3{display:block;}
.zxx_fri_a .b3{padding:4px 4px; border:1px solid #fff; background:#ffffff; border-radius:6px;}
.zxx_fri_a:hover{color:#333333; border:0; text-decoration:none;}
.zxx_fri_a:hover .b3{border-color:#b8d4e8; background-color:#f0f5f8;}

.fri_head_img{width:50px; height:50px; padding:2px; border:1px solid #b1d1e1;}
.fri_added_img{margin-left:-53px; margin-bottom:3px; visibility:hidden;}
.zxx_fri_list .fri_name{position:absolute; left:68px; top:8px; padding-right:5px; font-size:12px; font-weight:bold; overflow:hidden;}
/* .zxx_fri_on为选中状态下 */
.zxx_fri_on .b3,.zxx_fri_on:hover .b3{border-color:#005eac; background-color:#3777bc;}
.zxx_fri_on .fri_added_img{visibility:visible;}/* 选中状态下显示小加号 */
.zxx_fri_on .fri_name{color:white;}
.zxx_fri_on .fri_head_img{background-color:#8497c0;}

JS及分析为：

/*
# copyright c by zhangxinxu 2009-10-27
更多内容请访问http://www.zhangxinxu.com
*/

(function($){
    $.fn.extend({
        tabChange:function(type){
            return this.click(function(){            
                if($(this).hasClass("fri_num_on")){
                    return;
                }else{
                    option.selectType = type;
                    $("a",$(this).parent()).removeClass("fri_num_on");    
                    $(this).addClass("fri_num_on");
                    friFilter();
                    return false;
                }
            });    
        },
        friChoose:function(){
            return this.each(function(){
                $(this).click(function(){
                    if($(this).hasClass("zxx_fri_on")){  //如果是已选中状态
                        $(this).removeClass("zxx_fri_on");   //点击后则移除 “选中”
                        option.selectNum-=1;  //已选中总数减1
                        option.unSelectNum+=1; //未选中总数加1
                        if(option.selectType === 2){  //如果是  已选
                            $(this).parent().hide();    //则隐藏
                        }
                    }else{
                        $(this).addClass("zxx_fri_on");    
                        option.selectNum+=1;
                        option.unSelectNum-=1;
                        if(option.selectType === 3){
                            $(this).parent().hide();
                        }
                    }
                    option.operateObject.selectNum.text(option.selectNum); 
                    option.operateObject.unSelectNum.text(option.unSelectNum);
                    return false;
                });                          
            });        
        }
    });
    var option = {
        selectNum:0, //选中数
        unSelectNum:15, //未选中数
        selectType:1, //selectType:1表示全部  selectType:2表示已选  selectType:3表示未选  
        operateObject:{}    //???? {selectNum,unSelectNum} 这是定义对象  里面可以是普通的变量  也可以是数组或者是对象

    };
    var bindEvent = function(){
        $("#zxxFriMain").find("a.zxx_fri_a").friChoose();
        $("#friSelectMenu").find("a#friSelectAll").tabChange(1);
        $("#friSelectMenu").find("a#friHaveSelected").tabChange(2);
        $("#friSelectMenu").find("a#friUnSelected").tabChange(3);
        option.operateObject.selectNum = $("#selectNum"); 
        option.operateObject.unSelectNum = $("#unSelectNum"); 
    }();
    var friFilter = function(){
        if(option.selectType === 1){ //显示全部
            $("#zxxFriMain").find("a.zxx_fri_a").parent().show();
        }else if(option.selectType === 2){ //显示已选的
            $("#zxxFriMain").find("a.zxx_fri_on").parent().show();
            $("#zxxFriMain").find("a:not(.zxx_fri_on)").parent().hide();
        }else{//显示未选的
            $("#zxxFriMain").find("a.zxx_fri_on").parent().hide();
            $("#zxxFriMain").find("a:not(.zxx_fri_on)").parent().show();
        }
    };    
    function error(m){
        alert(m);
    }
})(jQuery);