换行：
-word-wrap:break-word; word-break:break-all;
半透明：
-filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;
获取当前窗口的父窗口内的方法(譬如myfun)：
- window.parent.window.myfun('abc');
父窗口获取子窗口的函数（譬如test）：
- document.getElementById('tree_iframe').contentWindow.test();
-页面： <iframe name="tree_iframe" id="tree_iframe" src="departDEMO.html" width="700px" height="500px" scrolling="no" frameborder="no"></iframe>
获取当前窗体的高度：【clientHeight】
- var gridHeight = document.documentElement.clientHeight-90;
区分浏览器类型：
- navigator.userAgent
css首行文字缩进：【text-indent】
- text-indent:2em;
- em是字体单位，一个单位代表一个字;
js操作下拉列表select：
- var selDom = document.getElementById("dataType");
- selDom.options.length = 0;//清空列表
- selDom.options.add(new Option("text","value"));//添加内容
IE调试：
- 在js文件中添加debugger;然后启用IE的调试就可以。
常用的好看的字体：
- verdana，微软雅黑
正则实例化：
var reg =new RegExp("^[A-Z]{2,4}$","gi"); alert(reg.test("AB"));//true;
alert(reg.test("ab"));//true;
alert(reg.test("ABC"));//false;
alert(reg.test("汉字"));//false;
/*IE下背景色过度效果*/
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
/*圆角效果*/
-moz-border-radius:3px;/*Firefox 不可变*/
-webkit-border-radius:3px;/*Safari和Chrome 不可变*/
border-radius:3px;/*IE9+ 不可变*/
/*阴影效果*/
-moz-box-shadow: 2px 1px 7px #ccc;
-webkit-box-shadow: 2px 1px 7px #ccc;
box-shadow: 5px 3px 5px #ccc;
可点击的title：
- <span style='cursor:pointer;' title='很长很长的title' onclick="this.title = this.title+' ' ">内容</span>
-原理说明：鼠标停在标签上，如果不触发onmouseover事件，title不会自动显示，除非：title的值发生变化。
文档碎片的应用：
-1 var fragment = document.createDocumentFragment();
-2 fragment.appendChild(....);
-3 documnet.body.appendChild(fragmen);
-说明：使用文档碎片可以避免每次appendChild的时候页面刷新，这样能提高效率。
URL地址转码：
- encodeURI 转码
- decodeURI 解码
function定义参数的长度：
- function.length返回当前方法定义参数的长度
- 示例：var function test(a,b,c){} ,那么，test.length= 3
解决select遮挡DIV的问题
- <iframe frameborder="0"
style="width:100%;height:100%; position:absolute; top:0px; left:0px;z-index:-1;"></iframe>
- 在你的div里层的第一行插入以上代码。(select是window级别的控件，iframe才能挡住)
图片自适应(宽和高比例不变)：
/*支持IE7+,Chrome,FF等*/
img{
border:10px inset gray; /*相框样式 可去掉*/
margin:0;padding:0;
min-width:100px; min-height:100px; /*最小值限制，小图片会等比拉伸，有点失真(可以去掉)*/
max-width:300px;max-height:300px; /*最大值限制，大图片会等比压缩*/
}
文本省略号：
- text-overflow:ellipsis; overflow:hidden 两个必须同时使用
- 当文本超过容器宽度的时候，使用省略号代替隐藏的文本。
- 实例：<div style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;">当对象内文本溢出时显示省略标记</div>
正则表达式验证非法字符：
//TODO 用户名匹配原则：英文+数字+"_"+"-"+中文 var regText = /^[a-z0-9_\u4e00-\u9fa5-]+$/gi; var name = "abc-_汉字0123ABC"; alert(name +" ="+regText.test(name));//返回true alert(name+" = "+regText.test(name));//第二次的时候就是false，不明白为什么 //另外一种方式：match JSLogger.log(name.match(regText));//JSON ：lastIndex=14,input=abc-_汉字0123ABC JSLogger.log(name.match(regText));//JSON ：lastIndex=14,input=abc-_汉字0123ABC
数字的背景图片样式：
<span style="position:absolute;x:100px;y:100px;font-size:100px;color:gray;font-family:Elephant;-moz-user-select:none;" onselectstart="return false;">1234567890</span>
兼容禁止选中：
/* 去除链接A标签周围的虚线框（chrome,Firefox） */
a:focus {
outline: none;
-moz-outline-style: none;
}
解决span的width和height无效的方法：display:inline-block（行内模块化显示）
<span>aaaaaaaaaaaa</span> <span style="border:0px solid red;background:url(04395110P-73.png) no-repeat; width:16px;height:16px;display:inline-block;margin:0px;padding:0px;"></span> <span style="border:0px solid red;background:url(04395110P-73.png) no-repeat; width:16px;height:16px;display:inline-block;margin:0px;padding:0px;"></span> <span style="border:0px solid red;background:url(04395110P-73.png) no-repeat; width:16px;height:16px;display:inline-block;margin:0px;padding:0px;"></span> <a href="#">A标签</a>
事件兼容性：
var event = window.event||evn;//evn是yourfun传递的参数，eg:onlick = yourfun(event);
var curTagName = (event.target || event.srcElement).tagName;//事件触发者
var nextTagName = (event.relatedTarget || event.toElement).tagName;//事件触发后鼠标所在DOM
Event altKey、ctrlKey、shiftKey
if(evn.ctrlKey){
//do something
}
愤怒的coder - 积累