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