JavaScript 大量例证 _JavaScript

JavaScript 大量事例

嘿嘿。今天没干什么。就是写了大量的事例，累啊。。。放到网上把。也对自己的成果感到欣慰。。。现在就给大家欣赏一下

还有就是怎么样IE 支持DOM盒子模型那。。。

只要加上一句

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

那么IE就能支持DOM盒子而不是标准盒子模型

好了上面扯了个蛋。。。嘿嘿下面才是重点

开始书写代码：

<script language="javascript">
var sMyString = "Tsinghua University";
document.write(sMyString.slice(1,3) + "<br>");
document.write(sMyString.substring(1,3) + "<br>");
document.write(sMyString.slice(4) + "<br>");
document.write(sMyString + "<br>");		//不改变原字符串
</script>

?上面主要是用slice和substring的分离字符串。。。其实没什么区别，具体的区别如下：

<script language="javascript">
var sMyString = "Tsinghua University";
document.write(sMyString.slice(2,-3) + "<br>");
document.write(sMyString.substring(2,-3) + "<br>");
document.write(sMyString.substring(2,0) + "<br>");
document.write(sMyString + "<br>");
</script>

?下面是关于Index的操作

<script language="javascript">
var sMyString = "Tsinghua University";
document.write(sMyString.indexOf("i")+"<br>");		//从前往后
document.write(sMyString.indexOf("i",3)+"<br>");		//可选参数，从第几个字符开始往后找
document.write(sMyString.lastIndexOf("i")+"<br>");	//从后往前
document.write(sMyString.lastIndexOf("i",3)+"<br>");	//可选参数，从第几个字符开始往前找
document.write(sMyString.lastIndexOf("V")+"<br>");	//大写“V”找不到，返回-1
</script>

?下面是变量的定义：?

<script language="javascript">
var mynum1 = 23.345;
var mynum2 = 45;
var mynum3 = -34;
var mynum4 = 9e5;		//科学计数法
alert(mynum1 + " " + mynum2 + " " + mynum3 + " " + mynum4);
</script>
?下面是科学技术法的表示方法

<script language="javascript">
var fNumber = 895.4;
alert(fNumber.toExponential(1));
alert(fNumber.toExponential(2));
</script>
?下面是字符串true和布尔true

<script language="javascript">
var married = true;
alert("1." + typeof(married));
married = "true";
alert("2." + typeof(married));
</script>

?下面是数值类型的转换

<title>类型转换</title>
<script language="javascript">
var a = 3;
var b = a + "";
var c = a.toString();
var d = "student" + a;
alert(typeof(a) + " " + typeof(b) + " " + typeof(c) + " " + typeof(d));
</script>

?toString 的方法

<script language="javascript">
var a=11;
document.write(a.toString(2) + "<br>");
document.write(a.toString(3) + "<br>");
document.write(a.toString(8) + "<br>");
document.write(a.toString(16) + "<br>");
</script>

parseInt 的方法

<script language="javascript">
document.write(parseInt("4567red") + "<br>");
document.write(parseInt("53.5") + "<br>");
document.write(parseInt("0xC") + "<br>");	//直接进制转换
document.write(parseInt("isaacshun@gmail.com") + "<br>");

<script language="javascript">
document.write(parseInt("AF",16) + "<br>");
document.write(parseInt("11",2) + "<br>");
document.write(parseInt("011") + "<br>");??//0开头，默认为八进制
document.write(parseInt("011",8) + "<br>");
document.write(parseInt("011",10) + "<br>");?//指定为十进制
</script>

?parseFloat方法

<script language="javascript">
document.write(parseFloat("34535orange") + "<br>");
document.write(parseFloat("0xA") + "<br>");	//不再有默认进制，直接输出第一个字符“0”
document.write(parseFloat("435.34") + "<br>");
document.write(parseFloat("435.34.564") + "<br>");
document.write(parseFloat("isaacshun@gmail.com") + "<br>");
</script>

数组的定义

<script language="javascript">
var aMap = new Array("China","USA","Britain");
alert(aMap.length + " " + aMap[2]);
</script>

<script language="javascript">
var aMap = new Array("China","USA","Britain");
aMap[20] = "Korea";
alert(aMap.length + " " + aMap[10] + " " + aMap[20]);
</script>

<script language="javascript">
var aMap = ["China","USA","Britain"];
alert(aMap.toString() + " " + typeof(aMap.toString()));
</script>

?join方法

<script language="javascript">
var aMap = ["China","USA","Britain"];
document.write(aMap.join() + "<br>");			//无参数，等同于toString()
document.write(aMap.join("") + "<br>");		//不用连接符
document.write(aMap.join("][") + "<br>");		//用“][”来连接
document.write(aMap.join("-isaac-") + "<br>");

split方法

<script language="javascript">
var sFruit = "apple,pear,peach,orange";
var aFruit = sFruit.split(",");
alert(aFruit.join("--"));

reverse方法

<script language="javascript">
var aFruit = ["apple","pear","peach","orange"];
alert(aFruit.reverse().toString());
</script>

sort方法

<script language="javascript">
var aFruit = ["pear","apple","peach","orange"];
aFruit.sort();
alert(aFruit.toString());
</script>

?操作数组

<script language="javascript">
var stack = new Array();
stack.push("red");
stack.push("green");
stack.push("blue");
document.write(stack.toString() + "<br>");
var vItem = stack.pop();
document.write(vItem + "<br>");
document.write(stack.toString());
</script>

九九成列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>九九乘法表</title>
</head>

<body bgcolor="#e0f1ff">
<table cellpadding="6" cellspacing="0" style="border-collapse:collapse; border:none;">
<script language="javascript">
for(var i=1;i<10;i++){			//乘法表一共九行
	document.write("<tr>");		//每行是table的一行
    for(j=1;j<10;j++)			//每行都有9个单元格
		if(j<=i)				//有内容的单元格
	        document.write("<td style='border:2px solid #004B8A; background:#FFFFFF;'>"+i+"*"+j+"="+(i*j)+"</td>");
		else					//没有内容的单元格
			document.write("<td style='border:none;'></td>");
    document.write("</tr>");
}
</script>
</table>
</body>
</html>

判断参数的数量

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>arguments</title>
<script language="javascript">
function fnAdd(){
	if(arguments.length == 0)
		return;
	else if(arguments.length == 1)
		return arguments[0] + 5;
	else{
		var iSum = 0;
		for(var i=0;i<arguments.length;i++)
			iSum += arguments[i];
		return iSum;
	}
}
document.write(fnAdd(45) + "<br>");
document.write(fnAdd(45,50) + "<br>");
document.write(fnAdd(45,50,55,60) + "<br>");
</script>
</head>

<body>
</body>
</html>

时间的操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Date对象</title>
<script language="javascript">
var myDate1 = new Date();	//运行代码前的时间
for(var i=0;i<3000000;i++);
var myDate2 = new Date();	//运行代码后的时间
alert(myDate2-myDate1);
</script>
</head>

<body>
</body>
</html>

?检索浏览器和操作系统

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>检测浏览器和操作系统</title>
<script language="javascript">
var sUserAgent = navigator.userAgent;
//检测Opera、KHTML
var isOpera = sUserAgent.indexOf("Opera") > -1;
var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1 || sUserAgent.indexOf("AppleWebKit") > -1;
//检测IE、Mozilla
var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera;
var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isKHTML;
//检测操作系统
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;
if(isOpera) document.write("Opera ");
if(isKHTML) document.write("KHTML ");
if(isIE) document.write("IE ");
if(isMoz) document.write("Mozilla ");
if(isWin) document.write("Windows");
if(isMac) document.write("Mac");
if(isUnix) document.write("Unix");
</script>
</head>

<body>
</body>
</html>

光标移动效果

<script language="javascript">
var x,y;		//鼠标当前在页面上的位置
var step=10;	//字符显示间距，为了好看，step=0则字符显示没有间距
var flag=0;
var message="Cascading Style Sheet";		//跟随鼠标要显示的字符串
message=message.split("");	//将字符串分割为字符数组

var xpos=new Array()		//存储每个字符的x位置的数组
for (i=0;i<message.length;i++) {
	xpos[i]=-50;
}
var ypos=new Array()		//存储每个字符的y位置的数组
for (i=0;i<message.length;i++) {
	ypos[i]=-50;
}

for (i=0;i<message.length;i++) {  //动态生成显示每个字符span标记,
	//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位
	document.write("<span id='span"+i+"' class='spanstyle'>");
	document.write(message[i]);
	document.write("</span>");
}

if (document.layers){
	document.captureEvents(Event.MOUSEMOVE);
}

function handlerMM(e){ //从事件得到鼠标光标在页面上的位置
	x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;
	y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
	flag=1;
}

function makesnake() {  //重定位每个字符的位置
	if (flag==1 && document.all) { //如果是IE
		for (i=message.length-1; i>=1; i--) {
			xpos[i]=xpos[i-1]+step;  //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔，
            //这样随着光标移动事件，就能得到一个动态的波浪状的显示效果
			ypos[i]=ypos[i-1];  //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动
		}
		xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
		ypos[0]=y
		//上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置
		// 该算法显示字符串就有点象人类的队伍一样， 
	
		for (i=0; i<=message.length-1; i++) {
			var thisspan = eval("span"+(i)+".style");  //妙用eval根据字符串得到该字符串表示的对象
			thisspan.posLeft=xpos[i];
			thisspan.posTop=ypos[i];
		}
	}
	else if (flag==1 && document.layers) {
		for (i=message.length-1; i>=1; i--) {
			xpos[i]=xpos[i-1]+step;
			ypos[i]=ypos[i-1];
		}
		xpos[0]=x+step;
		ypos[0]=y;
		for (i=0; i<=message.length-1; i++) {
			var thisspan = eval("document.span"+i);
			thisspan.left=xpos[i];
			thisspan.top=ypos[i];
		}
	}
	var timer=setTimeout("makesnake()",15)  //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document.onmousemove = handlerMM;
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>getElementsByTagName()</title>
<script language="javascript">
function searchDOM(){
	//放在函数内，页面加载完成后才用<body>的onload加载
	var oLi = document.getElementsByTagName("li");
	//输出长度、标签名称以及某项的文本节点值
	alert(oLi.length + " " +oLi[0].tagName + " " + oLi[3].childNodes[0].nodeValue);
	
	var oUl = document.getElementsByTagName("ul");
	var oLi2 = oUl[1].getElementsByTagName("li");
	alert(oLi2.length + " " +oLi2[0].tagName + " " + oLi2[1].childNodes[0].nodeValue);
}
</script>
</head>
<body onload="searchDOM()">
	<ul>客户端语言
		<li>HTML</li>
		<li>JavaScript</li>
		<li>CSS</li>
	</ul>
    <ul>服务器端语言
		<li>ASP.NET</li>
		<li>JSP</li>
		<li>PHP</li>
    </ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>getElementById()</title>
<script language="javascript">
function searchDOM(){
	var oLi = document.getElementById("cssLi");
	//输出标签名称以及文本节点值
	alert(oLi.tagName + " " + oLi.childNodes[0].nodeValue);
}
</script>
</head>
<body onload="searchDOM()">
	<ul>客户端语言
		<li>HTML</li>
		<li>JavaScript</li>
		<li id="cssLi">CSS</li>
	</ul>
    <ul>服务器端语言
		<li>ASP.NET</li>
		<li>JSP</li>
		<li>PHP</li>
    </ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>childNodes</title>
<script language="javascript">
function myDOMInspector(){
	var oUl = document.getElementById("myList");	//获取<ul>标记
	var DOMString = "";
	if(oUl.hasChildNodes()){						//判断是否有子节点
		var oCh = oUl.childNodes;
		for(var i=0;i<oCh.length;i++)				//逐一查找
			DOMString += oCh[i].nodeName + "\n";
	}
	alert(DOMString);
}
</script>
</head>
<body onload="myDOMInspector()">
	<ul id="myList">
		<li>糖醋排骨</li>
		<li>圆笼粉蒸肉</li>
		<li>泡菜鱼</li>
        <li>板栗烧鸡</li>
        <li>麻婆豆腐</li>
	</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>parentNode</title>
<script language="javascript">
function myDOMInspector(){
	var myItem = document.getElementById("myDearFood");
	alert(myItem.parentNode.tagName);
}
</script>
</head>
<body onload="myDOMInspector()">
	<ul>
		<li>糖醋排骨</li>
		<li>圆笼粉蒸肉</li>
		<li>泡菜鱼</li>
		<li id="myDearFood">板栗烧鸡</li>
		<li>麻婆豆腐</li>
	</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Siblings</title>
<script language="javascript">
function myDOMInspector(){
	var myItem = document.getElementById("myDearFood");
	//访问兄弟节点
	var nextListItem = myItem.nextSibling;
	var preListItem = myItem.previousSibling;
	alert(nextListItem.tagName +" "+ preListItem.tagName);
}
</script>
</head>
<body onload="myDOMInspector()">
    <ul>
		<li>糖醋排骨</li>
		<li>圆笼粉蒸肉</li>
		<li>泡菜鱼</li>
		<li id="myDearFood">板栗烧鸡</li>
		<li>麻婆豆腐</li>
	</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>getAttribute()</title>
<script language="javascript">
function myDOMInspector(){
	//获取图片
	var myImg = document.getElementsByTagName("img")[0];
	//获取图片title属性
	alert(myImg.getAttribute("title"));
}
</script>
</head>
<body onload="myDOMInspector()">
<img src="01.jpg" title="情人坡" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>setAttribute()</title>
<script language="javascript">
function changePic(){
	//获取图片
	var myImg = document.getElementsByTagName("img")[0];
	//设置图片src和title属性
	myImg.setAttribute("src","02.jpg");
	myImg.setAttribute("title","紫荆公寓");
}
</script>
</head>
<body>
<img src="01.jpg" title="情人坡" onclick="changePic()" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>创建新节点</title>
<script language="javascript">
function createP(){
	var oP = document.createElement("p");
	var oText = document.createTextNode("这是一段感人的故事");
	oP.appendChild(oText);
	document.body.appendChild(oP);
}
</script>
</head>
<body onload="createP()">
<p>事先写一行文字在这里，测试appendChild()方法的添加位置</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>删除节点</title>
<script language="javascript">
function deleteP(){
	var oP = document.getElementsByTagName("p")[0];
	oP.parentNode.removeChild(oP);		//删除节点
}
</script>
</head>
<body onload="deleteP()">
<p>这行文字你看不到</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>替换节点</title>
<script language="javascript">
function replaceP(){
	var oOldP = document.getElementsByTagName("p")[0];
	var oNewP = document.createElement("p");		//新建节点
	var oText = document.createTextNode("这是一个感人肺腑的故事");
	oNewP.appendChild(oText);
	oOldP.parentNode.replaceChild(oNewP,oOldP);		//替换节点
}
</script>
</head>
<body onload="replaceP()">
<p>这行文字被替换了</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>插入节点</title>
<script language="javascript">
function insertP(){
	var oOldP = document.getElementsByTagName("p")[0];
	var oNewP = document.createElement("p");		//新建节点
	var oText = document.createTextNode("这是一个感人肺腑的故事");
	oNewP.appendChild(oText);
	oOldP.parentNode.insertBefore(oNewP,oOldP);		//插入节点
}
</script>
</head>
<body onload="insertP()">
<p>插入到这行文字之前</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>文档碎片</title>
<style type="text/css">
<!--
p{
	padding:2px;
	margin:0px;
}
-->
</style>
<script language="javascript">
function insertPs(){
	var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple"];
	var oFragment = document.createDocumentFragment();	//创建文档碎片
	for(var i=0;i<aColors.length;i++){
		var oP = document.createElement("p");
		var oText = document.createTextNode(aColors[i]);
		oP.appendChild(oText);
		oFragment.appendChild(oP);		//将节点先添加到碎片中
	}
	document.body.appendChild(oFragment);	//最后一次性添加到页面
}
</script>
</head>
<body onload="insertPs()">
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>insertAfter()方法</title>
<script language="javascript">
function insertAfter(newElement, targetElement){
	var oParent = targetElement.parentNode;	//首先找到目标元素的父元素
	if(oParent.lastChild == targetElement)	//如果目标元素已经是最后一个子元素了
		oParent.appendChild(newElement);	//则直接用appendChild()加到子元素列表的最后
	else								//否则用insertBefore()插入到目标元素的下一个兄弟元素之前
		oParent.insertBefore(newElement,targetElement.nextSibling);
}
function insertP(){
	var oOldP = document.getElementById("myTarget");
	var oNewP = document.createElement("p");		//新建节点
	var oText = document.createTextNode("这是一个感人肺腑的故事");
	oNewP.appendChild(oText);
	insertAfter(oNewP,oOldP);		//插入节点
}
</script>
</head>
<body onload="insertP()">
	<p id="myTarget">插入到这行文字之后</p>
	<p>也就是插入到这行文字之前，但这行没有id，也可能不存在</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>innerHTML</title>
<script language="javascript">
function myDOMInnerHTML(){
	var myDiv = document.getElementById("myTest");
	alert(myDiv.innerHTML);		//直接显示innerHTML的内容
	//修改innerHTML，可直接添加代码
	myDiv.innerHTML = "<img src='01.jpg' title='情人坡'>";
}
</script>
</head>
<body onload="myDOMInnerHTML()">
<div id="myTest">
	<span>图库</span>
	<p>这是一行用于测试的文字</p>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>className属性</title>
<style type="text/css">
.myUL1{
	color:#0000FF;
	font-family:Arial;
	font-weight:bold;
}
.myUL2{
	color:#FF0000;
	font-family:Georgia, "Times New Roman", Times, serif;
}
</style>
<script language="javascript">
function check(){
	var oMy = document.getElementsByTagName("ul")[0];
	oMy.className = "myUL2";	//修改CSS类
}
</script>
</head>

<body>
	<ul onclick="check()" class="myUL1">
		<li>HTML</li>
		<li>JavaScript</li>
		<li>CSS</li>
	</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>追加CSS类别</title>
<style type="text/css">
.myUL1{
	color:#0000FF;
	font-family:Arial;
	font-weight:bold;
}
.myUL2{
	text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
	var oMy = document.getElementsByTagName("ul")[0];
	oMy.className += " myUL2";	//追加CSS类
}
</script>
</head>

<body>
	<ul onclick="check()" class="myUL1">
		<li>HTML</li>
		<li>JavaScript</li>
		<li>CSS</li>
	</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>冒泡型事件</title>
<script language="javascript">
function add(sText){
	var oDiv = document.getElementById("display");
	oDiv.innerHTML += sText;	//输出点击顺序
}
</script>
</head>

<body onclick="add('body<br>');">
	<div onclick="add('div<br>');">
		<p onclick="add('p<br>');">Click Me</p>
	</div>
	<div id="display"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多个监听函数</title>
<script language="javascript">
function fnClick1(){
	alert("我被fnClick1点击了");
}
function fnClick2(){
	alert("我被fnClick2点击了");
	//oP.detachEvent("onclick",fnClick1);		//删除监听函数1
}
var oP;
window.onload = function(){
	oP = document.getElementById("myP");	//找到对象
	oP.attachEvent("onclick",fnClick1);		//添加监听函数1
	oP.attachEvent("onclick",fnClick2);		//添加监听函数2
}
</script>
</head>

<body>
	<div>
		<p id="myP">Click Me</p>
	</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>事件的类型</title>
<script language="javascript">
function handle(oEvent){
	var oDiv = document.getElementById("display");
	if(window.event) oEvent = window.event;		//处理兼容性，获得事件对象
	if(oEvent.type == "click")					//检测事件名称
		oDiv.innerHTML += "你点击了我&nbsp&nbsp;";
	else if( oEvent.type == "mouseover")
		oDiv.innerHTML += "你移动到我上方了&nbsp&nbsp;";
		
}
window.onload = function(){
	var oImg = document.getElementsByTagName("img")[0];
	oImg.onclick = handle;
	oImg.onmouseover = handle;
}
</script>
</head>

<body>
	<img src="01.jpg" border="0">
    <div id="display"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>事件的目标</title>
<script language="javascript">
function handle(oEvent){
	if(window.event) oEvent = window.event;		//处理兼容性，获得事件对象
	var oTarget;
	if(oEvent.srcElement)				//处理兼容性，获取事件目标
		oTarget = oEvent.srcElement;
	else
		oTarget = oEvent.target;
	alert(oTarget.tagName);				//弹出目标的标记名称		
}
window.onload = function(){
	var oImg = document.getElementsByTagName("img")[0];
	oImg.onclick = handle;
}
</script>
</head>

<body>
	<img src="02.jpg" border="0">
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>鼠标事件</title>
<script language="javascript">
function handle(oEvent){
	if(window.event) oEvent = window.event;		//处理兼容性，获得事件对象
	var oDiv = document.getElementById("display");
	oDiv.innerHTML += oEvent.type + "<br>";		//输出事件名称
}
window.onload = function(){
	var oImg = document.getElementsByTagName("img")[0];
	oImg.onmousedown = handle;	//将鼠标事件除了mousemove外都监听
	oImg.onmouseup = handle;
	oImg.onmouseover = handle;
	oImg.onmouseout = handle;
	oImg.onclick = handle;
	oImg.ondblclick = handle;
}
</script>
</head>

<body>
	<img src="03.jpg" border="0" style="float:left; padding:0px 8px 0px 0px;">
    <div id="display"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>屏蔽鼠标右键</title>
<script language="javascript">
function block(oEvent){
	if(window.event)
		oEvent = window.event;
	if(oEvent.button == 2)
		alert("鼠标右键不可用");
}
document.onmousedown = block;
</script>
</head>

<body>
	<p>屏蔽鼠标右键</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>屏蔽鼠标右键</title>
<script language="javascript">
function block(oEvent){
	if(window.event){
		oEvent = window.event;
		oEvent.returnValue = false;	//取消默认事件
	}else
		oEvent.preventDefault();	//取消默认事件
}
document.oncontextmenu = block;
</script>
</head>

<body>
	<p>屏蔽鼠标右键</p>
</body>
</html>

<script language="javascript">
function myDelete(){
	var oTable = document.getElementById("member");
	//删除该行
	this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
window.onload=function(){
	var oTable = document.getElementById("member");
	var oTd;
	//动态添加delete链接
	for(var i=1;i<oTable.rows.length;i++){
		oTd = oTable.rows[i].insertCell(5);
		oTd.innerHTML = "<a href='#'>delete</a>";
		oTd.firstChild.onclick = myDelete;	//添加删除事件
	}
}
</script>

<script language="javascript">
var oInputField;	//考虑到很多函数中都要使用
var oPopDiv;		//因此采用全局变量的形式
var oColorsUl;
var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple","antiquewith","blanchedalmond","blueviolet","beige","burlywood","bisque","cadetblue","saddlebrown","royalblue","rosybrown","orengered","olivedrab","powderblue","peachpuff","papayawhip","paleturquoise","palevioletred","palegreen","navyblue","navajowhite","palegodenrod","violetred","yellowgreen","tomato","turquoise","thistle","springgreen","steelblue","salmon","scarlet","silver","violet","snow","tan","chartreuse","khaki","mediumslateblue","mediumvioletred","oldlace","maroom","goldenrod","wheat","whitesmoke","moccasin","mistyrose","mintcream","midnightblue","dimgray","darksalmon","slategray","skyblue","sienna","seashell","seagreen","sandybrown","gold","mediumturquoise","navy","mediumspringgreen","mediumseagreen","mediumpurpul","peru","mediumorchid","mediumblue","mediumaquamarine","maroon","limegreen","lightyellow","lightsteelblue","magenta","lightslateblue","lightslategray","lightskyblue","inen","lightseagreen","lightsalmon","lightpink","lightgray","lightgreen","lightgodenrodyellow","indianred","lavender","lightblue","lavenderblush","lightcoral","lightcyan","lightgodenrod","hotpink","greenyellow","lemonchiffon","lawngreen","deepskyblue","honeydew","golenrod","forestgreen","gostwhite","gainsboro","firebrick","dodgerblue","darkturquoise","darkslateblue","darkslategray","darkseagreen","darkred","darkorchid","darkorenge","darkviolet","floralwhite","cyan","darkgray","cornsilk","darkolivegreen","darkgoldenrod","darkblue","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue"];
aColors.sort();	//按字母排序，使显示结果更友好
function initVars(){
	//初始化变量
	oInputField = document.forms["myForm1"].colors;
	oPopDiv = document.getElementById("popup");
	oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
	//清除提示内容
	for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
		oColorsUl.removeChild(oColorsUl.childNodes[i]);
	oPopDiv.className = "hide";
}
function setColors(the_colors){
	//显示提示框，传入的参数即为匹配出来的结果组成的数组
	clearColors();	//每输入一个字母就先清除原先的提示，再继续
	oPopDiv.className = "show";
	var oLi;
	for(var i=0;i<the_colors.length;i++){
		//将匹配的提示结果逐一显示给用户
		oLi = document.createElement("li");
		oColorsUl.appendChild(oLi);
		oLi.appendChild(document.createTextNode(the_colors[i]));

		oLi.onmouseover = function(){
			this.className = "mouseOver";	//鼠标经过时高亮
		}
		oLi.onmouseout = function(){
			this.className = "mouseOut";	//离开时恢复原样
		}
		oLi.onclick = function(){
			//用户点击某个匹配项时，设置输入框为该项的值
			oInputField.value = this.firstChild.nodeValue;
			clearColors();	//同时清除提示框
		}
	}
}
function findColors(){
	initVars();		//初始化变量
	if(oInputField.value.length > 0){
		var aResult = new Array();		//用于存放匹配结果
		for(var i=0;i<aColors.length;i++)	//从颜色表中找匹配的颜色
			//必须是从单词的开始处匹配
			if(aColors[i].indexOf(oInputField.value) == 0)
				aResult.push(aColors[i]);	//压入结果
		if(aResult.length>0)	//如果有匹配的颜色则显示出来
			setColors(aResult);
		else					//否则清除，用户多输入一个字母
			clearColors();		//就有可能从有匹配到无，到无的时候需要清除
	}		
	else
		clearColors();	//无输入时清除提示框（例如用户按del键）
}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>attr(name,value)方法</title>
<style type="text/css">
<!--
button{
	border:1px solid #950074;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function DisableBack(){
	$("button:gt(0)").attr("disabled","disabled");
}
</script>
</head>
<body>
	<button onclick="DisableBack()">第一个Button</button>&nbsp;
	<button>第二个Button</button>&nbsp;
	<button>第三个Button</button>&nbsp;
</body>
</html>

???

css 操作

外部声明

<style>
<!--
h2{
	font-family:黑体;
	color:#FF0000;
}
-->
</style>

行内操作

<body>
	<p style="color:#0000FF; font-size:18px; font-weight:bold;">CSS内容1</p>
	<p style="color:#000000; text-decoration:underline; font-style:italic;">正文CSS2</p>
	<p style="color:#FF33CC; font-size:28px; font-weight:bold;">CSS正文内容3</p>
</body>

?外部声明

<style type="text/css">
<!--
p{
	color:#FF33CC;
	text-decoration:underline;
	font-style:italic;
	font-size:28px;
}
-->
</style>

?外部链接

<link href="1.css" type="text/css" rel="stylesheet">

外部导入

<style type="text/css">
<!--
@import url(1.css);
-->
</style>

类选择器

<!--
.first{
	color:blue;			/* 蓝色 */
	font-size:17px;		/* 文字大小 */
}
.second{
	color:red;			/* 红色 */
	font-size:20px;		/* 文字大小 */
}
.third{
	color:cyan;			/* 青色 */
	font-size:23px;		/* 文字大小 */
}
-->
</style>

组合选择器

<style type="text/css">
<!--
h4{						/* 标记选择器 */
	color:red;
	font-size:18px;
}
h4.special{				/* 标记.类别选择器 */
	color:blue;			/* 蓝色 */
	font-size:24px;		/* 文字大小 */
}
.special{				/* 类别选择器 */
	color:green;
}
-->
</style>

?id选择器

<style type="text/css">
<!--
#one{
	font-weight:bold;		/* 粗体 */
}
#two{
	font-size:31px;			/* 字体大小 */
	color:#999900;			/* 颜色 */
}
-->
</style>

并列选择器

<style type="text/css">
<!--
h1, h2, h3, h4, h5, p{			/* 集体声明 */
	color:purple;				/* 文字颜色 */
	font-size:14px;				/* 字体大小 */
}
h2.special, .special, #one{		/* 集体声明 */
	text-decoration:underline;	/* 下划线 */
}
-->
</style>

嵌套选择器

<style type="text/css">
<!--
p b{							/* 嵌套声明 */
	color:maroon;				/* 颜色 */
	text-decoration:underline;	/* 下划线 */
	font-size:30px;				/* 文字大小 */
}
-->
</style>

子选择器

<style type="text/css">
ul.myList > li > a{			/* 子选择器 */
	text-decoration:none;	/* 没有下划线 */
	color:#336600;
}
</style>

属性选择器

<style type="text/css">
a[title=CSS1]{
	text-decoration:none;	/* 没有下划线 */
	color:#336600;
}
</style>

?字体的基本操作

<style type="text/css">
p{
	font-family:黑体;				/* 文字字体 */
	font-size:35px;					/* 文字大小 */
	color:#0033CC;					/* 颜色 */
	font-weight:bold;				/* 粗体 */
	font-style:italic;				/* 斜体 */
	text-decoration:line-through;	/* 删除线 */
}
</style>

line-height 的操作

<style>
<!--
p.one{
	font-size:10pt;
	line-height:8pt;	/* 行间距，绝对数值，行间距小于字体大小 */
}
p.second{ font-size:18px; }
p.third{ font-size:10px; }
p.second, p.third{
	line-height: 1.5em;	/* 行间距，相对数值，1.5倍行距 */
}
-->
</style>

首字母带小写的小操作

<style>
<!--
body{
	background-color:#564700;	/* 背景色 */
}
p{
	font-size:15px;				/* 文字大小 */
	color:#FFFFFF;				/* 文字颜色 */
}
p span{
	font-size:60px;				/* 首字大小 */
	float:left;					/* 首字下沉 */
	padding-right:5px;			/* 与右边的间隔 */
	font-weight:bold;			/* 粗体字 */
	font-family:黑体;			/* 黑体字 */
	color:yellow;				/* 字体颜色 */
}
-->
</style>

图片的边框

<style>
<!--
img.test1{
	border-style:dotted;	/* 点画线 */
	border-color:#FF9900;	/* 边框颜色 */
	border-width:6px;		/* 边框粗细 */
}
img.test2{
	border-style:dashed;	/* 虚线 */
	border-color:#000088;	/* 边框颜色 */
	border-width:2px;		/* 边框粗细 */
}
-->
</style>

图片围绕

img{
	float:left;					/* 文字环绕图片 */
}

背景图片

<style>
<!--
body{
	background-image:url(bg1.jpg);	/* 页面背景图片 */
}
-->
</style>

按钮超链接

<html>
<head>
<title>按钮超链接</title>
<style>
<!--
a{										/* 统一设置所有样式 */
	font-family: Arial;
	font-size: .8em;
	text-align:center;
	margin:3px;
}
a:link, a:visited{						/* 超链接正常状态、被访问过的样式 */
	color: #A62020;
	padding:4px 10px 4px 10px;
	background-color: #ecd8db;
	text-decoration: none;
	border-top: 1px solid #EEEEEE;		/* 边框实现阴影效果 */
	border-left: 1px solid #EEEEEE;
	border-bottom: 1px solid #717171;
	border-right: 1px solid #717171;
}
a:hover{								/* 鼠标经过时的超链接 */
	color:#821818;						/* 改变文字颜色 */
	padding:5px 8px 3px 12px;			/* 改变文字位置 */
	background-color:#e2c4c9;			/* 改变背景色 */
	border-top: 1px solid #717171;		/* 边框变换，实现“按下去”的效果 */
	border-left: 1px solid #717171;
	border-bottom: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE;
}
-->
</style>
</head>
<body>
	<a href="#">首页</a>
	<a href="#">一起走到</a>
	<a href="#">从明天起</a>
	<a href="#">纸飞机</a>
	<a href="#">下一站</a>
	<a href="#">门</a>
	<a href="#">其它</a>
</body>
</html>

无需表单的列表

<html>
<head>
<title>无需表格的菜单</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	width:200px;
	font-family:Arial;
}
#navigation ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation li {
	border-bottom:1px solid #ED9F9F;	/* 添加下划线 */
}
#navigation li a{
	display:block;						/* 区块显示 */
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #711515;		/* 左边的粗红边 */
	border-right:1px solid #711515;		/* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
	background-color:#c11136;
	color:#FFFFFF;
}
#navigation li a:hover{					/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}
-->
</style>
</head>
<body>
<div id="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Sports</a></li>
		<li><a href="#">Weather</a></li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html>

?div 操作

<style type="text/css">
<!--
div{
	font-size:18px;						/* 字号大小 */
	font-weight:bold;					/* 字体粗细 */
	font-family:Arial;					/* 字体 */
	color:#FFEEEE;						/* 颜色 */
	background-color:#001166;			/* 背景颜色 */
	text-align:center;					/* 对齐方式 */
	width:300px;						/* 块宽度 */
	height:100px;						/* 块高度 */
}
-->
</style>

float的使用

<style type="text/css">
<!--
body{
	margin:15px;
	font-family:Arial;
	font-size:12px;
}
.father{
	background-color:#fffea6;
	border:1px solid #111111;
	padding:25px;				/* 父块的padding */
}
.son1{
	padding:10px;				/* 子块son1的padding */
	margin:5px;					/* 子块son1的margin */
	background-color:#70baff;
	border:1px dashed #111111;
	float:left;					/* 块son1左浮动 */	
}
.son2{
	padding:5px;
	margin:0px;
	background-color:#ffd270;
	border:1px dashed #111111;
}
-->
</style>

?absoluttion的使用

<style type="text/css">
<!--
body{
	margin:10px;
	font-family:Arial;
	font-size:13px;
}
#father{
	background-color:#a0c8ff;
	border:1px dashed #000000;
	position:relative;
	width:100%;
	height:100%;
}
#block{
	background-color:#fff0ac;
	border:1px dashed #000000;
	padding:10px;
	position:absolute;		/* absolute绝对定位 */
	left:20px;				/* 块的左边框离页面左边界20px */
	top:40px;				/* 块的上边框离页面上边界40px */
}
-->
</style>

?relative的使用

<style type="text/css">
<!--
body{
	margin:10px;
	font-family:Arial;
	font-size:13px;
}
#father{
	background-color:#a0c8ff;
	border:1px dashed #000000;
	width:100%; height:100%;
	padding:5px;
}
#block1{
	background-color:#fff0ac;
	border:1px dashed #000000;
	padding:10px;
	position:relative;		/* relative相对定位 */
	left:15px;				/* 子块的左边框距离它原来的位置15px */
	top:10%;
}
-->
</style>

?z-index 出现叠加效果

<style type="text/css">
<!--
body{
	margin:10px;
	font-family:Arial;
	font-size:13px;
}
#block1{
	background-color:#fff0ac;
	border:1px dashed #000000;
	padding:10px;
	position:absolute;
	left:20px;
	top:30px;
	z-index:1;					/* 高低值1 */
}
#block2{
	background-color:#ffc24c;
	border:1px dashed #000000;
	padding:10px;
	position:absolute;
	left:40px;
	top:50px;
	z-index:0;					/* 高低值0 */
}
#block3{
	background-color:#c7ff9d;
	border:1px dashed #000000;
	padding:10px;
	position:absolute;
	left:60px;
	top:70px;
	z-index:-1;					/* 高低值-1 */
}
-->
</style>

1 楼 greatwqs 2011-05-15

很基础! 很好!

2 楼 chenhailong 2011-05-15

greatwqs 写道

很基础! 很好!

我还没写完那你就回复。。。嘿嘿

3 楼 chenhailong 2011-05-15

下面才是重点哦