deng131
- 浏览: 662824 次
- 性别:
- 来自: 深圳
-
最新评论
-
zhouyicang：
为嘛人气不够，这么好的文章，我找了几十篇博客，才找到这篇解惑了 ...
HTML 块级元素/内联元素 -
young7：
不错，解惑了
HTML 块级元素/内联元素 -
lvjin948：
获取浏览器语言的完美方案。http://blog.csdn.n ...
JavaScript获取浏览器语言类型 -
tarena_hhh：
我用了css优化工具，发现他的顺序有很大不一样？？？？？
CSS属性书写顺序及命名规则 -
deng131：
谢谢你的提醒，是有个地方写错了
javascript事件绑定addEventListener,attachEvent
文章列表
js创建label标签的for属性用来增加操作响应区域。
var label = document.CreateElement("input");
label.type="checkbox";
label.for="id"; //不能使用for关键字
由于在js中使用for关键字，所以只能换一种方式：
1，推荐setAttribute属性:
label.setAttribute("for","id");
2，通过htmlFor属性来设置：
label.htmlFor= ...
为了考虑浏览器的兼容性问题，都需要对浏览器进行类型检测。
function addHandler(el, type, fn){
if(window.attachEvent){
//ie事件名称前增加on开头
el.attachEvent("on" + type, fn);
}else{
//记得加上第三个参数，由于ie下没有事件捕捉，所以ff设置为事件冒泡保持一致
el.addEventListener(type, fn, fa ...
readyState五种状态详解
- 博客分类：
- javascript
(0) UNINITIALIZED 未初始化
The object has been created but not initialized. (The open method has not been called.)
（XMLHttpRequest）对象已经创建，但尚未初始化（还没有调用open方法）。
(1) LOADING 载入
The object has been created, but the send method has not been called.
（XMLHttpRequest）对象已经创建，但尚未调用send方法。
(2) LOADED 载入完成
The send ...
虽然网上有中文翻译但是还是直接看英文有感觉。getElementByTagName 与 querySelectorAll在节点查询时候在效率上区别。
Conclusion
The real reason why getElementsByTagName() is faster than querySelectorAll() is because of the difference between live and static NodeList objects. Although I’m sure there are way to optimize this, doing no upfron ...
虽然网上又很多实现方法，但是还是需要理解拖放原理。通过绑定onmousedown,onmousemove.onmouseup事件来实现层拖放位置变化，这只是很简单实现，可以去换个方法去实现。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style>
.drag1 , .drag2{
position:relative;
width:200px;
height:200px;
line-height: 200px;
te ...
大家在前端开发中对闭包应该和熟悉了，也就是几种常见的闭包方式：
1：
var fn = function(i){
var j = i;
return function(){
return j;
}
}
2:
(function(undefined){
//do something
})
...
今天主要说的是2这样闭包方法中传参数问题，在各种前端js框架中经常也会见到这样代码，如果不仔细分析真的很难想到这样使用的用意。
(function(undefined){
//do someth ...
各浏览器TextArea获得焦点后的光标位置情况：
textarea.focus()
FireFox: 所有文字结束处
IE: 文字开头
Opera: 文字开头
Chrome: 文字开头
Safari: 文字开头
IE支持document.selection，Firefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd属性。
针对浏览器的特性进行判断并实现，代码如下：
function insertText(obj,str) {
if (document.selection) {
var sel = document.sele ...
IE:
element.currentStyle
currentStyle 对象返回了元素上的样式表，但是 style 对象只返回通过 style 标签属性应用到元素的内嵌样式。因此，通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。例如，如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red )，而不是内嵌的话，对象.currentStyle.color 将返回正确的颜色，而对象 style.color 不能返回值。但是，如果用户指定了 <P style="color:’red’">，currentS ...
div,span标签title属性：规定元素的额外信息（可在工具提示中显示）
鼠标放在这个层上面的时候会出现一个提示那就是你title的内容.类似于img的alt 。
今天在实现查看图片左右区域显示上一张，下一张效果时候使用到该功能，平时很少用到，原来可以使用div或者span的title属性实现鼠标放在这个层上面的时候会出现提示信息。
参考：
http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
在IE6不支持Array上indexOf方法，又是可恶的ie，很是痛恶。
自己在Array原型链上扩展indexOf方法：
if(!Array.prototype.indexOf){
Array.prototype.indexOf = function(val){
var value = this;
for(var i =0; i < value.length; i++){
if(value[i] == val) return i;
}
return -1;
};
}
[1].indexOf(1);
前端开发就是需要考虑浏览 ...
重要的是其实现的原理，明白原理后就可以自由的发挥你的想象了，不用多说，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
.clip-top{
border-style: dashed dashed solid dashed;
border-color ...
一直关注js比较多，对css不是很熟，作为前端开发工程师而言这是不平衡和不合格的。当面试时或者时同行问道如何实现这个效果时候就萌到了，虽然也在各个博客上看到过实现文章但是一直没有自己去实践和理解其实现原理。
<!DOCTYPE html>
<html>
<head>
<style>
.clip{
border-style: solid dashed dashed;
border-color: #red transparent transparent;
border-width: 6px;
width:0;
...
现在主流的浏览器都支持javascrip, 但还是有小部分不支持javascript, 或都为了安全把js禁用了. 尤其在使用了大量的js,ajax这种异步处理方式时候，将会对用户体验造成很大影响。
常用处理方法：
1： 使用<!--和-->标记对直接屏蔽。
<script type="text/javascript">
<!--此处添加脚本代码 -->
</script>
在禁用js情况下<!-- --> 标记中内容浏览器将会当作注释处理。
2：使用<noscript>和& ...
.png{
background: url(http://www.xxx.com/images/x.png) no-repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://www.xxx.com/images/x.png");
_background:none;
width:100px;
height:100px;
}
参考：
http://blog.gulu77.com/?p=1 ...
在前端开发中经常被问到IE下这个bug问题：
ie6下是因为haslayout的原因，为了触发haslayout属性，更简单的办法就是它设置zoom:1;即可，而且没有任何副作用。
.opacity{opacity:0.3;filter:alpha(opacity:40);zoom:1}
参考：
http://www.ilovejs.net/archives/178