今天早上去上班的时候还在纠结，设定before和after，可是他们的位置位于元素的哪里呢？兄弟元素？子元素？在firebug里看不到他们俩的位置，在FF自带的审查元素里倒是能看到，其实是位于该元素的子元素。

于是，以前，我们说过用一个div来清除浮动，现在我们可以把它省掉了——给父元素设定after。

如下：

element:after {
     clear: both;
     content: "";
     display: block;
}

今天又碰到了这种需求，是因为我们要做个点击获得全文（之类的）功能，设置了overflow:hidden，如果完整的显示了，那么我们就不需要显示全部内容的按钮，否则就要加上。

当时就在想，这玩样儿恐怕不太好办吧？overflow是CSS自动判断的，我完全没有经受，怎么判断确实是个问题。

还好谷歌还是能够找到答案的：jquery如何判断div是否文本溢出
里面提到了一个很好的方法：

$(selector).map(function() {
    if (this.offsetWidth < this.scrollWidth) {
        // do whatever you want
    }
});

这里的offsetWidth和scrollWidth是DOM对象所具有的属性，而不是jQuery对象，所以要先转成DOM对象：jQuery与DOM对象的互相转换

关于这两个，以下扩展阅读：
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth
https://developer.mozilla.org/zh-CN/docs/Web/API/element/scrollWidth

这篇文章和jQuery其实是完全没有关系的，只是我始终无法理解，直接实现DOM不就好了，OOP有什么实践价值么？

于是师匠通过一例，似乎让我有点收获嘛~至少感觉这样写，比我过去写的function都优雅不少。

- 阅读剩余部分 -

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

- 阅读剩余部分 -

在一个网站上看到选中文字时的效果和平时的表现有些不同，顿时就习惯性的F12了，结果看到selection这个伪元素，去MDN查了一下各种伪元素：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

钉子菊苣的博客有一篇博文，讲的是关于::before和::after的高级用法，感觉相当赞:你所不知的 CSS ::before 和 ::after 伪元素用法

关于selection，可以看https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

FF需要进行特殊处理，也就是-moz-。

于是可以这样：

*::selection {
    color: #000;
    background: transparent;
}

*::-moz-selection {
    color: #000;
    background: transparent;
}

愉快的玩耍啦~

前两天在研究CSS3中的transform和animation，感觉transform对于一个没有立体感的人而言还是很难的，但是，这里有一篇文章却把它讲的好理解多了（但还是有不理解的部分，果然技术有待加强）：好吧，CSS3 3D transform变换，不过如此！

本文演示均未考虑到Chrome问题

- 阅读剩余部分 -

变量提升，会把变量的声明提到作用域的前面，于是我就被坑了一次又一次= =啊原来只是声明啊。

于是比如：

console.log(a);
var a = 0;

只会输出undefined。

这一点，在对象里是一样的~所以千万不要在被坑哟=w=

昨天被toggle坑了，因为在w3school里是这么写的：http://www.w3school.com.cn/jquery/event_toggle.asp

里面的第一段：

$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

在他的示例中也是可以使用的，但是在我的环境下竟然没有办法达到这个效果，刚开始以为自己写错了，结果没想到这货已经被取消掉了，在官方文档中，现在只有fadeIn和fadeOut切换的效果了：http://api.jquery.com/toggle/

于是只好自己写click事件了=A=

这里mark一下常用英文字体：

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

当然还有诸如：Verdana Tahoma之类的字体啦~

另外，还有一个现在常用的英文字体：Open Sans

- 阅读剩余部分 -

以前尝试过用body来，结果由于冒泡的缘故，导致就算点击，也会被body中的点击事件覆盖导致根本无法弹出窗体。

于是去查了一下：

$(document).mouseup(function(e){
  var _con = $(' 目标区域 ');   // 设置目标区域
  if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
    some code...   // 功能代码
  }
});
/* Mark 1 的原理：
判断点击事件发生在区域外的条件是：
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/

在关于点击空白关闭弹窗的js写法推荐？看到的，里面有许多方法， 这是其中一种，感觉也挺好的。

- 阅读剩余部分 -