CodeSky 代码之空

昨天被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);
9

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

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

在修改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。

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

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

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

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

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

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

1jQuery.prototype.switchBackgroundColor = function(color1, color2, time) {
2	var self = this;
3	self.css('background', color1);
4	setTimeout(function() {
5		self.css('background', color2)
6	}, time);
7}
8

以前尝试过用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判断点击事件发生在区域外的条件是：
91. 点击事件的对象不是目标区域本身
102. 事件对象同时也不是目标区域的子元素
11*/
12

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

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

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

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

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

这里我们用到了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，从这里开始吧。

今天在Hostker群里有人问关于javascript除了比如element.style.height这种方法，有没有一次能修改css的函数，当时我就想着，不可能嘛，jQuery才有这么方便的功能吧$('element').css()

结果没想到javascript也有一个叫cssText的东西。

cssText是个可读可写的属性。

你可以通过 object.style.cssText读取他设置的css，可以通过 object.style.cssText=string来添加。

于是我们可以通过这个方法来追加CSS:

1obj.style.cssText += " ;width:200px;position:absolute;left:100px;";　//这样便能解决在IE中出现的问题了
2

感觉真棒！

这两天发现以前手动编译的自己是多么的逗比了……

其实很简单嘛，在Jade/Stylus/Coffee中人工编译：

jade index.jade
stylus style.styl
coffee -c core.coffee

而自动编译只要加个watch就可以了ㄟ( ▔, ▔ )ㄏ

jade -w index.jade
stylus -w style.styl
coffee -wc core.coffee

另外，CMD中可以通过ctrl+c结束运行中的命令。

今天又有新的需求了，需要获取鼠标点击相对于浏览器窗口的位置，于是就要开始想办法咯。

查了教程，结果发现自己果然是文盲。

其实是很简单的，这里要说的事情有两点，第一点是关于怎么实现，第二点是关于event。

CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状.

你还可以在一个calc()内部嵌套另一个calc().

可以在calc里运用的运算符就是加减乘除，我们可以拿他实现很棒的效果。

比如：

1.banner {
2  position:absolute;
3  left: 40px;
4  width: 90%;                       /* fallback for browsers without support for calc() */
5  width: -webkit-calc(100% - 80px);  /* WebKit 536.3 (Chrome 19) and above, experimental */
6  width:         calc(100% - 80px);  /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */
7  border: solid black 1px;
8  box-shadow: 1px 2px;
9  background-color: yellow;
10  padding: 6px;
11  text-align: center;
12}
13

这里我们可以看到一个计算表达式，这是我们一直想做到的，但实际想做到这一点却要依靠javascript计算，所以我才说，这很棒。

剩下的演示不多做了，关于兼容性表以及详细的其他示例，可以看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc