标签 语法 下的文章

CSS 使用after伪类清除浮动

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

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

如下:

  1. element:after {
  2. clear: both;
  3. content: "";
  4. display: block;
  5. }

jQuery 如何判断文字是否溢出

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

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

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

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

这里的offsetWidthscrollWidth是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

HTML 条件注释判断浏览器及检验HTML5

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

- 阅读剩余部分 -

CSS selection伪元素

在一个网站上看到选中文字时的效果和平时的表现有些不同,顿时就习惯性的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-

于是可以这样:

  1. *::selection {
  2. color: #000;
  3. background: transparent;
  4. }
  5. *::-moz-selection {
  6. color: #000;
  7. background: transparent;
  8. }

愉快的玩耍啦~

Javascript 变量提升

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

于是比如:

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

只会输出undefined。

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

jQuery 坑爹的toggle

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

里面的第一段:

  1. $("p").toggle(
  2. function(){
  3. $("body").css("background-color","green");},
  4. function(){
  5. $("body").css("background-color","red");},
  6. function(){
  7. $("body").css("background-color","yellow");}
  8. );

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

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

jQuery 点击其他区域关闭弹出窗体效果实现

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

于是去查了一下:

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

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

- 阅读剩余部分 -