javascript 技术大全 不断更新中

Javascript 技巧大全

·字符串

1.声明

var myString = new String("Every good boy does fine.");

var myString = "Every good boy does fine.";

2.字符串连接

var myString = "Every " + "good boy " + "does fine.";

var myString = "Every "; myString += "good boy does fine.";

3.截取字符串

//截取第 6 位开始的字符

var myString = "Every good boy does fine.";

var section = myString.substring(6); //结果: "good boy does fine."

//截取第 0 位开始至第 10 位为止的字符

var myString = "Every good boy does fine.";

var section = myString.substring(0,10); //结果: "Every good"

//截取从第 11 位到倒数第 6 位为止的字符

var myString = "Every good boy does fine.";

var section = myString.slice(11,-6); //结果: "boy does"

//从第 6 位开始截取长度为 4 的字符

var myString = "Every good boy does fine.";

var section = myString.substr(6,4); //结果: "good"

4.转换大小写

var myString = "Hello";

var lcString = myString.toLowerCase(); //结果: "hello"

var ucString = myString.toUpperCase(); //结果: "HELLO"

5.字符串比较

var aString = "Hello!";

var bString = new String("Hello!");

if( aString == "Hello!" ){ } //结果: true

if( aString == bString ){ } //结果: true

if( aString === bString ){ } //结果: false (两个对象不同,尽管它们的值相同)

6.检索字符串

var myString = "hello everybody.";// 如果检索不到会返回-1,检索到的话返回在该串中的起始位置

if( myString.indexOf("every") > -1 ){ } //结果: true

7.查找替换字符串

var myString = "I is your father.";

var result = myString.replace("is","am"); //结果: "I am your father."

8.特殊字符:

"b : 后退符 "t : 水平制表符

"n : 换行符 "v : 垂直制表符

"f : 分页符 "r : 回车符

"" : 双引号 "' : 单引号

"" : 反斜杆

9.将字符转换成Unicode编码

var myString = "hello";

var code = myString.charCodeAt(3); //返回"l"的Unicode编码(整型)

var char = String.fromCharCode(66); //返回Unicode为66的字符

10.将字符串转换成URL编码

var myString = "hello all";

var code = encodeURI(myString); //结果: "hello%20all"

var str = decodeURI(code); //结果: "hello all"

//相应的还有: encodeURIComponent() decodeURIComponent()

11.将字符串转换成base64编码

// base64Encode() base64Decode() 用法同上

//-----------------------------------------------------------------------

·数字型(Number)

1.声明

var i = 1;

var i = new Number(1);

2.字符串与数字间的转换

var i = 1;

var str = i.toString(); //结果: "1"

var str = new String(i); //结果: "1"

i = parseInt(str); //结果: 1

i = parseFloat(str); //结果: 1.0

//注意: parseInt,parseFloat会把一个类似于"32G"的字符串,强制转换成32

3.判断是否为有效的数字

var i = 123; var str = "string";

if( typeof i == "number" ){ } //true

//某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number)

//请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!!

i = parseInt(str);

if( isNaN(i) ){ }

4.数字型比较

//此知识与[字符串比较]相同

5.小数转整数

var f = 1.5;

var i = Math.round(f); //结果:2 (四舍五入)

var i = Math.ceil(f); //结果:2 (返回大于f的最小整数)

var i = Math.floor(f); //结果:1 (返回小于f的最大整数)

6.格式化显示数字

var i = 3.14159;

//格式化为两位小数的浮点数

var str = i.toFixed(2); //结果: "3.14"

//格式化为五位数字的浮点数(从左到右五位数字,不够补零)

var str = i.toPrecision(5); //结果: "3.1415"

7.X进制数字的转换

//不是很懂 -.-

var i = parseInt("0x1f",16);

var i = parseInt(i,10);

var i = parseInt("11010011",2);

8.随机数

//返回0-1之间的任意小数

var rnd = Math.random();

//返回0-n之间的任意整数(不包括n)

var rnd = Math.floor(Math.random() * n)

//-----------------------------------------------------------------------

·Math对象

1. Math.abs(num) : 返回num的绝对值

2. Math.acos(num) : 返回num的反余弦值

3. Math.asin(num) : 返回num的反正弦值

4. Math.atan(num) : 返回num的反正切值

5. Math.atan2(y,x) : 返回y除以x的商的反正切值

6. Math.ceil(num) : 返回大于num的最小整数

7. Math.cos(num) : 返回num的余弦值

8. Math.exp(x) : 返回以自然数为底,x次幂的数

9. Math.floor(num) : 返回小于num的最大整数

10.Math.log(num) : 返回num的自然对数

11.Math.max(num1,num2) : 返回num1和num2中较大的一个

12.Math.min(num1,num2) : 返回num1和num2中较小的一个

13.Math.pow(x,y) : 返回x的y次方的值

14.Math.random() : 返回0到1之间的一个随机数

15.Math.round(num) : 返回num四舍五入后的值

16.Math.sin(num) : 返回num的正弦值

17.Math.sqrt(num) : 返回num的平方根

18.Math.tan(num) : 返回num的正切值

19.Math.E : 自然数(2.718281828459045)

20.Math.LN2 : 2的自然对数(0.6931471805599453)

21.Math.LN10 : 10的自然对数(2.302585092994046)

22.Math.LOG2E : log 2 为底的自然数(1.4426950408889634)

23.Math.LOG10E : log 10 为底的自然数(0.4342944819032518)

24.Math.PI : π(3.141592653589793)

25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476)

26.Math.SQRT2 : 2的平方根(1.4142135623730951)

//-----------------------------------------------------------------------

·日期型(Date)

1.声明

var myDate = new Date(); //系统当前时间

var myDate = new Date(yyyy, mm, dd, hh, mm, ss);

var myDate = new Date(yyyy, mm, dd);

var myDate = new Date("monthName dd, yyyy hh:mm:ss");

var myDate = new Date("monthName dd, yyyy");

var myDate = new Date(epochMilliseconds);

2.获取时间的某部份

var myDate = new Date();

myDate.getYear(); //获取当前年份(2位)

myDate.getFullYear(); //获取完整的年份(4位,1970-????),一般都要用full，防止FF出错

myDate.getMonth(); //获取当前月份(0-11,0代表1月)

myDate.getDate(); //获取当前日(1-31)

myDate.getDay(); //获取当前星期X(0-6,0代表星期天)

myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)

myDate.getHours(); //获取当前小时数(0-23)

myDate.getMinutes(); //获取当前分钟数(0-59)

myDate.getSeconds(); //获取当前秒数(0-59)

myDate.getMilliseconds(); //获取当前毫秒数(0-999)

myDate.toLocaleDateString(); //获取当前日期

myDate.toLocaleTimeString(); //获取当前时间

myDate.toLocaleString( ); //获取日期与时间

3.计算之前或未来的时间

var myDate = new Date();

myDate.setDate(myDate.getDate() + 10); //当前时间加10天

//类似的方法都基本相同,以set开头,具体参考第2点

4.计算两个日期的偏移量

var i = daysBetween(beginDate,endDate); //返回天数

var i = beginDate.getTimezoneOffset(endDate); //返回分钟数

5.检查有效日期

//checkDate() 只允许"mm-dd-yyyy"或"mm/dd/yyyy"两种格式的日期

if( checkDate("2006-01-01") ){ }

//正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种)

var r = /^("d{2}|"d{4})["/-]"d{1,2}["/-]"d{1,2}$/;

if( r.test( myString ) ){ }

//-----------------------------------------------------------------------

·数组(Array)

1.声明

var arr = new Array(); //声明一个空数组

var arr = new Array(10); //声明一个10个长度的数组

var arr = new Array("Alice", "Fred", "Jean"); //用值初始化数组

var arr = ["Alice", "Fred", "Jean"]; //用值初始化数组

var arr = [["A","B","C"][1,2,3]]; //声明一个二(多)维数组

2.数组的访问

arr[0] = "123"; //赋值

var str = arr[0]; //获取

arr[0][0] = "123"; //多维数组赋值

3.数组与字符串间的转换

var arr = ["A","B","C","D"]; //声明

//数组按分隔符转换成字符串

var str = arr.join("|"); //结果: "A|B|C|D"

//字符串切割成数组

arr = str.split("|");

4.遍历数组

for( var i=0; i<arr.length; i++ ){ alert(arr[i]); }

5.排序

var arr = [12,15,8,9];

arr.sort(); //结果: 8 9 12 15

6.组合与分解数组

var arr1 = ["A","B","C","D"];

var arr2 = ["1","2","3","4"];

//奖两个数组组合成一个新的数组

var arr = arr1.concat(arr2); //结果: ["A","B","C","D","1","2","3","4"]

//将一个数组切成两个数组(参数1:起始索引,参数2:切割长度)

var arr3 = arr.splice(1,3); //结果: arr3:["B","C","D"] arr["A","1","2","3","4"]

//将一个数组切成两个数组,并在原数组补新值

var arr4 = arr.splice(1,3,"AA"); //结果: arr4:["B","C","D"] arr["A","AA","1","2","3","4"]

//-----------------------------------------------------------------------

·自定义对象

1.声明:

function myUser(uid,pwd){

this.uid = uid;

this.pwd = pwd || "000000"; //默认值

this.show = showInfo; //方法

}

//下面的函数不是自定义对象,是自定义对象的方法.继续看下去就明白了

function showInfo(){

alert("用户名:" + this.uid + ",密码:" + this.pwd)

}

2.实例化:

var user = new myUser("user","123456");

var user = {uid:"user",pwd:"123456"};

3.获取与设置

alert("用户名是:" + user.uid); //get

user.uid = "newuser"; //set

user.show(); //调用show()方法

//-----------------------------------------------------------------------

·变量 函数 流程控制

1.变量

var i = 1;

var i = 1, str = "hello";

2.函数

function funName(){

//do something.

}

function funName(param1[,paramX]){

//do something.

}

3.嵌套函数

//某种情况,你需要创建一个函数本身所独有的函数.

function myFunction(){

//do something.

privateFunction();

function privateFunction(){

//do something.

}

}

4.匿名函数

var tmp = function(){ alert("only test."); }

tmp();

5.延迟函数调用

var tId = setTimeout("myFun()",1000); //延迟1000毫秒后再调用myFun()函数

fucntion myFun(){

//do something

clearTimeout(tId); //销毁对象

}

6.流程控制

if( condition ){ }

if( condition ){ } else{ }

if( condition ){ } else if( condition ){ } else{ }

switch( expression ){

case valA : statement; break;

case valB : statement; break;

default : statement; break;

}

7.异常捕获

try{ expression } catch(e){ } finally{ }

//不处理任何异常

window.onerror = doNothing;

function doNothing(){ return true; }

//异常类可用的属性

Description : 异常描述(IE,NN)

fileName : 异常页面URI(NN)

lineNumber : 异常行数(NN)

message : 异常描述(IE,NN)

name : 错误类型(IE,NN)

number : 错误代码(IE)

//错误信息(兼容所有浏览器)

try{ }

catch(e){

var msg = (e.message) ? e.message : e.description;

alert(msg);

}

8.加快脚本的执行速度需要注意的几点

-避免使用 eval() 函数

-避免使用 with 关键字

-将重复的表达式赋值精简到最小

-在较大的对象中使用索引来查找数组

-减少 document.write() 的使用

//-----------------------------------------------------------------------

·浏览器特征( navigator )

1.浏览器名称

//IE : "Microsoft Internet Explorer"

//NS : "Netscape"

var browserName = navigator.appName;

判断IE浏览器版本：if（navigator.userAgent.indexOf("MSIE6.0")>0）{…} // "MSIE7.0" "MSIE"

2.浏览器版本

var browserVersion = navigator.appVersion;

3.客户端操作系统

var isWin = ( navigator.userAgent.indexOf("Win") != -1 );

var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );

var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );

4.判断是否支持某对象,方法,属性

//当一个对象,方法,属性未定义时会返回undefined或null等,这些特殊值都是false

if( document.images ){ }

if( document.getElementById ){ }

5.检查浏览器当前语言

if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }

6.检查浏览器是否支持Cookies

if( navigator.cookieEnabled ){…}

//-----------------------------------------------------------------------

·控制浏览器窗口( window )

1.设置浏览器的大小

window.resizeTo(800, 600); //将浏览器调整到800X600大小

window.resizeBy(50, -10); //在原有大小上改变增大或减小窗口大小

2.调整浏览器的位置

window.moveTo(10, 20); //将浏览器的位置定位到X:10 Y:20

window.moveBy(0, 10); //在原有位置上移动位置(偏移量)

3.创建一个新的窗口

var win = window.open("about.htm","winName","height=300,width=400");

//参数

alwaysLowered //始终在其它浏览器窗口的后面(NN)

alwaysRaised //始终在其它浏览器窗口的前面(NN)

channelMode //是否为导航模式(IE)

copyhistory //复制历史记录至新开的窗口(NN)

dependent //新窗口随打开它的主窗口关闭而关闭(NN)

fullscreen //全屏模式(所有相关的工具栏都没有)(IE)

location //是否显示地址栏(NN,IE)

menubar //是否显示菜单栏(NN,IE)

scrollbars //是否显示滚动条(NN,IE)

status //是否显示状态栏(NN,IE)

toolbar //是否显示工具栏(NN,IE)

directories //是否显示链接栏(NN,IE)

titlebar //是否显示标题栏(NN)

hotkeys //显示菜单快捷键(NN)

innerHeight //内容区域的高度(NN)

innerWidth //内容区域的宽度(NN)

resizable //是否可以调整大小(NN,IE)

top //窗口距离桌面上边界的大小(NN,IE)

left //窗口距离桌面左边界的大小(NN,IE)

height //窗口高度(NN,IE)

width //浏览器的宽度

4.与新窗口通讯

win.focus(); //让新窗口获得焦点

win.document.write("abc"); //在新窗口上操作

win.document.close(); //结束流操作

opener.close();

5.模式窗口

window.showModalDialog("test.htm",dialogArgs,"param"); //传递对象

window.showModelessDialog("test.htm",myFunction,"param"); //传递函数

window.dialogArguments //对话框访问父窗口传递过来的对象

window.returnValue //父窗口获取对话框返回的值

//参数

center //窗口居中屏幕

dialogHeight //窗口高度

dialogWidth //窗口宽度

dialogTop //窗口距离屏幕的上边距

dialogLeft //窗口距离屏幕的左边距

edge //边框风格(raised|sunken)

help //显示帮助按钮

resizable //是否可以改变窗口大小

status //是否显示状态栏

//例子

<script>

function openDialog(myForm) {

var result = window.showModalDialog("new.html",myForm,"center");

}

</script>

<form action="#" onsubmit="return false">

<input type="text" id="txtId">

<input type="button" id="btnChk" value="验证是否可用" onclick="openDialog(this.form);">

</form>

//另一个页面new.html

<script>

window.dialogArguments.btnChk.enabled = false; //将父窗口中的按钮设置为不可用

//do something to check the Id.

window.write("用户ID: " + window.dialogArguments.txtId.value + " 可使用!");

//获取文本框的值

</script>

//-----------------------------------------------------------------------

·管理框架网页( frames )

1.创建一个框架架构网页

<html>

<frameset rows="50, *">

<frame name="header" src="header.html">

<frame name="main" src="main.html">

</frameset>

</html>

<iframe width="500px" height="20px" align="center" scrolling="no" frameborder="0" src="a.html" allowtransparency="true"></iframe>

//a.html页面background:url(a.gif) transparent no-repeate 2px 9px; //iframe页面背景透明

2.访问框架网页

window.frames[i]

window.frames["frameName"]

window.frameName

window.frames["frameName"].frames["frameName2"]

parent.frames["frameName"]

top.frames["frameName"]

3.将某一页面定向到某框架

<frame name="main" src="main.html">//框架主页index.html

//框架内容页面

<a href="new.html" target="main">

location = "new.html";

parent.frameName.location.href = "new.html";

top.frameName.location = "new.html";

4.强制不让其它框架引用某页面

if (top != self) {

top.location.href = location.href;

}

5.更改框架的大小

document.framesetName.rows = "50,*";

document.framesetName.cols = "50,*";

6.动态创建框架网页

var frag = document.createDocumentFragment( );

var newFrame= document.createElement("frame");

newFrame.id = "header";

newFrame.name = "header";

newFrame.src="header.html"

frag.appendChild(newFrame);

newFrame = document.createElement("frame");

newFrame.id = "main";

newFrame.name = "main";

newFrame.src="main.html"

frag.appendChild(newFrame);

document.getElementById("masterFrameset").rows = "50,*";

//-----------------------------------------------------------------------

·表单( forms )

1.访问表单

document.forms[0]

document.forms["myForm"]

document.myForm

document.all.myForm

document.getElementById("myForm")

document.forms[0].elements[0]

document.forms["myForm"].elements["myElement"]

document.myForm.myElement

2.让文本框自动获得焦点

//让名为myText的文本框在页面加载时自动获得焦点,并选中当前文本框的值

<body onload="document.myForm.myText.focus(); document.myForm.myText.select();">

3.通用的文本框验证函数

//验证是否为空

<input type="text" onchange="isEmpty(this)">

function isEmpty(obj){

if(obj.value == null || obj.value == "") alert("此字段不能为空");

}

//验证是否为数字

<input type="text" onchange="isNumber(this)">

function isNumber(obj){

var val = obj.value;

var r = /"w[0-9]{1,}/;

if( !r.test(val) ) alert("此字段必须为数字")

}

//验证是否长度符合

<input type="text" onchange="isLen7(this)">

function isLen7(obj){

if(obj.value.length != 7) alert("此字段长度必须为7位");

}

//验证有效E-Mail地址

<input type="text" onchange="isEmail(this)">

function isEmail(obj){

var val = obj.value;

var r = /^"w[0-9a-zA-Z."-]{3,}@"w[0-9a-zA-Z."-]{2,}."w[a-zA-Z.]{2,4}$/;

if( !r.test(val) ) alert("请输入有效的E-Mail地址");

}

4.阻止表单提交

<form action="#" onsubmit="return checkValue()"></form>

function checkValue(){

//do something to check the value.

return false;

}

5.改变表单提交的页面

<form action="#" onsubmit="chooseAction()"></form>

fucntion chooseAction(){

if(document.myForm.myCheckBox.checked) document.myForm.action ="a.asp";

else document.myForm.action = "b.asp";

}

6.阻止向文本框输入某些字符

<input type="text" onkeydown="checkKeyCode(event)">

fucntion checkKeyCode(evt){

evt = (evt) ? evt : event;

var c = (evt.charCode) ? evt.charCode : evt.keyCode;

if(c < 48 || c > 57){

alert("此字段只允许输入数字");

return false;

}

else return true;

}

7.回车后焦点跳到另一个输入控件

<input id="txt1" type="text" onkeypress="return focusNext(this,'txt2',event)">

<input id="txt2" type="text">

function focusNext(form,name,evt){

evt = (evt) ? evt : event;

var c = (evt.charCode) ? evt.charCode : evt.keyCode;

if(c == 13 || c == 3){

form.elements[name].focus();

return false;

}

else return true;

}

8.使某一控件不可用

document.myForm.myElement.disabled = true;

9.隐藏/显示某一控件

document.myForm.myElement.style.display = "block"; //显示

document.myForm.myElement.style.display = "none"; //隐藏

10.控制下拉框

//清空下拉框中的项

document.myForm.mySelect.options.length = 0;

//添加下拉框中的项

var item = new Option("myText","myValue");

document.myForm.mySelect.add(item);

//获取下拉框当前选中的值

var val = document.myForm.mySelect.value;

//-----------------------------------------------------------------------

·事件( Event )

1.事件介绍:

onabort //当用户阻止发送图片至客户端时触发

onblur //当控件失去焦点时触发

onchange //当控件失去焦点并且内容发生了改变时触发

onclick //当用户点击某控件时触发

ondblclick //当用户双击某控件时触发

onerror //当执行某脚本发生异常时触发

onfocus //当某控件获得焦点时触发

onkeydown //当用户按下键盘某个键时触发

onkeypress //当用户按下并松开键盘某个键时触发

onkeyup //当用户松开键盘某个键时触发

onload //用页面被加载完成后触发

onmousedown //当用户按下鼠标时触发

onmousemove //当用户移动鼠标时触发

onmouseout //当用户将鼠标移出某控件时触发

onmouseover //当用户将鼠标移入某控件时触发

onmouseup //当用户松开鼠标时触发

onmove //当用户移动浏览器窗口时触发

onreset //当用户点击表单"重置"按钮时触发

onresize //当用户改变浏览器窗口的大小时触发

onselect //当用户选中文本框内容时触发

onsubmit //当用户点击表单"提交"按钮时触发

onunload //当用户关闭浏览器时触发

//以下为IE独有的方法

onbeforecopy //当用户使用"复制"功能前触发

onbeforecut //当用户使用"剪切"功能前触发

onbeforepaste //当用户使用"粘贴"功能前触发

onbeforeprint //当用户使用"打印"功能前触发

oncontextmenu //当用户调出上下文菜单时触发

oncopy //当用户使用"复制"功能时触发(未复制)

oncut //当用户使用"剪切"功能时触发(未剪切)

ondrag //当用户拖动某控件前触发

ondragend //当用户拖动某控件后触发

ondragenter //当用户拖动某控件到当前控件上面后触发

ondragleave //当用户将某控件拖出当前控件时触发

ondragover //当用户将某控件拖出当前控件上面时触发

ondrop //当用户将某控件拖到当前控件后触发

2.浏览器事件兼容性

function funName(evt){

evt = (evt) ? evt : event;

if(evt){ //to do something }

}

3.动态为控件添加事件

document.getElementById("myControl").addEventListener("click",funName,false);

document.getElementById("myControl").onclick = funName;

4.页面加载后调用某函数

<body onload="funName(); funName2();">调用多个函数<body onload="functionName(); a(); b(); c();">

window.onload = funName;

5.确定与点击事件相匹配的事件

//9.3和9.4 比较复杂.且不清楚事件是JS API还是自定义的

6.防止重复执行两次点击事件

//当第一次点击按钮后,将表单提交回服务器,然后submitForm()函数便指向blockIt()函数.

//除非页面重新加载..否则点击无效(无作用)

<input type="button" value="提交" onclick="submitForm()">

function submitForm(){

document.forms["myForm"].submit();

submitForm = blockIt;

reutrn false;

}

function blockIt(){

return false;

}

7.阻止用户点击鼠标右键或中键

function myFun(evt){

evt = (evt) ? evt : event;

if(evt.button || evt.button == 1 || evt.button == 2){ return false; }

else{ //do something }

}

8.阻止用户键入某些字符

function myFun(evt){

evt = (evt) ? evt : event;

var c = (evt.charCode) ? evt.charCode : evt.keyCode;

if(c < 48 || c > 57){ return false; }

else reutrn true;

}

9.获取当前鼠标指向的对象

function myFun(evt){

evt = (evt) ? evt : event;

var elem = (evt.target) ? evt.target : evt.srcElement;

//do something

}

10.特殊功能键

evt.ctrlKey evt.altKey evt.shiftKey

11.播放媒体文件

<object id="hiPing" width="1" height="1" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="#Version=6,0,0,0">

<param name="FileName" value="hi.wav">

<param name="AutoStart" value="false">

</object>

function playSound(id){

if(document.all[id].FileName){ document.all[id].Play(); }

}

//-----------------------------------------------------------------------

·页面导航

1.跳转至另一个页面

location = "newPage.html";

location.href = "newPage.html";

2.不记录历史记录的页面跳转

location.replace("newPage.html");

3.利用下拉框跳转页面

<select name="chooser" id="chooser" onchange="redirect()">

<option value="">Choose a Destination:</option>

<option value="index.html">Home</option>

<option value="products.html">Products</option>

<option value="support.html">Support</option>

<option value="contact.html">Contact Us</option>

</select>

function redirect(){

var t = document.all.chooser.value;

if(t){ location = t; }

}

4.利用Cookies保存用户数据

<body onunload="saveData()"> //要保存数据的页面

<body onload="readData()"> //新页面

function saveData(){

var data = document.forms[0].userName.value;

var expDate = getExpDate(180, 0, 0);

setCookie("userName", data, expDate);

}

function readData( ) {

var data = getCookie("userName");

document.forms[0].userName.value = data;

}

5.利用URL来保存用户数据

function goNext(url){

var data = document.forms[0].userName.value;

location.href = url + "?" + escape(data);

}

function readData( ) {

var srchString = unescape(location.search.substring(1,location.search.length));

if (srchString.length > 0){ document.forms[0].userName.value = srchString; }

}

6.创建一个自定义右键菜单

//菜单就自己画了,这里只说方法

function initContextMenus(){

if (document.body.addEventListener){

document.body.addEventListener("contextmenu", showContextMenu, true);

document.body.addEventListener("click", hideContextMenus, true);

}

else {

document.body.oncontextmenu = showContextMenu;

}

setContextTitles( );

}

//-----------------------------------------------------------------------

·管理样式 ( CSS )

1.三种嵌入样式表的方法:

//在头部统一声明样式

<style type="text/css"> body{ font-size:9pt; } </style>

//从外部嵌入一样式表文件

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

//直接在元素属性里定义

<p style="font-size:9pt"></p>

2.分配样式规则给某一元素

<style type="text/css">

<!-- tagName {styleProperty1:value1; styleProperty2:value2; ...} -->

</style>

3.自定义一种样式供一类元素使用

.myStyle { font-size:9pt; }

<p class="myStyle"></p>

4.自定义一种样式供单一元素使用

#myId { font-size:9pt; }

<p id="myId"></p>

5.页面加载后动态修改页面样式表链接

<link id="basicStyle" rel="stylesheet" rev="stylesheet" type="text/css" href="style1.css">

document.getElementById("basicStyle").href = "newstyle.css";

6.打开/关闭某个样式表

document.styleSheets[1].disabled = false;

7.动态设置/更改某一元素的样式

document.getElementById("myElement").className = "myStyle";

8.元素样式的优先级

Element << class << id << style

//原则上来讲,浏览器会使用最后的一种样式(就近原则)

//当同时给一元素设置id和class两种样式时,id的样式优先于class

//当同时给一元素设置class和style两种样式时,style优先于class

//当同时给一元素设置style和id两种样式时,style优先于id

<style>

.myStyle { font-size:10pt; }

#myId { font-size:11pt; }

</style>

<p id="myId" class="myStyle" style="font-size:12pt">123</p>

9.css选择符

子对象选择符 > //版本ie7+，只有直系儿子起作用

Eg：#test1 > p //对id是test1的div，它内部的属性标签是p的内容起作用。

相邻选择符 + //只对邻居有效果，对邻居的邻居无效果

Eg：#test5+p//对属性标签是p，对test的下一个如<p id="test6">的有效果

属性选择符 < a href="#" title="链接到其他页面">

Eg：a[href="#"]{……} a[title="链接到其他页面"]{……}

外站链接target="_blank" <a href="xx.html" title="outlink">outlink</a>

a[target="_blank"]{background:url() no-repeat center right}

[att^=val]开头包含 [att*=val]任何位置包含 [att$=val]结尾包含

a[href$=".zip"] a[href^="mailto"] a[href*="http://www.kx1d.com"]

伪类伪对象

Eg：a:link,a:visited,a:hover,a:active{………}

#text a:link, #text a:visited, #text a:hover, #text a:active{…}//text是大div

#childtext:link, #childtext:visited, #childtext:hover, #childtext:active{…}//小div

#style1:first-line{……}

#style1:first-letter{……}

10.hover对所有元素OK使用 // IE不要不支持，FF和Google浏览器支持

Eg：.divtest{background：…}

.divtest：hover{background：…}

//-----------------------------------------------------------------------

·动态更改对象的视觉效果

1.更改对象的字体样式

document.getElementById("myElement").style.color = "#EEEEEE";

document.getElementById("myElement").src = "**.html";

document.getElementById("myElement").className = "menu";

onmouseover="javascript:this.className=style2" onmouseout="javascript:this.className=style1"

//相应的属性

color : 字体的颜色

font : 字体的全局设置

fontfamily : 字体名称

fontSize : 字体大小(pt, px)

fontStretch : 字符间隔(px)

fontStyle : 字体的样式(normal, italic)

fontVariant : 字母大小常量(normal, small-caps)

fontWeight : 字体粗细(bold, bolder, lighter, normal)

textDecoration : 字体装饰(blink, line-through, none, overline, underline)

textTransform : 字母大小写(capitalize, lowercase, none, uppercase)

2.更改页面背景样式

document.body.background = "url(bg.gif) repeat fixed";

//相应的属性

background : 背景的全局设置

backgroundAttachment : 背景是否随滚动条滚动而滚动(fixed, scroll)

backgroundColor : 背景颜色

backgroundImage : 背景图片

backgroundPosition : 背景图片的位置(bottom, center, left, right, top)

backgroundRepeat : 背景图片是否重复或拉伸(no-repeat, repeat, repeat-x, repeat-y)

3.显示/隐藏某对象

document.getElementById("myElement").style.visibility = "hidden";//visible

document.getElementById("myElement").style.display = "none";

4.细调对象的透明度

document.getElementById("myElement").style.filter = "alpha(opacity=80)";

透明度写法filter:alpha(opacity=50); //IE opacity:0.5;//FF Google

//-----------------------------------------------------------------------

·布置HTML对象的位置

1.动态更改对象的位置

<div id="myDiv" style="position:absolute; left:100px; top:100px">Content Here</div>

document.getElementById("myDiv").style.top = "200px";

2.设置对象在页面上的层次关系

//值越大对象越前面

document.getElementById("myElement").style.zIndex = 123;

//-----------------------------------------------------------------------

·动态创建内容

1.页面加载时动态创建内容

<p>现在是：<script>var d = new Date(); document.write(d.toLocaleTimeString());</script></p>

2.动态重画页面

<input type="text" id="txtName"><input type="button" value="确定" onclick="rewritePage()">

<scritp>

function rewritePage(){

var user = document.getElementById("txtName").value;

var html = "<html><head><title>欢迎</title></head>";

html += "<body>欢迎您！" + user + "</body></html>";

document.write(html);

document.close();

}

</script>