JavaScript 大量事例

chenhailong · 发表于 2013-2-8 00:55:23

嘿嘿。今天没干什么。就是写了大量的事例，累啊。。。放到网上把。也对自己的成果感到欣慰。。。现在就给大家欣赏一下
还有就是怎么样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;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、KHTMLvar isOpera = sUserAgent.indexOf("Opera") > -1;var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1 || sUserAgent.indexOf("AppleWebKit") > -1;//检测IE、Mozillavar 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=-50;}var ypos=new Array()//存储每个字符的y位置的数组for (i=0;i<message.length;i++) {ypos=-50;}for (i=0;i<message.length;i++) {  //动态生成显示每个字符span标记,//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位document.write("<span id='span"+i+"' class='spanstyle'>");document.write(message);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) { //如果是IEfor (i=message.length-1; i>=1; i--) {xpos=xpos[i-1]+step;  //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔，          //这样随着光标移动事件，就能得到一个动态的波浪状的显示效果ypos=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;thisspan.posTop=ypos;}}else if (flag==1 && document.layers) {for (i=message.length-1; i>=1; i--) {xpos=xpos[i-1]+step;ypos=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;thisspan.top=ypos;}}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 ><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 ><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.nodeName + "\n";}alert(DOMString);}</script></head><body ><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 ><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 > <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 ><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="情人坡"  /></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 ><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 ><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 ><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 ><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"></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);oP.appendChild(oText);oFragment.appendChild(oP);//将节点先添加到碎片中}document.body.appendChild(oFragment);//最后一次性添加到页面}</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>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 ><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 ><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  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  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 ><div ><p >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);//添加监听函数1oP.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;elseoTarget = 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;//取消默认事件}elseoEvent.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.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);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));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.indexOf(oInputField.value) == 0)aResult.push(aColors);//压入结果if(aResult.length>0)//如果有匹配的颜色则显示出来setColors(aResult);else//否则清除，用户多输入一个字母clearColors();//就有可能从有匹配到无，到无的时候需要清除}elseclearColors();//无输入时清除提示框（例如用户按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"></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">function DisableBack(){$("button:gt(0)").attr("disabled","disabled");}</script></head><body><button >第一个Button</button>&nbsp;<button>第二个Button</button>&nbsp;<button>第三个Button</button>&nbsp;</body></html>
css 操作
外部声明
<style></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"></style> 外部链接
<link href="1.css" type="text/css" rel="stylesheet">
外部导入
<style type="text/css"></style>
类选择器
</style>
组合选择器
<style type="text/css"></style>
id选择器
<style type="text/css"></style>
并列选择器
<style type="text/css"></style>

嵌套选择器
<style type="text/css"></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></style>
首字母带小写的小操作
<style></style>
图片的边框
<style></style>

图片围绕
img{float:left;/* 文字环绕图片 */}
背景图片
<style></style>
按钮超链接
<html><head><title>按钮超链接</title><style></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></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"></style>
float的使用
<style type="text/css"></style> absoluttion的使用
<style type="text/css"></style> relative的使用
<style type="text/css"></style> z-index 出现叠加效果
<style type="text/css"></style>

		自动登录	找回密码
密码			立即注册