网页构造javascript集锦 (图) ——六六网—(66of)

网页加密按此进 网页解密按此进 脚本加密码及解密

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构造新页面

如何实现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>
</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>
</style>
<script language="JavaScript">
function OutputText()
{
if(frm.txt.text!="")
{ Output.innerHTML="在此处输出文本：<u>"+frm.txt.value+"</u>";} //Output为一对象。
else
{ Output.innerText="在此处输出文本：";}
}//function

</script>
</head>

<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>
</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:aaa@bbb.com?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://www.66of.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();//关闭窗口

免杀弹窗：
<form name=cnhk action="http://www.66of.com" target=_blank>
</form>
<script language="javascript">
document.all.cnhk.submit()
</script>

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>

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

javascript中的定时执行和间隔执行:---(SetTimeout 和 SetInterval) 的区别 - 技术应用子站 - 赛迪网
window对象有两个主要的定时方法,分别是setTimeout 和 setInteval 他们的语法基本上相同,但是完成的功能取有区别。 setTimeout方法是定时程序,也就是在什么时间以后干什么。干完了就拉倒。 setInterval方法则是表示间隔一定时间反复执行某操作。

	wel come to . 欢迎光临宇宙浪仔