DHTML基础知识集锦之JS

2008 7.9 Wed
日	一	二	三	四	五	六
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31
«月»	2008 - 7	«年»

日志文章

2007年11月23日 20:08:46

三. javascript
1. js基础
变量定义：var a=4;
数组定义：
一维数组：var arr; arr = new Array(3); arr[0]=“aa”; //只有一维
如果有参数，表示有数组的长度，有参数列表，则是初始值
二维数组：将一维数组的元素再次定义为一维数组
var objArray = new Array(3);
objArray[0] = new Array("0"); //第0个值是0
objArray[1] = new Array(2);
objArray[1][0] = new Array("1","拟稿","zs","3000px","2000px");
objArray[1][1] = new Array("1","审批","ls","3000px","3000px");
运算符： + /- /* /% /++ /-- /== /!= /> /< /&& /|| /!非
条件运算：if( ){ } else { }
循环：for(var i=0; i<100; i++) { … }
Switch语句：switch(100) {
case 1:
x=4;
break;
Default:
alert(“错误”);
}
2. js函数
匿名函数：
var f = function() {} //可能访问外部函数的变量
构造函数(自定对象):
function Teacher(name,gender) {
this.name = name; //this表示是Teacher的成员
this.gender = gender;
this.reading = work;
this.work = function() {
alert('aa'); //表示是Teacher对象的函数
}
}
function work(book) {
alert("正在读"+book);
}
function read() {
var t = new Teacher('张三','女');
t.reading("平凡的世界");
}
3. 系统函数
Typeof：返回数据类型，如typeof(x)=string或boolean
parseFloat(num1)：将num1字符串转换为float数据
parseInt(“15”)：转字符串15为数字15，返回NaN表示不是一个数字
Eval：计算字符串表达式的值，如eval(“5+3”) = 8;
isNaN(s)：是否是一个数字，返回true或false
Document.write(“aaa”);
alert("请输入用户名!");
confirm(“单击确定返回true，单击取消返回false");
window.open(“b.html”,”打开位置”,"height=200,width=300,scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,status=yes");
Var myTime = setTimeOut(“myfun()”,1000)：1000毫秒之后将调用函数myfun()，仅仅一次
clearTimeout(myTime); 取消这个定时器的循环调用
var anExpression = "6 * 9 % 7";
var total = eval(anExpression); // 将变量 total 赋值为 5。
// 将一个字符串赋给 totality （注意嵌套引用）
var totality = eval("’...surrounded by acres of clams.’");
var a = eval(5*3);
var b = eval("'abc'");
var c = eval("alert('eval')");
alert(a+"\t"+b);
4. 事件
onClick：单击
onBlur：失去焦点事件
onFocus：获得焦点事件
onMouseOver：鼠标悬停事件
onMouseOut：鼠标移出图片或文字
onMouseMOve：鼠标在图片上移动
onLoad：加载html页面时产生此事件
onSubmit：<form onSubmit=“return alert(‘aaa’)” >
onResize：窗口大小改变事件
onMouseDown
onMouseUp
onChange：文本框值被修改
5. js对象
1) 浏览器对象
Window
close()
Document:
定位页面的特定元素
document.all.元素ID或元素名称
document.all['元素ID或元素名称']
document.getElementById('')
document.form1.uid.value
动态创建元素
document.createTextNode("内容"); //创建一个文本元素，就是一些文字
var opt = document.createElement("option"); //div,img,input
标签.appendChild(img); //往标签里追加一个子标签
动态销毁元素
标签.removeNode(true); //删除自己，自杀式
parent.removeChild(child); //父杀子
标签名.syle.css //任何标签对象都有style属性
<script>
var t = document.createTextNode("性别");
document.body.appendChild(t);
var sel = document.createElement("select");
var opt1 = document.createElement("option");
sel.add(opt1);
opt1.innerText="男";
opt1.value="1";
var opt2 = document.createElement("option");
sel.add(opt2);
opt2.innerText="女";
opt2.value="0";
document.body.appendChild(sel);
var v1 = document.createElement("input");
v1.type="button";
v1.value="删除";
v1.onclick=function() {
sel.removeNode(true);
document.body.removeNode(t); //把body所有对象都删除了
}
eval("document.body.appendChild(v1);");
</script>

history
<input type=button value="返回" onClick="history.back()" />
<a href=javascript:history.back()>返回</a>
<a href=javascript:history.forward()>下一页</a>
Location (这里应该是Location,和href这样的单词,但是博客中不支持呀,所以改下咯^_^)
Locatio.hre=“http://www.google.com”;加载另一页面
<body>
<a href=javascript:history.back()>返回</a>
<a href=javascript:history.forward()>下一页</a>
<a href=javascript:sub() target="_self">去Google</a>
</body>
<script>
function sub() {
locatio.hre="http://www.google.com";
}
</script>
2) 脚本对象
字符串：
属性length，substr(start,len),substring(start,end),indexOf(s)
var s = "The rain in Spain falls mainly in the plain..";
ss = s.substring(12, 17); // 取子字符串。
Date：var d= new Date();
function sub() {
var str = ".@";
var email="[url=mailto:vandh@163]vandh@163.";
var count = 0;
for(var i=0; i<str.length; i++) {
if(email.indexOf(str.charAt(i))>=0) count++;
}
if(count==2) {
if(email.substring(email.indexOf("@")+1,email.indexOf("."))) {
if(email.substr(email.indexOf(".")+1,1)) {
alert('邮件地址正确');
return;
}
}
}
alert('邮件地址有误');
return ;
}
3) Html对象
复选框
If(form1.chk1.checked==true) …
Form1.chk1.length： //所有选中的chk1的个数
Form1.chk1.checked = true; //选中chk1复选框
单选框：同上
下拉框
Var I = form1.sel.selectedIndex：获取选中的索引项
Form1.sel.options.value：得到选中的值
6. js文件编写
1）写一个js文件，内有一个函数
function validate(uid,pwd) {
if(uid=="") {
alert("用户名不能为空");
return false;
}
if(pwd=="") {
alert("密码不能为空");
return false;
}
return true;
}
2) 写一个a.html文件，引用这个js文件
<html>
<head>
<script language="JavaScript" src="a.js"></script>
</head>
<body>
<form name="form1">
<input type="text" name="uid"/><BR>
<input type="text" name="pwd"/><BR>
<input type="submit" onClick="return validate(form1.uid.value,form1.pwd.value);"/>
</form>
</body>
</html>
6、js正则表达式及其应用
\: 转译
^ $：开始和结束
. ：匹配一个字符串中任何单个的打印或非打印字符，除了换行符 (\n) 之外。
*+？：0-n,1-n,0-1
？：当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。
{n},{n,}，{n,m}: n,>=n,n<=x<=m
x|y： x或y
[xyz],[^xyz] : 包含待匹配的列表与未包含
[a-z], [^a-z]: a到z任一个，相反
\num 匹配 num，其中 num 是一个正整数。对所获取的匹配的引用(即第一个括号)。例如，'(.)\1' 匹配两个连续的相同字符。
\d = [0-9]
\D = [^0-9] 匹配一个非数字字符
\n,\r: 换行/回车
\s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
\S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\t 匹配一个制表符。等价于 \x09 和 \cI。
\w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
\W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。
\b 匹配一个单词边界，也就是指单词和空格间的位置。
\B 匹配非单词边界。
/expression/ : 分隔符之间放入表达式模式的各种组件来构造一个正则表达式。
/a/="a" : 匹配所搜索字符串中的该字符本身。
() : 可用来分组，如/^Chapter|Section [1-9]$/ 应为：/^(Chapter|Section) [1-9][0-9]{0,1}$/
escape 方法返回一个包含了 charstring 内容的字符串值（ Unicode 格式）。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，其中 xx 等于表示该字符的十六进制数。例如，空格返回的是 "%20" 。
stringObj.replace(rgExp, replaceText) ：返回根据正则表达式进行文字替换后的字符串的复制。
rgexp.test(str) : 返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。
<body>
<form name="form1" method="post">
用户标识：<input type="text" name="uid"/><BR>
用户年龄：<input type="text" name="age"/><BR>
用户邮箱：<input type="text" name="email"/><BR>
出生日期：<input type="text" name="birth"/><BR>
<input type="submit" onclick="return validate();"/>
</form>
</body>
<script>
//判断是否包含特殊字符
function validate() {
isNull();
isValid();
isNum();
isBetween();
isEmail();
isDate();
}
function isNull() {
var uid = form1.uid.value;
if(uid=="") {
alert("用户标识不能为空");
return false;
}
}
function isValid() {
var str = "[url=mailto:.*/%$#@!~&^)(_+\].*/%$#@!~&^)(_+\=-`";
var uid = form1.uid.value;
for(var i=0; i<uid.length; i++) {
if(str.indexOf(uid.charAt(i))>=0) {
alert("用户标识不能包括特殊字符");
return false;
}
}
}
function isAge() {
var age = form1.age.value;
if(age=="") return false;
if(isNaN(age)) {
alert("testAge年龄必须是数字");return false;
}
}
function isNum() {
var age = form1.age.value;
var bool = /^\s*(\d*\.?\d*)\s*$/g.test(age);
if(!bool) {
alert("isnum年龄必须是数字");return false;
}
}
function isBetween() {
var age = parseInt(form1.age.value);
if(age<18 || age>60) {
alert("年龄不能小于是18岁，不能大于60岁");return false;
}
}
function isEmail() {
var email = form1.email.value;
if(email=="") return false;
var bool = /^([a-z]|[A-Z])+\d*@\w+\.([a-z]|[A-Z])+$/g.test(email);
if(!bool) {
alert("邮箱必须是[url=mailto:xxx@yyy.zzz]xxx@yyy.zzz格式");return false;
}
}
//判断日期形如：yyyy-MM-dd
function isDate() {
var birth = form1.birth.value;
if(birth=="") return false;
var bool = /^([1-2]\d{3})-((0?[1-9])|(1[0-2]))-((0?[1-9])|([1-2][0-9])|(3[0-1]))$/g.test(birth);
if(!bool) {
alert("出生日期必须是yyyy-MM-dd格式");return false;
}
}
//将特殊字符替换掉，如+=%2B
function URLencode(sStr) {
return escape(sStr).
replace(/\+/g, '%2B').
replace(/\"/g,'%22').
replace(/\'/g, '%27').
replace(/\//g,'%2F');
}
function isUndef(v) {
return typeof(v) == "undefined";
}
</script>

<script>
var v1 = document.createElement("input");
v1.type="text";
var v2 = document.createElement("input");
v2.type="button";
v2.value="提交";
v2.onclick=function() {
alert(v1.value);
var bool = /^[1-2]\d{3}-((0?[1-9])|(1[0-2]))-((0?[1-9])|([1-2][1-9])|(3[0-1]))$/g.test(v1.value);
if(bool)
alert("yes");
else
alert("no");
}
document.body.appendChild(v1);
document.body.appendChild(v2);
</script>
7. 使用window对象弹出各种样式的窗口
function opening() {
window.open('第一章 js.html','_blank','height=200,width=300,scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,status=yes');
}
function modal() {
window.showModalDialog('a.html',"",'center:yes;dialogHeight:268px;dialogWidth:216px;unadorned:yes;scroll:off;help: No; status:no;resize:no');
}
function modeless() {
window.showModelessDialog('a.html',"",'center:yes;dialogHeight:268px;dialogWidth:216px;unadorned:yes;scroll:off;help: No; status:no;resize:no');
}
8. 制动浮动的DIV广告层
<input id="btn" type="button" value="弹出层" onclick="showdiv();">
<style>
.op1{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}
</style>
<script language="JavaScript">

</script>
9. 复选框全选/全不选效果
<body>
<input type="checkbox" name="c"><br>
<input type="checkbox" name="c"><br>
<input type="checkbox" name="c"><br>
<input type="checkbox" name="c"><br>
<input type="checkbox" name="c"><br>
<input type="button" value="全" onclick="selectAll(true)">
<input type="button" value="反" onclick="selectIns();">
<input type="button" value="不" onclick="selectAll(false)">
</body>
<script language="JavaScript">

</script>
10、制作下拉框的省市级联效果
<BODY onload = "chg()">
专业：
<select onchange="zy()" name="zy" id="zy">
<option value="0">ACCP软件部</option>
<option value="1">BENET网络部</option>
</select>
课程：
<select name="kc" id="kc"></select>
</BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
11. 只能输入数字
<a href="http://www.baidu.com" onclick="return go();">百度</a><hr>
请输入数字:<input onkeypress="return onlyNum();">
function go(){
var v = window.confirm("真的要去百度吗?");
return v;
}
function onlyNum(){
if(event.keyCode > 57 || event.keyCode < 48 && event.keyCode != 46)
return false;
return true;
}
12. 预览图片
<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
请选择图片:<input type="file" name="f" onchange="pre();">
<div id="img"></div>
</body>
</html>
13. 像GOOGLE一样的实时提示
<html>
<script type="text/javascript">
var values = new Array("Aptech", "Abcdeft", "A", "b");
//点击文档的任何一个地方,提示都会消失
document.onclick = function(){
deleteDiv();
}
//删除层
function deleteDiv(){
var kv = document.getElementById("google");
if(kv) kv.removeNode(true);
}
//查找匹配的关键字
function search(){
//防止产生N多个DIV,所以先判断是否存在,如果存在,则删除.
deleteDiv();
//创建一个层，用于显示实时提示
var div = document.createElement("div");
div.id = "google";
div.style.position = "absolute";//设置位置为绝对位置
//控制层的位置和大小
//位置
var top = document.all.key.offsetTop;
var left = document.all.key.offsetLeft;
//大小
var width = document.all.key.offsetWidth;
var height = 0;
//设置
div.style.top = top + document.all.key.offsetHeight - 1;
div.style.left = left;
div.style.width = width - 2;
//效果:边框样式框和背景色
div.style.backgroundColor = "white";
div.style.borderTopStyle = "solid";
div.style.borderBottomStyle = "solid";
div.style.borderLeftStyle = "solid";
div.style.borderRightStyle = "solid";
//注意,边框是加在区域外围的,所以在设置宽度的时候减掉了1 + 1 = 2个像素
div.style.borderTopWidth = 1;
div.style.borderBottomWidth = 1;
div.style.borderLeftWidth = 1;
div.style.borderRightWidth = 1;
//填充数据
var value = document.all.key.value;
var f = false;
for(var i = 0; i < values.length; i ++){
if(values.substr(0, value.length).toLowerCase() == value.toLowerCase()){
f = true;
//每个选项填充到div中
var span = document.createElement("<div>");
span.innerText = values;
span.style.fontSize = 14;
span.style.padding = "2px";
div.appendChild(span);
//触发每个项目的鼠标移入移出事件
span.onmouseover = function(){
event.srcElement.style.cursor = "hand";
event.srcElement.style.backgroundColor = "blue";
event.srcElement.style.color = "white";
}
span.onmouseleave = function(){
event.srcElement.style.cursor = "default";
event.srcElement.style.backgroundColor = "white";
event.srcElement.style.color = "black";
}
//单击选项时将该选项的值填充到文本框.
span.onclick = function(){
document.all.key.value = event.srcElement.innerText;
//填充完毕后删除DIV
deleteDiv();
}
}
}
//将层追加到页面
if(f){
document.body.appendChild(div);
}
//如果文本框中没有内容,则删掉DIV
if(document.all.key.value.length == 0){
deleteDiv();
}
}
</script>
</head>
<body style="font-size:14px">
关键字：<input name="key" size="50" onpropertychange = "search()">
<div id="d"></div>
</body>
</html>
14. 动态销毁元素
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<input type="button" value="销毁" onclick="kill();"><br>
<img id="img" src = "Creek.jpg">
</BODY>
</HTML>
15. 选中行
<html>
<script language="JavaScript">

</script>
<body>
<table border="1" width="100%">
<tr onmouseover="newColor(this);" onmouseout="oldColor(this);">
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
</tr>
<tr onmouseover="newColor(this);" onmouseout="oldColor(this);">
<td>dddd</td>
<td>eeee</td>
<td>ffff</td>
</tr>
</table>
<input onfocus="this.select()" value="中华人民共和国">
</body>
</html>
16. 块的展开
<html>
<script language="JavaScript">

</script>
<body>
<div onclick="ex('id1');" style="cursor:hand; font-weight:bold">沁园春·雪</div>
<div id="id1" style="display:none">
北国风光，<BR>
千里冰封，<BR>
万里雪飘。<BR>
</div>
</body>
</html>

Tags： JS

类别： javasript | 评论(0) | 浏览(1540) | 收藏

淡

日历

日志分类

存　档

文章搜索

日志文章