前端常用总结

来源：互联网发布：js数组指定下标截取编辑：程序博客网时间：2024/06/04 20:11

div+css ie6图片之间有间隙的问题

.img{vertical-align:top;}
或者

.img {display:block;}

ie6 png透明
background: url(images/bt_h.png) no-repeat left 0px!important;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bt_h.png'); _background-image: none;

jquery fadeIn 动画重叠问题
$("#id").stop(true,true).fadeIn();

ie8 jquery fadeIn 图片淡出淡入效果失效问题
其实解决此现象只需将html中环绕图片的tag的display属性设置为block即可解决。以上述代码为例，需将a tag的CSS设置为
a{display: block;}

常用全局属性
body {margin:0;padding:0;font-size:12px;color:#282828; font-family:宋体;cursor:default;}
div,form,img,ul,li,dl,dt,dd,h1,h2,h3,p {margin: 0px; padding: 0px; border: 0px;}
img{vertical-align:top;}
ul li{list-style-type: none;}

无边框无滚动条iframe

绝对定位与相对定位的问题
在一个声明为 position:relative的div容器下，声明为 position:absolute 的子div容器位置指的是父div容器的绝对位置，而非整个页面的绝对位置

自动隐藏文字

width:100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

合并td

colspan=2

多行文本域

去除a连接选中框

onfocus="this.blur()"

即在获取焦点的时候同时失去焦点

display:block 与 display:inline 区别

display: inline; 在同一行
display:block; 前后换行

margin-bottom在IE6和IE7下失效的解决办法

只要在浮动的最后一个元素后面加上“<div style="clear:both;"></div>”

IE6双倍margin解决

display:inline;

强制换行

word-wrap:break-word;

js获取标签

//通过ID获取

var obj = document.getElementById("div1");

//通过name获取

var objs = document.getElementsByName("div");

for(i=0;i<objs.length;i++){

alert(objs[i].innerHTML);

}

//通过class获取

var objclass = document.getElementsByClassName("tips");

for(i=0;i<objclass .length;i++){

alert(objclass [i].innerHTML);

}

//通过标签类型获取

var divs= document.getElementsByTagName("div");

for(i=0;i<divs.length;i++){

alert(divs[i].innerHTML);

}

js解析json
var objs = eval("{data:[{ id: 1, name: 'n_1' }, { id: 2, name: 'n_2'}]}");
alert(objs.data[0].id); // return 1

设置下拉框选中

</select>

js获取select 的值
var t = document.getElementById("typeController");
alert(t.options[t.selectedIndex].value);

alert(t.value);

设置单选复选选中

js判断及设置单选

document.getElementById('checkbox1').checked = true;

js修改class的值

var obj = document.getElementById("div1");

obj.className="nav";

js小数取整
1.丢弃小数部分,保留整数部分
js:parseInt(7/2)

2.向上取整,有小数就整数部分加1
js: Math.ceil(7/2)

3,四舍五入.
js: Math.round(7/2)

4,向下取整
js: Math.floor(7/2)

js计时器

//循环执行

var settime=setInterval(function()
{
var myDate = new Date();
var time = myDate.toLocaleString();
document.getElementById("time").innerHTML=time;
}
,1000);

//停止计时器

clearTimeout(settime);

//延迟执行一次
var settime=setTimeout(function()
{
var myDate = new Date();
var time = myDate.toLocaleString();
document.getElementById("time").innerHTML=time;
}
,3000);

js判断字符是否存在

var str = "abcd";

if(str.indexOf("a")!=-1){

//存在

}

js字符串分割

var str = "a,b,c";

str_arr = str.split(',');

js字符串截取

substr 方法
返回一个从指定位置开始的指定长度的子字符串。
stringvar.substr(start [, length ])

参数
stringvar
必选项。要提取子字符串的字符串文字或 String 对象。
start
必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
length
可选项。在返回的子字符串中应包括的字符个数。

说明
如果 length 为 0 或负数，将返回一个空字符串。如果没有指定该参数，则子字符串将延续到 stringvar 的最后。

substring 方法
返回位于 String 对象中指定位置的子字符串。

strVariable.substring(start, end)
"String Literal".substring(start, end)

参数
start
指明子字符串的起始位置，该索引从 0 开始起算。
end
指明子字符串的结束位置，该索引从 0 开始起算。

说明
substring 方法将返回一个包含从 start 到最后（不包含 end ）的子字符串的字符串。
substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点。例如， strvar.substring(0, 3) 和 strvar.substring(3, 0) 将返回相同的子字符串。
如果 start 或 end 为 NaN 或者负数，那么将其替换为0。
子字符串的长度等于 start 和 end 之差的绝对值。例如，在 strvar.substring(0, 3) 和 strvar.substring(3, 0) 返回的子字符串的的长度是 3。

js转换成小写
toLowerCase 方法

js转换成大写
toUpperCase 方法

js编码

encodeURIComponent

js判断键盘按下的键值

兼容IE及FIREFOX的做法

onkeydown="javascript:checkkey(event);"

function checkkey(e){

// e = e||event; //经过验证此句可有可无

if (e.keyCode == 13){

alert('按下回车键');

}

在FIREFOX中如果采用 onkeypress事件，则数组及字母键keyCode 都为0，但回车为13

采用onkeydown 则与在IE中表现一致

JS控制样式

var obj = document.getElementByIdx_x_x('no');
obj.style.cssText = "width:400px; height:300px;";

href 和 onclick优先级
<a href="转向链接" onclick="if(判断) return false; else return true;">xxx</a>

IE6使用滤镜后A标签不能点击

只要给所有不能点击的链接添加相对定位position:relative即可，如果页面中又采用了其他定位方法，只要在其外加上另外一个Div容器就可以解决了。