标签 知识 下的文章

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

<!--[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]-->

- 阅读剩余部分 -

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-

于是可以这样:

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

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

愉快的玩耍啦~

Javascript 变量提升

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

于是比如:

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

只会输出undefined。

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

jQuery 坑爹的toggle

昨天被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=

jQuery prop大法好

在修改Hi GPA的时候需要增加一个全选用户的功能,结果被坑惨了。

首先,最终代码是这么写的:

var text = $('#select-all-student').html();
if (text == '全选') {
    $('input[name="studentNumber"]').prop('checked', true);
    $('#select-all-student').html('取消全选')
} else {
    $('input[name="studentNumber"]').prop('checked', false);
    $('#select-all-student').html('全选');
}

这里集成了一个全选和反选的功能,可以选中所有name为studentNumber的checkbox。

- 阅读剩余部分 -

jQuery+CSS3 制作background-color渐变效果

jQuery中虽然用animate,但是他支持的毕竟有限,比如说就不支持background-color,所以要想起到过渡效果,还得靠CSS3来撑门面啦。

刚开始时候写了个function,然后想想这样一点都不好用,我还得传个obj参数进去好麻烦,后来想到了,何不在jQuery里加个方法,就能和原生函数一样调用了。

jQuery.prototype.switchBackgroundColor = function(color1, color2, time) {
    var self = this;
    self.css('background', color1);
    setTimeout(function() {
        self.css('background', color2)
    }, time);
}

- 阅读剩余部分 -

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

以前尝试过用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写法推荐?看到的,里面有许多方法, 这是其中一种,感觉也挺好的。

- 阅读剩余部分 -

Javascript Fuck IE代码

因为用了太多CSS,加上似乎jQuery也不支持低版本IE,于是想着能不能fuck IE呢?

结果真的发现了一段类似的代码(本身是用来检测浏览器的),稍作修改之后就可以开始Fuck了。

当然因为太蠢写出来呆萌呆萌的,实际上完全不用这么麻烦(顺便学了一下正则表达式的知识)

window.onload = function() {
    var browser=navigator.appName;
    var version=navigator.userAgent.match(/MSIE [0-9]/);
    if (version != null) 
        version = version[0].match(/[0-9]+/)[0];
    console.log(version);
    if ((browser=="Microsoft Internet Explorer") && (version <= 8)) {
        console.log('Fuck IE');
        document.write('Fuck IE');
    }
}

这里我们用到了navigator的相关属性,关于他的更多属性,可以参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator

这里其实很多都多此一举了=A=当初直接匹配[5-8]就没那么多事了呀,当然这里正则中用到了+,

? 出现零次或一次,最多一次
* 出现任意次(零次、一次、多次)
+ 出现一次或多次,至少一次
{n} 能且只能出现n次
{n,m} 至少出现n次,最多出现m次

然后document.write()覆盖显示内容,当然这里要注意的是,document.write()必须得是最后载入的,于是我们还得使用window.onload保证加载完毕。

关于更多正则小知识:http://www.nowamagic.net/librarys/veda/detail/1019,从这里开始吧。