51CTO下载-html+javascript+css学习宝典

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

一、html知识
1. meta标签
Meta: 提供网页信息，搜索引擎使用
<meta name=“aa” content=“bbb”>
<meta http-equiv=“expires” content=“wed,26 feb 1997 08:21:57”> 设置网页过期时间
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv=“refresh” content=“1” />每1秒后刷新本页
<meta http-equiv=“refresh” content=“5;url=www.google.com” />过5秒后跳转到url
2. 表格表单
<form name=“form1” method=“get/post” action=“Servlet1” target=“new”>
<table width="100%" border=1 gbcolor=“#FFFF00”>
<caption align=top>表格标题</caption>
<tr><th>行或列标题</th></tr>
<td width=“20%” height=“10” colspan=“2” rowspan=“2” align=“left” valign=“center”> </td>
<input type=hidden name=“name1” value=“value1”>
<input type=text name=“name1” value=“value1”>
<input type=button name=“name1” value=“提交” onClick=“sub”>
<input type=checkbox name=id1 value=1 checked>洒井法子
<input type=radio name=id1 value=1 checked>洒井法子
<textarea name=aa cols=20 rows=5>多行文本输入框</textarea>
<select name=sel size=1 multiple><option value=1>a</option></select>
3. DIV和SPAN
在W3C标准中，网页设计布局的常用方法是DIV+CSS，而不是TABLE。
TABLE有什么用呢？Table用于数据显示，并不负责页面布局。
在页面元素控制中，DIV是用得最多最广的一个标签元素。
DIV又叫层，其实上更是一个容器。可以通过DIV来控制元素的位置、大小与样式，他具备了容器的特点，特别适合用来动态创建与销毁。在W3C标准中，DIV占据了非常重要的地位。
Div—division，是个层，块级元素，可包含<p><h2>等常标签, DIV常用来布局，和CSS一起使用.
div可以嵌套，里面的可以继承外面的，写法 .cc div{} 或 .cc div.aa{}，aa为嵌套的div的id名字
和Table区别：table用来做显示,div用来布局
span是个面板，是个行内元素，不能包含其它标签，主要用来嵌入某个标签中显示文本或某个字符，如：<h2>所有衣服<SPAN STYLE=“color: blue; font-size=50px;”>100</SPAN>元</h2>
1). 一行三列布局
<html>
<head>
<style type="text/css">
#left {
position: absolute;
top: 15px;
left: 0px;/*设置或获取对象相对于文档层次中下个定位对象的左边界的位置。*/
border: 5px solid red;
background: #FFF;
width: 150px;
height:400px;
}
#middle {
margin: 0px 160px 0px 160px; /*相对位置，相对于body页边距，body缺省是15px.<body style="margin:0px;" bgcolor="red">*/
border: 5px solid #666;
background: #FFF;
height:400px;
}
#right {
position: absolute;
top: 15px;
right: 0px;
border: 5px solid #666;
background: #FFF;
width: 150px; /* ie5win fudge begins */
height:400px;
}
</style>
</head>
<body>
<DIV id=left><P>left</P></DIV>
<DIV id=middle>中间的部分</DIV>
<DIV id=right></DIV>
</body>
</html>
2). 一行三列布局(吊顶)
<html>
<head>
<style type="text/css">
body{
margin:2px;
}
#top{
width:100%;
border:solid thin 1px;
background-color:#3366FF;
height:80px;
}
#left {
position: absolute;
top: 90px;
left:2px;
border: 1px solid #666;
background: #FFF;
width: 150px;
}
#middle {
margin: 6px 160px 0px 160px;
border: 1px solid #666;
background: #FFF;
}
#right {
position: absolute;
top: 90px;
right: 0px;
border: 1px solid #666;
background: #FFF;
width: 150px; /* ie5win fudge begins */
}
</style>
</head>
<body>
<div id="top">中华人民共和国是一个伟大的民族。</div>
<DIV id="left">中华人民共和国中华人民共和国中华人民共和国生命之冷藏室</DIV>
<DIV id="middle">中<br />间<br />的<br />部分</DIV>
<DIV id="right">看吧，天是多么的蓝啊，地是多么的广。</DIV>
</body>
</html>
4. 其它常用标签
标题标签：<h1>…<h6>
段落：<p align=“left”>
换行：<BR>
预格式化：<pre>
文本标签：<B><I><U><SUB><SUP>
3的平方=9；3<sup>2</sup>=9
无序号列表：<UL><LI></LI></UL>
有序号列表：<OL><LI></LI></OL>
水平线：<HR noshade size=5 align=left width=100% >无阴影、宽度5
<center>居中的文字</center>
文本显示：<font color=blue size=5 face=宋体/>
图象标签：<img align=top src=a.jpg>
超级链接
<a href=“a.html#mao” target=“”>链接到页面的锚</a>
target=_blank：新窗口打开
target=_parent：父窗口打开
target=_self：当前窗口打开
target=_top：最顶层框架窗口打开
target=指定位置：指定打开的位置
<a href=“#mao”>aaa</a> 链接到一个锚
<a name=“mao”>猫</a> 定义一个锚
<a href=mailto:admin@accp.com> 连接到电子邮件
5. frameset框架
1) 一个frameset
<frameset border=0 framespacing=0 rows="120,*" >
<frame name="top" src="top.html"/>
<frameset border=0 framespacing=0 cols="200,*">
<frame name="left" src="left.html" />
<frame name="right" src="right.html" />
</frameset>
</frameset>
2) left.html
<body>
<ul>
<li>用户管理</li>
<ul>
<li><a target="right" href="right.html">普通客户</a></li>
<li><a href=javascript:sub()>VIP客户</a></li>
</ul>
</ul>
</body>
<script>
function sub() {
window.open("right.html","aa");
}
</script>
3). right.html
<body>
<h1>你好</h1>
</body>
6. 内联框架
<body>
<div align="center">
<iframe name="frame1" width="98%" height="98%" src="增删表的行.htm" />
</div>
</body>二. CSS知识
1. css特点
控制显示样式
重用
控制灵活
被所有浏览器支持
实现页面与效果分离 2. 任何标签的style对象，常有的属性
position:absolute; 绝对位置，固定不能动
top:10px; 离顶部的距离
left:10px; 离左边的距离
margin:auto; 边界，指离上个容器的距离
padding:10pt; 离文字的距离
width:100%; 宽度
height:100%; 高度
3. 样式表
1) 行内样式表
<p style=“color:red;font-family:system;font-size:36px">
<h2 style=“font-style:bold;text-align=left;color=red”>
2) 内嵌样式表
语法规则：<head><style type=“text/css”>选择器</style></head>
Html选择器：h2{color:red;font-size=24px} p{…}
Class选择器：.fire{color:red;} <td class=fire …>
ID选择器：#fire{color:red;} <td id=“fire” …>
3) 外部样式表
<link rel="stylesheet" type="text/css" href="main.css" />
<style type=“text/css” @import aa.css </style>
4) 三大选择器
当在 HTML中定义为 id=“divID”时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为 class=“divID”时，则在CSS 中对应的设置语法是.divID。
如果id=“divID”这个层中包括了一个<img></img>，则这个 img 在 CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在 class=“divID”这个层中时，则设置语法应该是.divID img {}。
HTML中的一切元素都是可以定义的，例如 table、 tr、 td、 th、 form、 img、 input...等等，如果你要在 CSS中设置它们，则直接写入元素的名称加上一对大括号{}就可以了。<head>
<style type="text/css">
body{text-align:right;color:red;font-family=system;font-size=72px;font-style=normal;}
.class1{color:yellow;}
#id1{color=green;}
</style>
<link href="a.css" type="text/css" rel="stylesheet" ></style>
</head><body>
测试
<h2 style="text-align=left;">h2</h2>
<div id=id1>id1</div>
<div class=class1>class1</div>
</body> 4. css文件编写
1) 写一个a.css文件，一定要以“;"结尾，否则不会显示样式
body {
font-family: "宋体";
font-size: 12px;
background-color: #FFFFFF;
font-weight: normal;
}
table
{
font-family: "宋体";
font-size: 12px;
width : 90%;
height :90%
}
td
{
font-family: "宋体";
font-size: 12px;
}
input{
font-family: "宋体";
font-size: 12px;
}
.title{
font-family: "宋体";
font-size: 40px;
font-weight: bold;
color:red;
vertical-align: center;
border: solid 10px green;
}
2) 写一个a.html文件
<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
关于明天停水的通知
<BR>
<div class="s1">
将从上午8：00开始，晚上会有水
</div>
</body>
</html>
5. 用css换肤
1) html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link id="linkx" href="styles1.css" rel="stylesheet" type="text/css" />
<script>
function skin(){
var v = document.all.s.options[document.all.s.selectedIndex].value;
var skinx = "styles" + v + ".css";
document.all.linkx.href = skinx;
}
</script>
</head>
<body>
<select name="s" style="position:absolute; width:100pt;left:665pt;" onchange="skin();">
<option value="1">样式1</option>
<option value="2">样式2</option>
<option value="3">样式3</option>
</select>
<div id="d1">板块1</div>
<div id="d2">板块2</div>
<div id="d3">板块3</div>
</body>
</html>
2) styles1.css
#d1{
position:absolute;
top:10pt;
left:20pt;
width:200pt;
height:200pt;
background-color:#CC3333; //背景颜色
color:#33FF33; //字体颜色
} #d2{
position:absolute;
top:10pt;
left:230pt;
width:300pt;
height:200pt;
background-color:#FF0000;
} #d3{
position:absolute;
top:220pt;
left:20pt;
width:510pt;
height:200pt;
background-color:#33FF00;
}
3) styles2.css
#d1{
position:absolute;
top:220pt;
left:20pt;
width:510pt;
height:400pt;
background-color:#33FF00;
background-image:url(14.JPG);
background-repeat:no-repeat;
} #d2{
position:absolute;
top:10pt;
left:430pt;
width:100pt;
height:200pt;
background-color:#FF0000;
} #d3{
position:absolute;
top:10pt;
left:20pt;
width:400pt;
height:200pt;
background-color:#006666;
color:#33FF33;
}
4) styles3.css
#d1{
position:absolute;
top:10pt;
left:20pt;
width:200pt;
height:200pt;
background-color:#006666;
color:#33FF33;
} #d2{
position:absolute;
top:10pt;
left:240pt;
width:200pt;
height:200pt;
background-color:#FF6633;
color:#003366;
} #d3{
position:absolute;
top:10pt;
left:460pt;
width:200pt;
height:200pt;
background-color:#336699;
color:#FF6600;
}
6. css嵌套
<html>
<head>
<style type="text/css">
#mydiv{
color:#FF0000;
}
#mydiv div.ee{
font-weight:bold;
}
.dc{
color:blue;
} .dc div{
font-style:italic;
background-color:#FFFF00;
} .dc div.aa{
border-bottom-style:solid;
border-bottom-width:thin;
border-bottom-color:#3300CC; border-top-style:solid;
border-top-width:thin;
border-top-color:#999999; border-left-style:solid;
border-left-width:thin;
border-left-color:#999999; border-right-style:solid;
border-right-width:thin;
border-right-color:#999999;
}
</style>
</head>
<body>
<div id="mydiv">中华人民共和国
<div class="ee">中华人民共和国</div>
</div>
<div class="dc">
北大青鸟1
<div>北大青鸟2</div>
<div>北大青鸟3</div>
<div class="aa">北大青鸟4</div>
</div>
</body>
</html>三. 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函数
匿名函数：
<script>
var f = function() {alert('aaa');}
var f2 = function(para) {alert(para);};
f();f2('你好');
</script>
3. 构造函数(自定对象):
function Teacher(name,gender) {
this.name = name; //this表示是Teacher的成员
this.gender = gender;
this.reading = reading;
this.work = function(obj) {
alert(obj);
}
}
function reading(book) {
alert("正在读"+book);
} var t = new Teacher('张三','女');
t.reading("平凡的世界");
t.work('张三');
4. 系统函数
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()
2). 使用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');
}
3) 应用举例
<html>
<body bgcolor="yellow">
<input value="打开模式窗口" type=button onclick="sub()">
</body>
<script>
function Teachar(name,age) {
this.name=name;
this.age=age;
}
function sub() {
var obj = new Teachar("张三",18);
var ret=window.showModalDialog("b.html",obj,"center:yes;dialogHeight:130px;dialogWidth:250px;unadorned:yes;scroll:off;help: No; status:no;resize:no");
alert(ret.msg);
}
</script>
</html>
b.html
<body>
<input value="关闭窗口并返回值" type=button onclick="sub()">
</body>
<script>
function sub() {
var obj = window.dialogArguments;
var retobj = new Object();
retobj.msg = obj.name+"的年龄是"+obj.age;
window.returnValue = retobj;
window.close();
}
</script> 4) 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=“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() {
location.href="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="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[i].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 = ".*/%$#@!~&^)(_+\=-`";
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("邮箱必须是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> 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[i].substr(0, value.length).toLowerCase() == value.toLowerCase()){
f = true; //每个选项填充到div中
var span = document.createElement("<div>");
span.innerText = values[i];
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>17. 动态树
18. 收缩条
19. js加密
20. 日期框
21. 表单动态增删改查
22. 分行下载

正文

相关阅读

html十Css十Js，html的css

Css开发iosapp，CSS开发手册

html5清除样式，css样式清除

css原位旋转代码，css旋转360度

css哪些属性可以简写，css属性总结

css点击后边框，css点击按钮让div边框变色

css无序列表代码，css无序列表超链接

css两列div自适应，css两列布局和3列布局

目录[+]