魔鬼字典 JavaScript 笔记代码比较多乱第2/3页

更新时间：2010年03月09日 21:03:36 作者：

魔鬼字典 JavaScript 笔记代码比较多乱，对于有经验的看容易点。

/例子/ /原型方法如果如果自己重新定义了一遍，再改变基类的原型方法后就不随着它的改变而改变了/
『
function Person(name,sex) { //Person类的构造函数
this.name = name;
this.sex = sex;
}
Person.prototype.age = 12; //为Person类的prototype属性对应的prototype对象的属性赋值,
//相当于为Person类的父类添加属性
Person.prototype.print = function() { //为Person类的父类添加方法
alert(this.name+"_"+this.sex+"_"+this.age);
};
var p1 = new Person("name1","male"); //p1的age属性继承子Person类的父类(即prototype对象)
var p2 = new Person("name2","male");
p1.print(); //name1_male_12
p2.print(); //name2_male_12
p1.age = 34; //改变p1实例的age属性
p1.print(); //name1_male_34
p2.print(); //name2_male_12
Person.prototype.age = 22; //改变Person类的超类的age属性
p1.print(); //name1_male_34(p1的age属性并没有随着prototype属性的改变而改变)
p2.print(); //name2_male_22(p2的age属性发生了改变)
p1.print = function() { //改变p1对象的print方法
alert("i am p1");
}
p1.print(); //i am p1(p1的方法发生了改变)
p2.print(); //name2_male_22(p2的方法并没有改变)
Person.prototype.print = function() { //改变Person超类的print方法
alert("new print method!");
}
p1.print(); //i am p1(p1的print方法仍旧是自己的方法)
p2.print(); //new print method!(p2的print方法随着超类方法的改变而改变)
』
JS高级编程第四章 BOM ↑↓←→
BOM(浏览器对象模型)
浏览器对象分为
{
1、Window窗口对象（包含整个浏览器）
2、Location地址对象（主要包含地址栏）
3、Document文档对象（用Document.write()输出时显示的地方，占浏览器的大部分空间）
4、Form表单对象（包含在文档对象中，由表单组成）
}
//window对象（Window对象表示整个浏览器窗口，但不必表示其中包含的内容，主要用于调整浏览器的大小）
{
window对象表示整个浏览器窗口
moveBy(dx,dy)——把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。dx值为负数，向左移动窗口，dy值为负数，向上移动窗口。
moveTo(x,y)——移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处。可以使用负数，不过这样会把部分窗口移出屏幕的可视区域。
function click1() {
window.moveTo(Math.random()*1000,Math.random()*1000);
}
resizeBy(dw,dh)——相对于浏览器窗口的当前大小，把它口的宽度调整dw个像素，高度调整dy个像素。dw为负数，把缩小窗口的宽度，dy为负数，缩小窗口的高度。
resizeTo(w,h)——把窗口的宽度调整为w，高度调整为h。不能使用负数。
窗口对象的方法主要用来提供信息或输入数据以及创建一个新的窗口。　　创建一个新窗口open()使用window.open（参数表）方法可以创建一个新的窗口。其中参数表提供有窗口的主要特性和文档及窗口的命名。
open（”打开窗口的url”，”窗口名”，”窗口特征”）
窗口的特征如下，可以任意组合：
top=# 窗口顶部离开屏幕顶部的像素数
left=# 窗口左端离开屏幕左端的像素数
width=# 窗口的宽度
height=# 窗口的高度
menubar=... 窗口有没有菜单，取值yes或no
toolbar=... 窗口有没有工具条，取值yes或no
location=... 窗口有没有地址栏，取值yes或no
directories=... 窗口有没有连接区，取值yes或no
scrollbars=... 窗口有没有滚动条，取值yes或no
status=... 窗口有没有状态栏，取值yes或no
resizable=... 窗口给不给调整大小，取值yes或no
}
//对话框
{
alert (“m提示信息") //显示包含消息的对话框。
alert("第一种对话框"); //弹出一个警告框
confirm（“提示信息”） //显示一个确认对话框，包含一个确定取消按钮 //confirm : 确定; 使巩固; 批准
if(confirm("Are you sure?")) （）中写的是提示信息，此方法会返回一个Boolean值，点击确定返回TRUE，点击取消返回FALSE
{
alert("你点的yes"); //通常用法，当你点击确定时显示的信息
}
else
{
alert("你点的no"); //当你点击取消时显示的信息
}
Prompt（”提示信息“） //弹出提示信息框
open ("url","name") //打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档，再加一个参数就是描述（打开的浏览器的宽、高....）
close ( ) //关闭当前窗口
/例子/
<script type="text/javascript" language="javascript">
var win;
function openwindow() {
win = open("http://www.sina.com","新浪","height=150,width=300,top=10,left=10,resizable=yes");
}
function closewindow() {
win.close();
}
</script>
</head>
<body>
<input type="text" id="txtname"/>
<script language="javascript" type="text/javascript">
文本框中的默认值
↓
document.getElementById("txtname").value = prompt("请输入你的名字","qw");
↑
脚本提示的文本
</script>
<input type="button" value="打开一个新的窗口" onclick="openwindow()"/>
<input type="button" value="关闭刚才打开的窗口" onclick="closewindow()"/>
</body>
}
defaultStatus status :设置浏览器最下端的状态栏，defaultStatus是持久性的，status是临时性的，注意：IE7默认情况下是将“允许状态栏通过脚本更新”设置为禁用的，可以在INternet选项-》安全性里修改此设置
『
<script language="javascript" type="text/javascript">
function mystatus()
{
//window.defaultStatus = "你有没有注意我的存在？？";
window.status = "你有没有注意我的存在？";
}
</script>
</head>
<body onload="mystatus()">
<a href="http://www.baidu.com" onmouseover="window.status='你有没有注意我的变化？？';return true" onmouseout="window.status='你有没有注意我的存在？？';return true">www.baidu.com</a>
↑ ↑
注意用的是单引分号和return true不能省略，return true可以防止地址出现在状态栏中
</body>
』
history
『
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function go_destination()
{
history.go(-1); //history.go(-1)和history.back()效果是一样的
}
function go_back()
{
history.back();
}
</script>
</head>
<body>
<input type="button" onclick="go_destination()" value="上一页" />
<input type="button" onclick="go_back()" value="上一页" />
</body>
Back ( ) 方法相当于后退按钮
forward ( ) 方法相当于前进按钮
go (1)代表前进1页，等价于forward( )方法；
go(-1) 代表后退1页，等价于back( )方法；
』
Document对象
『
alinkColor 设置或检索文档中所有活动链接的颜色
bgColor 设置或检索 Document 对象的背景色
body 指定文档正文的开始和结束
linkColor 设置或检索文档链接的颜色
location 包含关于当前 URL 的信息
title 包含文档的标题
url 设置或检索当前文档的 URL
vlinkColor 设置或检索用户访问过的链接的颜色
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function showTitle()
{
document.title="我不做大哥好多年"; //设置标题
}
function change(color)
{
document.bgColor=color;
}
</script>
</head>
<body>
<input type="button" onclick="showTitle()" value="点击我显示标题" />
<h2>移过来我变色show给你</h2>
<span onmouseover="change('#CCCCCC')">变红色</span>
<span onmouseover="change('blue')">变红色</span>
<span onmouseover="change('yellow')">变红色</span>
<img src="../js02/img/3.jpg"alt="" height="200" width="200" onmouseover="alert(document.images[0].src)" />
<img src="../js02/img/4.jpg"alt="" height="200" width="200" onmouseover="alert(document.images[1].src)" />
</body>
cookie属性
这里主要介绍一下cookie属性。cookie是当你浏览某网站时，网站存储在你机器上的一个小文本文件，它记录了你的用户ID，密码、浏览过的网页、停留的时间等信息，当你再次来到该网站时，网站通过读取cookie，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。
cookie属性也包含了自己的一些属性值：
expires：用来设置cookie的过期时间。
domain：用来设置cookie的起作用的网站域名范围。
path：用来设置cookie起作用的网站路径。
secure：如果设置了这个属性，cookie的值只能在安全设置很高的环境下才能被读取。
cookie的目的就是为用户带来方便，为网站带来增值。cookie属性也包含了自己的一些属性值：
我们可以通过document.cookie操作来设置某个cookie值。
』
Location对象
『
属性
host 设置或检索位置或 URL 的主机名和端口号
hostname 设置或检索位置或 URL 的主机名部分
href 设置或检索完整的 URL 字符串
方法
assign("url") 加载 URL 指定的新的 HTML 文档。
reload() 重新加载当前页
replace("url") 通过加载 URL 指定的文档来替换当前文档
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function jump()
{
location.href=document.myform.menu.value;
}
function jump1()
{
location.replace(document.myform.menu.value); //注意replace中放的是字符串给用"" //replace() 不记录历史即点完后不能后退
}
function jump2() {
location.assign(document.myform.menu.value); //记录历史，可以后退
}
function showHost()
{
alert(location.host);
}
function showHostName()
{
alert(location.hostname);
}
function reLoad() {
location.reload();
}
</script>
</head>
<body>
<form name="myform" action="">
<select name="menu" onchange="jump2()"> //<select> ：下拉菜单 <option>每一个选项
<option >-请选择-</option>
<option value="test1.htm">犬夜叉</option>
<option value="test2.htm">杀生丸</option>
</select>
<input type="button" value="显示主机名和端口号" onclick="showHost()" />
<input type="button" value="显示主机名" onclick="showHostName()" />

<input type="button" value="刷新" onclick="reLoad(true)" />
</form>
</body>
』
Navigator //Navigator 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机浏览器的信息（基本不用）
『
document.write(navigator.appCodeName, "<br />"); //与浏览器相关的内部代码名
document.write(navigator.appName, "<br />"); //浏览器的正式名称
document.write(navigator.appVersion, "<br />"); //浏览器的版本号
document.write(navigator.browserLanguage,"<br />");//FireFox不支持
document.write(navigator.cpuClass, "<br />"); //FireFox不支持,返回用户计算机的cpu的型号，通常intel芯片返回"x86"
document.write(navigator.language,"<br />");//IE不支持
document.write(navigator.platform, "<br />"); // 浏览器正在运行的操作系统平台
document.write(clientInformation.appName);//微软特有的对象、
/显示/
Mozilla
Microsoft Internet Explorer
4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
zh-cn
x86
undefined
Win32
Microsoft Internet Explorer
』
//screen对象
『
availHeight——窗口可以使用的屏幕的高度（以像素计），其中包括操作系统元素（如Windows工具栏）需要的空间。
availWidth——窗口可以使用的屏幕的宽度（以像素计）。
colorDepth——用户表示颜色的位数。大多数系统采用32位。
height——屏幕的高度，以像素计。
width——屏幕的宽度，以像素计
window.moveTo(0,0); //将浏览器调整到最左上角
window.resizeTo(screen.availWidth,screen.availHeight,"<br />"); //将屏幕设置到最大化
document.write(screen.availWidth + " " + screen.availHeight, "<br />"); //输出显示屏幕的可用最大宽和高 “开始状态栏占一部分”
document.write(screen.height + " " + screen.width, "<br />"); //屏幕的最大高和宽
document.write(" " + screen.colorDepth, "<br />");
』
//打开一个新的窗体
『
<SCRIPT language="JavaScript" >
function openwindow( ) {
var newWindow = window.open("about:blank", "newWindow", "toolbars=yes, scrollbars=yes, location=yes,statusbars=yes,menubars=yes,resizable=yes,width=650,height=150"); //（）里面的东西给写对了否则读不出来实在不行用“"","",""”也行
newWindow.document.open(); //流体打开
newWindow.document.write("<html><head><title>极品名茶--铁观音</title></head>");
newWindow.document.write("<body><h1>先生您好，来点铁观音尝尝吧？<a href=''>来点</a>    <a href=''>不了</a></h1></body></html>");
newWindow.document.close(); //流体关闭
}
</SCRIPT>
</head>
<body onload="openwindow()">
』
//跨窗体传值↑↓←→
『
主窗体
『
<title>无标题页</title>
<script type="text/javascript" language="javascript">
function aa()
{
open("a2.htm","aaa","");
}
</script>
</head>
<body>
<form name="f1" action="" method="post">
↑
是name不是id，用id会有错误
<input type="text" name="t1"/>
<button onclick="aa()">sdf</button>
</form>
</body>
』
副窗体（a2.htm）
『
<title>无标题页</title>
<script type="text/javascript" language="javascript">
function bb()
{
document.f1.t2.value=window.opener.document.f1.t1.value;
↑
f1后面的东西全部点不出来，都给硬打
}
</script>
</head>
<body onload="bb()">
<form name="f1" action="" method="post">
<input type="text" name="t2"/>
</form>
</body>
』
』
JS 第五章 DOM(文本对象模型) ↑↓←→
//节点类型
『
1、元素节点
2、文本节点
<p>段落</p> //<p>为元素节点，“段落”为文本节点
』
//节点的三个属性
『
nodeName节点元素名称
nodeType节点元素类型（1-12）
nodeValue节点元素的值
1 element_node 2 attribute_node 3 text_node
4 cdata_section_node 5 entity_reference_node 6 entity_node
7 processing_instruction_node 8 comment_node 9 document_code
10 document_type_node 11 document_fragment_node 12 notation_node
『例子』
『
<a id="sirius" href="">Journey to the stars</a>
-------------------------------------------------
外置JS脚本：
addLoadListener(init);
function init()
{
var elementRef = document.getElementById("sirius");
elementRef.firstChild.nodeValue = "sdfsd"; //将“Journey to the stars”动态的改变为“sdfsd” ；注意要加上“firstChild”
alert("The element is:" + elementRef.nodeName); //显示：A
alert("The element is:" + elementRef.nodeType); //显示： 1
alert("The element is:" + elementRef.firstChild.nodeValue); //显示：sdfsd
return true;
}
function addLoadListener(fn)//注册事件函数
{
if(typeof window.addEventListener!="undefined")
{
window.addEventListener("load",fn,false);
}
else if(typeof document.addEventListener!="undefined")
{
document.addEventListener("load",fn,false);
}
else if(typeof window.attchEvent!="undefined")
{
document.attchEvent("onload",fn);
}
else
{
var oldfn=window.onload;
if(typeof window.onload!="function")
{
window.onload=fn;
}
else
{
window.onload=function()
{
oldfn();
fn();
};
}
}
}
』
』
访问DOM中的元素
『
getElementById可以通过唯一的ID属性值。
getElementById很适合用于查找一个单独的元素
<a id="sirius" href="sirius.html">Journey to the stars</a>
var elementRef = document.getElementById("sirius");
『例子』

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript" src="javascript/GetElementByName.js"> 
</script> 
<link rel="Stylesheet" type="text/css" href="css/GetElementByName.css" /> 
</head> 
<body> 
<h1>Accessing elements</h1> 
<ul> 
<li><a href="test1.htm" name="myLink">Sirius</a></li> 
<li><a href="test2.htm" name="myLink">Canopus</a></li> 
<li><a href="test1.htm" name="myLink">Arcturus</a></li> 
<li><a href="test2.htm" name="myLink">Vega</a></li> 
</ul> 
</body> 
</html> 
-------------------------------------------------------- 
外置JS脚本的内容： 
function init() 
{ 
var anchors=document.getElementsByName("myLink"); 
for(var i=0;i<anchors.length;i++) 
{ 
anchors[i].className="starLink"; 
} 
//return true; 
} 

『例子』
『
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function myCopy() {
var textBox1=document.getElementById("txt1");
var textBox2=document.getElementById("txt2");
textBox2.value=textBox1.value;
↑
两个文本框中的文本相同
}
</script>
</head>
<body>
<form id="myForm" action="" method="post">
<input id="txt1" />
<input type="button" value=">>>" onclick="myCopy()" /> //如果onclick()函数要是想调用两个以上的事件就在两个事件中间用“；”隔开
↑
button上显示的字
<input id="txt2" />
</form>
</body>
</html>
』
JavaScript提供了通过标签名字来返回一组元素的方法：getElementsByTagName。
<a href="sirius.html">Sirius</a>
<a href="canopus .htm">canopus </a>
<a href="arcturus .html">arcturus </a>
<a href=“vega .html”>vega </a>
var anchorArray = document.getElementsByTagName("a");
『例子』
『
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function myCopy()
{
var myArray = document.getElementsByTagName("input");//返回元素集合，（）中放的是标记的名字，记住用“”
var h2 = document.getElementsByTagName("h2");
for(var i=0;i<myArray.length;i++)
{
if (myArray[i].type == "text") {
myArray[i].value=h2[0].innerHTML; //"innerHTML"表示的是<h2></h2>中间包含的文本，点不出来只能硬打
}
}
}
</script>
</head>
<body>
<form action="" method="post" id="myForm">
<h2 id="h2">getElementsByTagName</h2><br />
<input name="txt1" />
<input name="txt1" />
<input name="txt1" />
<input id="btn" type="button" value="Click Me" onclick="myCopy()" />
</form>
</body>
</html>
』
』
//节点的访问顺序
『
node.childNodes 指定节点的所有子节点，包括文本节点和所有其他元素 //用法：节点.childNodes 注意：打完不用加（）
node.firstChild 指定节点的第一个子节点
node.lastChild 指定节点的最后一个子节点；
node.parentNode 指定节点的上级节点；
node.nextSibling 指定节点的下一个兄弟节点；
node.previousSibling 指定节点的上一个兄弟节点
『例子』
『
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script type="text/javascript" language="javascript">
function myDominspector()
{
var DOMString="";
var DOMText="";
var demolist=document.getElementById("eventsList");
if(demolist==null) //判断：获得的集合是不是为空，或者是否成功获取
{
return;
}
if(demolist.hasChildNodes()) //hasChildNodes() 该方法能判断是否有子节点
{
var ch=demolist.childNodes; //如果有子节点用“ch”获得该集合 //绝大部分都给硬打，特别注意大小写
for(var i=0;i<ch.length;i++)
{
DOMString+=ch[i].nodeName+"\n"; //获得子节点的标记名字
DOMText+=ch[i].firstChild.nodeValue; //获得子节点的值，注意给加"firstChild"
}
document.write(DOMString);
document.write(DOMText);
document.write(ch[2].childNodes[0].firstChild.nodeValue); //因为“类表项三”用的是嵌套标记所以用上面的方法获取的是“null”
}
}
</script>
</head>
<body>
<h1>一级标题</h1>
<p>段落</p>
<h2>二级标题</h2>
<ul id="eventsList">
<li>列表项一</li>
<li>列表项二</li>
<li><a href="http://www.sina.com">列表项三</a></li>
<li>列表项四</li>
</ul>
<p>段落</p>
<p>段落</p>
<input type="button" onclick="myDominspector()" value="Click Me"/>
</body>
</html>
『显示』
点击按钮后
LI LI LI LI 列表项一列表项二 null列表项四列表项三
』
』
//空白节点
『
对于一些文本描述的DOM结构（例如HTML文件），一些浏览器会在元素节点之间插入一些空白节点。
对于IE，忽略所有空白节点
『例子』
『
/////////外部js脚本：
addLoadListener(init); //在加载时就运行此脚本
function init() {
var star2 = document.getElementById("star1").nextSibling; //得到"star1"的下一个兄弟节点--star2（想的是这样，在IE中能实现，但是在火狐中，会加上相应的空白节点，此处在火狐中获得的是空白节点）
//alert(star2.nodeName);
if(star2.nodeType=="3")//3表示文本节点（text_node），空白节点也是文本节点，要是不是空白节点此处的nodeType为1（element_node）
{
star2=star2.nextSibling;
}
star2.className = "starLink";
var temp = document.documentElement.firstChild.nextSibling.firstChild; //documentElement表示HTML元素
alert(temp.nodeName);
if (temp.nodeType == "3") {
temp = temp.nextSibling;
}alert(temp.nodeName);
return true; //加上这句就是在网页上即使有错误也不会报错，可以继续执行下面的代码
}
function addLoadListener(fn) //此函数是验证浏览器的版本是IE还是火狐还是别的什么，可以直接拷贝过来用
{
if(typeof window.addEventListener!="undefined")
{
window.addEventListener("load",fn,false);
}
else if(typeof document.addEventListener!="undefined")
{
document.addEventListener("load",fn,false);
}
else if(typeof window.attchEvent!="undefined")
{
window.attchEvent("load",fn);
}
else
{
var oldfn=window.onload;
if(typeof window.onload!="function")
{
window.onload=fn;
}
else
{
window.onload=function()
{
oldfn();
fn();
};
}
}
}
----------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/BlankNodes.js">
</script>
<link rel="Stylesheet" type="text/css" href="css/BlankNoses.css" />
</head>
<body>
<h1>Accessing elements</h1>
<div id="outerGalaxy">
<ul id="starList">
<li id="star1">Rigel</li>
<li id="star2">Altair</li>
<li id="star3">Betelgeuse</li>
</ul>
</div>
</body>
</html>
』
』
//创建元素节点和文本节点创建方法的选择
『
createElements就是创建新元素的函数。
var newAnchor = document.createElement("a");
创建函数createTextNode创建文本节点
var anchorText = document.createTextNode("monoceros");
有3种基本的方法来将新的元素节点或者文本节点插入到网页中
放到最后：appendChild ()方法 //用法：前一个节点.appendChild(后一个节点的名字) 注意：名字不用“”扩起；这种方法是将节点加到“前一个节点”的后面
放到某节点之前：insertBefore ()方法 //用法：父节点.insertBefore(新的节点，已定义好的节点)→→（显示的顺序）：新的节点已定义好的节点
替换掉原有的某个节点： replaceChild ()方法 //用法：父节点.replaceChild(新的节点，旧的节点)→→→（显示结果）：新的节点替换掉旧的节点
『例子』
『
下面是外置JS脚本的内容：
addLoadListener(init);
function init()
{
var anchorText=document.createTextNode("monoceros"); //创建一个文本节点
var newAnchor = document.createElement("a"); //创建一个元素节点
newAnchor.href="http://www.baidu.com";//给新建的超链接节点添加链接属性
newAnchor.appendChild(anchorText); //元素节点和文本节点进行连接
var parent=document.getElementById("starLinks");
var newChild=parent.appendChild(newAnchor); //把新建的节点添加到原有超级连接的后面
return true;
}
function addLoadListener(fn) //下面是判断浏览器的类型
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
}
-----------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/CreateElement1.js"></script>
</head>
<body>
<h1>Creating elements and test nodes</h1>
<p id="starLinks">
<a href="test1.htm">Sirius</a>
</p>
</body>
</html>
』
』
//改变元素的类型
『
没有什么直接的、简单的方法来改变一个元素的类型。
改变元素类型的主要手段——克隆
注意：更改DOM的节点结构时要当心
『例子』
『
下面是外置JS脚本的内容：
addLoadListener(init);
function init()
{
var div=document.createElement("div");
var p=document.getElementById("starLinks");
for(var i=0;i<p.childNodes.length;i++)
{
var clone=p.childNodes[i].cloneNode(true);//true表示克隆子节点本身
div.appendChild(clone);
}
//debugger;
div.id=p.getAttribute("id");
div.className="starLink";
p.parentNode.replaceChild(div,p);
}
function addLoadListener(fn)
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
}
-----------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/ChangeTypeOfElement1.js"></script>
<link rel="Stylesheet" type="text/css" href="css/BlankNoses.css" />
</head>
<body>
<h1>Changing the type of an element</h1>
<p id="starLinks">
<a href="test1.htm">Sirius</a>
<a href="test2.htm">Achanar</a>
</p>
</body>
</html>
』
』
//删除一个元素或文本节点
『
removeChild函数能够用于删除父节点的任意子节点，并返回被删除的对象。
删除的元素不再存在于DOM中：它只存在于内存中
『例子1』
『
var anchor=document.getElementById("sirius"); //得到要删除的节点对象
var parent=anchor.parentNode; //找到它的父节点
var removedChild=parent.removeChild(anchor); //用法：父节点.removeChild(子节点对象)；
』
『例子2』
『
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="css/BlankNoses.css" />
<script language="javascript" type="text/javascript" src="javascript/RemoveElement2.js"></script>
</head>
<body>
<h1>Removing an element</h1>
<div id="starContainer">
<p id="starLinks" class="starLink">
<a href="test1.htm">Aldebaran</a>
<a href="test2.htm">Castor</a>
</p>
</div>
</body>
</html>
----------------------------------------------------------------------------
下面是外挂式js脚本内容：
var parent=document.getElementById("starLinks"); //得到父节点的对象（f2）
var container=document.getElementById("starContainer"); //得到父节点的父节点的对象（f1）
while(parent.childNodes.length>0)
{
container.insertBefore(parent.childNodes[0],parent); //将F2中的子节点和F1对调
}
container.removeChild(parent); //对调结束后删除F1
』
』
//读写元素属性
『
HTML元素最为常用的部分就是它的属性，JavaScript不仅能够读取这些属性值，而且还能写回新值。
getAttribute可以用于读取一个属性的值，而setAttribute则可以用于写入新值
『例子1』
『
<a id="antares" href="test1.htm" title="Marssion">Antares</a>
---------------------------------------------------------------
下面是外置JS脚本的内容：
var anchor=document.getElementById("antares"); //获得要获得属性的那个对象
var anchorId=anchor.getAttribute("id"); //用法：获得要获得属性的那个对象.getAttribute("属性名（注意要加“”）")
var anchorTitle=anchor.getAttribute("title");
alert("The anchor ID is:"+anchorId+"\nThe anchor title is:"+anchorTitle);
』
『例子2』
『
<a id="antares" href="test2.htm" title="Marssion">Antares</a>
----------------------------------------------------------------
下面是外置JS脚本的内容：
var anchor=document.getElementById("antares"); //获得要获得属性的那个对象
anchor.setAttribute("title","Marssion.lee"); // 用法：获得要获得属性的那个对象.setAttrubute("属性名（注意要加“”）"，"要给属性名赋的值（注意要加“”）")
var newTitle=anchor.getAttribute("title"); //新的属性值会覆盖旧的属性值
alert("The anchor title is:"+newTitle);
』
』
//获得拥有特定属性值的所有元素
『
如果需要在input元素中寻找满足type=“checkbox”这个条件的所有元素
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++)
{
if (inputs.getAttribute("type") == "checkbox")
{
...
}
}
解决方法——getElementsByAttribute函数
『例子』
『
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="javascript/getElementByAttribute.js">
</script>
</head>
<body>
<h1>Getting all element with a particular attribute value</h1>
<p id="starLinks">
<label for="test1">test1</label>
<a href="test1.htm" title="sirius">Sirius</a>
<a href="test2.htm" title="marssion">Marssion</a>
<a href="test2.htm" title="marssion">Marssion</a>
<a href="test2.htm" title="marssion">Marssion</a>
<a href="test2.htm" title="marssion">Marssion</a>
<a href="test2.htm" title="marssion">Marssion</a>
</p>
</body>
</html>
-------------------------------------------------------------
下面是外置JS脚本的内容：
addLoadListener(init)
function init() {
var anchors = getElementsByAttribute("title", "marssion"); //取得属性名为"title"属性值为"marssion"的元素集合，此方法在下面定义了拿过来用就行了
alert("There are " + anchors.length + " elements with the title marssion");
var label = getElementsByAttribute("for", "test1");
alert(label.length);
}
function getElementsByAttribute(attribute,attributeValue) //这个函数是根据不同的浏览器判断属性和属性值是否符合正则表达式
{
var elementArray=new Array();
var matchedArray=new Array();
if(document.all)
{
elementArray=document.all;//IE获取所有的元素
}
else
{
elementArray=document.getElementsByTagName("*");//DOM获取所有的元素
}
for(var i=0;i<elementArray.length;i++)
{
if(attribute=="title")
{
var pattern=new RegExp("(^| )"+attributeValue+"( |$)");//实例化正则表达式
if (pattern.test(elementArray[i].getAttribute(attribute)))//测试是否与表达式匹配
{
matchedArray[matchedArray.length]=elementArray[i];
}
}
else if(attribute=="for")
{
if(elementArray[i].getAttribute("htmlFor")||elementArray[i].getAttribute("for"))
{
if(elementArray[i].htmlFor==attributeValue)
{
matchedArray[matchedArray.length]=elementArray[i];
}
}
}
else if(elementArray[i].getAttribute(attribute)==attributeValue)
{
matchedArray[matchedArray.length]=elementArray[i];
}
}
return matchedArray;
}
function addLoadListener(fn) //这个函数是判断浏览器的型号
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
}
』
』
//元素的class的增减 //class css样式表中的
『
元素的class都可以通过className属性访问。
该属性的值是字符串
『例子』
『
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="css/BlankNoses.css" />
<script language="javascript" type="text/javascript" src="javascript/AddRemoveClasses.js"></script>
</head>
<body>
<h1>Adding and removing multiple classes to/from an element</h1>
<p>
<a id="sirius" class="starLink" href="test1.htm">Sirius</a>
<a id="aldebaran" class="starLink" href="test2.htm">Aldebaran</a>
</p>
</body>
</html>
-------------------------------------------------------------------------------------------------------------
下面是外置JS脚本的内容：
addLoadListener(init);
function init()
{
var sirius=document.getElementById("sirius");
var aldebaran=document.getElementById("aldebaran");
addClass(sirius, "important"); //函数在下面都有，拿过来用就行了两个函数都自动验证正则表达式
removeClass(aldebaran,"starLink"); //函数在下面都有，拿过来用就行了
return true;
}
function addClass(target,classValue) {
//debugger;
var pattern = new RegExp("(^| )" + classValue + "( |$)");
if(!pattern.test(target.className))
{
if(target.className=="")
{
target.className=classValue;
}
else
{
target.className+=" "+classValue; //叠加样式表用空格将两个样式表的名字分开就行了
}
}
return true;
}
function removeClass(target,classValue)
{
var removedClass = target.className;
var pattern = new RegExp("(^| )" + classValue + "( |$)");
if(pattern.test(removedClass))
{
target.className="";
}
return true;
}
function addLoadListener(fn)
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
}
』
』
//事件的概念
『
JavaScript程序使用的是事件驱动的程序设计模型，某些元素发生了某些事件时，Web浏览器就会生成一个事件（event）
同一个事件调用多个函数时用";"隔开
』
//事件流
『
事件流意味着在页面上可以有多个元素响应同一个事件
分为两类
『
1、冒泡型事件（IE）从最先发生事件的地方一层一层向上返
2、DOM事件从最上成（HTML）一层一层向下返
』
『
type
一个字符串，声明发生的事件的类型，该属性的值是删除前缀“on”的事件处理程序名（如“click”或“mouseover”）
『例子』
『
var sType=oEvent.type;
function handleEvent(oEvent)
{
if(oEvent.type=="click")
{
alert("Cilcked!");
}
else if(oEvent.type=="mouseover")
{
alert("Mouse Over!");
}
oDiv.onclick=handleEvent;
oDiv.onmouseover=handleEvent;
}
』
』

复制代码代码如下:

事件例子

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script> 
function alert1(fg) { 
document.getElementById("display").innerHTML+=fg+"<br />" 
} 
function checkbtn() { 
switch (event.button) { 
case 1: 
alert1("左键"); 
break; 
case 2: 
alert1("右键"); 
break; 
case 3: 
alert1("左键+右键"); 
break; 
case 4: 
alert1("中间键"); 
break; 
case 5: 
alert1("左键+中间键"); 
break; 
case 6: 
alert1("右键键+中间键"); 
break; 
case 7: 
alert1("左键+中间键+右键"); 
break; 
} 
} 
</script> 
</head> 
<body> 
<div onmousedown="checkbtn()" oncontextmenu="return false" style="width:50px;height:50px; background-color:Lime; cursor:hand;">单击</div> //必须用 div 的onmousedown 
<div id="display"></div> 
</body> 
</html> 

』

复制代码代码如下:

事件监听

IE
[Object].attachEvent("on+eventName",fnHandler") //eventName :动作的名字 fnHandler ：事件函数
[Object].detachEvent("on+eventName",fnHandler")
DOM
[Object].addEventListener("eventName",fnHandler,bCapture)
[Object].removeEventListener("eventName",fnHandler,bCapture)

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml" id="html1"> 
<head> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript"> 
var fnClick=function() 
{ 
alert("Clicked"); 
} 
var fnClick1 = function() { 
alert("body"); 
} 
var fnClick2 = function() { 
alert("html"); 
} 
var fnLoad = function() { 
var temp = document.getElementById("btn1"); 
var temp1 = document.getElementById("body1"); 
var temp2 = document.getElementById("html1"); 
temp1.addEventListener("click", fnClick1, true); 
temp2.addEventListener("click", fnClick2, true); 
temp.addEventListener("click", fnClick, true); //false用于冒泡阶段 true用于捕获阶段 
} 
var fnDetachEvent=function() 
{ 
var temp=document.getElementById("btn1"); 
temp.removeEventListener("click",fnClick,true); 
} 
</script> 
</head> 
<body onload="fnLoad()" id="body1"> 
<input type="button" id="btn1" value="click me" /> 
<input type="button" value="detachEvent" onclick="fnDetachEvent()" /> 
</body> 
</html> 
----------------------------------------------------------------------- 
[code]例子2

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
var fnClick=function()
{
alert("Clicked");
}
var fnLoad=function()
{
var temp=document.getElementById("btn1");
temp.attachEvent("onclick",fnClick);
}
var fnDetachEvent=function()
{
var temp=document.getElementById("btn1");
temp.detachEvent("onclick",fnClick);
}
</script>
</head>
<body onload="fnLoad()">
<input type="button" id="btn1" value="click me" />
<input type="button" value="detachEvent" onclick="fnDetachEvent()" />
</body>
</html>
[/code]

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript"> 
var EventUtil=new Object; 
EventUtil.addEventHandler=function(oTarget,sEventType,fnHandler){ 
if(oTarget.addEventListener) 
{ 
oTarget.addEventListener(sEventType,fnHandler,false); 
} 
else if(oTarget.attachEvent) 
{ 
oTarget.attachEvent("on"+sEventType,fnHandler); 
} 
else　　　　　　　　　　　　　　　　//要是出现即不是IE又不是火狐的浏览器就执行这条 
{ 
oTarget["on"+sEventType]=fnHandler; 
} 
}; 
EventUtil.removeEventHandler=function(oTarget,sEventType,fnHandler){ 
if(oTarget.removeEventListener) 
{ 
oTarget.removeEventListener(sEventType,fnHandler,false); 
} 
else if(oTarget.detachEvent) 
{ 
oTarget.detachEvent("on"+sEventType,fnHandler); 
} 
else 
{ 
oTarget["on"+sEventType]=null; 
} 
}; 
function handleClick() 
{ 
alert("Click"); 
var oDiv=document.getElementById("div1"); 
EventUtil.removeEventHandler(oDiv,"click",handleClick); 
} 
window.onload=function(){ 
var oDiv=document.getElementById("div1"); 
EventUtil.addEventHandler(oDiv,"click",handleClick); 
} 
</script> 
</head> 
<body> 
<div id="div1" style="background-color:Red; width:100px; height:100px;"></div> 
</body> 
</html> 

//例子（补充）

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script language="javascript" type="text/javascript"> 
function load() { 
document.f1.b1.onmouseover = plead; //注意：document点出的是相应的name属性，等号后面调用的函数不用加（） 
} 
function plead() { 
window.status = "Please Press Me!"; 
} 
</script> 
</head> 
<body onload="load()"> 
<form name="f1" action=""> 
<input name="b1" type="button" value="Press Me" /> //通过外置事件调用 
</form> 
</body> 
</html> 

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript"> 
function handleEvent(oEvent) 
{ 
var oTextbox=document.getElementById("txt1"); 
oTextbox.value+="\n>"+oEvent.type; //把事件转换成事件类型进行输出 
} 
</script> 
</head> 
<body> 
<p>Type some characters into the first textbox.</p> 
<p><textarea id="txtInput" rows="15" cols="50" 
onkeydown="handleEvent(event)" onkeyup="handleEvent(event)" onkeypress="handleEvent(event)"></textarea></p> //注意函数传值传的是事件 
<p><textarea id="txt1" rows="15" cols="50"></textarea></p> 
</body> 
</html> 

复制代码代码如下:

显示调用事件

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript"> 
function oldHandle() { 
alert("aa"); 
} 
</script> 
</head> 
<body> 
<form name="myForm" action="test1.htm" method="post"> 
<input name="myButton" type="button" value="Click Me" onclick="oldHandle()" /> 
</form> 
<script language="javascript" type="text/javascript"> 
document.myForm.myButton.onclick();//显示调用事件处理程序，但没有引发onclick事件。 
//alert(navigator.userAgent); 
</script> 
</body> 
</html> 

复制代码代码如下:

关于事件的返回值

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script language="javascript" type="text/javascript"> 
function check() { 
var textbox = document.getElementById("txt"); 
if (textbox.value == "") { 
alert("文本框空了"); 
textbox.focus(); 
return false; 
} 
else 
{ 
return true; 
} 
} 
</script> 
</head> 
<body> 
<form id="form1" onsubmit="return check()"> <!--return 给事件一个boolean返回值，true代表能够继续执行，FALSE代表停止执行（这里的check()相当于一个boll值）--> 
<input type="text" id="txt" /> //onsubmit是提交表单事件 
<input type="submit" value="Submit" /> 
<!--<input type="button" onclick="sd()" />--> 
</form> 
</body> 
</html> 
----------------------------------------------------------------------------- 
[code]例子2

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function confirmLink()
{
return confirm("Do you really want to visit "+this.href+" ?"); //这是一个有yesno的选项返回的bool值指示函数是否继续执行
}
function confirmAllLinks()
{
for(var i=0;i<document.links.length;i++)
{
document.links[i].onclick=confirmLink; //动态的将onclick事件进行绑定，如果返回时true就执行链接返回false就不执行链接
} //说白了就是

复制代码代码如下:

事件名=“boolean值（TRUE就执行，FALSE就不执行）”

}
</script>
</head>
<body onload="confirmAllLinks()">
<a href="CreateElement1.htm" >点我看看</a>
<a href="CreateElement1.htm" >点我看看</a>
<a href="CreateElement1.htm" >点我看看</a>
<a href="CreateElement1.htm" >点我看看</a>
<a href="CreateElement1.htm" >点我看看</a>
<a href="CreateElement1.htm" >点我看看</a>
</body>
</html>
[/code]

复制代码代码如下:

关于加载

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript"> 
// document.body.onload=function() //如果取消注释则会出现错误，因为代码是一行一行运行的加载到此处时Body还没有加载，所以用body会出错 
// { //此例子指示解释一下，就算把body换成别的好像也不行，我是没试出来行的 
// alert("Loaded"); 
// } 
</script> 
</head> 
<body> 
This example won't work because it's assinging the <code>onload</code> event handler to the wrong place! 
<script language="javascript" type="text/javascript"> 
document.body.onload=function() //可以正确执行，因为body已经加载 
{ 
alert("Loaded"); 
} 
</script> 
</body> 
</html> 

『
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function handleEvent(oEvent)
{
var oTextbox=document.getElementById("txt1");
oTextbox.value+="\n>"+oEvent.type; //见上面关于type的解释
oTextbox.value+="\n target is "+(oEvent.target||oEvent.srcElement).id;
oTextbox.value+="\n keyCode is "+oEvent.keyCode; //这是整数属性声明keydown和keyup事件的键代码以及keypress事件的unicode字符，用String.fromCharCode(oEvent.keyCode)方法可以把字符代码转换成字符串
oTextbox.value+="\n charCode is "+oEvent.charCode;
var arrKeys=[];
if(oEvent.shiftKey) //shiftKey ctrlkey altkey 这些bool值属性声明在鼠标事件发生时，是否按住了Alt、Ctrl、Shift键
{
arrKeys.push("Shift");
}
if(oEvent.ctrlKey)
{
arrKeys.push("Ctrl");
}
if(oEvent.altKey)
{
arrKeys.push("Alt");
}
oTextbox.value+="\n keys down are "+arrKeys+" Number is "+arrKeys.length;
}
</script>
</head>
<body>
<p>Type some characters into the first textbox.</p>
<p><textarea id="txtInput" rows="15" cols="50"
onkeydown="handleEvent(event)" onkeyup="handleEvent(event)" onkeypress="handleEvent(event)"></textarea></p>
<p><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>
』
『
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript" src="javascript/detect.js"></script>
<script language="javascript" type="text/javascript">
function load() {
var textbox = document.getElementById("txt");
textbox.oncontextmenu = function(oEvent) { //textbox.oncontextmenu 这是控制右键的函数，返回false就禁用右键了
//debugger;
if (isIE) { //浏览器要是ie的禁用方法，禁用文本框的右键
oEvent = window.event;
oEvent.returnValue = false;
}
else {
oEvent.preventDefault();
}
}
document.oncontextmenu = function(oEvent) { //禁用文本框外面的右键
if (isIE) {
oEvent = window.event;
oEvent.returnValue = false;
}
else {
oEvent.preventDefault();
}
}
}
</script>
</head>
<body onload="load()">
<input value="abcd" id="txt" />
</body>
</html>
-----------------------------------------------------------------------------------------------------
"javascript/detect.js"脚本中的内容：这是判断具体的浏览器类型是什么，直接拿过来用就行了
var sUserAgent = navigator.userAgent;
var fAppVersion = parseFloat(navigator.appVersion);
function compareVersions(sVersion1, sVersion2) {
var aVersion1 = sVersion1.split(".");
var aVersion2 = sVersion2.split(".");
if (aVersion1.length > aVersion2.length) {
for (var i = 0; i < aVersion1.length - aVersion2.length; i++) {
aVersion2.push("0");
}
}
else if (aVersion1.length < aVersion2.length) {
for (var i = 0; i < aVersion2.length - aVersion1.length; i++) {
aVersion1.push("0");
}
}
for (var i = 0; i < aVersion1.length; i++) {
if (aVersion1[i] < aVersion2[i]) {
return -1;
}
else {
return 1;
}
}
return 0;
}
var isOpera = sUserAgent.indexOf("Opera") > -1;
var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false;
if (isOpera) {
var fOperaVersion;
if (navigator.appName == "Opera") {
fOperaVersion.fAppVersion;
}
else {
var reOperaVersion = new RegExp("Opera (\\d+\\.\\d+)");
reOperaVersion.test(sUserAgent);
fOperaVersion = parseFloat(RegExp["$1"]);
}
isMinOpera4 = fOperaVersion >= 4;
isMinOpera5 = fOperaVersion >= 5;
isMinOpera6 = fOperaVersion >= 6;
isMinOpera7 = fOperaVersion >= 7;
isMinOpera7_5 = fOperaVersion >= 7.5;
}
var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1 || sUserAgent.indexOf("AppleWebKit") > -1;
var isMinSafari1 = isMinSafari1_2 = false;
var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;
if (isKHTML) {
var isSafari = sUserAgent.indexOf("AppleWebKit") > -1;
var isKonq = sUserAgent.indexOf("Konqueror") > -1;
if (isSafari) {
var reAppleWebKit = new RegExp("AppleWebKit\\/(\\d+(?:\\.\\d*)?)");
reAppleWebKit.test(sUserAgent);
var fAppleWebKitVersion = parseFloat(RegExp["$1"]);
isMinSafari1 = fAppleWebKitVersion >= 85;
isMinSafari1_2 = fAppleWebKitVersion >= 124;
}
else if (isKonq) {
var reKonq = new RegExp("Konqueror\\/(\\d+(?:\\.\\d+(?:\\.\\d)?)?)");
reKonq.test(sUserAgent);
isMinKonq2_2 = compareVersions(RegExp["$1"], "2.2") >= 0;
isMinKonq3 = compareVersions(RegExp["$1"], "3.0") >= 0;
isMinKonq3_1 = compareVersions(RegExp["$1"], "3.1") >= 0;
isMinKonq3_2 = compareVersions(RegExp["$1"], "3.2") >= 0;
}
}
var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera;
var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = isMinIE7 = false;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(sUserAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
isMinIE4 = fIEVersion >= 4;
isMinIE5 = fIEVersion >= 5;
isMinIE5_5 = fIEVersion >= 5.5;
isMinIE6 = fIEVersion >= 6.0;
isMinIE7 = fIEVersion >= 7.0;
}
var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isKHTML;
var isMinMoz1 = sMinMoz1_4 = isMinMoz1_5 = false;
if (isMoz) {
var reMoz = new RegExp("rv:(\\d+\\.\\d+(?:\\.\\d+)?)");
reMoz.test(sUserAgent);
isMinMoz1 = compareVersions(RegExp["$1"], "1.0") >= 0;
isMinMoz1_4 = compareVersions(RegExp["$1"], "1.4") >= 0;
isMinMoz1_5 = compareVersions(RegExp["$1"], "1.5") >= 0;
}
var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML
&& (sUserAgent.indexOf("Mozilla") == 0)
&& (navigator.appName == "Netscape")
&& (fAppVersion >= 4.0 && fAppVersion < 5.0);
var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false;
if (isNS4) {
isMinNS4 = true;
isMinNS4_5 = fAppVersion >= 4.5;
isMinNS4_7 = fAppVersion >= 4.7;
isMinNS4_8 = fAppVersion >= 4.8;
}
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC")
|| (navigator.platform == "Macintosh");
var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;
var isMac68K = isMacPPC = false;
var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false;
if (isWin) {
isWin95 = sUserAgent.indexOf("Win95") > -1
|| sUserAgent.indexOf("Windows 95") > -1;
isWin98 = sUserAgent.indexOf("Win98") > -1
|| sUserAgent.indexOf("Windows 98") > -1;
isWinME = sUserAgent.indexOf("Win 9x 4.90") > -1
|| sUserAgent.indexOf("Windows ME") > -1;
isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1
|| sUserAgent.indexOf("Windows 2000") > -1;
isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1
|| sUserAgent.indexOf("Windows XP") > -1;
isWinNT4 = sUserAgent.indexOf("WinNT") > -1
|| sUserAgent.indexOf("Windows NT") > -1
|| sUserAgent.indexOf("WinNT4.0") > -1
|| sUserAgent.indexOf("Windows NT 4.0") > -1
&& (!isWinME && !isWin2K && !isWinXP);
}
if (isMac) {
isMac68K = sUserAgent.indexOf("Mac_68000") > -1
|| sUserAgent.indexOf("68K") > -1;
isMacPPC = sUserAgent.indexOf("Mac_PowerPC") > -1
|| sUserAgent.indexOf("PPC") > -1;
}
if (isUnix) {
isSunOS = sUserAgent.indexOf("SunOS") > -1;
if (isSunOS) {
var reSunOS = new RegExp("SunOS (\\d+\\.\\d+(?:\\.\\d+)?)");
reSunOS.test(sUserAgent);
isMinSunOS4 = compareVersions(RegExp["$1"], "4.0") >= 0;
isMinSunOS5 = compareVersions(RegExp["$1"], "5.0") >= 0;
isMinSunOS5_5 = compareVersions(RegExp["$1"], "5.5") >= 0;
}
}
』
『
<html xmlns="http://www.w3.org/1999/xhtml" onclick="alert('html')">
<head>
<title>无标题页</title>
<script type="text/javascript" language="javascript" src="javascript/detect.js"></script> //src="javascript/detect.js" 判断浏览器的类型，上面有～
<script type="text/javascript" language="javascript">
function handleClick(oEvent) //阻止冒泡
{
alert("input");
if(isIE) {
oEvent.cancelBubble=true; //ie的阻止冒泡的方法
}
else
{
oEvent.stopPropagation(); //其他浏览器的阻止冒泡的方法
}
}
</script>
</head>
<body onclick="alert('body')">
<input type="button" value="Click Me" onclick="handleClick(event)" /> //触发onclick事件可弹出三个框，因为按钮包含在他们中间
</body>
</html>
』
JS 第六章：表单和表单元素 ↑↓←→
//获取Form对象

复制代码代码如下:

 
第一种方式： 
document.forms[0]指的就是文档中的第一个表单 
第二种方式： 
通过表单的名称 document.forms[“formZ”]; 
第三种方式： 
document.getElementByld(“forml”) 

例子

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript" language="javascript"> 
function myclick1() { 
var form; 
form = document.forms["samplename"]; //三种获取Form对象的方法 
// form = document.forms[0]; 
// form = document.getElementById("myForm"); 
alert(form.elements["mytext"].value); //输出文本：Marssion //form.elements["mytext"].value 用于获得表单下的某个元素的值 注意：[]中是用"" 
} 
</script> 
</head> 
<body> 
<form id="myForm" name="samplename" action="" method="post"> //method（提交表单的方法（指明浏览器是发送Get请求还是Post请求））[code] 1、Get :不安全，是将信息跟在URL后，最多255个字符 
↑ 2、post ：提交表单时用的方法，安全，放入的字符长度不限

指向服务器的表单处理程序（一个URL地址，表单提交到的地址）特殊用法：
<input type="text" value="Marssion" name="mytext"/>
↑
文本框中的默认值
<input type="button" value="Click Me" onclick="myclick1()"/>
↑
按钮上的文本
</form>
</body>
</html>
[/code]
//Form表单提交

复制代码代码如下:

 
以前的方法 
<input type="submit" value="提交按钮提交"/> 
采用javascript提交和重置 
submit（）和reset（）方法 
<input type="button" value="普通按钮提交" onclick="document.forms[0].submit()"/> 

//onsubmit和onreset事件

复制代码代码如下:

 
Form对象还提供了事件处理程序onsubmit和onreset 
如果返回false，就取消表单的提交和重置 注意：只有真正点击Submit按钮才会触发onsubmit事件处理程序（给用“type="submit"”） 

例子 onsubmit

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript"> 
function check() { 
var txtName = document.getElementById("txtName"); 
var txtPwd = document.getElementById("txtPassword"); 
if (txtName.value == "") { 
alert("请输入用户名"); 
txtName.focus(); 
return false; 
} 
if (txtPwd.value == "") { 
alert("请输入密码"); 
txtPwd.focus(); 
return false; 
} 
return true; 
} 
</script> 
</head> 
<body> 
<form id="form1" method="post" action="Handler.ashx" onsubmit="return check()"> <!-- 注意： 在 form中写入 onsubmit="return 函数名（）"--> 
<label for="txtName">Name:</label><br /> 
<input type="text" id="txtName" name="txtName" /><br /> 
<label for="txtPassword">Password:</label><br /> 
<input type="password" id="txtPassword" name="txtPassword" /><br /> 
<label for="selAge">Age:</label><br /> 
<select name="selAge" id="selAge"> 
<option>18-21</option> 
<option>22-25</option> 
<option>26-29</option> 
<option>30-35</option> 
<option>Over 35</option> 
</select><br /> 
<label for="txtComments">Comments:</label><br /> 
<textarea rows="10" cols="50" id="txtComments" name="txtComments"></textarea><br /> 
<input type="submit" value="提交按钮提交"/> <!--提交按钮会触发onsubmit事件--> 
<input type="button" value="普通按钮提交" onclick="document.forms[0].submit()" /> <!--普通按钮可以成功提交，但是不能触发onsubmit事件--> 
</form> 
<p>This example blocks the form submissiong(you won't see an alert box).</p> 
</body> 
</html> 

例子onreset

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
</head> 
<body> 
<form method="post" action="javascript:alert('Submitted')" onreset="return confirm('Really erase All data and start over?')"> 
<p>Type some values into the textboxes and then press reset.</p> 
<label for="txtName">Name:</label><br /> 
<input type="text" id="txtName" name="txtName" /><br /> 
<label for="txtPassword">Password</label><br /> 
<input type="password" id="txtPassword" name="txtPassword" /><br /> 
<label for="selAge">Age:</label><br /> 
<select name="selAge" id="selAge"> 
<option>18-21</option> 
<option>22-25</option> 
<option>26-29</option> 
<option>30-35</option> 
<option>Over 35</option> 
</select><br /> 
<label for="txtComments">Comments:</label><br /> 
<textarea rows="10" cols="50" id="txtComments" name="txtComments"></textarea><br /> 
<input type="submit" value="Submit Form" /> 
<input type="reset" value="重置按钮" /> <!--和onsubmit不同不管是"type="reset"重置按钮" 还是“onclick="document.forms[0].reset()"”都能成功调用onreset事件--> 
<input type="button" value="普通按钮" onclick="document.forms[0].reset()" /> 
</form> 
</body> 
</html> 

//保证表单提交一次

复制代码代码如下:

 
解决方法：使用一般按钮，添加如下事件： 
<input type=”button” value=”Submit” 
onclick=”this.disabled=true; this.form.submit()” /> 

例子

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript"> 
function sub(){ 
setTimeout("sub1()",3000); <!--<script></script>中写的两个函数是模拟网速慢的情况下延时提交的情况--> 
} 
function sub1(){ 
document.forms[0].submit(); 
} 
</script> 
</head> 
<body> 
<form method="post" action="../Default.aspx" name="form1"> 
<input type="text" name="txtName" value="" /> 
<input type="button" value="Submit Form" name="mySubmit1" onclick="mySubmit1.disabled=true;sub();" /> 
</form> 
</body> 
</html> 

//表单和表单元素的name

复制代码代码如下:

 
可以使用下面的表达式引用“address”的表单中的“zipcode”元素，表单和元素都要使用name属性 
document.address.zipcode 
比使用硬编码（位置依赖）的数组下标要简洁得多： 
document.forms[1].elements[4] 

例子

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script language="javascript" type="text/javascript"> 
function showTextBoxValue() { 
//debugger 
alert(document.forms[0].elements[1].value); 
alert(document.myForm.txt.value); //打印出的是文本框中填入的值 注意！：document后面的都是元素的name!,而且不能点出只能硬打 
} 
</script> 
</head> 
<body> 
<form id="form1" method="post" action="#" name="myForm"> 
<input type="text" id="txtName" name="txt" /> 
<input type="button" id="btnSubmit" value="ShowValue" onclick="showTextBoxValue()" /> 
</form> 
</body> 
</html> 

//表单元素通用方法和属性

复制代码代码如下:

 
Type：一个只读字符串，标识表单元素的类型。 
Form：对包含该元素的form对象的只读引用 //就是表单A的一个元素B B.From=A 
Name：由HTML的name性质指定的只读字符串。 
Value：一个可读写的字符串，指定了表单元素包含或表示的“值”。 
方法：blur()和focus() 

例子（blur）

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
</head> 
<body> 
<p>Type a few characters in the textbox and then tab to the Submit button. 
Then,click on the textbox and tab back to the Submit button without changing the text. 
</p> 
<form method="post" action="javascript:alert('Submited')"> <!--当按下提交按钮时发生的动作--> 
<input type="text" name="textbox" value="" onblur="alert('Blur')" onchange="alert('Change')" /> <!--失去焦点时发生onblur事件 文本框中的内容发生改变当失去焦点时发生onchange事件--> 
<input type="submit" value="Submit Form" /> 
</form> 
</body> 
</html> 

//常见的表单元素支持的事件处理程序

复制代码代码如下:

 
Onclick：当用户在元素上点击鼠标时触发。 
Onchange:当用户改变了元素表示的值（通过输入文本或选择一个选项）时触发。 
Onfocus:在表单元素收到输入焦点是触发 
Onblur：在表单元素失去输入焦点时触发 

//文本框对象

复制代码代码如下:

 
事件： 
{ 
onBlur 文本框失去焦点 
onChange 文本框的值被修改（事件将跟踪用户在文本框中所作的修改,当用户在文本框中完成修改之后，将激活该事件。） 
onFocus 光标进入文本框中 
} 
方法： 
{ 
select( ) 选中文本内容，突出显示输入区域（选中文本内容，突出显示输入区域，一般用于提示用户重新输入。（全部选中，就像QQ的输入用户名时一双击就将文本框中的内容全部选中，一点删除就全部删除）） 
} 
属性： 
{ 
value 表示用户输入的文本。 
Size 规定文本可见长度 
Maxlength 规定可输入最大长度 
readonly 某些文本框希望用户不能修改，例如，某个拍卖网站的起拍价，一般是卖方或拍卖公司定价，所以希望用户不能修改，这时可以指定readonly只读属性 
} 

例子（文本框对象 onChange事件）

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript"> 
function getLength() 
{ 
var oTextbox1=document.getElementById("txt1"); 
var oTextbox2=document.getElementById("txt2"); 
alert("The length of txt1 is " + oTextbox1.value.length + "\n" //oTextbox1.value.length属性是获得文本框中文本的长度 
+"The length of txt2 is "+oTextbox2.value.length); 
} 
function change(){ 
document.getElementById("loading").src="img/loading_32x32.gif"; //指定图片的路径 
document.getElementById("loading").style.display = "block"; //style.display="block" 含义是让图片显示出来 
} 
function f(){ 
document.getElementById("loading").src="img/16checkcircle.gif"; //改变 
} 
</script> 
</head> 
<body> 
<table cellpadding="0" cellspacing="0"> 
<tr> 
<td><input type="text" size="12" id="txt1" onchange="change();" /></td> <!--当用户点击别的地方，焦点离开此文本框的时候，将触发onchange事件--> 
<td><img id="loading" width="17" height="17" style="display:none" alt="" /></td> <!--style="display:none" 含义是让图片隐藏--> 
</tr> 
</table> 
<textarea rows="5" cols="25" id="txt2" onkeypress="f()"></textarea><br /> <!--onkeypress事件是当用户在多行文本框中键入值是触发此事件--> 
<input type="button" value="Get Length" onclick="getLength()" /> 
</body> 
</html> 

例子（文本框的文本属性，（动态添加子节点））

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript"> 
function getValues() 
{ 
var oTextbox1=document.getElementById("txt1"); 
var oTextbox2=document.getElementById("txt2"); 
var resultDiv=document.getElementById("result"); 
var childNode=document.createTextNode(""); //建立一个空的文本节点 
childNode.nodeValue=oTextbox1.value+oTextbox2.value; 
if(resultDiv.childNodes.length==0) //如果层（父节点）的子节点的个数等于0 
{ 
resultDiv.appendChild(childNode); 
} 
else 
{ 
resultDiv.removeChild(resultDiv.childNodes[0]); //如果层（父节点）的子节点的个数不等于0 ，先删除第一个子节点，在加入新的子节点 
resultDiv.appendChild(childNode); 
} 
} 
</script> 
</head> 
<body> 
<input type="text" size="12" id="txt1" /><br /> 
<textarea rows="5" cols="25" id="txt2"></textarea> 
<input type="button" value="Get Values" onclick="getValues()" /><br /> 
<div id="result"></div> 
</body> 
</html> 

例子（select方法）

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript"> 
function selectText() 
{ 
var oTextbox1=document.getElementById("txt1"); 
oTextbox1.select(); //select()方法 ：将相应的文本框中的内容全部选中 
} 
</script> 
</head> 
<body> 
<input type="text" size="12" id="txt1" value="initial value" onselect="alert('Selected')" /><br /> <!--onselect事件：当用户选定文本时发生（不管选定多长）--> 
<input type="button" value="Select Text" onclick="selectText()" /> 
</body> 
</html> 

//下拉列表框（List Boxes and Combo Boxes ）

复制代码代码如下:

 
属性： 
value 属性表示该控件当前选定的值。 
size属性表示可以显示的项目数。 
options集合 

您可能感兴趣的文章:

浅谈JavaScript 覆盖原型以及更改原型
下面小编就为大家带来一篇浅谈JavaScript 覆盖原型以及更改原型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随过来看看吧
2016-08-08
微信小程序实现表单验证源码
这篇文章主要为大家详细介绍了微信小程序实现表单验证源码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
详解js中构造流程图的核心技术JsPlumb（2）
这篇文章主要介绍了js中构造流程图的核心技术JsPlumb，jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，需要的朋友可以参考下
2015-12-12
javascript九宫格图片随机打乱位置的实现方法
这篇文章主要为大家详细介绍了javascript九宫格图片随机打乱位置的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
关于JavaScript中的this指向问题总结篇
在小编面试过程中经常会遇到javascript中this指向问题，可以说是前端面试必问，下面小编给大家总结了一下js中this的指向，感兴趣的朋友一起学习吧
2017-07-07
javascript获取作用在元素上面的样式属性代码
遍历所有样式属性，通过判断其属性值，是否为'undefined' 或特特的值，来过虑属性
2012-09-09
学习使用Bootstrap页面排版样式
这篇文章主要教大家学习使用Bootstrap页面排版样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
layui使用及简单的三级联动实现教程
这篇文章主要给大家介绍了关于layui使用及简单的三级联动的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
基于JavaScript实现一个简单的Vue
这篇文章主要介绍了基于JavaScript实现一个简单的Vue的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
JavaScript的漂亮的代码片段
记录我看到之后，不得不赞的代码片段。本贴板内容将不断更新，欢迎关注
2013-06-06