js面向对象的简单例子

		

                    

                        

                        

                            

                            
标题
                            
类型
                            
发送时间
                            
操作
                        
                        
                        

                        

                            

                            

                                恭喜你获得200元优惠券
                            

                            
2014/2/12 12:12:21
                            
删除
                        
                        

                            

                            
恭喜你获得50元优惠券
                            

                            
2016/2/12 12:12:21
                            
删除
                        
                        
                    
                
                <%--标记是否已读--%>
                

                     全选
                    标为已读
                

 //我的信息删除、全选/全不选、单击tr选定/取消、标记已读操作
    var MyInfoOperate = function( obj ){
         //信息删除
         $( obj.del ).click( function(){
             $( this ).parents( "tr" ).remove();
         } );
        //全选/全不选
        $( obj.btnSelectAll ).click( function(){
             var i = 0,
                 $btnSelect = $( obj.btnSelect ),
                 len = $btnSelect.length;   //复选按钮的length
            for( ; i < len; i++ ){          //循环复选框的按钮
                 if( !$btnSelect.eq( i ).prop( "checked" ) ){     //如果有未选定的复选框
                     $btnSelect.prop( "checked", true );   //全选
                     $( this ).prop( "checked", true );    //自己选定
                     return;
                 }
            }
            $btnSelect.prop( "checked", false );            //如果已经全部选定，则全不选
            $( this ).prop( "checked", false );             //自己取消选定
        } );
        //单击tr选定该栏的复选框框
        $( "tr" ).click( function(){
            var $targetEle = $( this ).children( "td" ).eq( 0 ).children( "input[ type= 'checkbox' ]" ),  //目标元素
                flag = $targetEle.prop( "checked" );         //标记目标元素的状态
             if( !flag ){                                    //如果未选定，则选定
                 $targetEle.prop( "checked", true );
             }else{                                          //如果选定，则取消选定
                 $targetEle.prop( "checked", false );
             }
        } );
        //单击复选框阻止冒泡
        $( "table input[ type= 'checkbox' ]").bind( "click", function(){
            var flag = $( this ).prop( "checked" );         //标记复选框状态
            if( !flag ){                                    //未选定
                $( this ).prop( "checked", true );         //如果未选定，则选定
            }else{                                         //选定
                $( this ).prop( "checked", false );       //取消选定
            }
        } );
        //标记已读
        $( obj.btnMarkRead ).click( function(){
            var i = 0,
                $btnSelect = $( obj.btnSelect ),
                len = $btnSelect.length;   //复选按钮的length
            for( ; i < len; i++ ) {          //循环复选框的按钮
                if( $btnSelect.eq( i ).prop( "checked" ) ) {     //如果是选定的复选框
                    $btnSelect.eq( i ).parent( "td" ).next( "td" ).find( "span" ).removeClass( "glyphicon-envelope" );
                }
            }
        } )

    };

    new MyInfoOperate( {
        del: ".del",                    //删除按钮
        btnSelect: ".btnSelect",        //复选按钮
        btnSelectAll: "#btnSelectAll",  //全选
        btnMarkRead: "#btnMarkRead"     //标记已读
    } )