2.2 点击div显示其innerHtml内容

中心主题：点击div显示其innerHtml内容

一、HTML结构

<div>
<div class="innerHtmlShow"><strong>中国海事局公布本月5号至11号</strong>中国海事局公布本月5号至11号，中国海军将在南海海域进行军事演习，引起国际媒体关注。但菲律宾外交部长亚赛对此则表示无需担忧。他称，只要不影响航行和飞越自由，中国跟其他国家一样，有权在国际海域展开军事演习。</div>
<div class="innerHtmlShow"><i>中国海事局3号发布航行警告，中国海军</i>将于本月5号至11号，在海南岛以东以至整个西沙海域展开军事演习，期间禁止其他船只进入相关海域。日前也有报道指，解放军三大舰队多艘王牌军舰已经聚集在海南三亚军港，包括隶属北海舰队的导弹驱逐舰115舰，东海舰队的导弹驱逐舰139舰，以及导弹护卫舰595舰等。更有外媒分析，这一进展跟即将出炉的南海仲裁案裁决有关。声称，一旦裁决对中国不利，中方将在南海举行大规模军事演习，以宣示主权。海域展开军事演习。</div>
<div class="innerHtmlShow"><em>菲律宾外交部长亚赛4号回应菲国本地媒体询问</em>，菲方是否将针对中国在南海展开军演，对中国提出外交抗议或做出任何回应时表示，无需担忧这一进展，更称，在不影响航行和飞越自由的情况下，中国跟其他国家一样，有权在国际海域展开军事演习。海域展开军事演习。</div>
</div>

二、css样式

  div{
            border:2px solid darkkhaki;
            width:300px;
            padding: 20px;
            margin:0px auto;
            margin-top: 20px;
            cursor: pointer;
        }

三、jquery

  (function($){
        $.fn.innerHtmlShow=function(){
            return this.each(function(){
                var that=$(this);
                that.find(".innerHtmlShow").click(function(){
                    alert($(this).html());
                });
            });
        };
    })(jQuery);
    $("div").innerHtmlShow();

四、最终效果