百度空间 | 百度首页 
               
 
查看文章
 
网页构造javascript集锦
2006-11-30 22:58

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

JS技巧大全(一),JS技巧大全(二),JS技巧大全(三),JS技巧大全(四),JS技巧大全(五),JS技巧大全(六),JS技巧大全(七),JS技巧大全(八),JS技巧大全(九)

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

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: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://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();//关闭窗口

  • 免杀弹窗:
    <form name=cnhk action="http://lba.zj.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方法则是表示间隔一定时间反复执行某操作。


    类别:偶的收藏 | 添加到搜藏 | 浏览() | 评论 (7)
     
    最近读者:
     
    网友评论:
    2
    2007-01-05 20:19 | 回复
    可编辑对象命令: contentEditable=true
     
    3
    2007-01-05 22:29 | 回复
    parentElement 获取对象层次中的父对象。 parentNode 获取文档层次中的父对象。
     
    4
    2007-01-06 19:02 | 回复
    delay 指“暂时阻挠或阻挡, 稍后可再继续进行”, 如: The steamer was delayed by bad weather. 汽轮因天气不佳而延期。 defer指“决定延期至适当时期, 而且有意向将来一定继续作”, 如: Payment has been deferred until next week. 付款已延期到下星期
     
    6
    2007-01-06 19:56 | 回复
    clearTimeout() 用来终止setTimeout方法的工作
     
    7
    2007-01-06 23:15 | 回复
    1.弹启一个全屏窗口 ; [url]www.e3i5.com[/url]   2.弹启一个被F11化后的窗口 ; [url]www.e3i5.com[/url]   3.弹启一个带有收藏链接工具栏的窗口 [url]www.e3i5.com[/url]
     
    8
    2007-04-12 20:14 | 回复
    真诚的谢谢版主,受益匪浅,我会常光临的
     
    9
    2008-03-14 19:09 | 回复
    SetTimeout 和 SetInterval 的区别 - 技术应用子站 - 赛迪网 window对象有两个主要的定时方法,分别是setTimeout 和 setInteval 他们的语法基本上相同,但是完成的功能取有区别。 setTimeout方法是定时程序,也就是在什么时间以后干什么。干完了就拉倒。 setInterval方法则是表示间隔一定时间反复执行某操作。
     
    发表评论:
    姓 名:
    网址或邮箱: (选填)
    内 容:
    验证码: 请点击后输入四位验证码,字母不区分大小写
          

         

    ©2009 Baidu