javascript集锦,各个元素说明

javascript集锦

javascript数组操作汇总

 

javascript动态创建form表单 和 节点控制说明

动态读取

javascript:function ctys(_ctag){

ctys1=document.createElement(_ctag);

document.body.appendChild(ctys1);

return ctys1

};

newE1=ctys('<TEXTAREA id=www>');

newE1.cols='150';

newE1.rows='30';

newE2=ctys('BUTTON');

newE2.value="执行";

newE2.onclick=function(){

eval(document.getElementById("www").value)

};

alert(1)

 

动态页面控制示例

 

javascript:document.write(document.getElementsByTagName('body')(0).innerHTML.match(/<SPAN class=fcgray>([/s/S]*?)<//SPAN>/ig))

javascript:alert(document.getElementById('tab_c_iframe').style.display="none")

javascript:alert(document.getElementsByTagName('body')(0).innerHTML)

javascript:document.write(document.getElementsByTagName('body')(0).innerHTML)

javascript:var ccc=document.createElement("div");ccc.setAttribute("type","text");ccc.setAttribute

 

("value","11111111111111");ccc.style.marginLeft="8px";ccc.style.marginTop="10px";ccc.style.width="320px"; ccc.style.height="250px"; ccc.style.zIndex="111";

 

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

 

table

tbody

tr

的innerHTML 为只读

 

td

tr

tbody

的outerHTML 为只读

 

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

 

javascript技巧：setInterval("Test();",10); // 10秒钟发送一次更新请求防止网页表格被撑大的代码：

style="table-layout:fixed;word-wrap:break-word; word-break;break-all;"”，

vb字符串反向函数：StrReverse,,,

vb字符串自动分成数组：split

vb字符转换函数：StrConv

 

网页自动最大化代码：

<script language="javascript">

<!--

window.moveTo(0,0)

window.resizeTo(screen.availWidth,screen.availHeight)

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

top.location=self.location;

}

//-->

</script>

 

VB字符串函数:InStrRev(找一个字符串在另一个字符串里最后一次出现的位置,与之相反的是instr)

显示当前网页的更新时间:

 javascript:alert(document.lastModified)

读取整个网页内容:

javascript:alert(document.documentElement.outerHTML)

定义网页标签数组:  

set ttt=webbrowser1.document.getElementsByTagName("A")

for i=0 to ttt.length-1

a(i)=ttt(i).text

next

 

一, parentElement 获取对象层次中的父对象。

二, parentNode 获取文档层次中的父对象。 

三, opener是指打开此页的那个页

 

document.all(1).outerHTML.length

  document.all[]这个数组可以访问文档中所有元素。

   document.location 当前网页的网址

   document.tags("a")(0).href 获得当前网页中第一个链接的链接地址

   JS获取网页中HTML元素的几种方法:getElementById ，getElementsByName ，getElementsByTagName

 

JavaScript中的节点Node相关内容介绍 Node往往被翻译为节点

 

第一个是ie dom，第二个是标准dom

你换一个非ie浏览器试试就知道区别了（myie或maxthon或greenbrowser或tt之类都是ie浏览器……）

 

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

 

用 javascript 与document.write构造新页面

 

<script language="javascript">

document.write(unescape("网页己加密的源代码"));

</script>

 

如何实现window.open方式向父窗口返回值

 

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

 

怎样复制当前网址,怎样刷新当前页?

 

function copy()

{

document.getElementById("input1").value=parent.location.href;

document.getElementById("input1").select();

document.execCommand("copy")

}

</script>

<input id="input1" type="text" style="width:0;height:0;" value="">

<input type="button" onclick="copy()" value="复制">

<input type=button value=刷新 onclick="window.location.reload()">

 

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

 

如何实现window.open方式向父窗口返回值

 

if(window.opener)window.opener.document.getElementById("theTextAreaId").value = value;

 

opener是指打开此页的那个页。

 

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

 

图例分析outerHTML的用法

 

作者：龙犊整理出处：天极网责任编辑： 龙犊 [ 2006-04-03 08:49 ]

图例分析outerHTML的用法——与innerHTML不同，outerHTML包括整个标签，而不仅限于标签内部的内容。对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来

与innerHTML不同，outerHTML包括整个标签，而不仅限于标签内部的内容。对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来：

 

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

 

innerhtml是什么,innerhtml说明

 

inerHTML是html标签的属性，成对出现的标签大多数都有这个属性

是开始标签和结束标签之间的字符，不包括标签本身

比如

<p id="pp">aaaaaaaaaa<span id="ss">bbbbbbbb</span> </p>

这里的p标签和span标签嵌套在一起

那么pp.innerHTML的内容就是

aaaaaaaaaa<span id="ss">bbbbbbbb</span>

ss.innerHTML的内容就是

bbbbbbbb

类似的一个属性是outerHTML

那么pp.innerHTML的内容就是

<p id="pp">aaaaaaaaaa<span id="ss">bbbbbbbb</span> </p>

ss.innerHTML的内容就是

<span id="ss">bbbbbbbb</span>

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

innerText，outerText，innerHTML，outerHTML资料

outerHTML：标签对象外部的HTML文本(包括该标签)

innerHTML：标签对象内部的HTML文本(不包括该标签)

innerText: 标签对象内部的普通文本

outerText: 好像功能和innerText相似

 

1、动态改变文本

 

使用innerText，outerText，innerHTML，outerHTML来实现动态改变文本，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了，不可错过哦！

 

例12 动态改变文本和Html

<html>

<head>

<title>DHtml举例12</title>

<style><!--

body {font-family:"宋体";color="blue";font-size="9pt"}

-->

</style>

<script language="JavaScript">

function changeText()

{

DT.innerText="我很好!";

}//function

 

function changeHtml()

{

DH.innerHTML="<i><u>我姓肖!</u></i>";

}//function

 

function back()

{

DT.innerText="您好吗?";

DH.innerHTML="您姓什么?";

}

</script>

</head>

 

<body>

<p><font color="gray">请点击下边的文字……</font>

<ul>

<li id="DT" onclick="changeText()">您好吗? </li>

<li id="DH" onclick="changeHtml()">您姓什么? </li>

<li onclick="back()">恢复原样! </li>

</ul>

</body>

</html>

 

innerText属性用来定义对象所要输出的文本，在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”（语句DT.innerText="我很好!"）。而对对象DH的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象DH内部的HTML语句，于是它把文本变成了“我姓肖!”，而且文本输出改成了斜体（<i></i>）并下加一条直线（<u></u>），即语句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有类似的作用，读者不妨自己试试看。

 

 

下面我们来设计一个有趣的动态页面。

 

例13 文本的动态输入与输出

<html>

<head>

<title>DHtml举例13</title>

<style><!--

body {font-family:"宋体";color="blue";font-size:"9pt"}

.blue {color:blue;font-size:9pt}

-->

</style>

<script language="JavaScript">

function OutputText()

{

if(frm.txt.text!="")

{ Output.innerHTML="在此处输出文本：<u>"+frm.txt.value+"</u>";} //Output为一对象。

else

{ Output.innerText="在此处输出文本：";}

}//function

 

</script>

</head>

 

<body>

<p><br></p>

 

<form name="frm">

<p><font color="gray">请在文本框中输入文字:</font>

<input type="text" name="txt" size="50"><br>

<input type="button" value="输出文本" name="B1" class="blue" onclick="OutputText()"></p>

</form>

 

<p id="Output">在此处输出文本：</p>

</body>

</html>

 

此例的动态效果如下，先在文本框中输入文本，然后按“输出文本”的按钮，接着网页便会自动输出您所输入的文本。

 

此外，我们还可使用insertAdjacentHTML和insertAdjacentText方法（方法即是某特定对象能直接调用的函数）在先前文本或Html内容的前边或后边插入新的文本或Html内容，使用这些方法需要参数，这些参数有：BeforeBegin、 AfterBegin、 BeforeEnd和AfterEnd，它们是用来标明文本或Html插入的地方。具体用法如下例：

 

例14 使用insertAdjacentHTML插入文本

<html>

<head>

<title>DHtml举例14</title>

<style><!--

body {font-family:"宋体";color="blue";font-size:"9pt"}

-->

</style>

<script language="JavaScript">

function Insert()

{

document.all.New.insertAdjacentHTML("AfterBegin","<font color=red>-新插入的内容-<font>");

//第一个参数是用来指明位置，第二个参数是要插入的Html内容。

}//function

</script>

</head>

<body>

<p><br>

</p>

<p id="New" onclick="Insert()">点击此行蓝色文字将插入文本</p>

</body>

</html>

 

 

您可以试一下另外三个参数BeforeBegin、BeforeEnd和AfterEnd。insertAdjacentText方法地用法也是类似的

 

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

 

javascript小技巧,经典对象        

事件源对象

event.srcElement.tagName

event.srcElement.type        

捕获释放

event.srcElement.setCapture(); 

event.srcElement.releaseCapture();         

事件按键

event.keyCode

event.shiftKey

event.altKey

event.ctrlKey         

事件返回值

event.returnValue        

鼠标位置

event.x

event.y        

窗体活动元素

document.activeElement        

绑定事件

document.captureEvents(Event.KEYDOWN);        

访问窗体元素

document.all("txt").focus();

document.all("txt").select();        

窗体命令

document.execCommand        

窗体COOKIE

document.cookie        

菜单事件

document.oncontextmenu        

创建元素

document.createElement("SPAN");         

根据鼠标获得元素：

document.elementFromPoint(event.x,event.y).tagName=="TD

document.elementFromPoint(event.x,event.y).appendChild(ms)         

窗体图片

document.images[索引]        

窗体事件绑定

document.onmousedown=scrollwindow;        

元素

document.窗体.elements[索引]        

对象绑定事件

document.all.xxx.detachEvent('onclick',a);        

插件数目

navigator.plugins        

取变量类型

typeof($js_libpath) == "undefined"        

下拉框

下拉框.options[索引]

下拉框.options.length        

查找对象

document.getElementsByName("r1");

document.getElementById(id);        

定时

timer=setInterval('scrollwindow()',delay);

clearInterval(timer);        

UNCODE编码

escape() ,unescape        

父对象

obj.parentElement(dhtml)

obj.parentNode(dom)        

交换表的行

TableID.moveRow(2,1)        

替换CSS

document.all.csss.href = "a.css";        

并排显示

display:inline        

隐藏焦点

hidefocus=true        

根据宽度换行

style="word-break:break-all"        

自动刷新

<meta HTTP-EQUIV="refresh" CONTENT="8;URL=http://c98.yeah.net">        

简单邮件

<a   href="mailto:[email protected]?subject=ccc&body=xxxyyy">         

快速转到位置

obj.scrollIntoView(true)        

锚

<a name="first">

<a href="#first">anchors</a>        

网页传递参数

location.search();        

可编辑

obj.contenteditable=true        

执行菜单命令

obj.execCommand        

双字节字符

/[^/x00-/xff]/

汉字

/[/u4e00-/u9fa5]/        

让英文字符串超出表格宽度自动换行

word-wrap: break-word; word-break: break-all;         

透明背景

<IFRAME src="/1.htm" width=300 height=180 allowtransparency></iframe>        

获得style内容

obj.style.cssText        

HTML标签

document.documentElement.innerHTML        

第一个style标签

document.styleSheets[0]        

style标签里的第一个样式

document.styleSheets[0].rules[0]        

防止点击空链接时，页面往往重置到页首端。

<a href="javascript:function()">word</a>        

上一网页源

asp:

request.servervariables("HTTP_REFERER")

javascript:

document.referrer        

释放内存

CollectGarbage();        

禁止右键

document.oncontextmenu = function() { return false;}        

禁止保存

<noscript><iframe src="/*.htm"></iframe></noscript>        

禁止选取<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()>         

禁止粘贴

<input type=text onpaste="return false">        

地址栏图标

<link rel="Shortcut Icon" href="favicon.ico">

favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下        

收藏栏图标

<link rel="Bookmark" href="favicon.ico">        

查看源码

<input type=button value=查看网页源代码 onclick="window.location = 'view-source:'+ 'http://www.csdn.net/'">        

关闭输入法

<input style="ime-mode:disabled">        

自动全选

<input type=text name=text1 value="123" onfocus="this.select()">        

ENTER键可以让光标移到下一个输入框

<input onkeydown="if(event.keyCode==13)event.keyCode=9">        

文本框的默认值

<input type=text value="123" onfocus="alert(this.defaultValue)">        

title换行

obj.title = "123&#13sdfs&#32"         

获得时间所代表的微秒

var n1 = new Date("2004-10-10".replace(/-/g, "//")).getTime()        

窗口是否关闭

win.closed        

checkbox扁平

<input type=checkbox style="position: absolute; clip:rect(5px 15px 15px 5px)"><br>        

获取选中内容

document.selection.createRange().duplicate().text        

自动完成功能

<input   type=text   autocomplete=on>打开该功能 

<input   type=text   autocomplete=off>关闭该功能           

窗口最大化

<body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)">        

无关闭按钮IE

window.open("aa.htm", "meizz", "fullscreen=7");        

统一编码/解码

alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe")))

encodeURIComponent对":"、"/"、";" 和 "?"也编码        

表格行指示

<tr onmouseover="this.bgColor='#f0f0f0'" onmouseout="this.bgColor='#ffffff'"> 

 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1421914

 

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

 

window.open("aa.htm", "meizz", "fullscreen=7"); 无关闭按钮，无标题栏，全屏弹窗

 

弹出窗口句柄操作：

popup=window.open("0.html","etangWHSAD");//获取广告窗口句柄

popup.close();//关闭窗口

 

免杀弹窗：

<form name=cnhk action="http://lba.zj.com" target=_blank>

</form>

<script language="javascript">

document.all.cnhk.submit()

</script>

 

----------------------------------

 

window.open("aa.htm", "meizz", "fullscreen=7"); 无关闭按钮，无标题栏，全屏弹窗

 

弹出窗口句柄操作：

popup=window.open("0.html","etangWHSAD");//获取广告窗口句柄

popup.close();//关闭窗口

 

JavaScript中的Node相关内容介绍

Node往往被翻译为节点，在一个对象（可以简单的理解为是HTML页面中），一个属性name="aaa"可以是一个节点，一个< div id="aaa">……< /div>也可以是一个节点，在< body>……< /body>中的，也是一个大大的节点。下面是一些有关Node的属性和方法，并没有包含部分不兼容IE和FF内容的讲解。

Node的属性介绍：

nodeType：显示节点的类型

nodeName：显示节点的名称

nodeValue：显示节点的值

attributes：获取一个属性节点

firstChild：表示某一节点的第一个节点

lastChild：表示某一节点的最后一个子节点

childNodes：表示所在节点的所有子节点

parentNode：表示所在节点的父节点

nextSibling：紧挨着当前节点的上一个节点

previousSibling：紧挨着当前节点的下一个节点

ownerDocument：（不知）

Node有各种各样的节点，我们先花一些时间认识他们，同时一并了解nodeType，nodeName和nodeValue属性：

名称：元素节点

nodeType：ELEMENT_NODE

nodeType值：1

nodeName：元素标记名

nodeValue：null

<body>

<div id = "t" ><span></span></div>

</body>

<script>

var d = document.getElementById("t");

document.write(d.nodeType);

document.write(d.nodeName);

document.write(d.nodeValue);

//显示 1 DIV null

</script>

 

名称：属性节点

nodeType：ATTRIBUTE_NODE

nodeType值：2

nodeName：属性名

nodeValue：属性值

<body>

<div id = "t" name="aaa"><span></span></div>

</body>

<script>

var d = document.getElementById("t").getAttributeNode("name");

document.write(d.nodeType);

document.write(d.nodeName);

document.write(d.nodeValue);

//显示 2 name aaa

</script>

 

名称：文本节点

nodeType：TEXT_NODE

nodeType值：3

nodeName：#text

nodeValue：文本内容

<body>

<div id = "t">bbb</div>

</body>

<script>

var d = document.getElementById("t").firstChild;

document.write(d.nodeType);

document.write(d.nodeName);

document.write(d.nodeValue);

//显示 3 #text bbb

</script>

 

名称：CDATA文本节点（XML中传递文本的格式）

nodeType：CDATA_SECTION_NODE

nodeType值：4

nodeName：#cdata-section

nodeValue：CDATA文本内容

（作者省略8个属性，需技术补充）

attributes属性，直接获取一个属性节点，注意这里要使用[]，保持IE和FF的兼容性。

<body name="ddd">

<div id = "t" name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t").attributes["name"];

document.write(d.name);

document.write(d.value);

//显示 name aaa

</script>

 

firstChild和lastChild属性，表示某一节点的第一个和最后一个子节点：

<body>

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t");

document.write(d.firstChild.innerHTML);

document.write(d.lastChild.innerHTML);

//显示 aaa ccc

</script>

 

childNodes和parentNode属性，表示所在节点的所有子节点和所在节点的父节点，这里的childNodes注意是一个数组：

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t");

document.write(d.childNodes[1].innerHTML);

document.write(d.parentNode.getAttribute("name"));

//显示 bbb ddd

</script>

 

nextSibling和previousSibling属性，分别表示在parentNode的childNodes[]数组中，紧挨着当前节点的上一个和下一个节点：

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t").childNodes[1];

document.write(d.nextSibling.innerHTML);

document.write(d.previousSibling.innerHTML);

//显示 ccc aaa

</script>

 

ownerDocument属性（不知如何使用）

Node的方法介绍：

hasChildNodes()：判定一个节点是否有子节点

removeChild()：去除一个节点

appendChild()：添加一个节点

replaceChild()：替换一个节点

insertBefore()：指定节点位置插入一个节点

cloneNode()：复制一个节点

normalize()：（不知）

hasChildNodes()方法：判定一个节点是否有子节点，有返回true，没有返回false

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

<div id = "m"></div>

</body>

<script>

alert(document.getElementById("t").hasChildNodes());

alert(document.getElementById("m").hasChildNodes());

// 第一个true，第二个false

</script>

 

removeChild()方法：去除一个节点

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t").firstChild;

document.getElementById("t").removeChild(d);

// <span>aaa</span>被去除

</script>

 

appendChild()方法：添加一个节点，如果文档树中已经存在该节点，则将它删除，然后在新位置插入。

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t").firstChild;

document.getElementById("t").appendChild(d);

// <span>aaa</span>成了最后一个节点

</script>

 

replaceChild()方法：从文档树中删除（并返回）指定的子节点，用另一个节点来替换它。

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var newd = document.createElement("span");

newd.innerHTML = "eee";

var oldd = document.getElementById("t").lastChild;

document.getElementById("t").replaceChild(newd,oldd);

// 最后一项成了 eee

</script>

 

insertBefore()方法：在指定节点的前面插入一个节点，如果已经存在，则删除原来的，然后在新位置插入

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var newd = document.createElement("span");

newd.innerHTML = "eee";

var where = document.getElementById("t").lastChild;

document.getElementById("t").insertBefore(newd,where);

// 在最后一项的前面多了一项 eee

</script>

 

cloneNode()方法：复制一个节点，该方法有一个参数，true表示同时复制所有的子节点，false表示近复制当前节点

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div>

</body>

<script>

var what = document.getElementById("t").cloneNode(false).innerHTML;

document.getElementById("m").innerHTML = what;

// 增加了一个aaabbbccc

</script>

 

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

 

定时执行和间隔执行:-(SetTimeout 和 SetInterval) 的

window对象有两个定时方法,分别是setTimeout 和 setInteval 他们的语法基本上相同,。 setTimeout方法是定时程序,干完拉倒。 setInterval方法则是间隔一定时间反复执行某操作。