一、
1.下拉列表:select对象
属性:
option[ ]:选项数组
selectedIndex:被选中选项的索引号
length:选项总数
方法:
add(option对象,添加位置):增加选项
2.JavaScript访问样式的常用方法
style属性(对象)
className属性
3.实现元素的显示和隐藏
display属性:
none:不显示
block:显示
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>显示和隐藏图片</title> <script type="text/javascript"> function showImage(){ document.getElementById("photo").style.display="block"; } function hideImage(){ document.getElementById("photo").style.display="none"; } </script> </head> <body> <div id="photo"><img src="img/book1.jpg"/></div> <input type="button" value="显示图片" onclick="showImage();" /> <input type="button" value="隐藏图片" onclick="hideImage();" /> </body> </html>
运行结果
点击隐藏图片后
4.获取或设置坐标方面的样式属性
style对象定位方面的样式
left、top
right、bottom
position
z-index
5.获取样式
行内样式:style对象
内部/外部样式:
IE浏览器:currentStyle属性
Firefox等浏览器:document.defaultView.getComputedStyle()方法
6.获取滚动距离
Onscroll事件
scrollTop:纵向距离
scrollLeft:横向距离
实例代码:HTML代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>随鼠标滚动的广告图片</title> <style type="text/css"> #main { text-align: center; } #adver { position: absolute; left: 50px; top: 30px; z-index: 2; } </style> <script type="text/javascript"> var adv; var left,top; function init(){ adv=document.getElementById("adver"); if(adv.currentStyle){ left=adv.currentStyle.left; top=adv.currentStyle.top; }else{ left=document.defaultView.getComputedStyle(adv,null).left; top=document.defaultView.getComputedStyle(adv,null).top; } left =parseInt(left); top=parseInt(top); } function move(){ var scrollTop=document.documentElement.scrollTop; var scrollLeft=document.documentElement.scrollLeft; scrollLeft =parseInt(scrollLeft); scrollTop=parseInt(scrollTop); adv.style.left=left+scrollLeft+"px"; adv.style.top=left+scrollTop+"px"; } window.onload=init; window.onscroll=move; </script> </head> <body> <div id="adver"><img src="img/adv.jpg" /></div> <div id="main"><img src="img/main1.JPG" /><img src="images/main2.jpg" /><img src="images/main3.jpg" /></div> </body> </html>
运行结果
二、表单验证
常用元字符:代码 说明
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配行的开始
$ 匹配行的结束
常用反义元字符:
代码 说明
\W 匹配任意不是字母,数字,下划线,汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
常用重复限定符:
代码 说明
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
1.String属性
属性:length:字符串的长度
方法:
toLowerCase():转换为小写
toUpperCase():转换为大写
toAt(index):返回在指定位置的字符
indexOf(字符串,index):查找字符串值首次出现的位置
substring(index1,index2):截取字符串
实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>模拟Word的查找和替换</title> <script src="js/findReplace.js"></script> </head> <body> <form id="form1" name="form1" method="post" action=""> <caption>模拟Word的查找和替换</caption> <table width="200" border="1"> <tr> <td colspan="2"><textarea id="wordText" cols="50" rows="10">什么是 RegExp? RegExp 是正则表达式的缩写。 当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。 简单的模式可以是一个单独的字符。 更复杂的模式包括了更多的字符<span style="color:red">,并可用于解析、格式检查、替换等等。 您可以规定</span>字符串中的检索位置,以及要检索的字符类型,等等。 </textarea></td> </tr> <tr> <td><input name="find" type="button" id="find" value="查找字符串" onclick="findString()" /> </td> <td><input type="text" id="findText" /></td> </tr> <tr> <td><input name="replace" type="button" value="替换字符串" onclick="replaceString()" /></td> <td><input type="text" id="replaceText" /></td> </tr> </table> </form> </body> </html>
运行结果:
点击查找字符串的按钮,结果如下
点击替换字符串的按钮,结果如下
2.Textbox文本框对象
属性
value:文本框的值
方法:
blur():从文本域中移开焦点
focus():从文本域中示设置焦点
select():选取文本域中的内容
事件:
onblur:失去焦点
onfocus:获得焦点
onkeypress:键盘按下
3.String对象支持正则表达式的方法
search(正则表达式):返回匹配的位置
match(正则表达式):返回匹配的字符串
replace(正则表达式,替换字符串):返回替换后的结果
实例:HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>休闲网</title> <link type="text/css" rel="stylesheet" href="css/xiuxian.css" /> <script type="text/javascript" src="js/bd.js"></script> </head> <body> <div id="header"> <div id="logo"><img src="img/logo.gif"/></div> <div id="help">注册 | 登录 | 帮助</div> <div class="clear"></div> </div> <div id="register"> <h1>注册休闲网</h1> <form action="" method="post" name="myForm" onsubmit="return check()"> <table cellpadding="0" cellspacing="0"> <tr> <td class="info">您的Email:</td> <td><input id="email" type="text" name="email" class="input-text" onblur="checkeEmail();"/><span id="emailMessage"></span></td> </tr> <tr> <td class="info">输入密码:</td> <td><input id="pwd" type="password" name="password" class="input-text" onblur="checkPwd();"/><span id="pwdMsg"></span></td> </tr> <tr> <td class="info">再输入一遍密码:</td> <td><input id="repwd" type="password" name="password" class="input-text"onblur="checkRepwd();"/><span id="repwdMsg"></span></td> </tr> <tr> <td class="info">您的姓名:</td> <td><input id="user" type="text" name="name" class="input-text"onblur="checkUser();"/><span id="userMsg"></span></td> </tr> <tr> <td class="info">性别:</td> <td><input type="radio" name="sex" value="0"/>男<input type="radio" name="sex" value="1"/>女</td> </tr> <tr> <td class="info">出生日期:</td> <td> <select name="birthYear" > <option value="1998">1998</option> <option value="1996">1996</option> </select>年 <select name="birthMonth" > <option value="12">12</option> <option value="6">6</option> </select>月 <select name="birthDay" > <option value="1">1</option> <option value="6">6</option> </select>日 </td> </tr> <tr> <td></td> <td><input type="submit" name="submit" value="注册" class="input-button" /></td> </tr> </table> </form> </div> <div id="footer"> <a href="#">关于我们</a> |<a href="#"> 诚聘英才 </a> | <a href="#">联系方式 </a> | <a href="#">帮助中心</a> </div> </body> </html>
css代码:
body{margin: 0;padding: 0;font-size: 12px;} #header{background: url(../img/bg.gif) repeat-x;line-height: 36px;} #logo{float: left;} #help{float:right;margin-right:20px ;color: white;} .clear{clear: both;} #register{width: 550px; margin: 0px auto;padding: 30px 0 ;} #register h1{text-align: center; font-size: 16px;} #register table{width: 100%;} #register table td{line-height: 30px;} #register table td.info{text-align: right;} #register .input-text{border: 1px solid #999999;width: 150px;} #register .input-button{background: #f36; color: #FFFFFF;border-left:1px solid #FFFFFF ;border-top: 1px solid #FFFFFF; border-right: 1px solid #000000; border-left: 1px solid #000000;} #footer{text-align: center;color: #999999;} #footer a{color: #999999;text-decoration: underline;}
JavaScript代码
function $(id){ return document.getElementById(id); } function checkeEmail(){ var email=$("email").value ; if(email=="") { $("emailMessage").innerHTML="Email不能为空。"; return false; } if(email.indexOf("@")==-1||email.indexOf(".")==-1){ $("emailMessage").innerHTML="Email格式不正确,必须包含@和."; return false; } return true; } function checkPwd(){ var pwd=$("pwd").value; if(pwd==""){ $("pwdMsg").innerHTML="密码不能为空"; return false; } if(pwd.length<6){ $("pwdMsg").innerHTML="密码必须等于或者大于6个字符"; return false; } return true; } function checkRepwd(){ var repwd=$("repwd").value; if(repwd!=$("pwd").value){ $("repwdMsg").innerHTML="两次密码不一致"; return false; } return true; } function checkUser(){ var user=$("user").value; if(user==""){ $("userMsg").innerHTML="姓名不能为空"; return false; } for(var i=0;i<user.length;i++){ var j=user.substring(i,i+1); if(isNaN(j)==false){ $("userMsg").innerHTML="姓名中不能有数字"; return false; } } return true; } function check(){ if(checkeEmail()&&checkPwd()&&checkRepwd()&&checkUser()){ return true; }else { return false; } }
运行结果
当不填信息时,结果如下,会给出提醒信息:email,密码,姓名不能为空
里面不填内容,当直接点击注册时,会提醒email不能为空
输入错误的email,密码,姓名时,会给错误提醒
实现这种效果都是在input表签里加入onblur事件。
三、今天遇到的问题
电子邮件的格式用正则表达式表示“/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/”。
固定电话的格式用正则表达式表示“/^\d{3,4}-\d{7,8}$/”。