js中的常用方法

超、凢脫俗 2022-09-17 12:27 241阅读 0赞

窗口操作

IE提供了window.screenLeft, window.screenTop对象来判断窗口的位置，用document.body.offsetWidth和document.body.offsetHeight来获取视口(显示HTML的区域)的大小。

Mozilla提供window.screenX和window.screenY判断窗口的位置，用window.innerWidth和window.innerHeight来判断视口的大小，window.outerWidth和window.outerHeight来判断浏览器自身的大小。

状态栏

可以通过window.status和window.defaultStatus属性来获取和改变状态栏内容，defaultStatus一直到用户离开当前页都有效，status则是暂时改变状态栏文本。比如

window.defaultStatus = "一直显示这个文本"

时间间隔和暂停

window.setTimeout, 以及window.clearTimeout

window.setInterval, 以及window.clearInterval

document.write

document.write("<script type='text/javascript' src='...js'></script>")

</script>

上述代码会出错，因为每当js遇到</script>时，假定其中的代码块完整，因此，会把上述代码解析成

document.write("("<script type='text/javascript' src='...js'>

</script>

")</script>

为防止出现上述错误，document.write部分应

[阅读全文][Link 1][评论][Link 2][转载][Link 3] [\#Javascript][Javascript]

07/2008

[完美兼容IE和Firefox的"全选/取消GridView中checkbox"][IE_Firefox_GridView_checkbox]

function selectAll(obj)

var theTable = obj.parentNode.parentNode.parentNode.parentNode;

var i;

var j = obj.parentNode.cellIndex;

for(i=1;i<theTable.rows.length;i++)

if(theTable.rows\[i\].cells.length<j) continue;

var objCheckBox = theTable.rows\[i\].cells\[j\].getElementsByTagName('input')\[0\];

if(objCheckBox.checked!=null)objCheckBox.checked = obj.checked;

在Head的checkbox加上οnclick="selectAll(this)"就可以，支持任意多列checkbox。

<asp:TemplateField HeaderText="<input id='Checkbox1' type='checkbox' οnclick='selectAll(this)' />序号">

</ItemTemplate>

</asp:TemplateField>

theTable.rows\[i\].cells\[j\].getElementsByTagName('input')\[0\];千万不能用firstChild，否则FF下会出错。

[阅读全文][IE_Firefox_GridView_checkbox][评论][Link 4][转载][Link 5] [\#Javascript][Javascript]

06/2008

[可以用鼠标拖动的DIV][DIV]

<title>测试可动div</title>

var offset\_x;

var offset\_y;

function Milan\_StartMove(oEvent)

var whichButton;

if(document.all&&oEvent.button==1) whichButton=true;

else \{ if(oEvent.button==0)whichButton=true;\}

if(whichButton)

var oDiv=document.getElementById("oDiv");

offset\_x=parseInt(oEvent.clientX-oDiv.offsetLeft);

offset\_y=parseInt(oEvent.clientY-oDiv.offsetTop);

document.documentElement.οnmοusemοve=function(mEvent)

[阅读全文][DIV][评论][Link 6][转载][Link 7] [\#Javascript][Javascript]

06/2008

[一个好工具-Aptana][-Aptana]

Aptana是一个非常强大,开源,专注于JavaScript的Ajax开发IDE。它的特性包括： \*JavaScript,JavaScript函数,HTML,CSS语言的Code Assist功能。 \*Outliner(大纲)：显示JavaScript,HTML和CSS的代码结构。

\*支持JavaScript，HTML，CSS代码提示，包括JavaScript 自定函数

\*代码语法错误提示。

\*支持Aptana UI自定义和扩展。

\*支持跨平台。

\*支持FTP/SFTP

\*调试JavaScript

\*支持流行AJAX框架的Code Assist功能：[AFLAX][]，[Dojo][]，[JQuery][]，[MochiKit][]，[Prototype][]，[Rico][]，[script.aculo.us][]，[Yahoo UI][]，[Ext][]。

\*Adobe AIR与iPhone开发工具

有一个朋友写的教程：

[http://blog.csdn.net/samehai/archive/2007/06/30/1672516.aspx][http_blog.csdn.net_samehai_archive_2007_06_30_1672516.aspx]

记下来，貌似有点复杂的工具啊。

[阅读全文][-Aptana][评论][Link 8][转载][Link 9] [\#Javascript][Javascript]

05/2008

[自己写的用Js实现的动态增加表格][Js]

function addEvent (o,c,h)\{

if(o.attachEvent)\{

o.attachEvent('on'+c,h);

\}else\{

o.addEventListener(c,h,false);

return true;\}

var selectRow;//页面级js变量，用来存被选中的行，好在弹出窗口中对该行赋值

function addnode()

var table=document.getElementById("Dy\_table");

var tr=table.insertRow();

var cell0=tr.insertCell();

var cell1=tr.insertCell();

var cell2=tr.insertCell();

var cell3=tr.insertCell();

var cell4=tr.insertCell();

var cell5=tr.insertCell();

var cell6=tr.insertCell();

var cell7=tr.insertCell();

var cell8=tr.insertCell();

var cell9=tr.insertCell();

var hidden1=document.createElement("<input name='Dy\_hd\_cpdm' onpropertychange='textChange(this)' type='hidden' >");

var hidden2=document.createElement("<input name='Dy\_hd\_sx' type='

[阅读全文][Js][评论(5)][5][转载][Link 10] [\#Javascript][Javascript]

03/2008

[onkeyup，onkeydown和onkeypress][onkeyup_onkeydown_onkeypress]

msdn上有三者的区别：

名称 说明

onkeypress

这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。

onkeyup

这个事件在用户放开任何先前按下的键盘键时发生。

onkeydown

这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。

======================

<html>

function checkForm()\{

if(event.keyCode ==13)\{

event.keyCode =9;

</script>

<body>

</form>

</body>

</html>

当按下回车时，焦点从文本框移到按钮上。如果把它换成“onkeypress”，焦点不会转移，也不会失去。但是如果换成“onkeyup”，则失去焦

[阅读全文][onkeyup_onkeydown_onkeypress][评论(1)][1][转载][Link 11] [\#Javascript][Javascript]

02/2008

[js去空格 技巧][js_]

分别去字符串前后，左边，右边空格

String.prototype.trim = function()\{ return this.replace(/^\\s+|\\s+$/g,"")\}

String.prototype.ltrim = function()\{ return this.replace(/^\\s+/g,"")\}

String.prototype.rtrim = function()\{ return this.replace(/\\s+$/g,"")\}

为String对象增加一个trim方法。

以后就可以这样使用：

var s = " abc ";

s = s.trim(); // s是个String，可以使用刚定义的trim方法。

alert(s);

[阅读全文][js_][评论(2)][2][转载][Link 12] [\#Javascript][Javascript]

02/2008

[js动态添加事件（带参数）][js]

js动态添加事件（带参数）

var tt=function(obj)

return function()

alert(obj.tagName); //可以为外部定义的一个执行函数；

function addfunction()

var bigobj=document.getElementById("mytable");

var rows =bigobj.rows;

for(var j=0; j<rows.length; j++)

for(var i=0;i<rows\[j\].cells.length;i++)

rows\[j\].cells\[i\].attachEvent("onmousemove",tt(rows\[j\].cells\[i\]));

//rows\[j\].cells\[i\].onmousemove = function()\{

// tt();

//\}

\}      &nb

[阅读全文][js][评论(2)][2 1][转载][Link 13] [\#Javascript][Javascript]

02/2008

[onchange和onpropertychange区别][onchange_onpropertychange]

当一个HTML元素的属性用js改变的时候，都能通过 onpropertychange来捕获。例如一个 <input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpropertychange却能够捕获。

也就是说：onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点(onblur)后才触发，用js改变其值不能触发!onpropertychange和onchange都不管文本框中的实际值有没有变，只要有改的相应操作就可能触发。有时当上面两时间都不能满足需求时，可以考虑只用onblur。

[阅读全文][onchange_onpropertychange][评论(2)][2 2][转载][Link 14] [\#Javascript][Javascript]

12/2007

[在子窗口中关闭父窗口][Link 15]

window.opener.opener=null;这一句非要,不然会弹出关闭提示.

window.opener.close();

[\[转\]把单元格显示不下的文本用省略号代替，并且当mouseover时用提示信息显示全部内容][mouseover]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

<tr>

<td style="width:150px;overflow:hidden;text-overflow:ellipsis;"><div style="white-

space:nowrap;" title="" οnmοuseοver="changeTitle(this)">这一行超出了范围这一行超出

了范围这一行超出了范围这一行超出了范围<div></td>

</tr>

<tr>

<td style="width:150px;overflow:hidden;text-overflow:ellipsis;"><div style="white-

space:nowrap;" title="" οnmοuseοver="changeTitle(this)">这一行没超范围<div></td>

</tr>

<tr>

<td style="width:150px;overflow:hidden;text-overflow:ellipsis;"><div style="white-

space:nowrap;" title="" οnmοuseοver="changeTitle(this)">这一行又超出了范围这一行又

超出了范围<div></td>

</tr>

</table>

</BODY>

</HTML>

[JavaScript中eval的使用][JavaScript_eval]

计算一个表达式的值并返回结果。

\[[result][] = \]Eval([expression][result]) 参数

result

可选项。是一个变量，用于接受返回的结果。如果未指定结果，应考虑使用 Execute 语句代替。

expression

必选项。可以是包含任何有效 VBScript 表达式的字符串。

说明

eval 函数允许 JScript 源代码的动态执行.

var aaa001="www.qtol.net";

var username="aaa";

var ID="001";

alert(eval(username+ID));

上面的代码,会弹出结果 www.qtol.net, 如果去掉eval函数,则会弹出结果 aaa001

[阅读全文][JavaScript_eval][评论][Link 16][转载][Link 17] [\#Javascript][Javascript]

11/2007

[\[转\]JavaScript经典技巧][JavaScript]

οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键

<table border οncοntextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 取消选取、防止复制

3. οnpaste="return false" 不准粘贴

4. οncοpy="return false;" oncut="return false;" 防止复制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

7. <input style="ime-mode:disabled"> 关闭输入法

8. 永远都会带着框架

if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页

// --></script>

9. 防止被人frame

<SCRIPT LANGUAGE=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

10. 网页将不能被另存为

11. <input type=button value=查看网页源代码

οnclick="window.location = "view-source:"+ "http://www.webjx.com"">

12.删除时确认

<a href="javascript:if(confir

[阅读全文][JavaScript][评论][Link 18][转载][Link 19] [\#Javascript][Javascript]

08/2007

[windows.open()参数列表][windows.open]

这个在做网页的时候用的着，都是一些控制窗口的属性，很全，很好。前言:经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息 、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易，只要往该页面的HTML里加入几段javascript代码即可实现。下面我就带您剖析它的奥秘。<br>

【1、最基本的弹出窗口代码】

<!--

var win=window.open ('page.html');

win.resizeTo(screen.availWidth,screen.availHeight);//可以使窗口“最大化”

-->

</SCRIPT>

因为着是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。这一段代码可以加入HTML的任意位置，<head&g

[Link 1]: http://hi.baidu.com/david_jdai/item/26ef3282b02e01ebe596e052
[Link 2]: http://hi.baidu.com/david_jdai/item/26ef3282b02e01ebe596e052#reply
[Link 3]: http://hi.baidu.com/david_jdai/item/26ef3282b02e01ebe596e052#repost
[Javascript]: http://hi.baidu.com/tag/Javascript/feeds
[IE_Firefox_GridView_checkbox]: http://hi.baidu.com/david_jdai/item/d5879217e4f90d0a8fbde452
[Link 4]: http://hi.baidu.com/david_jdai/item/d5879217e4f90d0a8fbde452#reply
[Link 5]: http://hi.baidu.com/david_jdai/item/d5879217e4f90d0a8fbde452#repost
[DIV]: http://hi.baidu.com/david_jdai/item/00032938c1b0ff8bf4e4ad50
[Link 6]: http://hi.baidu.com/david_jdai/item/00032938c1b0ff8bf4e4ad50#reply
[Link 7]: http://hi.baidu.com/david_jdai/item/00032938c1b0ff8bf4e4ad50#repost
[-Aptana]: http://hi.baidu.com/david_jdai/item/ac17101cad8e96f486ad4e52
[AFLAX]: http://www.aflax.org/
[Dojo]: http://dojotoolkit.org/
[JQuery]: http://jquery.com/docs/ajax/
[MochiKit]: http://www.mochikit.com/
[Prototype]: http://prototype.conio.net/
[Rico]: http://openrico.org/
[script.aculo.us]: http://script.aculo.us/
[Yahoo UI]: http://developer.yahoo.com/yui/
[Ext]: http://www.open-open.com/open182467.htm
[http_blog.csdn.net_samehai_archive_2007_06_30_1672516.aspx]: http://blog.csdn.net/samehai/archive/2007/06/30/1672516.aspx
[Link 8]: http://hi.baidu.com/david_jdai/item/ac17101cad8e96f486ad4e52#reply
[Link 9]: http://hi.baidu.com/david_jdai/item/ac17101cad8e96f486ad4e52#repost
[Js]: http://hi.baidu.com/david_jdai/item/3579d10d42d5483af2eafc28
[5]: http://hi.baidu.com/david_jdai/item/3579d10d42d5483af2eafc28#reply
[Link 10]: http://hi.baidu.com/david_jdai/item/3579d10d42d5483af2eafc28#repost
[onkeyup_onkeydown_onkeypress]: http://hi.baidu.com/david_jdai/item/345a288c100f14874514cf23
[1]: http://hi.baidu.com/david_jdai/item/345a288c100f14874514cf23#reply
[Link 11]: http://hi.baidu.com/david_jdai/item/345a288c100f14874514cf23#repost
[js_]: http://hi.baidu.com/david_jdai/item/d5969217e4f90d0a8fbde423
[2]: http://hi.baidu.com/david_jdai/item/d5969217e4f90d0a8fbde423#reply
[Link 12]: http://hi.baidu.com/david_jdai/item/d5969217e4f90d0a8fbde423#repost
[js]: http://hi.baidu.com/david_jdai/item/6e77cc6cfdb946156995e623
[2 1]: http://hi.baidu.com/david_jdai/item/6e77cc6cfdb946156995e623#reply
[Link 13]: http://hi.baidu.com/david_jdai/item/6e77cc6cfdb946156995e623#repost
[onchange_onpropertychange]: http://hi.baidu.com/david_jdai/item/e4c8912ecab9750e73863e26
[2 2]: http://hi.baidu.com/david_jdai/item/e4c8912ecab9750e73863e26#reply
[Link 14]: http://hi.baidu.com/david_jdai/item/e4c8912ecab9750e73863e26#repost
[Link 15]: http://hi.baidu.com/david_jdai/item/2325c085c87856ded0f8cd26
[mouseover]: http://hi.baidu.com/david_jdai/item/8d815737c6a8b34a3175a125
[JavaScript_eval]: http://hi.baidu.com/david_jdai/item/28d23ad0939c0216d80e4421
[result]: http://hi.baidu.com/fc/editor/
[Link 16]: http://hi.baidu.com/david_jdai/item/28d23ad0939c0216d80e4421#reply
[Link 17]: http://hi.baidu.com/david_jdai/item/28d23ad0939c0216d80e4421#repost
[JavaScript]: http://hi.baidu.com/david_jdai/item/921e7ef3a665cdc4a935a225
[Link 18]: http://hi.baidu.com/david_jdai/item/921e7ef3a665cdc4a935a225#reply
[Link 19]: http://hi.baidu.com/david_jdai/item/921e7ef3a665cdc4a935a225#repost
[windows.open]: http://hi.baidu.com/david_jdai/item/db31a90d35e629ce9157183e