几个积累的javascript和css的技巧
以前日常工作中积累的，整理出来备忘一下。
1 输入框回车输入事件
<form id="form1" name="form1" method="post">
<input type="text" name="jj" id="jj" onkeypress="if(event.keyCode==13) {btn.click();return false;}"/>
<input type="submit" name="btn" id="btn" value="提交" onclick="alert(jj.value);return false;" />
</form>
2 white-space, text-wrap, word-wrap, line-break, word-break
- white-space 是 white-space-collapsing 和 text-wrap 的缩写
| 属性 | 设置 white-space-collapsing | 设置 text-wrap | 空行 | 空格 | 文字自动换行 | 效果 |
| normal | collapse | normal | collapse | collapse | wrap | 忽略多余空行和空格，文字自动换行 |
| pre | preserve | none | preserve | preserve | no wrap | 保留所有空行和空白，文字不自动换行 |
| nowrap | collapse | none | collapse | collapse | no wrap | 忽略多余空行和空格，文字不自动换行 |
| pre-wrap | preserve | normal | preserve | preserve | wrap | 保留所有空行和空白，文字自动换行 |
| pre-line | preserve-breaks | normal | preserve | collapse | wrap | 合并多余空格，保留多余空行，文字自动换行 |
- text-wrap 定义文本的自动换行效果
| 属性 | 效果 |
| normal | 在允许的断点处自动换行 |
| none | 文本不会自动换行；对于不“合身”的容器，文本将会溢出 |
| unrestricted | 在任意的文法单词间都可断行，比 normal 的限制要松散很多 |
| suppress | 除非断行处没有其他任何允许的断点，方可进行断行，这比 unrestricted 严格，比 normal 松散 |
- word-wrap 执行最激进的单词断行控制，从单词的内部断开以防止文本溢出容器并且完全适应容器的宽度
- 在 IE 的实际效果中，word-break 的效果要激进得多，它穷凶极恶地断开所有单词（如果到达边界的话）
| 属性 | 效果 |
| normal | 仅在允许的文本断点处自动换行 |
| break-word | 如果一行中没有其他可接受的断点，那么将强行断开文本单词 |
- line-break 是断行的规则，针对东亚文字
- 基本是针对日文的换行规则
- word-break 是断行的规则，针对非东亚文字
| 属性 | 效果 |
| normal | 根据特定非东亚文字自己的规则来决定是否自动断行 |
| break-all | 允许非东亚语言文本行的任意字内断开。该值适合包含一些非东亚文本的东亚文本 |
| keep-all | 不允许非东亚语言文本行的任意字内断开。该值适合包含一些东亚文本的非东亚文本 |
| hyphenation | 文本会在合适的连字符处断开，这需要浏览器的支持 |
专门用于控制文本自动换行功能的属性是 text-wrap 和 word-wrap，而 line-break 和 word-break 用来控制断行和单词边界分隔，根据 W3C 的描述来说，word-wrap 是最激进的自动换行方式，可以强行断开单词。而现实情况是，word-break: break-all; 的方式要更为激进
参考文档：http://ued.taobao.com/blog/2010/10/research-of-word-wrap/
3 pre中的内容换行
a强制要出界的代码换行
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
} b即将出界的代码隐藏起来，这时出现横向滚动条
pre {
width:521px;
overflow: auto; overflow-y:hidden
}
参考文档：http://xizhiabc.info/dev/191-pre-tips-force-line-and-horizontal-scroll-bar
http://www.css88.com/archives/2422
4 Js中的window.parent ,window.top,window.self 代表的对象
在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。
a Opener：获取创建本窗口的窗口的引用，不在本窗口的对象层次体系中
只能在用window.open打开的页面中窗口中可以访问到opener属性，而对于用showModalDialog和showModalessDialog弹出的窗口则不能访问到，其opener属性引用为空。
b parent，top：获取的是对本窗口中对象层次元素的引用，对于用iframe或者frame的较有实际意义
对于用window.open和showModalDialog以及showModalessDialog打开的窗口而言，返回的是本窗口对象层次的元素引用，对于这种情况，parent，top，self三者的引用相同，都是当前的窗体自身，但对于窗体中的frame和iframe加载的页面元素来说，返回的则不相同。parent 返回的时包含该iframe的页面窗口引用，top则返回最上层的窗口引用，self当然返回的仍然是自身的引用。
c self，window都是获取当前页面窗口自身对象的引用
每个页面自身代码中访问页面自身窗体可以采用self和window来访问到。
d 利用window参数传递和dialogArguments来获取弹出窗口的窗口引用
为了能够在用showModalDialog和showModalessDialog弹出窗口中引用到弹出窗口的引用，我们可以在showModalDialog和showModalessDialog的第二个参数传入window，然后再弹出的页面中用dialogArguments来获取刚才传入的window，即弹出窗口的窗口的引用。
5 js刷新页面方法大全
Javascript刷新页面的几种方法：
1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href
1.页面自动刷新：把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20">
其中20指每隔20秒刷新一次页面.
2.页面自动跳转：把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20;url=http://www.jb51.net">
其中20指隔20秒后跳转到http://www.jb51.net页面
3页面自动刷新js版
<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>
1.如何刷新包含该框架的页面用
<script language=JavaScript>
parent.location.reload();
</script>
2.子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
3.如何刷新另一个框架的页面用
window.parent.frames[1].location.reload();
window.parent.frames.bottom.location.reload();
window.parent.frames["bottom"].location.reload();
window.parent.frames.item(1).location.reload();
window.parent.frames.item('bottom').location.reload();
window.parent.bottom.location.reload();
window.parent['bottom'].location.reload();
4.如果想关闭窗口时刷新或者想开窗时刷新的话，在<body>中调用以下语句即可。
<body onload="opener.location.reload()">
<body onUnload="opener.location.reload()">
参考文档：http://www.jb51.net/article/14397.htm
http://www.cnblogs.com/flaaash/archive/2008/04/25/1170771.html
6 JavaScript判断浏览器类型及版本
以下是几个
IE
只有IE支持创建ActiveX控件，因此她有一个其他浏览器没有的东西，就是ActiveXObject函数。只要判断window对象存在ActiveXObject函数，就可以明确判断出当前浏览器是IE。而IE各个版本典型的userAgent如下：
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
其中，版本号是MSIE之后的数字。
Firefox
Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小（IE对应的中是getBoundingClientRect函数）。这是Firefox独有的，判断它即可知道是当前浏览器是Firefox。Firefox几个版本的userAgent大致如下：
Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
其中，版本号是Firefox之后的数字。
Opera
Opera提供了专门的浏览器标志，就是window.opera属性。Opera典型的userAgent如下：
Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0
其中，版本号是靠近Opera的数字。
Safari
Safari浏览器中有一个其他浏览器没有的openDatabase函数，可做为判断Safari的标志。Safari典型的userAgent如下：
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
其版本号是Version之后的数字。
Chrome
Chrome有一个MessageEvent函数，但Firefox也有。不过，好在Chrome并没有Firefox的getBoxObjectFor函数，根据这个条件还是可以准确判断出Chrome浏览器的。目前，Chrome的userAgent是：
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
其中，版本号在Chrome只后的数字。
有趣的是，Chrome的userAgent还包含了Safari的特征，也许这就是Chrome可以运行所有Apple浏览器应用的基础吧。
只要了解了以上信息，我们就可以根基这些特征来判断浏览器类型及其版本了。我们会将判断的结果保存在Sys名字空间中，成为前端框架的基本标志信息，供今后的程序来读取。如果判断出谋种浏览器，Sys名字空间将有一个该浏览器名称的属性，其值为该浏览器的版本号。例如，如果判断出IE 7.0，则Sys.ie的值为7.0；如果判断出Firefox 3.0，则Sys.firefox的值为3.0。下面是判断浏览器的代码：
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/)[1];
//以下进行测试
if(Sys.ie) document.write('IE: '+Sys.ie);
if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
if(Sys.opera) document.write('Opera: '+Sys.opera);
if(Sys.safari) document.write('Safari: '+Sys.safari);
</script>
我们把对IE的判断放在第一，因为IE的用户最多，其次是判断Firefox。按使用者多少的顺序来判断浏览器类型，可以提高判断效率，少做无用功。之所以将Chrome放在第三判断，是因为我们预测Chrome很快会成为市场占有率第三的浏览器。其中，在分析浏览器版本时，用到了正则表达式来析取其中的版本信息。
如果你的JavaScript玩得很高，你还可以将前面的判断代码写成这样：
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] :
document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] :
window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] :
window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] :
window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0;
//以下进行测试
if(Sys.ie) document.write('IE: '+Sys.ie);
if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
if(Sys.opera) document.write('Opera: '+Sys.opera);
if(Sys.safari) document.write('Safari: '+Sys.safari);
</script>
这样可以使JavaScript代码更精简些。当然，可读性稍差一些，就看你是重视效率还是重视可维护性了。
使用不同特征来判断浏览器的方法，虽然在速度上比用正则表达式分析userAgent要来的快，不过这些特征可能会随浏览器版本而变化。比如，一种浏览器本来独有的特性取得了市场上的成功，其他浏览器也就可能跟着加入该特性，从而使该浏览器的独有特征消失，导致我们的判断失败。因此，相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型。何况，反正判断版本信息也需要解析浏览器的userAgent的。
通过分析各类浏览器的userAgent信息，不难得出分辨各类浏览器及其版本的正则表达式。而且，对浏览器类型的判断和版本的判断完全可以合为一体地进行。于是，我们可以写出下面的代码：
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//以下进行测试
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>
其中，采用了“... ? ... : ...”这样的判断表达式来精简代码。判断条件是一条赋值语句，既完成正则表达式的匹配及结果复制，又直接作为条件判断。而随后的版本信息只需从前面的匹配结果中提取即可，这是非常高效的代码。
参考文档：http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html
7 jQuery中的非空判断及val()的用法
form提交很少的几个值，不想用验证框架，于是自己用jq写
发现一个问题：
var temp = $("input[name='drink']").val();
if(temp.length==0){
$("span:eq(1)").removeClass("hidden");
return;
}
这里的的temp是个对象，里面为" "它的length就不是0
解决方法: $.trim($("input[name='drink']").val());
8 jquery判断一个层是否隐藏
$(#test).is(":hidden")
$('').attr('visiblity') （未通过）
一个层可见：
$("#test").show("blind", {}, 500);
一个层隐藏：
$("#effect:visible").removeAttr("style").fadeOut();
参考文档：http://hi.baidu.com/rainzhai/item/d98578731163702a5c178990
9 鼠标经过，行变色
onMouseOver="this.style.backgroundColor='#FFFBAC';"
onMouseOut="this.style.backgroundColor=''"放在 <tr> 里。鼠标经过。行变色。
非IE的用hover即可
#d1:hover {background:#FF0000}
参考文档：http://www.qpsh.com/javascript/showpage2444.htm
总结一下，这个博客是做前台页面的时候积累的经验，包括css，js和jquery。以后还会继续更行的