<接上篇 >
·表单( 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 οnlοad="document.myForm.myText.focus(); document.myForm.myText.select();">
3.通用的文本框验证函数
//验证是否为空
<input type="text" οnchange="isEmpty(this)">
function isEmpty(obj){
if(obj.value == null || obj.value == "") alert("此字段不能为空");
}
//验证是否为数字
<input type="text" οnchange="isNumber(this)">
function isNumber(obj){
var val = obj.value;
var r = //w[0-9]{1,}/;
if( !r.test(val) ) alert("此字段必须为数字")
}
//验证是否长度符合
<input type="text" οnchange="isLen7(this)">
function isLen7(obj){
if(obj.value.length != 7) alert("此字段长度必须为7位");
}
//验证有效E-Mail地址
<input type="text" οnchange="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="#" οnsubmit="return checkValue()"></form>
function checkValue(){
//do something to check the value.
return false;
}
5.改变表单提交的页面
<form action="#" οnsubmit="chooseAction()"></form>
fucntion chooseAction(){
if(document.myForm.myCheckBox.checked) document.myForm.action = "a.asp";
else document.myForm.action = "b.asp";
}
6.阻止向文本框输入某些字符
<input type="text" οnkeydοwn="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" οnkeypress="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 οnlοad="funName(); funName2();">
window.onload = funName;
5.确定与点击事件相匹配的事件
//9.3和9.4 比较复杂.且不清楚事件是JS API还是自定义的
6.防止重复执行两次点击事件
//当第一次点击按钮后,将表单提交回服务器,然后submitForm()函数便指向blockIt()函数.
//除非页面重新加载..否则点击无效(无作用)
<input type="button" value="提交" οnclick="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" οnchange="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 οnunlοad="saveData()"> //要保存数据的页面
<body οnlοad="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" 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" type="text/css" href="styles.normal.css">
document.getElementById("basicStyle").href = "newstyle.css";
6.打开/关闭某个样式表
document.styleSheets[1].disabled = false;
7.动态设置/更改某一元素的样式
document.getElementById("myElement").className = "myStyle";
8.元素样式的优先级
//原则上来讲,浏览器会使用最后的一种样式(就近原则)
//当同时给一元素设置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>
//-----------------------------------------------------------------------
·动态更改对象的视觉效果
1.更改对象的字体样式
document.getElementById("myElement").style.color = "#EEEEEE";
//相应的属性
color : 字体的颜色
font : 字体的全局设置
fontf : 字体名称
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";
document.getElementById("myElement").style.display = "none";
4.细调对象的透明度
document.getElementById("myElement").style.filter = "alpha(opacity=80)";
//-----------------------------------------------------------------------
·布置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="确定" οnclick="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>
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 οnlοad="document.myForm.myText.focus(); document.myForm.myText.select();">
3.通用的文本框验证函数
//验证是否为空
<input type="text" οnchange="isEmpty(this)">
function isEmpty(obj){
if(obj.value == null || obj.value == "") alert("此字段不能为空");
}
//验证是否为数字
<input type="text" οnchange="isNumber(this)">
function isNumber(obj){
var val = obj.value;
var r = //w[0-9]{1,}/;
if( !r.test(val) ) alert("此字段必须为数字")
}
//验证是否长度符合
<input type="text" οnchange="isLen7(this)">
function isLen7(obj){
if(obj.value.length != 7) alert("此字段长度必须为7位");
}
//验证有效E-Mail地址
<input type="text" οnchange="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="#" οnsubmit="return checkValue()"></form>
function checkValue(){
//do something to check the value.
return false;
}
5.改变表单提交的页面
<form action="#" οnsubmit="chooseAction()"></form>
fucntion chooseAction(){
if(document.myForm.myCheckBox.checked) document.myForm.action = "a.asp";
else document.myForm.action = "b.asp";
}
6.阻止向文本框输入某些字符
<input type="text" οnkeydοwn="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" οnkeypress="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 οnlοad="funName(); funName2();">
window.onload = funName;
5.确定与点击事件相匹配的事件
//9.3和9.4 比较复杂.且不清楚事件是JS API还是自定义的
6.防止重复执行两次点击事件
//当第一次点击按钮后,将表单提交回服务器,然后submitForm()函数便指向blockIt()函数.
//除非页面重新加载..否则点击无效(无作用)
<input type="button" value="提交" οnclick="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" οnchange="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 οnunlοad="saveData()"> //要保存数据的页面
<body οnlοad="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" 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" type="text/css" href="styles.normal.css">
document.getElementById("basicStyle").href = "newstyle.css";
6.打开/关闭某个样式表
document.styleSheets[1].disabled = false;
7.动态设置/更改某一元素的样式
document.getElementById("myElement").className = "myStyle";
8.元素样式的优先级
//原则上来讲,浏览器会使用最后的一种样式(就近原则)
//当同时给一元素设置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>
//-----------------------------------------------------------------------
·动态更改对象的视觉效果
1.更改对象的字体样式
document.getElementById("myElement").style.color = "#EEEEEE";
//相应的属性
color : 字体的颜色
font : 字体的全局设置
fontf : 字体名称
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";
document.getElementById("myElement").style.display = "none";
4.细调对象的透明度
document.getElementById("myElement").style.filter = "alpha(opacity=80)";
//-----------------------------------------------------------------------
·布置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="确定" οnclick="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>
1302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
