Javascript知识精华
<script language="JavaScript" type="text/javascript" >
<!--
.
//-->
</script>
.language已经被弃用，但为了兼容旧版本浏览器而保留，所以建议同时使用这language和type两个
.<!--- //--> 的作用是使得不支持JavaScript的旧版本浏览器能忽略脚本内容
.<script src="xxx.js" language="JavaScript" type="text/javascript" charset="gb2312" ></script>
charset单独设置 xxx.js的字符编码
.利用DOM实现<body onload="alert('xxxx')" >
document.body.onload=function(){
alert("xxxx");
}
.变量
命名规则
可以由字母、下划线_、数字、$组成
必须以字母、下划线_、或$开头
变量名不能是关键字或保留字
推荐使用骆驼型命名法
可以使用var来声明变量，但一定要在使用之前声明
var a,b=1,c;
a=2;
c=4;
也可以不经过var声明而直接使用，这样和上面没有任何区别，只是会降低可读性
JavaScript是大小写敏感的
变量类型
undefined 未定义
null 空
boolean 布尔
string 字符串
number 数值
object 对象
var a="ddddd";
if("string" == typeof(a))
{
alert("==");
}
var b=false;
if("boolean" == typeof(b))
{
alert("==");
}
var f=null; //typeof(f) == "object"
if("undifined" == typeof(x))
{
alert("==");
}
类型转换
undefined、null、0、NaN、"" 都为false
object 总为true
强制转换成数字型
var b="33";
b+67; //3367
parseInt(b)+67; //100
parseFloat("333.98");
判断是否非数字 isNaN()
var a="xxxx";
alert(isNaN(a)); //true
判断一个数是否不是无穷大 isFinite()
var a=22;
alert(isFinite(a)); //true
判断是否润年
function isLeapYear(year_)
{
var year=parseInt(year_);
//if((0==year%400) || (0==year%4) && (0!=year%100)) { // }
if(0 == year%400) //能被400整除是
return true;
elseif（0==year%4 && 0!=year%100) //
return true;
else
return false;
}
.switch()
switch(exp)
{
case 1:
case 2:
case 3:
//
break;
case 4:
//
break;
default:
//
break;
}
.for
for(var i=0; i++; i<100)
{
//
}
.将函数赋给一个变量或事件
doucment.body.onload = function(){
alert("load);
}
var max = function(a,b){
return (a)>(b)?(a):(b);
}
则可以通过max执行函数 max(4,5); //5
var global=123; //全局变量
function abc()
{
var local=global; //局部变量local用全局变量global赋值
}
.eval(string)函数
执行把参数string所表示的命令
var act="alert('ssssss')";
eval(act); //将执行alert("ssss")
.对url进行编码
escape(url);
unescape(url);
.日期
var objDate = new Date("January 12,2006 22:19:34");
var objDate = new Date("January 12,2006");
var objDate = new Date(2006,1,12,22,19,34);
var objDate = new Date(2006,1,12);
var objDate = new Date(1177663004); //自1970年来的秒数
objDate.getFullYear();
objDate.getYear();
objDate.getMonth();
objDate.getDate();
objDate.getDay();
objDate.getHours();
objDate.getMinutes();
objDate.getSeconds();
objDate.getMilliseconds();
objDate.getTime(); //返回从1970年来的毫秒数
objDate.setFullYear(2007);
objDate.setYear(07);
objDate.setMonth(12);
objDate.setDate(11);
objDate.setHours(23);
objDate.setMinutes(34);
objDate.setSeconds(56);
objDate.setMilliseconds(555); //0~999
objDate.setTime(1180195200000); //返回从1970年来的毫秒数
.Math
Math.E
Math.PI
Math.abs(x)
Math.ceil(x)
Math.floor(x)
Math.max(a,b,c,,valN)
Math.min(a,b,c,,valN)
Math.pow(x,y) //x的y次方
Math.random() //0~1之间的随机小数如 0.123535464
Math.round(78.67) //四舍5入
.数组
var arr = new array();
var arr = new array(10);
var arr = new array("a","b","c");
var arr = new array();
arr[]="1";
arr[]="2";
arr[]="3";
..
arr[9]="290";
arr[]="14";
.多维数组
var arr = new Array(4);
for(var i=0; i<arr.length; i++)
arr = new Array(6);
//访问
for(var i=0; i<arr.length; i++)
for(var j=0; j<arr[0].length; j++)
alert(arr[j]);
或
var arr = [[1,2,3], [4,5,6],[7,8,9]];
.数组方法
arr.toString(); //[1,2,3] 转到 "1,2,3" [[1,2,3], [4,5,6],[7,8,9]]; 转到 "1,2,3,4,5,6,7,8,9"
arr.concat(arg1, arg2, arg3,); //var arr=[1,2,3]; arr.concat("4","5","6"); //返回 1,2,3,4,5,6 而arr不受影响
arr.join(separator); //以separator为分隔符， 把数组转成字符串
arr.pop(); //删除数组最后一个元素
arr.push(arg1,arg2,arg3,.) //把arg1,arg2等等添加到数组尾部
arr.shift(); //删除第一元素
arr.slice(start, end); //返回数组中下标从start到end间的子数组
arr.sort(comparefunc); //对数组进行按func函数结果的排序
arr.unshift(arg1,arg2,) //把arg1,arg2等元素添加到数组头部
arr.splice(start, nums, arg1,arg2,); //把从start开始的nums个元素替换成 arg1,arg2,， 而不是对应替换
arr = [1,2,3,4,5,6];
arr.splice(0,0,9,22,33); // arr=[9,22,33,1,2,3,4,5,6]
arr.splice(1,3,9,22,33); // arr=[1,9,22,33,5,6] 把第1个到第3个元素2,3,4替换成9,22,33
.string字符串
var str="123456";
字符串长度
str.length
str.indexOf(substring,pos); //“abcdef”.indexOf("bc",1); 返回子串bc在串"abcdef"中的第一次出现下标
str.lastIndexOf(substring,pos); //“abcdef”.indexOf("bc",1); 返回子串bc在串"abcdef"中的最后一次出现下标
str.charAt(pos); //返回下标pos处的单个字符
str.charCodeAt(pos); //返回下标pos处的字符的ASCII码
str.slice(start, end); //返回从start到end之间的子串(不包含end处字符)
str.split(separator, len); //把串str以separator为分隔符切割成多个子符串数组，子串数组的最大长度
//"a,b,c,d".split(",") 返回["a","b","c","d"]
//"a,b,c,d".split(",", 2) 返回["a","b"]
//"a,b,c,d".split() 返回["a,b,c,d"]
//"a,b,c,d".split("") 返回["a",",""b",",",c",",","d"]
str.substr(start, length); //返回从start处的长为length子串
str.substring(start, end); //返回从start到end之间的子串(包含end处字符)
.字符串替换
str.replace(oldsubstr, newsubstr); //把串str中的oldsubstr子串替换为newsubstr子串 .字符串大小写转换
str.toLowerCase(); //把串str转为小写
str.toUpperCase(); //把串str转为大写
.正则表达式匹配
str.match(regExp) 搜索str中所有匹配正则表达式regExp的子串，并把他们组成一个数组返回
var arr=str.match(/\d+/);
for(var i=0; i<arr.length; i++)
alert(arr);
.search(regExp) 返回串str中第一个匹配regExp表达式的子串的索引位置
var str="aaabcbddabcfjkerabcrrsaa";
alert(str.search(/abc/g));
.获取浏览器信息
1)navigator对象
navigator.appCodeName //IE: Mozilla Firefox: Mozilla
navigator.appName //IE: Microsoft Internet Explorer Firefox: Netscape
(navigator.appVersion //IE: 4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) Firefox: 5.0 (X11; zh-CN)
navigator.cookieEnabled //IE: true/false Firefox: true/false
navigator.cpuClass //IE: x86 Firefox: undifined
navigator.language //IE: undifined Firefox: zh_CN
navigator.platform //IE: Win32 Firefox: Linux i686
navigator.userAgent //IE: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)
Firefox: Mozilla/5.0 (X11; U; Linux i686; zh-CN; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
function isIE()
{
return (navigator.userAgent.toLowerCase().indexOf("msie") >= 0);
}
function isFirefox()
{
return (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0);
}
2)location对像
window.location = "http://www.cnscn.org";
window.location.href = "http://www.cnscn.org";
window.location.assign("http://www.cnscn.org");
window.location.protocol 协议如 "http:" (注意IE和firefox都要带:即冒号 "http:")
window.location.hostname 域名或IP: www.a.com 或 192.168.1.1
window.location.host
window.location.pathname 如http://172.16.1.69/ajax/b.html?a=1&b=2 输出 /ajax/b.html
window.location.search 如http://172.16.1.69/ajax/b.html?a=1&b=2 输出 ?a=1&b=2 (即带?号)
window.location.href 如http://172.16.1.69/ajax/b.html?a=1 输出 http://172.16.1.69/ajax/b.html?a=1
window.location.port
window.location.hash
window.location.reload(boolean) 参数为true表示强制从服务器重新载入， 为false表示从缓存中重新载入
window.replace(url) 导航到url指定页面(和指定href相同)，但在浏览历史中替换当前页地址(和指定url不同)
3)history对象
history.back(); //相当于后退按钮
history.forward(); //相当于前进按钮
history.go(-2); //相当于点击两次后退按钮
4)document对象
document.anchors //<a name>书签标记数组 document.anchors[0].name
document.embeds //所有<embed>数组
document.forms //所有表单数组 document.forms[0].action
document.images //所有<img>数组 document.images[0].offsetWidth document.images[0].sttyle.width
document.links //所有<a href>数组 document.links[0].target
document.cookie //返回或设置cookie
document.domain //返回或设置文档默认域名
document.lastModified //文档最后一次修改日期
document.location //相当于window.location
document.referrer //返回来源页面
document.title //返回或设置文档标题
document.URL //返回或设置文档url
5)with
with(document){
write(cookie); //相当于 document.write(document.cookie)
write("abc");
write(URL);
}
.事件对象
function sayHello()
{
alert("hello");
}
doucment.onclick = sayHello; //把函数赋对对象事件
document.getElementById('img1').onclick = sayHello;
.attachEvent和addEventListener 方法绑定事件处理程序, 可以让一个事件有多个处理程序
element.addEventListener("enventName", 函数名, boolean ); //boolean: true表示事件处理模式是使用捕获模式, false 表示否
function func()
{
//
}
if(element.addEventListener){
element.addEventListener("onclick", func, false);
}
else
{
element.attachEvent("click", func, false);
}
.window.event对象 window可以省略，即使用event
它是处理按键、光标位置、触发事件的对象
IE:
event对象是个全局对象
function imgClick()
{
alert(event.srcElement.src);
}
<img src="a.jpg" onclick="imgClick" > //这样当点击图片时，就会产生event的相应属性或方法
Mozilla:
event对象必须被显式传递给事件处理程序, 因为它是当前局部对象而不是全局对像
function imgClick(evt)
{
alert(evt.target.src);
}
<img src="a.jpg" onclick="imgClick(event)" > //这样当点击图片时，就会产生event的相应属性或方法
.event对象的属性
IE Firefox
srcElement target 触发事件的元素
type type 事件类型
offsetX 无 元素的x坐标
offsetY 无 元素的y坐标
x layerX 定位元素的x坐标
y layerY 定位元素的y坐标
clientX clientX 窗口的x坐标
clientY clientY 窗口的y坐标
screenX screenX 屏幕的x坐标
screenY screenY 屏幕的y坐标
button button 鼠标按键
keyCode keyCode 键盘按键
shiftKey shiftKey
altKey altKey
ctrlKey ctrlKey
fromElement relatedTarget 上一级元素
toElement relatedTarget 下一级元素
<input type="text" size="20" name="title" id="title" value="" />
<script language="JavaScript">
//一定要放到<input的下方，否则找不到title对象
var obj=document.getElementById("title");
obj.onkeydown=function(evt)
{
evt=evt?evt:window.event;
if(13 == evt.keyCode || evt.ctlKey && 13 == evt.keyCode ) //如果是Enter或Ctrl+Enter
{
alert("ok");
}
}
</script>
.表单form
var frm=document.forms["submitform"];
var frm=document.forms[0];
frm.action
frm.elements
frm.encoding
frm.length
frm.method
frm.name
frm.target
frm.submit();
frm.reset();
onsubmit();
onreset();
frm.elements[0].type //text submit password select-one select-multiple
frm.elements[0].disabled = true; //false 创建只读表单域
.<input
<input type="text" readonly />
<input type="text" onfocus="this.focus()" onclick="alert(this.defaultValue)" value="xxxxxxx" />
<input type="text" onblur="this.blur()" />
onclick="func()"
onkeydown="func()"
onkeyup()="func()"
onkeypress()="func()"
onmouseover()="func()"
onmouseout()="func()"
onmousedown()="func()"
onmouseup()="func()"
onchange()="func()"
.使用select选中文本
<input type="text" onfocus="this.select()" onselect="alert('select')" value="xxxxxxx" />
.<select
objSelect.selectedIndex 当前选取项的索引
objSelect.options 选项数组
for(var i=0; i<objSelect.options.length; i++)
if(objSelect.options.selected)
{
alert(objSelect.options.value+objSelect.options.text);
//取消选中
objSelect.options.selected = false;
}
.在选项尾部添加一个option
objSelect.options[objSelect.length] = new Option("val", "text");
.替换选项n的值
objSelect.options[n] = new Option("val", "text");
<option value="val">text</option>
.删除一个option
objSelect.options=null;
.清空一个select
<select name='slt' id='slt' >
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
//正确清空方法
//每一循环都删除第一个元素，当循环结束时，元素也删除完了
//类似于栈的pop()即每次pop出栈顶即第一个元素
for(var i=0; i<len; i++)
objSelect.options[0]=null;
/*
//错误方法1: 将留下options[1]和options[3]
for(var i=0; i<len; i++)~~
objSelect.options=null;
//错误方法2: 将留下options[3]和options[4]
for(var i=0; i<objSelect.length; i++)
objSelect.options[0]=null;
*/
<!--
.//-->
</script>
.language已经被弃用，但为了兼容旧版本浏览器而保留，所以建议同时使用这language和type两个
.<!--- //--> 的作用是使得不支持JavaScript的旧版本浏览器能忽略脚本内容
.<script src="xxx.js" language="JavaScript" type="text/javascript" charset="gb2312" ></script>
charset单独设置 xxx.js的字符编码
.利用DOM实现<body onload="alert('xxxx')" >
document.body.onload=function(){
alert("xxxx");
}
.变量
命名规则
可以由字母、下划线_、数字、$组成
必须以字母、下划线_、或$开头
变量名不能是关键字或保留字
推荐使用骆驼型命名法
可以使用var来声明变量，但一定要在使用之前声明
var a,b=1,c;
a=2;
c=4;
也可以不经过var声明而直接使用，这样和上面没有任何区别，只是会降低可读性
JavaScript是大小写敏感的
变量类型
undefined 未定义
null 空
boolean 布尔
string 字符串
number 数值
object 对象
var a="ddddd";
if("string" == typeof(a))
{
alert("==");
}
var b=false;
if("boolean" == typeof(b))
{
alert("==");
}
var f=null; //typeof(f) == "object"
if("undifined" == typeof(x))
{
alert("==");
}
类型转换
undefined、null、0、NaN、"" 都为false
object 总为true
强制转换成数字型
var b="33";
b+67; //3367
parseInt(b)+67; //100
parseFloat("333.98");
判断是否非数字 isNaN()
var a="xxxx";
alert(isNaN(a)); //true
判断一个数是否不是无穷大 isFinite()
var a=22;
alert(isFinite(a)); //true
判断是否润年
function isLeapYear(year_)
{
var year=parseInt(year_);
//if((0==year%400) || (0==year%4) && (0!=year%100)) { //
}if(0 == year%400) //能被400整除是
return true;
elseif（0==year%4 && 0!=year%100) //
return true;
else
return false;
}
.switch()
switch(exp)
{
case 1:
case 2:
case 3:
//
break;
case 4:
//
break;
default:
//
break;
}
.for
for(var i=0; i++; i<100)
{
//
}
.将函数赋给一个变量或事件
doucment.body.onload = function(){
alert("load);
}
var max = function(a,b){
return (a)>(b)?(a):(b);
}
则可以通过max执行函数 max(4,5); //5
var global=123; //全局变量
function abc()
{
var local=global; //局部变量local用全局变量global赋值
}
.eval(string)函数
执行把参数string所表示的命令
var act="alert('ssssss')";
eval(act); //将执行alert("ssss")
.对url进行编码
escape(url);
unescape(url);
.日期
var objDate = new Date("January 12,2006 22:19:34");
var objDate = new Date("January 12,2006");
var objDate = new Date(2006,1,12,22,19,34);
var objDate = new Date(2006,1,12);
var objDate = new Date(1177663004); //自1970年来的秒数
objDate.getFullYear();
objDate.getYear();
objDate.getMonth();
objDate.getDate();
objDate.getDay();
objDate.getHours();
objDate.getMinutes();
objDate.getSeconds();
objDate.getMilliseconds();
objDate.getTime(); //返回从1970年来的毫秒数
objDate.setFullYear(2007);
objDate.setYear(07);
objDate.setMonth(12);
objDate.setDate(11);
objDate.setHours(23);
objDate.setMinutes(34);
objDate.setSeconds(56);
objDate.setMilliseconds(555); //0~999
objDate.setTime(1180195200000); //返回从1970年来的毫秒数
.Math
Math.E
Math.PI
Math.abs(x)
Math.ceil(x)
Math.floor(x)
Math.max(a,b,c,
,valN)Math.min(a,b,c,
,valN)Math.pow(x,y) //x的y次方
Math.random() //0~1之间的随机小数如 0.123535464
Math.round(78.67) //四舍5入
.数组
var arr = new array();
var arr = new array(10);
var arr = new array("a","b","c");
var arr = new array();
arr[]="1";
arr[]="2";
arr[]="3";
..
arr[9]="290";
arr[]="14";
.多维数组
var arr = new Array(4);
for(var i=0; i<arr.length; i++)
arr = new Array(6);
//访问
for(var i=0; i<arr.length; i++)
for(var j=0; j<arr[0].length; j++)
alert(arr[j]);
或
var arr = [[1,2,3], [4,5,6],[7,8,9]];
.数组方法
arr.toString(); //[1,2,3] 转到 "1,2,3" [[1,2,3], [4,5,6],[7,8,9]]; 转到 "1,2,3,4,5,6,7,8,9"
arr.concat(arg1, arg2, arg3,
); //var arr=[1,2,3]; arr.concat("4","5","6"); //返回 1,2,3,4,5,6 而arr不受影响arr.join(separator); //以separator为分隔符， 把数组转成字符串
arr.pop(); //删除数组最后一个元素
arr.push(arg1,arg2,arg3,
.) //把arg1,arg2等等添加到数组尾部arr.shift(); //删除第一元素
arr.slice(start, end); //返回数组中下标从start到end间的子数组
arr.sort(comparefunc); //对数组进行按func函数结果的排序
arr.unshift(arg1,arg2,
) //把arg1,arg2等元素添加到数组头部arr.splice(start, nums, arg1,arg2,
); //把从start开始的nums个元素替换成 arg1,arg2,， 而不是对应替换arr = [1,2,3,4,5,6];
arr.splice(0,0,9,22,33); // arr=[9,22,33,1,2,3,4,5,6]
arr.splice(1,3,9,22,33); // arr=[1,9,22,33,5,6] 把第1个到第3个元素2,3,4替换成9,22,33
.string字符串
var str="123456";
字符串长度
str.length
str.indexOf(substring,pos); //“abcdef”.indexOf("bc",1); 返回子串bc在串"abcdef"中的第一次出现下标
str.lastIndexOf(substring,pos); //“abcdef”.indexOf("bc",1); 返回子串bc在串"abcdef"中的最后一次出现下标
str.charAt(pos); //返回下标pos处的单个字符
str.charCodeAt(pos); //返回下标pos处的字符的ASCII码
str.slice(start, end); //返回从start到end之间的子串(不包含end处字符)
str.split(separator, len); //把串str以separator为分隔符切割成多个子符串数组，子串数组的最大长度
//"a,b,c,d".split(",") 返回["a","b","c","d"]
//"a,b,c,d".split(",", 2) 返回["a","b"]
//"a,b,c,d".split() 返回["a,b,c,d"]
//"a,b,c,d".split("") 返回["a",",""b",",",c",",","d"]
str.substr(start, length); //返回从start处的长为length子串
str.substring(start, end); //返回从start到end之间的子串(包含end处字符)
.字符串替换
str.replace(oldsubstr, newsubstr); //把串str中的oldsubstr子串替换为newsubstr子串 .字符串大小写转换
str.toLowerCase(); //把串str转为小写
str.toUpperCase(); //把串str转为大写
.正则表达式匹配
str.match(regExp) 搜索str中所有匹配正则表达式regExp的子串，并把他们组成一个数组返回
var arr=str.match(/\d+/);
for(var i=0; i<arr.length; i++)
alert(arr);
.search(regExp) 返回串str中第一个匹配regExp表达式的子串的索引位置
var str="aaabcbddabcfjkerabcrrsaa";
alert(str.search(/abc/g));
.获取浏览器信息
1)navigator对象
navigator.appCodeName //IE: Mozilla Firefox: Mozilla
navigator.appName //IE: Microsoft Internet Explorer Firefox: Netscape
(navigator.appVersion //IE: 4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) Firefox: 5.0 (X11; zh-CN)
navigator.cookieEnabled //IE: true/false Firefox: true/false
navigator.cpuClass //IE: x86 Firefox: undifined
navigator.language //IE: undifined Firefox: zh_CN
navigator.platform //IE: Win32 Firefox: Linux i686
navigator.userAgent //IE: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)
Firefox: Mozilla/5.0 (X11; U; Linux i686; zh-CN; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
function isIE()
{
return (navigator.userAgent.toLowerCase().indexOf("msie") >= 0);
}
function isFirefox()
{
return (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0);
}
2)location对像
window.location = "http://www.cnscn.org";
window.location.href = "http://www.cnscn.org";
window.location.assign("http://www.cnscn.org");
window.location.protocol 协议如 "http:" (注意IE和firefox都要带:即冒号 "http:")
window.location.hostname 域名或IP: www.a.com 或 192.168.1.1
window.location.host
window.location.pathname 如http://172.16.1.69/ajax/b.html?a=1&b=2 输出 /ajax/b.html
window.location.search 如http://172.16.1.69/ajax/b.html?a=1&b=2 输出 ?a=1&b=2 (即带?号)
window.location.href 如http://172.16.1.69/ajax/b.html?a=1 输出 http://172.16.1.69/ajax/b.html?a=1
window.location.port
window.location.hash
window.location.reload(boolean) 参数为true表示强制从服务器重新载入， 为false表示从缓存中重新载入
window.replace(url) 导航到url指定页面(和指定href相同)，但在浏览历史中替换当前页地址(和指定url不同)
3)history对象
history.back(); //相当于后退按钮
history.forward(); //相当于前进按钮
history.go(-2); //相当于点击两次后退按钮
4)document对象
document.anchors //<a name>书签标记数组 document.anchors[0].name
document.embeds //所有<embed>数组
document.forms //所有表单数组 document.forms[0].action
document.images //所有<img>数组 document.images[0].offsetWidth document.images[0].sttyle.width
document.links //所有<a href>数组 document.links[0].target
document.cookie //返回或设置cookie
document.domain //返回或设置文档默认域名
document.lastModified //文档最后一次修改日期
document.location //相当于window.location
document.referrer //返回来源页面
document.title //返回或设置文档标题
document.URL //返回或设置文档url
5)with
with(document){
write(cookie); //相当于 document.write(document.cookie)
write("abc");
write(URL);
}
.事件对象
function sayHello()
{
alert("hello");
}
doucment.onclick = sayHello; //把函数赋对对象事件
document.getElementById('img1').onclick = sayHello;
.attachEvent和addEventListener 方法绑定事件处理程序, 可以让一个事件有多个处理程序
element.addEventListener("enventName", 函数名, boolean ); //boolean: true表示事件处理模式是使用捕获模式, false 表示否
function func()
{
//
}
if(element.addEventListener){
element.addEventListener("onclick", func, false);
}
else
{
element.attachEvent("click", func, false);
}
.window.event对象 window可以省略，即使用event
它是处理按键、光标位置、触发事件的对象
IE:
event对象是个全局对象
function imgClick()
{
alert(event.srcElement.src);
}
<img src="a.jpg" onclick="imgClick" > //这样当点击图片时，就会产生event的相应属性或方法
Mozilla:
event对象必须被显式传递给事件处理程序, 因为它是当前局部对象而不是全局对像
function imgClick(evt)
{
alert(evt.target.src);
}
<img src="a.jpg" onclick="imgClick(event)" > //这样当点击图片时，就会产生event的相应属性或方法
.event对象的属性
IE Firefox
srcElement target 触发事件的元素
type type 事件类型
offsetX 无 元素的x坐标
offsetY 无 元素的y坐标
x layerX 定位元素的x坐标
y layerY 定位元素的y坐标
clientX clientX 窗口的x坐标
clientY clientY 窗口的y坐标
screenX screenX 屏幕的x坐标
screenY screenY 屏幕的y坐标
button button 鼠标按键
keyCode keyCode 键盘按键
shiftKey shiftKey
altKey altKey
ctrlKey ctrlKey
fromElement relatedTarget 上一级元素
toElement relatedTarget 下一级元素
<input type="text" size="20" name="title" id="title" value="" />
<script language="JavaScript">
//一定要放到<input的下方，否则找不到title对象
var obj=document.getElementById("title");
obj.onkeydown=function(evt)
{
evt=evt?evt:window.event;
if(13 == evt.keyCode || evt.ctlKey && 13 == evt.keyCode ) //如果是Enter或Ctrl+Enter
{
alert("ok");
}
}
</script>
.表单form
var frm=document.forms["submitform"];
var frm=document.forms[0];
frm.action
frm.elements
frm.encoding
frm.length
frm.method
frm.name
frm.target
frm.submit();
frm.reset();
onsubmit();
onreset();
frm.elements[0].type //text submit password select-one select-multiple
frm.elements[0].disabled = true; //false 创建只读表单域
.<input
<input type="text" readonly />
<input type="text" onfocus="this.focus()" onclick="alert(this.defaultValue)" value="xxxxxxx" />
<input type="text" onblur="this.blur()" />
onclick="func()"
onkeydown="func()"
onkeyup()="func()"
onkeypress()="func()"
onmouseover()="func()"
onmouseout()="func()"
onmousedown()="func()"
onmouseup()="func()"
onchange()="func()"
.使用select选中文本
<input type="text" onfocus="this.select()" onselect="alert('select')" value="xxxxxxx" />
.<select
objSelect.selectedIndex 当前选取项的索引
objSelect.options 选项数组
for(var i=0; i<objSelect.options.length; i++)
if(objSelect.options.selected)
{
alert(objSelect.options.value+objSelect.options.text);
//取消选中
objSelect.options.selected = false;
}
.在选项尾部添加一个option
objSelect.options[objSelect.length] = new Option("val", "text");
.替换选项n的值
objSelect.options[n] = new Option("val", "text");
<option value="val">text</option>
.删除一个option
objSelect.options=null;
.清空一个select
<select name='slt' id='slt' >
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
//正确清空方法
//每一循环都删除第一个元素，当循环结束时，元素也删除完了
//类似于栈的pop()即每次pop出栈顶即第一个元素
for(var i=0; i<len; i++)
objSelect.options[0]=null;
/*
//错误方法1: 将留下options[1]和options[3]
for(var i=0; i<len; i++)~~
objSelect.options=null;
//错误方法2: 将留下options[3]和options[4]
for(var i=0; i<objSelect.length; i++)
objSelect.options[0]=null;
*/
