firefox 用 document.getSelection()。

</p> <p>423423 53 53463464</p> <p><script></p> <p>if(document.selection){</p> <p>document.onmouseup=function(){alert(document.selection.createRange().text)}</p> <p>}else{</p> <p>document.onmouseup=function(){alert(document.getSelection())}</p> <p>}</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

参考资料：

http://www.webreference.com/js/column12/getselection.html

点击这里打开新窗口浏览此网页

测试如下，请用不同的浏览器来查看效果

属性选择器（attribute selector）

p[id] 表示选择所有带有 id 属性的 p 标签

p[ align=right] 表示选择所有align 属性为 right 的标签

firefox 可以识别，IE则不认识这种写法

</p> <style> <p>p[id] {background:#69c;color:#fff}</p> <p>p[align=right] {background:#c96;color:#fff}</p> </style> <p>Paragraph 1</p> <p id="a">Paragraph 2</p> <p align="right">Paragraph 3</p> <p align="center">Paragraph 4</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

属性选择器很有意思，以前发过相关日志，有4种写法：

[att] 匹配带有 att 属性的元素

[att=val] 匹配 att 属性值为 val 的元素

[att~=val] 匹配 att 属性中至少有一个 val值 的元素（用空格分开的多个值）

[att|=val] 匹配 att 属性中以 val值开头，用 - 连接的属性值的元素（用 - 连接的值）

举例如下：

</p> <style> <p>a[rel~=david] {background:red;}</p> <p>a[target] {background:green;}</p> <p>a[class] {background:blue;}</p> </style> <p><a href="##">this is a hyperlink.</a></p> <p><a href="##" rel="david blog" target="new">this is a hyperlink.</a></p> <p><a href="##" target="new">this is a hyperlink.</a></p> <p><a href="##" target="new" class="oclass">this is a hyperlink.</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

更多用法变化，请参考w3c 相关说明：

http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors

子对象选择器（child selectors）

注意，descendant selectors 和 child selectors 的区别。我个人的叫法是 包含选择器 和 子选择器，我不知道正式翻译应该是什么，计算机这东西本来就不适合用中文来表达，：（

p span 表示选择 p 内所有 span 标签

p>span 表示选择 p 内所有第一层子级 span 标签

IE认识descendant selectors（包含选择器） 的写法但不认识 child selectors（子选择器）的写法。

</p> <style> <p>span {{background:#eee;color:#000}}</p> <p>p span {background:#69c;color:#fff}</p> <p>p>span {background:green;color:#fff}</p> </style> <p><span>guoshuang testing…</span></p> <p><span>guoshuang testing…</span></p> <p><span><span>guoshuang testing…</span></span></p> <p><span>guoshuang testing…</span></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

w3c 相关说明参考：

http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors

/**/注释的方法

在选择器后立刻加上 /* */ 屏蔽低版本（5.0以下）的IE浏览器。我记得近日看过一个详细说明，应该在我的 365key 中，注释不同的写法，花样繁多的 hack，：（（（

</p> <p>p/* */ {background:red;}</p> <p>

The media attribute（media 属性）

当然了,低版本的浏览器怎么能认识这个呢?

</p> <link href="xxx.css" type="text/css" rel="stylesheet" media="all"/> <p>或者</p> <p>CSS:</p> <p>@media all {</p> <p>… /* stylesheet rules here */</p> <p>}</p> <p>

@import rule

很多低版本的浏览器，不认识前面这三个。

带引号的，不带引号的

@import url(”../hide1a.css”);

@import url(../hide1a.css);

不带url()的

@import “../hide2.css”;

IE 6也不认识这个（也就是说，屏蔽目前的所有IE）

带 media 说明的

@import url(../hide1b.css) screen;

具体在：

http://w3development.de/css/hide_css_from_browsers/import/

Tantek’s Hack

先屏蔽 netscape 4.x 以后再用这个，因为在netscape 4.x 会报错。屏蔽下列浏览器

* Netscape 4.x

* Mac IE 4.5 and lower

* Win IE 5.5 and lower

* Win Amaya 5.1

</p> <p>p#tantek {</p> <p> voice-family: “”}”"; /* some browsers have a parsing bug */</p> <p> /* and will ignore the following rules */</p> <p> voice-family: inherit;</p> <p> color: #f00;</p> <p>}</p> <p>

其它 hack 方法若干：

http://w3development.de/css/hide_css_from_browsers/more/

一些调试页面的时候使用的 javascript，拷贝在地址栏粘贴，回车执行或者收到收藏夹中,方便以后调试页面时使用.

Dump Scripts

显示页面中包含的javascript脚本内容

</p> <p>javascript:var%20jsArray%20=%20document.getElementsByTagName(%22script%22);%20var%20theWinref;%20var%20theHTML;%20var%20scriptObj;%20var%20frameURL;%20var%20frameObj;if(jsArray.length%20%3E%200)%20%7B%20theWinref%20=%20window.open(”,’_blank’,'width=320,height=255,toolbar=no,location=no,directories=no,status=yes,menubar=no,resizeable=yes’);%20theWinref.document.write(’%3Chtml%3E%3Chead%3E%3Ctitle%3E’%20+%20window.location.href%20+%20′%3C/title%3E%3C/head%3E%3Cbody%3E’+%20jsArray.length+’%20Script(s)%20Found:’);%20theWinref.resizeTo(600,200);theWinref.moveTo(0,0);%20%7D%20for%20(var%20i%20=%200;%20i%20%3C%20jsArray.length;%20i++)%20%7B%20scriptObj%20=%20jsArray%5Bi%5D;%20if(scriptObj.hasAttribute(%22src%22))%7B%20frameURL%20=%20scriptObj.getAttribute(%22src%22);%20theWinref.document.write(%22%3Cp%20style=’background-color:%23999933;’%3EScript%20%22+eval(i+1)+%22%20via%20%22%20+%20frameURL%20+%20%22%3Cbr%3E%3Ciframe%20height=’100%25′%20width=’100%25′%20id=’url%22+%20i%20+%20%22′%20src=’%22%20+%20frameURL%20+%20%22′%3E%3C/iframe%3E%3C/p%3E%22);%20frameObj%20=%20theWinref.document.getElementById(%22url%22%20+%20i);%20%7D%20else%20%7B%20theHTML%20=%20scriptObj.innerHTML;%20theWinref.document.write(%22%3Cp%20style=’background-color:%23999933;’%3EScript%20%22+eval(i+1)+%22:%3Cbr%3E%3Cpre%3E%22%20+%20theHTML%20+%20%22%3C/pre%3E%3C/p%3E%22);%20%7D%20%7D%20if(jsArray.length%20%3E%200)%20%7B%20theWinref.document.write(’%3C/body%3E%3C/html%3E’);%20%7D</p> <p>

Execute Arbitrary Scripts

显示一个提示窗口，可以输入javascript代码并执行

</p> <p>javascript:var%20c=’document.location.href’,r=”;while(c=prompt(r+’Enter%20the%20code%20to%20be%20executed:’,c)){try{r=’Returned:%20′+eval(c)+’<br /> ‘;}catch(err){r=’Error:%20′+err.message+’<br /> ‘;}}</p> <p>

调试页面的时候可以使用

Show Tables

显示表格边框

</p> <p>javascript:var%20f=function(tt,col){var%20a=document.getElementsByTagName(tt);for(var%20b=0;b%3Ca.length;b++){a[b].style.border=’1px%20solid%20%23′+col;}};f(’table’,'00F’);f(’td’,'0F0′);f(’th’,'0FF’);</p> <p>

Show DIV Borders

显示 Div 的边框

</p> <p>javascript:var%20a=document.getElementsByTagName(’div’);for(var%20b=0;b%3Ca.length;b++){a[b].style.border=’1px%20solid%20%23F00′;}</p> <p>

Show DIV Borders with their IDs

显示 Div 的边框和 Id

</p> <p>javascript:var%20a=document.getElementsByTagName(’div’);var%20aspan;var%20txtNode;for(var%20b=0;%20b%20<%20a.length;b++){%09a[b].style.border='1px%20solid%20red';%09%09if(a[b].id%20!=%20''){%09%09aspan%20=%20document.createElement('span');%09%09aspan.setAttribute('id',%20't_ttp'%20+%20a[b].id);%09%09aspan.setAttribute('style',%20'position:relative;top:1px;left:1px;%20margin:10px%200px%200px%2010px;background-color:%20beige;max-width:220;padding:%202px%2010px%202px%2010px;border:%201px%20solid%20#C0C0C0;font:%20normal%2010px/12px%20verdana;color:%20#000;text-align:left;display:%20block;');%09%09txtNode%20=%20document.createTextNode('div:%20'%20+%20a[b].id);%09%09aspan.appendChild(txtNode);%09%09a[b].appendChild(aspan);}}</p> <p>

页面验证

分别为 html css 和 link 验证

</p> <p>javascript:void(document.location=’http://validator.w3.org/check?uri=’+document.location);</p> <p>javascript:void(document.location=’http://jigsaw.w3.org/css-validator/validator?uri=’+document.location);</p> <p>javascript:void(document.location=’http://validator.w3.org/checklink?url=’+document.location);</p> <p>

以上来自 Safari Developer FAQ

代码导致编辑器混乱,只好先另开一篇日志继续写

这是tirm空格的自定义函数

</p> <p>String.prototype.LTrim=new Function(”return this.replace(/^\s+/,”)”)</p> <p>String.prototype.RTrim=new Function(”return this.replace(/\s+$/,”)”)</p> <p>String.prototype.Trim= new Function(”return this.replace(/^\s+|\s+$/g,”)”)</p> <p>

真正地刷新页面

使用 location.reload() 可以刷新页面，但是是否使用cache 缓存却是服务器端配置的问题。一个客户端的技巧是，在地址栏构造一个“查询”，如当前时间

location.replace(location.href+’?d=’+new Date().valueOf())

如果地址已经是“查询”字符串，则构造

location.replace(location.href+’&d=’+new Date().valueOf())

传送后台变量到前台javascript

jsvar=”<%= aspvar %>“; // asp jsp 写法

jsvar=”” // php 写法

得到随机数

function Random(x) { return Math.floor(x*Math.random()) }

得到 0 到 x-1 之间的数字；Random(x)+1 得到 1 到 x 之间的数字。

关于 a href=”javascript:…”

不推荐这种写法，最好用

…

注意：这种写法会导致 动画 gif 停止播放（IE中）

</p> <p><a href='javascript:" <p>Hello</p> <p>“‘>aaa</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

不合法 ID 对象的获取

以前见过一些应用,比如动态的ID等，不一定非要用于不合法的 ID 名称，而且请尽量不要使用这些非法的命名。document.all 就没有这个好处了，比如有一次后台给出的名称含有 .

</p> <div id="aa[**?]">illegal name</div> <p><script></p> <p>alert(document.getElementById("aa[**?]“).childNodes[0].nodeValue)</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <div id="a.a">illegal name</div> <p><script></p> <p>alert(document.getElementById("a.a").childNodes[0].nodeValue)</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

.语法（dot notation）与 [] 语法（square brackets notation）

以前见过一个文章专门讨论 [] 语法，很有意思。

</p> <p>test</p> <p><script></p> <p>alert(document["bo"+"dy"].innerHTML)</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

DOM简写的问题

common shortcut (introduced by IE and reproduced in some other browsers) in accessing DOM elements

不推荐简写，容易产生混淆。下面代码在firefox可以正确处理，IE不行，必须关掉一个 a

</p> <p><html></p> <div id="a">test</div> <p><script></p> <p>a=3</p> <p>alert(a)</p> <p>alert(document.getElementById("a"))</p> <p></script></p> <p></html></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

javascript调试问题

IE双击左下角的错误图标；mozilla类浏览器都有 javascript console（控制台）

BTW:firefox 在地址栏运行 javascript: 就可以打开控制台，我刚才就这么一弄，firefox没有响应，很慢，只好强关，哎，郁闷，一堆打开的页面还没有看呢…

cookie代码

</p> <p> function testCookies() { </p> <p> var exp = new Date(); </p> <p> exp.setTime(exp.getTime() + 1800000); </p> <p> // first write a test cookie </p> <p> setCookie(”cookies”, “cookies”, exp, false, false, false); </p> <p> if (document.cookie.indexOf(’cookies’) != -1) { </p> <p> alert(”Got Cookies!”); </p> <p> } </p> <p> else { </p> <p> alert(”No Cookies!”); </p> <p> } </p> <p> // now delete the test cookie </p> <p> exp = new Date(); </p> <p> exp.setTime(exp.getTime() - 1800000); </p> <p> setCookie(”cookies”, “cookies”, exp, false, false, false); </p> <p> }</p> <p> function setCookie(name, value, expires, path, domain, secure) { </p> <p> var curCookie = name + “=” + escape(value) + </p> <p> ((expires) ? “; expires=” + expires.toGMTString() : “”) + </p> <p> ((path) ? “; path=” + path : “”) + </p> <p> ((domain) ? “; domain=” + domain : “”) + </p> <p> ((secure) ? “; secure” : “”); </p> <p> document.cookie = curCookie; </p> <p> }</p> <p>

Favicon代码

注意，favicon 现在可不仅仅是为了美化收藏夹，没有指定 favicon 的 iie 会汇报错误日志！

</p> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <p>

[Edit on 2005-1-5 17:27:15 By guoshuang]

framename.print()在IE中不能打印需要的框架？

必须先给予该框架焦点。

frameref.focus();

frameref.print();

parseInt()的进制问题

0 开始的字符串表示八进制，0x 开头的表示十六进制，可以设定第二个参数来明确指定进制。

Octal 八进制

Hexadecimal 十六进制

</p> <p><script type="text/javascript"></p> <p>alert(parseInt("011"));</p> <p>alert(parseInt("9"));</p> <p>alert(parseInt("0x17"));</p> <p>alert(parseInt("011",10));</p> <p>alert(parseInt("17",16));</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

字符串空格处理

guoshuang改进版

</p> <p><textarea id="test1">

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

没有打开就打开一个，打开了就指定页面并设置焦点

</p> <p>var myWin=null;</p> <p>function openWin(aURL) {</p> <p> if (!myWin || myWin.closed ) {</p> <p> myWin=window.open(aURL,’myWin’);</p> <p> } else{</p> <p> myWin.location=aURL;</p> <p> myWin.focus();</p> <p> }</p> <p>}</p> <p>