Site updated: 2017-09-18 23:56:49

Author: elevenbeans

2016/06/03/DomReady/index.html

@@ -165,7 +165,7 @@ <h1 class="post-title">
 <p>今天抽空梳理一下。</p>
 <h4 id="若干年前踩过的小坑"><a href="#若干年前踩过的小坑" class="headerlink" title="若干年前踩过的小坑"></a>若干年前踩过的小坑</h4><p>不失一般性，在我开始接触前端的时候，学会的第一个框架或者类库 ——Jquery。每次用 JQ 时候用 <code>$(document).ready()</code> 对于逻辑代码进行包裹几乎也是标配。很长一段时间都没有深究过，只想当然的认为加上这个代码块包裹就是等文档准备完成在执行内部逻辑。和原生的<code>window.onload</code> 差不多，甚至猜测其就是对于原生<code>onload</code> 方法的封装。</p>
 <p>然而。。。<br><a id="more"></a><br>上代码：</p>
-<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"</span> <span class="attr">name</span>=<span class="string">"viewport"</span> /&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>test3<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span> = <span class="string">"http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>= <span class="string">"http://img5.imgtn.bdimg.com/it/u=950694448,746521765&amp;fm=21&amp;gp=0.jpg"</span>/&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">//文档树加载完</span></div><div class="line">  <span class="comment">//console.log('ready');</span></div><div class="line">  <span class="keyword">var</span> height = $(<span class="string">'body'</span>).height();</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'height:::'</span>,height); <span class="comment">// -&gt; ???</span></div><div class="line">&#125;)</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"</span> <span class="attr">name</span>=<span class="string">"viewport"</span> /&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>test3<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span> = <span class="string">"http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>= <span class="string">"http://img5.imgtn.bdimg.com/it/u=950694448,746521765&amp;fm=21&amp;gp=0.jpg"</span>/&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line">$(document).ready(function()&#123; //文档树加载完</div><div class="line">  //console.log('ready');</div><div class="line">  var height = $('body').height();</div><div class="line">  console.log('height:::',height); // -&gt; ???</div><div class="line">&#125;)</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
 <p>你会发现在 Chrome 的控制台打出的不是一个确定的值（时而是222，时而是16）。</p>
 <p>宝宝当时就蒙了。。。</p>
 <h4 id="document-ready何时触发？"><a href="#document-ready何时触发？" class="headerlink" title="$(document).ready何时触发？"></a><code>$(document).ready</code>何时触发？</h4><p>Copy 了 Jquery 源码 <a href="https://github.com/jquery/jquery/blob/master/src/core/ready.js" target="_blank" rel="external">https://github.com/jquery/jquery/blob/master/src/core/ready.js</a> 中的代码片段如下：</p>

index.html

@@ -626,7 +626,7 @@ <h3 class="widget-title">Categories</h3>
 
     <section id="tags" class="widget-area widget_tags">
         <h3 class="widget-title">Tags</h3>
-        <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Ctrip/">Ctrip</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/1024/">1024</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/第一篇/">第一篇</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/宋冬野/">宋冬野</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/一年小结/">一年小结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/">ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/license/">license</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Koa/">Koa</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DomReady/">DomReady</a><span class="tag-list-count">1</span></li></ul>
+        <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/八卦/">八卦</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/1024/">1024</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/第一篇/">第一篇</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/宋冬野/">宋冬野</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/一年小结/">一年小结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/">ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/license/">license</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DomReady/">DomReady</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面试/">面试</a><span class="tag-list-count">1</span></li></ul>
     </section>
 
 

page/2/index.html

@@ -645,7 +645,7 @@ <h3 class="widget-title">Categories</h3>
 
     <section id="tags" class="widget-area widget_tags">
         <h3 class="widget-title">Tags</h3>
-        <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Ctrip/">Ctrip</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/1024/">1024</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/第一篇/">第一篇</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/宋冬野/">宋冬野</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/一年小结/">一年小结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/">ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/license/">license</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Koa/">Koa</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DomReady/">DomReady</a><span class="tag-list-count">1</span></li></ul>
+        <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/八卦/">八卦</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/1024/">1024</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/第一篇/">第一篇</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/宋冬野/">宋冬野</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/一年小结/">一年小结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/">ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/license/">license</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DomReady/">DomReady</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面试/">面试</a><span class="tag-list-count">1</span></li></ul>
     </section>
 
 

page/3/index.html

@@ -502,7 +502,7 @@ <h3 class="widget-title">Categories</h3>
 
     <section id="tags" class="widget-area widget_tags">
         <h3 class="widget-title">Tags</h3>
-        <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Ctrip/">Ctrip</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/1024/">1024</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/第一篇/">第一篇</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/宋冬野/">宋冬野</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/一年小结/">一年小结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/">ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/license/">license</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Koa/">Koa</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DomReady/">DomReady</a><span class="tag-list-count">1</span></li></ul>
+        <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/八卦/">八卦</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/1024/">1024</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/第一篇/">第一篇</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/宋冬野/">宋冬野</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/一年小结/">一年小结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/">ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/license/">license</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DomReady/">DomReady</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面试/">面试</a><span class="tag-list-count">1</span></li></ul>
     </section>
 
 

readme.md

@@ -33,6 +33,13 @@
   + [Hello, Ctrip!](http://elevenbeans.github.io/2016/08/08/helloCtrip/) *2016-08-08*
   + ...
 
+## Theme
+
+博客的重点主要还是在文字，所以极简主义风格是我喜欢的。
+
+我的主题为 [PolarBear](https://github.com/frostfan/hexo-theme-polarbear), a light theme base on Even, designed by Giuem.
+
+想要获取更多主题：参见 [Hexo Themes](https://hexo.io/themes/)。
 
 ### Contact
 
@@ -64,14 +71,6 @@ widget_custom:
      ...
 ```
 
-## Theme
-
-博客的重点主要还是在文字，所以极简主义风格是我喜欢的。
-
-我的主题为 [PolarBear](https://github.com/frostfan/hexo-theme-polarbear), a light theme base on Even, designed by Giuem.
-
-想要获取更多主题：参见 [Hexo Themes](https://hexo.io/themes/)。
-
 ### Tags
 
 标签：即对于博文的话题的分类聚合

tags/css/index.html

@@ -30,13 +30,13 @@
 
 
 
-<link rel="canonical" href="http://yoursite.com/tags/css/"/>
+<link rel="canonical" href="http://yoursite.com/tags/CSS/"/>
 
 
 <meta name="description" content="life, tech">
 <meta property="og:type" content="website">
 <meta property="og:title" content="Elevenbeans' blog">
-<meta property="og:url" content="http://yoursite.com/tags/css/index.html">
+<meta property="og:url" content="http://yoursite.com/tags/CSS/index.html">
 <meta property="og:site_name" content="Elevenbeans' blog">
 <meta property="og:description" content="life, tech">
 <meta name="twitter:card" content="summary">
@@ -81,7 +81,7 @@
 
     <title>
 
-    css - Elevenbeans' blog
+    CSS - Elevenbeans' blog
 
 </title>
   </head>
@@ -137,7 +137,7 @@ <h1 class="site-title">
 
 
         <div class="archive-title tag">
-          <h2 class="archive-name">css</h2>
+          <h2 class="archive-name">CSS</h2>
         </div>
 
 
@@ -148,12 +148,12 @@ <h2 class="archive-name">css</h2>
       <div class="archive-post">
         <span class="archive-post-time">
 
-            2016-5-4
+            2017-6-22
 
         </span>
         <span class="archive-post-title">
-          <a href="/2016/05/04/css-中的垂直居中法/" class="archive-post-link">
-            css 中的垂直居中法
+          <a href="/2017/06/22/Yin-and-Yang-by-CSS/" class="archive-post-link">
+            【译】50 行 CSS 代码撸一个阴阳八卦的 Loading 动效
           </a>
         </span>
       </div>
@@ -224,7 +224,3 @@ <h2 class="archive-name">css</h2>
 
   </body>
 </html>
-=1.1"></script>
-
-  </body>
-</html>