04 January 2014
号外号外:专注于移动端的fullPage.js来啦!!!快点我查看

所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性。在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用。

1.*

* {  
 margin: 0;  
 padding: 0;  
}

对于初学者,在学习更多高级选择器之前,最先了解的选择器。

星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为零。虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它。它给浏览器带来大量不必要的负担。

* 也能作为子选择符使用。

#container * {  
 border: 1px solid black;  
} 

这将匹配#container div的每一个后代元素。再次强调,尽量不要使用这种技术。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2.#X

#container {  
   width: 960px;  
   margin: auto;  
}  

井号前缀允许我们选择id。这是最常见的用法,不过应该慎重使用ID选择器。

反复问自己:我一定需要id来匹配要选择的元素吗?

id选择符是唯一的,不允许重复使用。如果可能的话,先尝试使用一个标签名称,一个新的HTML5元素,甚至是一个伪类。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

.error {  
  color: red;  
}

现在介绍的是类选择符。id和类的不同之处在于后者可以多次使用。当你想给一组元素应用样式的时候可以使用类选择符。另外,当你紧想给特殊元素应用样式的时候才使用id。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

li a {  
  text-decoration: none;  
}

下一个最常用的选择符是后代选择符。当你需要给你的选择符增加特殊性的时候你可以使用。例如,如果你只想匹配无序列表下的锚元素?此时后代选择符派上用场。

小贴士——如果你的选择符看起来像这样 X Y Z A B.error,那你就错了。时刻问自己使用这高的权重是否有必要。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

a { color: red; }  
ul { margin-left: 0; }   

如果你想匹配页面上的所有的元素,根据他们的类型,而不是id或类名?显而易见,使用类型选择符。如果你需要选择所有的无序列表,请使用ul {}

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera
a:link { color: red; }  
a:visted { color: purple; } 

我们使用:link 伪类选择符选择所有已经被点击过的锚标签。

此外,我们也有:visited伪类选择符,正如你期望的,允许我们仅给页面上被点击过的或被访问过的锚标签应用样式。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X + Y

ul + p {  
   color: red;  
} 

这被称作相邻选择符。它将只选择紧贴在X元素之后Y元素。上面的例子,仅每一个ul之后的第一个段落元素的文本为红色。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X > Y

div#container > ul {  
  border: 1px solid black;  
}  

X YX > Y之间的不同点是后者只选择直接子代。例如,考虑如下的标记。

<div id="container">  
   <ul>  
      <li> List Item  
        <ul>  
           <li> Child </li>  
        </ul>  
      </li>  
      <li> List Item </li>  
      <li> List Item </li>  
      <li> List Item </li>  
   </ul>  
</div> 

选择符#container > ul将只选择id为container的div的直接子代ul。它不匹配更深层的li的子代的ul。

因此,使用子代选择符有性能上的优势。事实上,这同样适用于基于css选择器的javascript引擎。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

ul ~ p {  
   color: red;  
}  

这是兄弟选择符和X + Y一样,然而,它没有约束。与相邻选择符(ul + li)仅选择前一个选择符后面的第一个元素比起来,兄弟选择符更宽泛。它会选择,我们上面例子中跟在ul后面的任何p元素。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

a[title] {  
   color: green;  
} 

被称为属性选择器,在我们上面的例子里,这只会选择有title属性的锚标签。没有此属性的锚标签将不受影像。但如果你需要更多的特性怎么办呢?呵呵……

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href=”foo”]

a[href="http://net.tutsplus.com"] {  
  color: #1f6053; /* nettuts green */  
} 

上面的代码段将给所有href属性为http://net.tutsplus.com的锚标签添加样式;他们将会显示为我们的品牌绿色。所有其他的锚标签将不受影响。

注意我们将href值用引号包裹。记住,当使用javascript的css选择符引擎时也这么做。如果可能的话,尽可能使用css3选择符代替非官方的方法。

这工作的很好,但有点不够灵活。如果链接确实直接连接到Nettus+还好,但是,也许路径是到nettust的相对路径呢?在这种情况下,我们可以使用一点正则表达式语法。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*=”nettuts”]

a[href*="tuts"] {  
  color: #1f6053; /* nettuts green */  
} 

来了不是~这就是我们需要的代码。*号指定了包含该属性的值必须包含定义的值。就是说,这句代码包含了href值为 nettuts.com,net.tutsplus.com或者tutsplus.com。

记住这个描述过于宽泛,如果是某个锚点标签链接到某个连接中带有tuts非Envato的网站(tutsplus属于Envato旗下网站)呢?因此你需要更多特性来限制,分别使用^和&来限定字符串的开始和结束。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^=”http”]

a[href^="http"] {  
   background: url(path/to/external/icon.png) no-repeat;  
   padding-left: 10px;  
}   

有没有想过某些网站是如何定义一个图标的链接的?我确定你肯定看到过。这些链接很容易让你跳转到另一个网站。

使用^(carat)符灰常简单啦。这个符号常常在正则表达式中表示字符串的开始。如果我们想指向所有以”http”开头的”href”属性的锚点的话,我们就可以使用类似于上面的那段代码啦。

注意啦,我们不需要搜索”http://”,完全没必要,因为我们还要包含以https://开头的链接呢。

如果我们想为所有链接到图片的链接定义样式咋办?这种情况下,我们得搜索字符串的结束了不是。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14. X[href$=”.jpg”]

a[href$=".jpg"] {  
   color: red;  
}  

又来了,我们还是使用正则表达式符号,$(dolor),来作为字符串的结束标记。这种情况下,我们就会搜索所有url以.jpg为结尾的锚点啦。记住记住这种情况下gif和png格式的图片不会被选择哦。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15. X[data-*=”foo”]

a[data-filetype="image"] {  
   color: red;  
}  

回顾最近一条,我们如何能包含各种图片类型:png,jpeg,jpg,gif?很容易想到,我们能通过多个选择器来不是,像这样:

a[href$=".jpg"],  
a[href$=".jpeg"],  
a[href$=".png"],  
a[href$=".gif"] {  
   color: red;  
} 

不过,这样很蛋疼,效率极低。另一个解决办法是使用自定义属性。如果我们加了一种自己的 data-filetype 属性给每一个链接到图片的锚点的话呢?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>  

这样关联后,我们就能使用标准的属性选择器来指定这些链接啦。看下面:

a[data-filetype="image"] {  
   color: red;  
}

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X[foo~=”bar”]

a[data-info~="external"] {  
   color: red;  
}  
  
a[data-info~="image"] {  
   border: 1px solid black;  
} 

这儿有个鲜为人知的特殊技巧,绝对让你印象时刻。~(tilda)符,它可以帮助我们指向那些以空格隔开多个值的属性的元素(真拗口,这翻译我自己都看不懂,水平问题)

以我们第15条的自定义属性为例,上面的代码中我们创建了 data-info属性,这个属性可以定义以空格分隔的多个值。这样,这个链接本身就是个icon,并且指向的也是一个图片链接,像下面这样。

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>  

有了这样适当的标记,通过使用 ~ 属性选择器的技巧,我们就可以指向任何具有着两种属性的任何一种啦。

/* Target data-info attr that contains the value "external" */  
a[data-info~="external"] {  
   color: red;  
}  
  
/* And which contain the value "image" */  
a[data-info~="image"] {  
  border: 1px solid black;  
}

很棒,不是吗?

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17. X:checked

input[type=radio]:checked {  
   border: 1px solid black;  
}  

这种伪类只会匹配已经被选中的单选元素。就是这么简单。

查看例子

兼容性

  • E9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

beforeafter 伪元素也很蛋疼。貌似人们每天都能找到或者发明一些新办法来有效地使用它们。它们很容易控制选择器周围的内容。

很多第一次使用是因为他们需要对clear-fix进行改进。

.clearfix:after {  
    content: "";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    font-size: 0;  
    height: 0;  
}  
  
.clearfix {   
   *display: inline-block;   
   _height: 1%;  
}

这个改进使用了:after伪类元素来在元素后增加一个空间,然后清除它。这个牛X的技巧你应该收藏到工具包里,特别是当overflow:hidden方法无能为力的时候。

想看看其他创造性的用法:访问我滴创建阴影的窍门

通过Css3选择器的标准说明书,你应该有技巧地使用这些伪类语法——双冒号::。不过为了兼容,浏览器会接受一个双引号。

兼容性

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19. X:hover

div:hover {  
  background: #e3e3e3;  
}  

我去,这个你必须懂。典型的官方形式的用户触发伪类。听起来会有点迷惑,不过实际上并非如此。想在用户在某个元素上面悬停时定义个特别的样式?这个属性就是做这个的。

记住啦,较old版本的IE,只能在锚点标签后使用这个hover。

这个选择器你用得最多的情况,估计可能就是在锚点的悬停时加个border-bottom啦。

a:hover {  
 border-bottom: 1px solid black;  
}  

小贴士: border-bottom:1px solid black;text-decoration:underline;好看一点哦。(真的?我去)

兼容性

  • IE6+ (In IE6, :hover must be applied to an anchor element)
  • Firefox
  • Chrome
  • Safari
  • Opera

20. X:not(selector)

div:not(#container) {  
   color: blue;  
}

not伪类灰常有用。例如我要选择所有的div,除了有id为container的。上面那个代码片段就能完美的实现。

如果我想选择除了p以外的所有元素,我可以这么做:

*:not(p) {  
  color: green;  
} 

查看例子

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21. X::pseudoElement

p::first-line {  
   font-weight: bold;  
   font-size: 1.2em;  
}

我们可以使用伪元素(以::为表示)来定义元素的样式。例如第一行,第一个字符,记住啦,这种方法只能应用于同级元素才有效。

伪元素由两个冒号组成:::

指定p的第一个字符的样式

p::first-letter {  
   float: left;  
   font-size: 2em;  
   font-weight: bold;  
   font-family: cursive;  
   padding-right: 2px;  
}

这段代码会找到所有段落,然后再从中定义这些段落的第一个字符。

这常常使用在仿报纸的文章首字母样式。

**指定p的首行样式 **

p::first-line {  
   font-weight: bold;  
   font-size: 1.2em;  
} 

同样,这个::first-line伪元素会像我们期望的那样,只定义段落的第一行的样式。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22. X:nth-child(n)

li:nth-child(3) {  
   color: red;  
} 

想想那些没法从元素堆中选择元素的日子。nth-child伪类解决了这个问题。

请注意 nth-child接收整数和变量,不过不是从0开始的,如果你想选定第二个li,使用 li:nth-child(2).

我们甚至使用这个办法来选择任意的子元素。例如,我们可以用 li:nth-child(4n)来完成4为倍数的所有元素的选择。

查看例子

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {  
   color: red;  
} 

如果我有灰常多的li在ul里面,我只想要最后3个li怎么办?不必使用li:nth-child(397),你可以使用nth-last-child伪类。

这种技巧和第六条几乎一样有效,不过两者的不同之处在于它从结束开始收集,用回溯的方式进行。

查看例子

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {  
   border: 1px solid black;  
}

你应该有很多时候想要元素类型来选择元素而不是通过孩子。

想象一下标记5个无序列表(UL)。如果你想定义第三个ul,并且没有一个唯一的id来找到它,你就可以使用 nth-of-type(3)伪类了。在上面这个代码段中,只有第三个ul才会有黑色的边框。

查看例子

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {  
   border: 1px solid black;  
} 

没错,我们一样可以使用nth-last-of-type来从结束开始回溯这个选择器,来找到我们想要的元素

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

26. X:first-child

ul li:first-child {  
   border-top: none;  
}  

这个结构的伪类让我们可以选择某个元素的第一个子孩子。你通常可以使用这个办法来删除第一个或者最后一个元素的边框。

例如,你有一系列的rows,每一个都有border-topborder-bottom。这种情况下,第一行和最后一行看起来会灰常怪。

很多设计师会使用first和last类来弥补这个缺陷。相反,你可以使用这些伪类来解决这些问题。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

ul > li:last-child {  
   color: green;  
}

first-child相反,last-child会选择父节点的最后一个子节点。

例子:

我们建立一些例子来示范这些类的可能的用法。我们会建立一种风格来展示。

标记

<ul>  
   <li> List Item </li>  
   <li> List Item </li>  
   <li> List Item </li>  
</ul> 

没啥特别的,就是一个简单的序列。

Css

ul {  
 width: 200px;  
 background: #292929;  
 color: white;  
 list-style: none;  
 padding-left: 0;  
}  
  
li {  
 padding: 10px;  
 border-bottom: 1px solid black;  
 border-top: 1px solid #3c3c3c;  
} 

这个样式会设置一个背景,删除浏览器默认的ul的padding值,并定义边框给每一个li来提供一点深度。

如上图所示,唯一的问题是最上面的边框和最下面的边框看起来有点儿怪。让我们来使用:first-child:last-child来解决这个问题。

li:first-child {  
    border-top: none;  
}  
  
li:last-child {  
   border-bottom: none;  
} 

看上图,解决了不是。

查看例子

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

是滴,IE8支持 first-child 不过不支持last-child。

28. X:only-child

div p:only-child {  
   color: red;  
}

实话说,你很可能会发现你不会经常使用 only-child伪类。尽管如此,它确实有用,你应该需要它。

它可以帮助你选择是父节点的独生子(没别的孩子啦)的元素。例如,使用上面的代码,只有是div的唯一子孩子的p段落才会定义其颜色为red。

让我们来假定下面的标记。

<div><p> My paragraph here. </p></div>  
  
<div>  
   <p> Two paragraphs total. </p>  
   <p> Two paragraphs total. </p>  
</div> 

这样,第二个div的p标签的内容不会被选中。只有第一个div的p才会被选中。

查看例子

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

li:only-of-type {  
   font-weight: bold;  
} 

这种结构的伪类有几种灰常聪明的用法。它可以选定在其父节点内没有兄弟节点的元素。例如,我们可以选择只有一个li作为其子孩子的ul。

首先,取决于你想怎样完成这一目标。你可以使用 ul li,不过,这回选择所有li元素。唯一的办法是使用only-of-type

ul > li:only-of-type {  
   font-weight: bold;  
}

查看例子

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

30. X:first-of-type

first-of-type 伪类可以让你选择该类型的第一个兄弟节点。

一个测试

为了更好地理解它,让我们来测试一下啊。拷贝下面的标记到你的编辑器。

<div>  
   <p> My paragraph here. </p>  
   <ul>  
      <li> List Item 1 </li>  
      <li> List Item 2 </li>  
   </ul>  
  
   <ul>  
      <li> List Item 3 </li>  
      <li> List Item 4 </li>  
   </ul>     
</div>  

现在,别急着往下读,试试看如何能只选择’LIST ITEM 2’?如果你搞定了(或者放弃了),继续读。

解决办法1

有很多办法能搞定这个测试。我们回顾其中一小部分。以使用first-of-type开始。

ul:first-of-type > li:nth-child(2) {  
   font-weight: bold;  
} 

这个代码段本质上表示,“找到第一个无序列表,然后找到这里面的li,然后,继续使用过滤器直到找到第二个li。

解决办法2

另一个可行的办法是毗邻选择器。

p + ul li:last-child {  
   font-weight: bold;  
} 

在这个方案中,我们找到p的临近节点ul,然后找到ul的li的最后一个孩子。

解决办法3

我们可以随心所欲滴选择这些选择器。

ul:first-of-type li:nth-last-child(1) {  
   font-weight: bold;     
}

这次,我们取到第一个ul,然后找到第一个元素,不过是从最后一个开始数。哈哈。

查看例子

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

结论

如果你仍在为解决old浏览器的缺陷而纠结,如IE6。在使用这些新的选择器方面,你仍然需要非常小心。不过,别因为这个阻碍了你对这些新玩意儿的学习。别虐待自己。确保关注这里的兼容性列表。应一方面,你可以使用 Dean Edward’s excellent IE9.js script 来为旧浏览器提供新的选择器支持。(我去。cool)

其次,当使用javascript库时,如流行的jQuery,最好尽可能使用这些css3本身的选择器而不是使用库的自定义方法/选择器。这能让你的代码更快哦,因为这些选择器引擎本身就能被浏览器解析,而不是用这些库选择器。

感谢阅读,希望你能学到一两个技巧。

译者注

本文问翻译文章,原文为“The 30 CSS Selectors you Must Memorize

原文网址:http://yanhaijing.com/css/2014/01/04/the-30-css-selectors-you-must-memorize/

欢迎订阅我的微信公众帐号,只推送原创文字。扫码或搜索:颜海镜
微信公众号:颜海镜


justjavac

justjavac on 13 May 2014

好长啊。

颜海镜

颜海镜 on 13 May 2014

还没搞完呢,锚点还没加呢 完整教程这是 挤眼

CrispElite

CrispElite on 17 May 2014

注释都写了你还说不解释 哈哈

颜海镜

颜海镜 on 17 May 2014

呵呵

大叔夜5郎

大叔夜5郎 on 19 May 2014

顶一个!超赞的! 作者不但技术过关 , 而且描述清晰!!! good

幽潭莲花

幽潭莲花 on 19 May 2014

我想说 我和作者是认识的, 不但代码写得好 而且还是大帅哥哦。

鏾步的魚

鏾步的魚 on 19 May 2014

颜海镜

颜海镜 on 19 May 2014

鼓掌

颜海镜

颜海镜 on 19 May 2014

害羞

yanlinpu

yanlinpu on 29 May 2014

思考

颜海镜

颜海镜 on 30 May 2014

呵呵

颜海镜

颜海镜 on 05 Jun 2014

全面兼容多种中断了,手机上也能阅读

张驰Terry

张驰Terry on 05 Jun 2014

赞赞赞

回眸是谁人

回眸是谁人 on 12 Jun 2014

果然又涨姿势了

戴夏清

戴夏清 on 12 Jun 2014

戴夏清

戴夏清 on 12 Jun 2014

神马

颜海镜

颜海镜 on 13 Jun 2014

加油

颜海镜

颜海镜 on 13 Jun 2014

呵呵

颜海镜

颜海镜 on 04 Jul 2014

赞一个 互粉

颜海镜

颜海镜 on 05 Jul 2014

呵呵

颜海镜

颜海镜 on 10 Jul 2014

zhj

zhj on 11 Jul 2014

“表达式产生值。他们通常位于赋值操作的邮编”<-错别字请修正

zhj

zhj on 11 Jul 2014

“有很多符合赋值操作符”<-再次错别字

颜海镜

颜海镜 on 12 Jul 2014

thanks 已更改,见 http //yanhaijing.com/basejs/

人长的实在可以吗

人长的实在可以吗 on 12 Jul 2014

第三部分在这里:高效jQuery的奥秘 链接失效。

另外 JavaScript DOM 高级程序设计与 JavaScript DOM 编程艺术 也是两本好的书,里面的设计理念非常值得推崇。

人长的实在可以吗

人长的实在可以吗 on 12 Jul 2014

一个人的思想往往能让你走的更远。现在很少能找到高质量持续稳定更新的博客了。

颜海镜

颜海镜 on 13 Jul 2014

感谢支持,博主会继续努力的 兔子

颜海镜

颜海镜 on 13 Jul 2014

首先改写你的阅读,并提出宝贵意见,以更正,多谢,另外提到的两本书一非常不错

颜海镜

颜海镜 on 18 Jul 2014

太开心 赞一个 织 扩散

星夜

星夜 on 25 Jul 2014

楼主,请问:function Dog(name){
Animal.call(this,name);
}
Animal.call这个是什么意思?????
谢谢你

颜海镜

颜海镜 on 25 Jul 2014

call是js中函数特有的方法,可以改变函数的this上下文

星夜

星夜 on 25 Jul 2014

原来如此,谢谢,本文写的通俗易懂,讲的很细。赞一个

颜海镜

颜海镜 on 27 Jul 2014

感谢支持 同样可以改变this上下文的还有 apply,和es5 新增的 bind,jquery中有proxy

颜海镜

颜海镜 on 29 Jul 2014

http //yanhaijing.com/inverter 我在变色方块小游戏中,逆天用了14次点击,通过了第4关,你,你,你快快来挑战我吧 颜海镜

颜海镜

颜海镜 on 29 Jul 2014

http //yanhaijing.com/inverter 我在变色方块小游戏中,逆天用了33次点击,通过了第5关,你,你,你快快来挑战我吧 颜海镜 可怜

GitHub家园

GitHub家园 on 29 Jul 2014

http //yanhaijing.com/inverter 我在变色方块小游戏中,逆天用了1次点击,通过了第1关,你,你,你快快来挑战我吧 颜海镜

邬畏畏

邬畏畏 on 07 Aug 2014

思考 又要开始了解掌握新标准的东东了,所以工程师要配备营养师、养生医师、运动教练。

颜海镜

颜海镜 on 07 Aug 2014

嗯,哈哈

观心自在

观心自在 on 14 Aug 2014

http //yanhaijing.com/inverter 我在变色方块小游戏中,逆天用了1次点击,通过了第20关,你,你,你快快来挑战我吧 可怜

颜海镜

颜海镜 on 14 Aug 2014

亲 改的数据吧 弱

颜海镜

颜海镜 on 14 Aug 2014

亲,改的数据把

OSMeteor

OSMeteor on 19 Aug 2014

大概浏览了一下,挺齐全的

颜海镜

颜海镜 on 19 Aug 2014

嗯,整个规范

GitHub家园

GitHub家园 on 19 Aug 2014

哈哈 哈哈 哈哈 http //yanhaijing.com/inverter 变色方块 史上最难智力游戏,我逆天用了33次点击,通过了第5关,你,你,你快快来挑战我吧 颜海镜

颜海镜

颜海镜 on 19 Aug 2014

zan

戦场原礼弥

戦场原礼弥 on 19 Aug 2014

太容易作弊了....还是用对象的方式进行格子的存储数据比较好吧。显示层不要存数据

颜海镜

颜海镜 on 19 Aug 2014

嗯,好建议,

颜海镜

颜海镜 on 20 Aug 2014

ok了,逻辑已经和ui分开,不能作弊了

Life

Life on 03 Sep 2014

蛮完整的,不错,支持下 钱

颜海镜

颜海镜 on 03 Sep 2014

感谢支持,小编会继续努力的 给力

来过活过爱过

来过活过爱过 on 04 Sep 2014

有心了, 赞一个.

颜海镜

颜海镜 on 04 Sep 2014

感谢支持

天冷堆雪人

天冷堆雪人 on 10 Sep 2014

“还要感谢微博上的抽奖平台,陆陆续续也中了4-5本赠书了”,我为啥都没中到 泪

颜海镜

颜海镜 on 11 Sep 2014

呵呵,我已经中了 10来本了

颜海镜

颜海镜 on 16 Sep 2014

分享

鏾步的魚

鏾步的魚 on 17 Sep 2014

爱你

颜海镜

颜海镜 on 22 Sep 2014

哈哈

CodeEnjoy

CodeEnjoy on 17 Oct 2014

有点老了吧!!!这文章

颜海镜

颜海镜 on 17 Oct 2014

嗯 确实有点老了

西门

西门 on 24 Oct 2014

话说小数点后面几十位,你是怎么算出来的。。。

mint

mint on 24 Oct 2014

每一关的最佳点击次数是格子维度的平方么?
比如:
1 -> 1
2 -> 4
3 -> 9
4 -> 16
5 -> 25
???

颜海镜

颜海镜 on 24 Oct 2014

??????????

颜海镜

颜海镜 on 25 Oct 2014

不是

颜海镜

颜海镜 on 25 Oct 2014

计算器算的呗

坠落红尘

坠落红尘 on 27 Oct 2014

挺好

坠落红尘

坠落红尘 on 27 Oct 2014

写的很不错。

颜海镜

颜海镜 on 27 Oct 2014

thx

颜海镜

颜海镜 on 27 Oct 2014

感谢支持

颜海镜

颜海镜 on 28 Oct 2014

thx

buwanleOK

buwanleOK on 30 Oct 2014

http //yanhaijing.com/inverter 变色方块 史上最难智力游戏,我逆天用了45次点击,通过了第5关,你,你,你快快来挑战我吧 颜海镜

黄佳生

黄佳生 on 30 Oct 2014

太有心了

颜海镜

颜海镜 on 30 Oct 2014

感谢支持

淡忘~浅思

淡忘~浅思 on 02 Nov 2014

很喜欢sublime

淡忘~浅思

淡忘~浅思 on 02 Nov 2014

http //www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743256916071d599b3aed534aaab22a0db6c4e07fd0000 廖雪峰老师的也不错

颜海镜

颜海镜 on 02 Nov 2014

嗯,但是有些重复了

ruler

ruler on 02 Nov 2014

很有用,谢谢!

颜海镜

颜海镜 on 03 Nov 2014

thx

淡忘~浅思

淡忘~浅思 on 03 Nov 2014

justjavac

justjavac on 04 Nov 2014

大赞。

颜海镜

颜海镜 on 04 Nov 2014

thx

鏾步的魚

鏾步的魚 on 05 Nov 2014

顶啊

颜海镜

颜海镜 on 05 Nov 2014

............

Jerry Zou

Jerry Zou on 05 Nov 2014

有毅力,辛苦了

颜海镜

颜海镜 on 06 Nov 2014

感谢支持

颜海镜

颜海镜 on 06 Nov 2014

厉害

鏾步的魚

鏾步的魚 on 11 Nov 2014

颜海镜

颜海镜 on 11 Nov 2014

thx

淡忘~浅思

淡忘~浅思 on 13 Nov 2014

这个是不是在底层开发中才用得到 好像平时很少用继承语法之类的

淡忘~浅思

淡忘~浅思 on 13 Nov 2014

可能我接触的太少了

淡忘~浅思

淡忘~浅思 on 13 Nov 2014

有一点深奥 囧

颜海镜

颜海镜 on 13 Nov 2014

呵呵,确实是

颜海镜

颜海镜 on 13 Nov 2014

这个简单啊 es5

淡忘~浅思

淡忘~浅思 on 13 Nov 2014

颜海镜

颜海镜 on 14 Nov 2014

呵呵

楔子

楔子 on 17 Nov 2014

那个左侧导航增强的的插件 好几次都装不上。

颜海镜

颜海镜 on 18 Nov 2014

是啊,我也装不上

楔子

楔子 on 18 Nov 2014

生病 如之奈何?

颜海镜

颜海镜 on 18 Nov 2014

同求啊,st的侧边栏太弱了

戦场原礼弥_Error200

戦场原礼弥_Error200 on 23 Nov 2014

勤劳的颜海镜

颜海镜

颜海镜 on 23 Nov 2014

thx

love小小色

love小小色 on 07 Dec 2014

做一个滚动监听吧~

颜海镜

颜海镜 on 07 Dec 2014

???????、什么意思???????

nicholasj

nicholasj on 10 Dec 2014

您的圣杯模式中 c.uper存储超类 是不是应该 是指向P的原型也就是P.prototpye

love小小色

love小小色 on 10 Dec 2014

点个赞~~

love小小色

love小小色 on 10 Dec 2014

是我之前看错了还是你后来加上的哇?现在已经有了~

love小小色

love小小色 on 10 Dec 2014

圣杯中call函数前面的“.uber”?

颜海镜

颜海镜 on 11 Dec 2014

uber是在模拟java中的super,应该指向P而非P的原型

颜海镜

颜海镜 on 11 Dec 2014

thx

颜海镜

颜海镜 on 11 Dec 2014

一直都有

Fine

Fine on 16 Dec 2014

总结得太好了。真是帮了大忙了,上面的命令感觉真是实际项目中解决问题的命令 感谢,仔仔细细的看了一遍

颜海镜

颜海镜 on 17 Dec 2014

感谢支持

颜海镜

颜海镜 on 18 Dec 2014

终于写的差不多了,欢迎大家补充哈

其实腊肉

其实腊肉 on 18 Dec 2014

感觉好厉害的样子

颜海镜

颜海镜 on 18 Dec 2014

就是一些总结

天冷堆雪人

天冷堆雪人 on 18 Dec 2014

给力

颜海镜

颜海镜 on 18 Dec 2014

thx

明夕何夕

明夕何夕 on 18 Dec 2014

总结的好啊

颜海镜

颜海镜 on 19 Dec 2014

thx

xmlovedandan

xmlovedandan on 19 Dec 2014

写的真棒,么么哒。那么问题来了,手机IP怎么获得?

颜海镜

颜海镜 on 19 Dec 2014

手机上可以看啊

2012创业家

2012创业家 on 21 Dec 2014

显示各种编码的软件是什么

2012创业家

2012创业家 on 21 Dec 2014

http //weinre.ice.gs/ 不用自己搭建环境

颜海镜

颜海镜 on 21 Dec 2014

这个不错哈。mark

颜海镜

颜海镜 on 21 Dec 2014

我这有可以传给你一份,留个邮箱

2012创业家

2012创业家 on 21 Dec 2014

mybestpartner sina.com 挤眼

颜海镜

颜海镜 on 22 Dec 2014

已发

淡忘~浅思

淡忘~浅思 on 24 Dec 2014

平安夜快乐

颜海镜

颜海镜 on 24 Dec 2014

thx 同乐

颜海镜

颜海镜 on 28 Dec 2014

basejs 发布0.3.0啦,新特性,离线缓存,bootstrap v3.3.0新UI 互粉

yp

yp on 29 Dec 2014

么么哒

颜海镜

颜海镜 on 30 Dec 2014

感谢支持

淡忘~浅思

淡忘~浅思 on 01 Jan 2015

新年快乐 羊年平安 工作顺利 万事如意

颜海镜

颜海镜 on 01 Jan 2015

感谢

于江水

于江水 on 06 Jan 2015

Add oil。

颜海镜

颜海镜 on 07 Jan 2015

哈哈,还没写完呢

天冷堆雪人

天冷堆雪人 on 08 Jan 2015

赞,加油! 百度我也会去的 嘻嘻

颜海镜

颜海镜 on 09 Jan 2015

加油,我推荐你哈

胡心鹏

胡心鹏 on 09 Jan 2015

HTML5离线缓存

颜海镜

颜海镜 on 09 Jan 2015

thx

love小小色

love小小色 on 10 Jan 2015

每次调用inherit函数时,F都重新创建,不是可以创建一次用闭包存起来么,怎么没写出来呢?

一起玩Apple网

一起玩Apple网 on 10 Jan 2015

支持,弄成JSLite 也可以写这样的blog 嘻嘻

颜海镜

颜海镜 on 10 Jan 2015

嗯,这个可以

颜海镜

颜海镜 on 10 Jan 2015

嗯 赞

晔阳

晔阳 on 12 Jan 2015

好吧,竟然和我老大重名了,他之前也在百度不过没有在金山过

anly

anly on 12 Jan 2015

队长,AngularJS学的怎么样了,讲点儿呗

颜海镜

颜海镜 on 12 Jan 2015

原来是安**啊,我没接触过这个框架呵呵 排斥框架

晔阳

晔阳 on 12 Jan 2015

我们老大也叫侯鹏

nicholasj

nicholasj on 12 Jan 2015

老大 加油!!!!!!

颜海镜

颜海镜 on 13 Jan 2015

thx 共勉

這個姐姐我曾在夢裡見過

這個姐姐我曾在夢裡見過 on 17 Jan 2015

mark

颜海镜

颜海镜 on 17 Jan 2015

thx

颜海镜

颜海镜 on 17 Jan 2015

呵呵,这么巧合

夕文艺园

夕文艺园 on 17 Jan 2015

前排围观学习

Rock

Rock on 18 Jan 2015

在 DocBlockr sublime的主题不错啊~是什么

leiroc

leiroc on 19 Jan 2015

亲测,weinre 方便好用,实用文章,感谢!

颜海镜

颜海镜 on 19 Jan 2015

加油

颜海镜

颜海镜 on 19 Jan 2015

默认的哈 亲,没改过主题

淡忘~浅思

淡忘~浅思 on 20 Jan 2015

博客已经重新开通了 嘿嘿

颜海镜

颜海镜 on 20 Jan 2015

好啊,恭喜恭喜

久艾分享

久艾分享 on 20 Jan 2015

来踩踩

颜海镜

颜海镜 on 20 Jan 2015

感谢

前端开发博客

前端开发博客 on 02 Feb 2015

支持一个,ECMAScript文档。

颜海镜

颜海镜 on 02 Feb 2015

感谢支持

颜海镜

颜海镜 on 04 Feb 2015

weinre不能调试 js ,唯一的缺点

颜海镜

颜海镜 on 06 Feb 2015

我的是st2你的也是吗?那个插件好像只有st3可以用

楔子

楔子 on 10 Feb 2015

哦,怪不得

Jerry Zou

Jerry Zou on 15 Feb 2015

在北京吗?这两天正好在做百度笔试题 太开心

tolerious

tolerious on 15 Feb 2015

已看

颜海镜

颜海镜 on 16 Feb 2015

嗯 在北京,准备来百度吗?

颜海镜

颜海镜 on 16 Feb 2015

感谢支持

Jerry Zou

Jerry Zou on 16 Feb 2015

申了暑期实习~大把大把的笔试题。。。

颜海镜

颜海镜 on 16 Feb 2015

还在上学吗?

Jerry Zou

Jerry Zou on 16 Feb 2015

现在研一,暑假找点事做做 哈哈

颜海镜

颜海镜 on 16 Feb 2015

嗯 加油 话说你面的哪个部门哈,现在就找暑期

Jerry Zou

Jerry Zou on 16 Feb 2015

投的FEX,不知道内部有怎样的细分。。

颜海镜

颜海镜 on 16 Feb 2015

嗯 FEX 是做工具的团队 很厉害的

Jerry Zou

Jerry Zou on 16 Feb 2015

哈哈

Jerry Zou

Jerry Zou on 20 Feb 2015

有个关于FIS的问题向你咨询一下~关于合并js资源的,如果两个被打包的文件同时要打包同一个文件,如https //gist.github.com/zry656565/a5e1b33e7e318aa2f42c。里面的'js/utility.js'。在FIS生成的map.json中,js/utility.js只能被其中一个package所包含,有办法从纯前端的手段来解决这个问题吗?不知道你们平时生产过程中有没有遇到过这个问题~

KK要成为好的码农

KK要成为好的码农 on 24 Feb 2015

Thanks!

颜海镜

颜海镜 on 25 Feb 2015

no thx

_happy_

_happy_ on 04 Mar 2015

不得不说,静静这功夫深啊! 嘻嘻 颜海镜

颜海镜

颜海镜 on 04 Mar 2015

thx,静静也是醉了

颜海镜

颜海镜 on 04 Mar 2015

hi 链接是404,从描述来看的话 fis是会做自动处理吧,具体可以问问fis的人,项目中都是用fisp,对于通用的js库可以用手动打包的方式

前端人才网

前端人才网 on 04 Mar 2015

支持!学习!

颜海镜

颜海镜 on 04 Mar 2015

感谢支持

Jerry Zou

Jerry Zou on 04 Mar 2015

因为多说自动生成的链接把后面一堆乱七八糟的东西都加上了。。所以访问不到,复制链接内容应该可以看到~ 我面试的时候问过面试官了。。他说以前是支持的,现在考虑各方面因素把这个选项给关掉了。。

张少壮

张少壮 on 06 Mar 2015

赞!

鹏凌三千

鹏凌三千 on 07 Mar 2015

偶然经过贵站,盼望回访,www.xrpmoon.com/blog

坏坏de大猫猫

坏坏de大猫猫 on 07 Mar 2015

看了常用快捷键,受益无穷
用的插件也和您非常的类似

颜海镜

颜海镜 on 09 Mar 2015

thx

颜海镜

颜海镜 on 09 Mar 2015

thx

李庆伟

李庆伟 on 12 Mar 2015

http //yanhaijing.com/inverter 我在变色方块小游戏中,逆天用了215次点击,通过了第10关,你,你,你快快来挑战我吧 颜海镜 可怜

颜海镜

颜海镜 on 12 Mar 2015

●0● 牛人啊

李庆伟

李庆伟 on 12 Mar 2015

http //yanhaijing.com/inverter 变色方块 史上最难智力游戏,我逆天用了29次点击,通过了第5关,你,你,你快快来挑战我吧 颜海镜

李庆伟

李庆伟 on 12 Mar 2015

你怎么确定我不是复制粘贴的

一棵草

一棵草 on 12 Mar 2015

自己给自己赞,还不如我这个外人来的赞更好 good 赞

颜海镜

颜海镜 on 14 Mar 2015

thx

颜海镜

颜海镜 on 14 Mar 2015

呵呵 要是复制粘贴就没意思了

前端开发博客

前端开发博客 on 16 Mar 2015

精彩的一年,丰收的一年。

颜海镜

颜海镜 on 17 Mar 2015

thx 没有很精彩

周bi_chou

周bi_chou on 27 Mar 2015

我打开了usb调试,数据线也脸上了。chrome上找不到设备

颜海镜

颜海镜 on 28 Mar 2015

JavaScript模块的前世今生

颜海镜

颜海镜 on 28 Mar 2015

需要翻墙

楔子

楔子 on 30 Mar 2015

开发插件装的啥东西 分享一下

颜海镜

颜海镜 on 30 Mar 2015

嗯 下一篇文章分享 我的chrome插件

颜海镜

颜海镜 on 30 Mar 2015

我的Chrome插件

颜海镜

颜海镜 on 30 Mar 2015

http //yanhaijing.com/tool/2015/03/30/my-chrome-plugin/ 看这里

闫文克

闫文克 on 31 Mar 2015

都装,卡不?

Lv5-郑嫑嫑

Lv5-郑嫑嫑 on 31 Mar 2015

还可以试试 SimpleExtManager 这款插件

颜海镜

颜海镜 on 31 Mar 2015

卡啊,卡得很

颜海镜

颜海镜 on 31 Mar 2015

哦 干什么用的哈

宋小北

宋小北 on 31 Mar 2015

这是我的 哈哈
https //github.com/xiaobeicn/developer-tools/blob/master/chrome-extension.md

颜海镜

颜海镜 on 31 Mar 2015

一直觉得你是我同事。。。

颜海镜

颜海镜 on 31 Mar 2015

局限于js永远不会完美,要想得到完美的语法,只能寄希望于预处理器,比如coffeescript

Lv5-郑嫑嫑

Lv5-郑嫑嫑 on 31 Mar 2015

可以对扩展进行分组管理

宋小北

宋小北 on 31 Mar 2015

不可能,我同事没姓颜的哦 挤眼

颜海镜

颜海镜 on 01 Apr 2015

哈哈 我也不姓颜啊,我姓闫

颜海镜

颜海镜 on 01 Apr 2015

还有这种东西,mark下

邱建

邱建 on 07 Apr 2015

第一个呵呵呵呵

江伟style

江伟style on 07 Apr 2015

原谅我的强迫症,“google退出(推出)的...” 嘻嘻

Leniy

Leniy on 07 Apr 2015

我只安装了两个,proxy和adb

颜海镜

颜海镜 on 07 Apr 2015

第一个怎么了?你也装了、?

颜海镜

颜海镜 on 07 Apr 2015

哦 那你是干什么工作的?

颜海镜

颜海镜 on 07 Apr 2015

好的 感谢反馈

golmic

golmic on 07 Apr 2015

怎么安装chrome插件请看这里 请看这里 的链接 有问题。

颜海镜

颜海镜 on 07 Apr 2015

好的感谢反馈 记下了

Sleepwalkin

Sleepwalkin on 08 Apr 2015

好文,总结很详细。温故知新 嘻嘻

寇云

寇云 on 08 Apr 2015

骗流量,我以为你自己写的插件呢

颜海镜

颜海镜 on 09 Apr 2015

呵呵,本文真的不是自己写插件哦

颜海镜

颜海镜 on 09 Apr 2015

感谢支持

小子欠扁

小子欠扁 on 11 Apr 2015

我的插件 http //type.so/cool-tools.html

颜海镜

颜海镜 on 12 Apr 2015

这个全了

一字哉

一字哉 on 14 Apr 2015

建议添加目录

颜海镜

颜海镜 on 15 Apr 2015

hi 你好 请问你说的目录 是指?????

一字哉

一字哉 on 17 Apr 2015

这篇文档的目录啊,可以直接翻到想要查询的内容。

颜海镜

颜海镜 on 17 Apr 2015

有目录的功能啊,页面左侧,会有目录的,屏幕尺寸小会自动收起目录,屏幕尺寸大会自动显示目录,屏幕左侧中间位置有一个蓝色的小按钮

一字哉

一字哉 on 17 Apr 2015

!!我没注意到。chrome浏览器,在左侧底端,不知道是不是我这边的问题。个人觉得目录放上面一点的位置比较好。

颜海镜

颜海镜 on 18 Apr 2015

好的感谢提意见,收了

颜海镜

颜海镜 on 18 Apr 2015

还不会的同学收了吧 高效jquery的奥秘

董广明

董广明 on 23 Apr 2015

好cool。

此昵称已被占

此昵称已被占 on 23 Apr 2015

这个游戏我之前做练习的时候也做过,名字是用的古老的 点灯游戏 ,原来还叫变色方块..
不过体验我就没管了,目前有web版本和apicloud打包的安卓/苹果(需要越狱)版本.
http //www.uexts.com/games/light/
颜海镜

颜海镜

颜海镜 on 23 Apr 2015

不错不错赞

颜海镜

颜海镜 on 23 Apr 2015

感谢支持

颜海镜

颜海镜 on 23 Apr 2015

很棒的文章,翻译的很烂 弱

2012创业家

2012创业家 on 24 Apr 2015

一直没用过require.js sea.js呢,不知道具体的好处在哪?而且一个文件一个模块,那这么一模块化文件可多了去了。。。

颜海镜

颜海镜 on 25 Apr 2015

好处就是依赖自动化 这非常重要,没有模块的话 前端就无法工程化,真正线上的话,会进行合并的

Sleepwalkin

Sleepwalkin on 30 Apr 2015

感谢分享!帮助很大。

Bill

Bill on 30 Apr 2015

不支持ios吗

0zonxin0

0zonxin0 on 30 Apr 2015

15.4.4.22 Array.prototype.reduceRight 那一节的 步骤 6 错了
应该是 “令 k 为 len - 1”

颜海镜

颜海镜 on 03 May 2015

o(∩_∩)o 哈哈,加油吧

颜海镜

颜海镜 on 03 May 2015

weinre支持ios

颜海镜

颜海镜 on 03 May 2015

看了一是,是的,看的太认真了哈

0zonxin0

0zonxin0 on 04 May 2015

挤眼

0zonxin0

0zonxin0 on 04 May 2015

主要是参照您的这个写了个这个
http //blog.csdn.net/zongshouxin/article/details/45399069

颜海镜

颜海镜 on 04 May 2015

很赞啊

161

161 on 06 Jun 2015

后来的动画都是用纯js写出来的吗?是不是外面还有一层光晕的特效?

颜海镜

颜海镜 on 10 Jun 2015

后来的动画是一个gif图,理想效果,实际上是并没有的 泪

island205

island205 on 10 Jun 2015

很赞呀!

颜海镜

颜海镜 on 10 Jun 2015

感谢支持

island205

island205 on 10 Jun 2015

放 Github 上了么?

颜海镜

颜海镜 on 11 Jun 2015

是的

161

161 on 17 Jun 2015

你没做啊 汗 ,还想跟你请教一下思路呢,我有点笨

颜海镜

颜海镜 on 18 Jun 2015

没做外面的光晕效果

161

161 on 18 Jun 2015

那也是做了啊,给我看看呗,我是凑合出来的,不是计算出来的....想看看大侠是用什么做的...给我看看呗,谢了

颜海镜

颜海镜 on 18 Jun 2015

文件结尾不是有 jsfiddle的链接吗

助人为乐的灵感

助人为乐的灵感 on 19 Jun 2015

这怎么还自己给自己评上了,还不错啊~

颜海镜

颜海镜 on 20 Jun 2015

感谢支持

陈毅钊

陈毅钊 on 09 Jul 2015

http //yanhaijing.com/inverter 变色方块 史上最难智力游戏,我逆天用了29次点击,通过了第5关,你,你,你快快来挑战我吧 颜海镜

剧中人_

剧中人_ on 10 Jul 2015

第十关太难了吧!

aLiEn

aLiEn on 28 Jul 2015

火狐进行调试的时候 到了 链接远程设备哪一步,主机名是:localhost 端口为:6000 进行连接时报出意外错误

aLiEn

aLiEn on 28 Jul 2015

adb forward tcp 6000 localfilesystem /data/data/org.mozilla.firefox/firefox-debugger-socket

我在cmd跑了一下这一句就好了,我也不知道为什么

楔子

楔子 on 05 Aug 2015

SyncedSideBar 这个太赞了

歪妖内涵网

歪妖内涵网 on 06 Sep 2015

太厉害啦!值得我们学习

颜海镜

颜海镜 on 06 Sep 2015

感谢支持,话说你这名字,太。。。

最励志官网

最励志官网 on 06 Sep 2015

好久没来了,过来踩踩

颜海镜

颜海镜 on 06 Sep 2015

感谢支持

移动开发小冉

移动开发小冉 on 07 Sep 2015

不错,前端最佳实践

颜海镜

颜海镜 on 07 Sep 2015

感谢支持

爱奇趣分享网

爱奇趣分享网 on 20 Sep 2015

爱奇趣网http //www.iqiqu.net/? 路过留个言!

颜海镜

颜海镜 on 21 Sep 2015

感谢支持

Google首席专家

Google首席专家 on 23 Sep 2015

还不错,个人水平有限看懂了一部分

颜海镜

颜海镜 on 24 Sep 2015

欢迎交流,感谢支持

内涵段子

内涵段子 on 08 Oct 2015

来瞅瞅啦~

费

on 16 Oct 2015

hello, 我看了你的文章觉得写的好棒呀,楼主。我是今年刚拿来百度offer的应届生,也是前端汪,可以留个qq号码,认识一下吗嘻嘻

颜海镜

颜海镜 on 16 Oct 2015

感谢支持

颜海镜

颜海镜 on 16 Oct 2015

709733376 请写清楚添加理由

颜海镜

颜海镜 on 16 Oct 2015

加油

颜海镜

颜海镜 on 16 Oct 2015

确实,你都玩到第10关了,厉害

糗事笑话

糗事笑话 on 22 Oct 2015

网站不错很漂亮,欢迎互访!

扑哧

扑哧 on 03 Nov 2015

「如果HTML文件的编码和JavaScript文件的编码不一致的话就会产生乱码」,这句有问题,实测 HTML 是 GBK 的,引入的 js 是 utf8 的,但是不会乱码

颜海镜

颜海镜 on 05 Nov 2015

感谢支持

颜海镜

颜海镜 on 05 Nov 2015

这个可能和浏览器有关

虫子

虫子 on 18 Nov 2015

赞赞赞!!! 赞

颜海镜

颜海镜 on 18 Nov 2015

感谢支持

心药

心药 on 19 Nov 2015

博主有没有遇到过python代码build输入区域无法折行,或者说ctrl+b输入区域如何设置折行的问题? 内网外网我搜遍了,好像这个问题都没有谁解决了……

颜海镜

颜海镜 on 20 Nov 2015

这个没遇到过,不太了解python

豆沙包

豆沙包 on 09 Dec 2015

6666666 哈哈

颜海镜

颜海镜 on 10 Dec 2015

感谢支持

栺媣沵啲美

栺媣沵啲美 on 11 Jan 2016

赞 一件很有意义的事情

颜海镜

颜海镜 on 11 Jan 2016

感谢支持

收纳空白

收纳空白 on 31 Jan 2016

Thanks a lot~

颜海镜

颜海镜 on 31 Jan 2016

感谢支持

叶紫

叶紫 on 26 Feb 2016

mark,赞。

颜海镜

颜海镜 on 26 Feb 2016

感谢支持

风君

风君 on 22 Mar 2016

最后的这个所谓的变量溢出,根本就不存在吧?
function fun(){
var a = b = 5;
}
这一步的时候没有var b,所以b本来就是全局变量好吧?

function fun(){
var a;
var b
a = b = 5;
}
你再试试!

颜海镜

颜海镜 on 23 Mar 2016

这里想说的意思就是这里很容易忽略b会是全局变量,提醒大家不要这样写

Yuying_Wu

Yuying_Wu on 07 Apr 2016

棒~

颜海镜

颜海镜 on 07 Apr 2016

感谢支持

melbo

melbo on 17 Apr 2016

http //yanhaijing.com/inverter 变色方块 史上最难智力游戏,我逆天用了18次点击,通过了第4关,你,你,你快快来挑战我吧 颜海镜

我想读的书都有钢铁的重量

我想读的书都有钢铁的重量 on 21 Apr 2016

很基础,但很实用的

颜海镜

颜海镜 on 21 Apr 2016

感谢支持

wchb2011

wchb2011 on 27 Apr 2016

niubility!

颜海镜

颜海镜 on 28 Apr 2016

感谢支持

田田

田田 on 17 May 2016

感觉是整本高级程序 设计啊0.0...还以为是单独 es5的提出来讲。 不管怎么说,真的很历害,可以出书

颜海镜

颜海镜 on 17 May 2016

感谢支持,这就是ES5的规范啊,而且这也是台湾小哥翻译的,并不是我

卧龙大熊猫

卧龙大熊猫 on 25 May 2016

感谢分享 有几个对我也很有用 已经安装咯 嘻嘻

颜海镜

颜海镜 on 25 May 2016

不用谢

卧龙大熊猫

卧龙大熊猫 on 26 May 2016

我装了有34个插件 chrome卡的 嗷嗷的

颜海镜

颜海镜 on 26 May 2016

多账户可以拯救你

卧龙大熊猫

卧龙大熊猫 on 26 May 2016

好主意 换个友链不? 我的博客https //wujunze.com 嘻嘻

颜海镜

颜海镜 on 26 May 2016

可以的,你去github给我提个pr就行了

卧龙大熊猫

卧龙大熊猫 on 27 May 2016

城会玩儿啊

颜海镜

颜海镜 on 28 May 2016

O(∩_∩)O哈哈~

巫鑫

巫鑫 on 29 May 2016

http //yanhaijing.com/inverter 变色方块 史上最难智力游戏,我逆天用了90次点击,通过了第7关,你,你,你快快来挑战我吧 颜海镜

颜海镜

颜海镜 on 30 May 2016

厉害啊

颜海镜

颜海镜 on 30 May 2016

厉害啊

颜海镜

颜海镜 on 04 Jun 2016

ES6带来了原生的class,解决了这个问题,这篇文章存在的意义已经不大了,O(∩_∩)O哈哈~,然而可以作为历史

韩子迟

韩子迟 on 05 Jun 2016

怎么有

颜海镜

颜海镜 on 06 Jun 2016

求修复啊

韩子迟

韩子迟 on 06 Jun 2016

果断不会啊 吃惊

颜海镜

颜海镜 on 06 Jun 2016

已修复,感谢反馈

韩子迟

韩子迟 on 06 Jun 2016

good

颜海镜

颜海镜 on 07 Jun 2016

感谢反馈

唯依誓约

唯依誓约 on 10 Jun 2016

偶然看到N年前的文章,标题应该改成 ++ + + + ='10'?哦,很重要的引号没了啊! 1 和 字符串 '0' 的拼接 '10' ,不是整数10 啊。文中用 == 进行隐式转型的比较真是让我思考了JS 有趣的特性,为什么 + 返回 0 , 1 + 返回 '10' ,JS的强制转型 与 + 号的行为也蛮有意思的,话说作者还在狼厂吗?

颜海镜

颜海镜 on 12 Jun 2016

还在啊

颜海镜

颜海镜 on 16 Jun 2016

我已经中了 几十本了

天冷堆雪人

天冷堆雪人 on 24 Jun 2016

我只有买了十几本 失望 ,求秘籍 呵呵

颜海镜

颜海镜 on 24 Jun 2016

转转转啊

弦上箭

弦上箭 on 14 Jul 2016

http //yanhaijing.com/inverter 变色方块 史上最难智力游戏,我逆天用了98次点击,通过了第7关,你,你,你快快来挑战我吧 颜海镜

颜海镜

颜海镜 on 14 Jul 2016

腻害

闫圣仁

闫圣仁 on 16 Aug 2016

我要拜你为师,我也姓颜啊

颜海镜

颜海镜 on 17 Aug 2016

http //yanhaijing.com/mywallet/ 学费呢!!!

似水无痕。

似水无痕。 on 05 Sep 2016

第九条给代码添加注释(但请相信我)写成了当请相信我

颜海镜

颜海镜 on 05 Sep 2016

话说能不能把帮忙提个pr?点标题旁边的编辑按钮

GitHub家园

GitHub家园 on 09 Sep 2016

amazing

老徐不二

老徐不二 on 10 Sep 2016

这里应该这么改下吧
//公有共享属性
Box.prototype.sharedProperty = 1;

颜海镜

颜海镜 on 10 Sep 2016

是的,麻烦提个pr

方正123

方正123 on 20 Oct 2016

大神,求带。

颜海镜

颜海镜 on 21 Oct 2016

来来来

Efren

Efren on 17 Nov 2016

没看明白

颜海镜

颜海镜 on 18 Nov 2016

哪里没看明白?

超级小电钻

超级小电钻 on 23 Nov 2016

非常喜欢作者诗词和成语的引用

颜海镜

颜海镜 on 23 Nov 2016

感谢支持

可可

可可 on 04 Jan 2017

淘宝 天猫 内部无门槛优 惠券Q群 594970228

Lucas

Lucas on 06 Jan 2017

那也是语法糖,大神的这篇博文永远不会过时啊!
感觉 prototype是JS灵活的体现。
我们都是看着颜大大的博文成长的!

没有你一样快乐

没有你一样快乐 on 08 Jan 2017

mark

颜海镜

颜海镜 on 10 Jan 2017

加油

颜海镜

颜海镜 on 10 Jan 2017

mark

南瓜跳跳

南瓜跳跳 on 18 Jan 2017

666

颜海镜

颜海镜 on 19 Jan 2017

感谢支持

丨

on 20 Feb 2017

溢出,用词不准

大大大,大志

大大大,大志 on 02 Mar 2017

超赞! 另外建目录提到右侧比较明显的位置默认展开~~ 如果不是看评论第一眼根本看不到目录。。

颜海镜

颜海镜 on 02 Mar 2017

要不要我默认展开

大大大,大志

大大大,大志 on 14 Mar 2017

可以展开啊,但是现有的样式展开之后就盖住了原文了,不太友好。 看下这个展开 http //getbootstrap.com/css/

大大大,大志

大大大,大志 on 14 Mar 2017

在这个基础上加上可以用加减号展开就更棒了。。

颜海镜

颜海镜 on 14 Mar 2017

来个 pr

颜海镜

颜海镜 on 14 Mar 2017

这个体验好,来个pr

ヾ颜

ヾ颜 on 22 Mar 2017

受教! 小提示

颜海镜

颜海镜 on 29 Mar 2017

感谢提醒,已修复

zddewe

zddewe on 10 May 2017

点个赞 :-D