事件冒泡

DOM的事件冒泡机制和WPF很相似，DOM事件机制包含冒泡和捕获两种，按照topmost element->innermost element方向传递事件被称为捕获方式，而从innermost element->topmost element方向传递事件被称为冒泡方式。

事件传递说明：

1.捕获（Capture）传递方式通过：1>2>3。

2.冒泡(Bubble) 传递方式通过：3>2>1。

这里要特别说明的是，在<IE9的浏览器没有捕获机制，只有冒泡机制。基于W3C标准，事件传递分捕获和冒泡两个阶段。那么我们注册事件时怎样注册到不同的阶段？

大家应该都熟悉addEventListener方法，在使用时很多时候都是传递两个参数：

  1. document.getElementById("d1").addEventListener("click", function(event){
  2.     alert("d1");
  3. });

但addEventListener为我们提高了三个参数，最后一个是boolean值，默认是false。正是通过这个参数来区分捕获和冒泡方式。false表示冒泡，true表示捕获。

  1. //冒泡方式
  2. document.getElementById("d1").addEventListener("click", function(event){
  3.      alert("d1");
  4. , false);
  5. //捕获方式
  6. document.getElementById("d1").addEventListener("click", function(event){
  7.      alert("d1");
  8. , true);

在事件的传递阶段，我们怎么取消事件的传递？event参数体提供了取消办法。下面代码说明了取消使用代码：

  1. document.getElementById("d3").addEventListener("click", function(event){
  2.     alert("d3");
  3.     event = event || window.event;
  4.     //W3C标准
  5.     if(event.stopPropagation){
  6.         event.stopPropagation();
  7.     }
  8.     //IE兼容
  9.     else{
  10.         event.cancelBubble = true;
  11.     }
  12. }, false);

下面给出可运行的测试Demo，执行代码可以很清楚的看到事件传递的两个阶段并且可以在两个阶段的任意元素上终止事件的传递。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style type="text/css">
  6.     .div-class-1, .div-class-2, .div-class-3{
  7.     padding: 30px;
  8.     }
  10.     .div-class-1{
  11.     width: 200px;
  12.     height: 200px;
  13.     background: #fd0303;
  14.     }
  16.     .div-class-2{
  17.     width: 100px;
  18.     height: 100px;
  19.     background: #fdf403;
  20.     }
  22.     .div-class-3{
  23.     width: 50px;
  24.     height: 50px;
  25.     background: #03fd38;
  26.     }
  28.     </style>
  30.     <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
  31.     <script type="text/javascript">
  32.     $(function(){
  33.     document.getElementById("d1").addEventListener("click", function(event){
  34.     alert("d1");
  35.     }, false);
  36. document.getElementById("d2").addEventListener("click", function(event){
  37.     alert("d2");
  38.     }, false);
  39.     document.getElementById("d3").addEventListener("click", function(event){
  40.         alert("d3");
  41.         event = event || window.event;
  42.         //W3C标准
  43.         if(event.stopPropagation){
  44.             event.stopPropagation();
  45.         }
  46.         //IE兼容
  47.         else{
  48.             event.cancelBubble = true;
  49.             }
  50.     }, false);
  52.     document.getElementById("d1").addEventListener("click", function(event){
  53.     alert("d1");
  54.     }, true);
  55.     document.getElementById("d2").addEventListener("click", function(event){
  56.     alert("d2");
  57.     }, true);
  58.     document.getElementById("d3").addEventListener("click", function(event){
  59.     alert("d3");
  60.     }, true);
  61.     });
  62.     </script>
  63. </head>
  64. <body>
  65.     <div id="d1" class="div-class-1">
  66.     <span>d1</span>
  67.     <div id="d2" class="div-class-2">
  68.     <span>d2</span>
  69.     <div id="d3" class="div-class-3">
  70.     <span>d3</span>
  71.     </div>
  72.     </div>
  73.     </div>
  74. </body>
  75. </html>

使用offset、scroll、clientHeight定位元素

有时候我们需要在页面的右边中间位置或者底部位置显示悬浮面板，悬浮面板的定位需要使用offsetXXX、scrollXXX、clientXXX属性。下面我们都拿Vertical方向来说明。

  • 1.scrollHeight: 所有元素内容的高度(只读)，也就是页面所有内容的整个高度。

  • 2.scrollTop：当前元素所在位置之前的整个高度，可读可写。如果没有滚动条，scrollTop为0。

  • 3.clientHeight：元素的可见高度，不包含padding和border，只读。

  • 4.offsetHeight: 元素高度，包含了padding和border，只读。

如果我们想在滚动条滚动的同时，让元素始终显示在浏览器页面的中间位置，可以通过以下设置：

  1. div.style.top = winScrolTop + (winclientHeight/2) - (divHeight/2) + "px";

说明：winScrolTop为window的scrollTop，winclientHeight为window的可见高度，divHeight为元素的高度。在使用clientHeight时需要注意兼容性问题，不同版本浏览器取clientHeight方式都不一样。需要根据document.compatMode来判断。

如果document.compatMode等于BackCompat表示关闭标准兼容模式，等于CSS1Compat表示开启标准兼容性模式。BackCompat时浏览器高度等于document.body.clientHeight，CSS1Compat时浏览器高度等于document.documentElement.clientHeight。

下面是测试Demo代码：

  1. <!DOCTYPE HTML>
  2. <html lang="zh">
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>offset&scroll&clientHeight元素定位</title>
  6.         <style type="text/css">
  7.             .body-class1{
  8.                 position: absolute;
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 background: #CD0000;
  12.                 right: 0;
  13.             }
  15.             .body-class2{
  16.                 position: fixed;
  17.                 width: 200px;
  18.                 height: 200px;
  19.                 background: #CD0000;
  20.                 right: 0;
  21.                 bottom: 10px;
  22.             }
  23.         </style>
  24.         <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
  25.         <script type="text/javascript">
  27.             /*
  28.             *    scrollHeight: 元素所有内容的高度(只读) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
  29.             *    scrollTop：从元素之前所有内容的高度(可读可写), 如果没有滚动条，则为0。  https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
  30.             *    clientHeight：元素可见高度(只读)。https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
  31.             *    offsetHeight: 元素高度(只读), 包含pading、border
  32.             */
  33.             function setVerticalLocation(){
  34.                 var div = document.getElementById("d1");
  35.                 //div的高度，包括border和padding
  36.                 var divHeight = div.offsetHeight;
  37.                 // document.compatMode：BackCompat和CSS1Compat。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
  38.                 //当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
  39.                 //当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
  40.                 //http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html
  41.                 var winclientHeight = /BackCompat/i.test("document.compatMode") ? document.body.clientHeight : document.documentElement.clientHeight;
  42.                 var winScrolTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
  44.                 div.style.top = winScrolTop + (winclientHeight/2) - (divHeight/2) + "px";
  45.             }
  47.             $(document).ready(function(){
  48.                 var setTop = function(){
  49.                     setTimeout(function(){
  50.                         setVerticalLocation();
  51.                     }, 100);
  52.                 }
  54.                 $(window).bind("scroll", function(event){
  55.                         setTop();
  56.                     });
  58.                     $(window).bind("resize", function(event){
  59.                         setTop();
  60.                     });
  61.             });
  62.         </script>
  63.     </head>
  64.     <body>
  65.         <div id="d1" class="body-class1">
  66.             <span>你得把我显示在浏览器垂直中间位置</span>
  67.         </div>
  68.         <div id="d1" class="body-class2">
  69.             <span>你得把我显示在浏览器垂直底部位置</span>
  70.         </div>
  71.         <h1>offset&scroll&clientHeight元素定位</h1>
  72.         ...自己写若干个分行，让浏览器出现滚动条
  73.         <br><span>滚滚滚...</span>
  74.     </body>
  75. </html>

模仿JD写个右栏菜单

大家看到得当前文章页面的右边中间位置有几个菜单，这个功能其实是仿照JD商城页面做了一个悬浮停靠菜单。下面是右栏菜单生成代码：

  1. <!DOCTYPE HTML>
  2. <html lang="zh">
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>右栏菜单</title>
  6.         <style type="text/css">
  7.             .h-tab{
  8.                 position: fixed;
  9.                 width: 36px;
  10.                 right: 0;
  11.                 top: 100px;
  12.                 border-right: 2px solid #7a6e6e;
  14.                 padding: 0;
  15.                 margin: 0;
  16.             }
  18.             .h-tab .h-bar{
  19.                 position: relative;
  20.                 background: #7a6e6e;
  21.                 width: 35px;
  22.                 height: 35px;
  23.                 margin-bottom: 3px;
  25.                 color: #fff;
  26.                 font-weight: bold;
  27.                 font-size: 10px;
  28.                 line-height: 35px;
  29.             }
  31.             .h-tab .h-bar-title{
  32.                 width: 35px;
  33.                 height: 35px;
  34.                 text-align: center;
  35.                 background: #7a6e6e;
  36.                 position: absolute;
  37.                 z-index: 1000;
  38.                 text-indent: 5px;
  39.                 right: -1px;
  40.             }
  42.             .h-tab .h-bar-title:hover{
  43.                 background: #c81623;
  44.                 cursor: pointer;
  45.             }
  47.             .h-tab .h-bar-desc{
  48.                 position: absolute;
  49.                 background: #c81623;
  50.                 height: 35px;
  51.                 width: 100px;
  52.                 top: 0;
  53.                 right: -65px;
  54.                 z-index: 900;
  55.                 text-align: left;
  56.                 text-indent: 5px;
  57.             }
  59.             .hid{
  60.                 display: none;
  61.             }
  62.         </style>
  63.         <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
  64.         <script type="text/javascript">
  65.             function Rightmenu(){
  66.             }
  68.             Rightmenu.prototype.removeAdapterMenu = function(){
  69.                 $(".h-tab").find("#adapterMenu, #fastcomment, #recommend").parents(".h-bar").remove();
  71.                 return this;
  72.             }
  74.             Rightmenu.prototype.createRightMenu = function(){
  75.                 var html = '<div class="h-tab">' +
  76.                                 '<div class="h-bar">' +
  77.                                     '<div id="goTop" class="h-bar-title">' +
  78.                                         '<span>↑</span>' +
  79.                                     '</div>' +
  80.                                     '<div class="h-bar-desc hid">' +
  81.                                         '<span>顶部</span>' +
  82.                                     '</div>' +
  83.                                 '</div>' +
  84.                                 '<div class="h-bar">' +
  85.                                     '<div id="adapterMenu" class="h-bar-title">' +
  86.                                         '<span>关</span>' +
  87.                                     '</div>' +
  88.                                     '<div class="h-bar-desc hid">' +
  89.                                         '<span>菜单</span>' +
  90.                                     '</div>' +
  91.                                 '</div>' +
  92.                                 '<div class="h-bar">' +
  93.                                     '<div id="fastcomment" class="h-bar-title">' +
  94.                                         '<span>注</span>' +
  95.                                     '</div>' +
  96.                                     '<div class="h-bar-desc hid">' +
  97.                                         '<span>评论</span>' +
  98.                                     '</div>' +
  99.                                 '</div>' +
  100.                                 '<div class="h-bar">' +
  101.                                     '<div id="recommend" class="h-bar-title">' +
  102.                                         '<span>我</span>' +
  103.                                     '</div>' +
  104.                                     '<div class="h-bar-desc hid">' +
  105.                                         '<span>推荐</span>' +
  106.                                     '</div>' +
  107.                                 '</div>' +
  108.                                 '<div class="h-bar">' +
  109.                                     '<div id="goBottom" class="h-bar-title">' +
  110.                                         '<span>↓</span>' +
  111.                                     '</div>' +
  112.                                     '<div id="" class="h-bar-desc hid">' +
  113.                                         '<span>底部</span>' +
  114.                                     '</div>' +
  115.                                 '</div>' +
  116.                             '</div>';
  117.                     $("body").append(html);
  119.                     return this;
  120.             }
  122.             Rightmenu.prototype.registEvent = function(){
  123.                 $(".h-tab .h-bar").bind("mouseenter", function(){
  124.                     //停止其他动画
  125.                     $(".h-tab .h-bar").find(".h-bar-desc").finish();
  126.                     $(this).find(".h-bar-desc").removeClass("hid");
  127.                     $(this).find(".h-bar-desc").delay(100).animate({right: "-1px"}, 400);
  128.                 });
  130.                 $(".h-tab .h-bar").bind("mouseleave", function(){
  131.                     //停止其他动画
  132.                     $(".h-tab .h-bar").find(".h-bar-desc").finish();
  133.                     var desc = $(this).find(".h-bar-desc");
  134.                     $(desc).animate({right: "-65px"}, 100, "linear", function(){
  135.                         $(desc).addClass("hid");
  136.                     });
  137.                 });
  139.                 //注册go top事件
  140.                 $("#goTop").bind("click", function(event){
  141.                     locateElement("#header");
  142.                 });
  144.                 //注册menu事件
  145.                 $("#adapterMenu").bind("click", function(event){
  146.                     if(!$("#footer_menu_container").hasClass("hid")){
  147.                         $("#footer_menu_container").addClass("hid");
  148.                     }else{
  149.                         $("#footer_menu_container").removeClass("hid");
  150.                     }
  151.                 });
  153.                 //注册fastcomment事件
  154.                 $("#fastcomment").bind("click", function(event){
  155.                     locateElement("#footer");
  156.                 });
  158.                 //注册recommend事件
  159.                 $("#recommend").bind("click", function(event){
  160.                     if(!$("#heavifooter").hasClass("hid")){
  161.                         $("#heavifooter").addClass("hid");
  162.                     }else{
  163.                         $("#heavifooter").removeClass("hid");
  164.                     }
  165.                 });
  167.                 //注册go Bottom事件
  168.                 $("#goBottom").bind("click", function(event){
  169.                     locateElement("#footer");
  170.                 });
  172.                 return this;
  173.             }
  175.             $(document).ready(function(){
  176.                 (new Rightmenu()).createRightMenu().registEvent().removeAdapterMenu();
  177.             });
  178.         </script>
  179.     </head>
  180.     <body>
  182.     </body>
  183. </html>

生成元素之后，我们要让元素始终显示在中间位置。基本上有两个步骤，先初始化到中间位置，然后注册浏览器的resize事件，当浏览器大小改变时自动调节位置。下面是我写的一段定位任何元素的代码：

  1. function FloatPage(id, position){
  2.     this.id = id;
  3.     this.position = position;
  4. }
  6. FloatPage.prototype.init = function(){
  7.     var c = this;
  9.     this.autoAdapt();
  10.     $(window).bind("resize", function(event){
  11.         c.autoAdapt();
  12.     });
  13. }
  15. FloatPage.prototype.autoAdapt = function(){
  16.     var element = document.getElementById(this.id);
  17.     var eHeight = element.offsetHeight;
  18.     var winHeight = /BackCompat/i.test("document.compatMode") ? document.body.clientHeight : document.documentElement.clientHeight;
  19.     if(this.position == "top"){
  20.         element.style.top = 0;
  21.     }else if(this.position == "center"){
  22.         element.style.top = (winHeight/2) - (eHeight/2) + 'px';
  23.     }else {
  24.         element.style.top = winHeight - eHeight + 'px';
  25.     }
  26. }

下面一段代码调用创建菜单方法，然后定位元素并且注册resize事件。代码如下：

  1. //创建右栏菜单
  2. var rightMenu = (new Rightmenu()).createRightMenu().registEvent();
  3. //设置右栏菜单停靠位置
  4. (new FloatPage("rightMenuTab", "center")).init();
  5. 元素水平和垂直居中
  6. 水平居中
  8. 居中分为水平和垂直居中，水平居中比较容易解决。如果是非块级别的inline元素(例如显示文字的span)设置水平居中，直接设置样式:
  10. span{
  11.     text-align: center;
  12. }
  13.     如果是块级别的inline-block或者block元素，如果已知width的情况下可通过下面方式设置居中：
  15. 复制代码
  16. .children{
  17.     background: red;
  18.     width: 50px;
  19.     height: 50px;
  20.     margin: 0 auto;
  21. }

垂直居中

级别为inline-block或者inline的元素，可通过设置line-height让元素居中显示。

垂直居中比水平居中稍微复杂些，不管是哪种方式，一般都会设置css属性position为absolute定位元素。在已知height情况下可结合

top和margin-top设置居中：

  1. .children{
  2.         width: 50px;
  3.         height: 50px;
  4.         left: 50%;
  5.         margin-left: -25px;
  6.         position: absolute;
  7.         top: 50%;
  8.         margin-top: -25px;
  9.     }

说明：上面的样式也包含了水平居中的方法。

在不知道height的情况，可以使用W3C提供的transform属性。设置如下：

  1. .children{
  2.         left: 50%;
  3.         top: 50%;
  4.         transform: translate(-50%, -50%);
  5.         -ms-transform: translate(-50%, -50%); /* IE 9 */
  6.         -moz-transform: translate(-50%, -50%); /* Firefox */
  7.         -webkit-transform: translate(-50%, -50%); /* Safari 和 Chrome */
  8.         -o-transform: translate(-50%, -50%); /* Opera */
  9.     }

说明：translate(-50%, -50%)表示元素的位置向左偏移元素宽度的50%，向上偏移高度的50%。完整的测试代码如下：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style type="text/css">
  6.     .parent{
  7.         background: green;
  8.         width: 300px;
  9.         height: 200px;
  10.         position: relative;
  11.     }
  13.     /*
  14.     * 方法一，inline-block或者block元素水平居中方式
  15.     */
  16.     /*.children{
  17.         background: red;
  18.         width: 50px;
  19.         height: 50px;
  20.         margin: 0 auto;
  21.     }
  23.     */
  25.    /*
  26.     ** 方案二，知道元素的width和height
  27.     .children{
  28.         width: 50px;
  29.         height: 50px;
  30.         left: 50%;
  31.         margin-left: -25px;
  32.         position: absolute;
  33.         top: 50%;
  34.         margin-top: -25px;
  35.     }
  36.     */
  38.     /*
  39.     ** 方案三，不知道元素的width和height
  40.     */
  41.     .children{
  42.         left: 50%;
  43.         top: 50%;
  44.         transform: translate(-50%, -50%);
  45.         -ms-transform: translate(-50%, -50%); /* IE 9 */
  46.         -moz-transform: translate(-50%, -50%); /* Firefox */
  47.         -webkit-transform: translate(-50%, -50%); /* Safari 和 Chrome */
  48.         -o-transform: translate(-50%, -50%); /* Opera */
  49.     }
  50.     </style>
  52.     <script type="text/javascript">
  53.     function submitByNA(value){
  54.     alert(value);
  55.     }
  56.     </script>
  57. </head>
  58. <body>
  59.     <div class="parent">
  60.     <div class="children">
  62.     </div>
  63.     </div>
  64.     <div>
  65. </body>
  66. </html>

inline元素遇见padding和margin

padding和margin对inline-block和block元素都能生效。而对inline来说，padding和margin只对水平设置生效。测试demo如下：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style type="text/css">
  6.     .body-class-block{
  7.         display: block;
  8.         background: yellow;
  9.         /*margin: 10px; */ /*有效*/
  10.         /*padding: 10px; */ /*有效*/
  11.     }
  13.     .body-class-inlineblock{
  14.         display: inline-block;
  15.         background: red;
  16.         /* margin: 20px 10px; */ /* 有效 */
  17.         /* padding: 20px 10px; */ /* 有效 */
  18.     }
  20.     .body-class-inline{
  21.         display: inline;
  22.         background: green;
  23.         /*margin: 20px 10px; */ /* margin只对左右有效 */
  24.         /*padding: 20px 10px; */ /* padding只对左右有效 */
  25.         line-height: 2em; /* 如果要设置高度，可使用line-height */
  26.     }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="body-class-block">
  31.     <span>block element</span>
  32.     </div>
  33.     <div class="body-class-inlineblock">
  34.     <span>inline-block element</span>
  35.     </div>
  36.     <div style="clear: both;"></div>
  37.     <div class="body-class-inline">
  38.     <span>inline element</span>
  39.     </div>
  40.     <div class="body-class-inline">
  41.     <span>inline element</span>
  42.     </div>
  43. </body>
  44. </html>

圆角兼容性处理

在使用CSS3提供的border-radius和graident属性时，我们得考虑兼容性，IE9以下的版本都不支持这些属性，为了解决兼容性，可以使用PIE框架，下面的这段代码大家可以在IE9以下的IE浏览器下测试兼容性。但得自己到PIE官网上去下载PIE框架代码。

  1. <!DOCTYPE HTML>
  2. <html lang="zh">
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>圆角兼容性测试</title>
  6.         <style type="text/css">
  7.             .body-radius-class1, .body-radius-class2{
  8.                 margin: 10px 20px;
  9.                 padding: 10px 20px;
  10.             }
  11.              /* 圆角，没解决兼容性 */
  12.             .body-radius-class1{
  13.                 background: #FF0000;
  14.                 -moz-border-radius: 8px;
  15.                 -webkit-border-radius: 8px;
  16.                 border-radius: 8px;
  17.             }
  18.             /* 圆角，解决兼容性 */
  19.             .body-radius-class2{
  20.                 background: #8B4C39;
  21.                 -moz-border-radius: 8px;
  22.                 -webkit-border-radius: 8px;
  23.                 border-radius: 8px;
  25.                 /* 使用PIE解决兼容性 */
  26.                 behavior: url("PIE/PIE.htc");
  27.             }
  29.             .body-gradient-class1, .body-gradient-class2{
  30.                 margin: 10px 20px;
  31.                 padding: 10px 20px;
  32.             }
  34.             /* 渐变，没解决兼容性 */
  35.             .body-gradient-class1{
  36.                 background: #8EE5EE;
  37.                 background: -moz-linear-gradient(to bottom, #8EE5EE, #fff);
  38.                 background: -webkit-linear-gradient(to bottom, #8EE5EE, #fff);
  39.                 background: linear-gradient(to bottom, #8EE5EE, #fff);
  40.             }
  41.             /* 渐变，解决兼容性 */
  42.             .body-gradient-class2{
  43.                 background: #8E8E8E;
  44.                 background: -moz-linear-gradient(to bottom, #8E8E8E, #fff);
  45.                 background: -webkit-linear-gradient(to bottom, #8E8E8E, #fff);
  46.                 background: linear-gradient(to bottom, #8E8E8E, #fff);
  47.                 /* 使用PIE解决兼容性 */
  48.                 -pie-background: linear-gradient(#8E8E8E, #fff);
  49.                 behavior: url("PIE/PIE.htc");
  50.             }
  51.         </style>
  52.         <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
  53.     </head>
  54.     <body>
  55.         <h1>border-radius</h1>
  56.         <div class="body-radius-class1">
  57.             <span>没解决兼容性</span>
  58.         </div>
  59.         <div class="body-radius-class2">
  60.             <span>解决兼容性</span>
  61.         </div>
  62.         <h1>gradient</h1>
  63.         <div class="body-gradient-class1">
  64.             <span>没解决兼容性</span>
  65.         </div>
  66.         <div class="body-gradient-class2">
  67.             <span>解决兼容性</span>
  68.         </div>
  69.     </body>
  70. </html>

常见的JS和CSS问题的更多相关文章

  1. 使用yuicompressor-maven-plugin压缩js及css文件

    本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-p ...

  2. JS控制css float属性的用法经验总结

    JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...

  3. （转）使用yuicompressor-maven-plugin压缩js及css文件（二）

    本文介绍通过使用yuicompressor-maven-plugin插件实现js及css代码的自动压缩,方便集成到持续集成环境中,如jenkins. 一.配置yuicompressor-maven-p ...

  4. yui压缩JS和CSS文件

    CSS和JS文件经常需要压缩,比如我们看到的XX.min.js是经过压缩的JS. 压缩文件第一个是可以减小文件大小,第二个是对于JS文件,默认会去掉所有的注释,而且会去掉所有的分号,也会将我们的一些参 ...

  5. 把JS和CSS合并到1个文件

    合并JS文件和CSS文件很多人都知道,也用过,目的是为了减少请求数.但有时候我们觉的把JS合并到1个文件,CSS又合并到另外1个文件也是浪费,我们如何能把CSS和JS一起合并进1个文件了? 这里需要使 ...

  6. python爬虫爬小说网站涉及到(js加密,CSS加密)

    我是对于xxxx小说网进行爬取只讲思路不展示代码请见谅 一.涉及到的反爬 js加密 css加密 请求头中的User-Agent以及 cookie 二.思路 1.对于js加密 对于有js加密信息,我们一 ...

  7. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  8. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  9. js或css文件后面的参数是什么意思？

    经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type=& ...

随机推荐

  1. [翻译]PyMongo官方文档

    PyMongo官方文档翻译 周煦辰 2016-06-30 这是本人翻译的PyMongo官方文档.现在网上分(抄)享(袭)的PyMongo博客文章很多,一方面这些文章本就是抄袭的,谈不上什么格式美观,另 ...

  2. Oracle数据库空值操作

    空值操作: null表示空的意思. 一.情况: 1:表中的任何字段默认情况下都可以为null值. 2:not null表示非空,是一种约束 设置为非空约束的字段,必须有有效值,不能为空. 3:插入数据 ...

  3. UVA-10129 Play on Words （判断欧拉道路的存在性）

    题目大意:给出一系列单词,当某个单词的首字母和前一个单词的尾字母相同,则这两个单词能链接起来.给出一系列单词,问是否能够连起来. 题目分析:以单词的首尾字母为点,单词为边建立有向图,便是判断图中是否存 ...

  4. 前端构建工具 Grunt 入门

    之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 A ...

  5. 使用Lucene对doc、docx、pdf、txt文档进行全文检索功能的实现

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/76273859 本文出自[我是干勾鱼的博客] 这里讲一下使用Lucene对doc. ...

  6. iOS-----使用AddressBook添加联系人

    使用AddressBook添加联系人 添加联系人的步骤如下: 1 创建ABAddressBookRef,这就得到了对地址簿的引用. 2 调用ABPersonCreate()函数创建一个空的ABReco ...

  7. Qt SD卡 文件系统挂载、文件预览

    /********************************************************************************** * Qt SD卡 文件系统挂载. ...

  8. Session History 属性和方法

    History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录. js通过window.history来访问和操作的,操作的范围是某个tab的会话历史记录. 这个tab打开后,tab内的 ...

  9. 最佳C/C++编辑器 source insight3

    C/C++嵌入式代码编辑器source insight3下载地址 http://www.sourceinsight.com/eval.html 注册码:SI3US-361500-17409

  10. 我的AOP那点事儿--2

    在<我的AOP那点事儿-1>中,从写死代码,到使用代理:从编程式AOP到声明式AOP.一切都朝着简单实用主义的方向在发展.沿着 Spring AOP 的方向,Rod Johnson(老罗) ...