CSS中隐藏元素的异同

隐藏元素 可以阻止响应事件 文档中移除元素 可以过渡动画 是否继承 阻止元素接受焦点
opacity
visibility
display
pointer-events

http://fellowtuts.com/html-css/difference-between-displaynone-visibilityhidden-or-opacity0/

https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/

http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden

“节流函数”提高性能

浏览器中DOM操作比起非DOM交互需要更多的内存和CUP时间,连续的DOM操作有可能会导致浏览器挂起,甚至崩溃。尤其IE中的onresize事件。
高频率的更改会让浏览器崩溃。为了绕开这个问题,需要使用定时器对此类处理函数进行节流

函数节流背后的基本思想:某些代码不可以在没有间隔的情况下连续重复执行

节流函数实现一般实现:1,定时器控制开关,2.定时清除定时器。

1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var throttle = {
switch:false,
timer:100,
process:function(method,context){
var self = this;
if(self.switch){
return;
}
self.switch = true;
setTimeout(function(){
self.switch = false;
method.call(context);
},self.timer);
}
}

2.

1
2
3
4
5
6
function throttle(method,context){
clearTimeout(method.flag);
method.flag = setTimeout(function(){
method.call(context);
},100);
}

适用场景:scroll,resize事件还有输入联想词等高频事件。

参考:

https://www.nczonline.net/blog/2007/11/30/the-throttle-function/

https://gist.github.com/derek-watson/3349917

纯css实现宽高等比

动态实现宽高相等以及其它比例,一般使用的是JS。这次介绍一种使用纯CSS实现的方法。

基础结构与样式:

1
2
<div class="box">
</div>
1
2
3
4
.box{
width:100px;
background-color:#ddd;
}

1.宽:高 = 1:1

1
2
3
4
5
.box:after{
content:'';
display:block;
padding-top:100%;
}

2.宽:高 = 1:2

1
2
3
4
5
.box:after{
content:'';
display:block;
padding-top:200%;
}

3.宽:高 = 2:1

1
2
3
4
5
.box:after{
content:'';
display:block;
padding-top:50%;
}

JS Bin on jsbin.com

动态修改一下宽度,会发现高度会自动跟着变化,并保持相应比例。原理很简单:

首先看下padding的取值:

length: 长度表示法
percentage: 百分比表示法,padding百分比的计算是基于生成的框的包含块的宽度
auto: 自动

百分比的参考值是包含块的宽度,所以padding值的变化会随着宽度变化,其实颜色块的高度padding撑起来的。

MySQL基础操作

登陆MySQL

mysql -u root -p

回车输入数据库密码。

显示所有的数据库

show databases;

1
2
3
4
5
6
7
8
+--------------------+
| Database |
+--------------------+
| information_schema |
| mysql |
| performance_schema |
| sys |
+--------------------+

继续阅读全文 »

低版本Webkit的popstate事件问题

对于popstate事件大家应该有个印象:活动历史项改变时触发。

以下几种情况会触发:

  • 点击浏览器的前进,后退按钮
  • Javascript代码中调用history.back(),forward(),go()

来个简单的例子:

1
2
3
4
5
6
7
8
9
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}

继续阅读全文 »

IE11无法打开网页

  • 关闭所有IE11。
  • WIN+R—输入inetcpl.cpl—-回车。
  • 高级—–重置—–勾选删除个性化设置—–重置。
  • —–关闭。
  • WIN+X—-命令提示符(管理员)——输入命令netsh winsock reset——重启电脑

JavaScript事件整理

在JavaScript中事件是一个很重要的概念,一切的业务处理都是基于用户与界面交互产生事件。

事件模型

当我们谈论事件的时候肯定要先知道事件有两种模型:事件冒泡(IE)、事件捕获(Netscape)

这两个是完全相反的事件模型概念:

事件冒泡:

事件开始于最具体的元素(目标元素),然后逐级向上传播

事件捕获:

事件开始于最外层元素,然后出击向下穿透,直到目标元素

而W3C组织做了一个明智的决定:w3c的事件模型开始于事件捕获然后到达目标元素之后开始事件冒泡,并且给了开发者选择何时处理事件。

继续阅读全文 »