常用脚本

accpxudajian

浏览: 459941 次
性别:
来自: 北京

最近访客更多访客>>

hyw100200

CloudPure

116856645

t181

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript
CSS

contentWindow clientHeight text-indent new RegExp inline-block

换行：

-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

数字的背景图片样式：

兼容禁止选中：

-IE&Chrome：<body onselectstart="return false">

-FF：body { -moz-user-select: none; }

-实践：<body onselectstart="return false" style="-moz-user-select: none;">

/* 去除链接A标签周围的虚线框（chrome,Firefox） */

a:focus {

outline: none;

-moz-outline-style: none;

}

匹配中文正则表达式：
/[^u4E00-u9FA5]/gi

解决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 - 积累

分享到：

css hack积累 | 解析xml字符串

2012-09-03 18:28
浏览 1012
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

常用脚本

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

常用脚本

评论

发表评论

相关推荐

Flex获取当前地址栏和URL参数

获取行政区划地名地址的简称

jsURL编码

背景图片的透明方法

scrollHeight、clientHeight ,offsetHeight 区别

图片延迟加载(兼容IE&FF&Chrome)

获取FireFox下的event

让title动起来

JS读取本地文件夹和图片异步加载（图片LazyLoad）

javascript 理论片

获取DOM对象的当前(current)样式

javaweb系统的枚举设计

css文本样式系小结

兼容的带样式的INPUT

JS获取客户端浏览器基本信息

css hack积累

解析xml字符串

sortTable组件

js获取body或屏幕的宽度大集合

XmlDOM 小结

最近访客更多访客>>