js面向对象的简单例子全部代码

html代码：

<div class="tab-pane">  
    <table class="table table-bordered">  
        <thead>  
        <tr>  
            <th></th>  
            <th>标题</th>  
            <th>类型</th>  
            <th>发送时间</th>  
            <th>操作</th>  
        </tr>  
        </thead>  
        <tbody>  
        <tr>  
            <td><input type="checkbox" class="btnSelect" /></td>  
            <td><a href="<%=path%>/pages/xtgl/notice/noticeDetail.jsp">
            <span class="glyphicon glyphicon-envelope"></span>  
                恭喜你获得200元优惠券</a></td>  
            <td></td>  
            <td>2017/2/19 12:12:21</td>  
            <td><a class="del">删除</a></td>  
        </tr>  
        <tr>  
            <td><input type="checkbox" class="btnSelect" /></td>  
            <td><a href="">恭喜你获得50元优惠券</a></td>  
            <td></td>  
            <td>2017/2/20 12:12:21</td>  
            <td><a class="del">删除</a></td>  
        </tr>  
        </tbody>  
    </table>  
</div>  
<%--标记是否已读--%>  
<div class="isread-check">  
    <label><input type="checkbox" class="left" id="btnSelectAll" /> 全选</label>  
    <button class="btn btn-primary" id="btnMarkRead">标为已读</button>  
</div>

js代码：

//我的信息删除、全选/全不选、单击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"     //标记已读  
} )

欢迎分享本文，转载请保留出处：前端ABC » js面向对象的简单例子全部代码