js笔记
来源：互联网 发布：centos 6 ssh拒绝访问 编辑：程序博客网 时间：2024/06/14 21:40
18讲
java script 是动态网页的基本
1，js是用于web开发的脚本语言
脚本语言往往不独立使用
脚本语言有自己的变量 语法 函数 控制语句
脚本语言实际是解释性语言（既执行时直接对源码执行）/不是编译语言
java程序 .java->,class->jvm js->浏览器
js在客户端浏览器执行
19讲
因为js是浏览器执行，因此不同的浏览器对js的支持不一样
js放的位置可以随意
<script language="javascript">
window.alert("hello");
</script>
可以出现多个script
<script language="javascript">
//js变量定义（在js中变量用var 不管类型）
var num1=456;
var num2=89;
var result=num1+num2;
window.alert('结果为'+result);//arert函数对话框
</script>
甚至可以去掉var 关键字
js中变量数据类型由js引擎决定
var name="dfg"//字符串
var kk=9;//数
js区分大小写
20讲
数组
对象
特殊类型
为空var a=null;
没负值或未定义则undefine;
强制转换：
21讲
var val=window.prompt("秦输入");//请输入
var val2=window.prompt("秦再输入");//请输入
document.writeln("nideshurushi"+parselFloat(val)+parselFloat(val2));//在html显示
<script>
document.write("<hr>for-in循环:");
document.write("<ul>");//JavaScript中用HTML的元素时,要输出这个元素才行
var a=new Array(3);
a[0]="香蕉";
a[1]="苹果";
a[2]="犁";
for(var s in a){
document.write("<li>"+a[s]+"</li>");
}
document.write("</ul>");
</script>
1>.数组的声明方式
var a1=new Array();//创建一个数组，包含0个元素,长度为0
var a2=new Array(size);//创建一个数组,长度为size
a2[0]=1;
a2[1]=2;
....,
a2[size-1]=size;
var a3=new Array(v1,v2,v3,...,vn);//创建一个数组,并且静态初始化
2>.数组的长度会自动调整
3>.数组元素的访问采用数组名[下标]的形式,有效下标为0~length-1
function <函数名>(<参数列表>){
<函数体代码>
[<return语句>](可选)
}
说明:JavaScript函数在定义时不需要指定返回值类型和是否有返回值
JavaScript中常用事件类型
onClick 组件被单击
onDbclick 组件被双击,如：
<input type="button" name="b1" value="开始测试" onClick="test1()">
onLoad 页面装载
onUnload 页面卸载,如：
<body onLoad="sayHello()" OnUnload="sayBye()">
onChange 组件内容或条目选种状态发生改变
onMousemove 鼠标移动，如：
function move(x,y){
mypic.style.left=x;
mypic.style.top=y;
}
<body onMousemove="move(event.x,event.y)">
正文信息:
<div class="mystyle" id="mypic">
<img src="63.gif">
</div>
</body>
onFocus 成为焦点
onBlur 当对象失去焦点，如：
username: <input type="text" name="username" value="请输入您的姓名.." onFocus="clear1()" onBlur="show()"/>
23讲
金字塔
空心金字塔
菱形
空心菱形
<script language="javascript">
var n=window.prompt("秦输入数字");//请输入
金字塔
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
document.writeln("*");
}
document.writeln("<br/>");
}
document.writeln("<br/>");
空心金字塔
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
if(i==n)document.writeln("*");
else if(j==1||j==(2*i-1))
document.writeln("*");
else
document.writeln(" ");
}
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
document.writeln("<br/>");
}
document.writeln("<br/>");
菱形
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
document.writeln("*");
}
document.writeln("<br/>");
}
for(var i=n-1;i>=1;i--){
for(var j=n-i;j>=1;j--){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
document.writeln("*");
}
document.writeln("<br/>");
}
document.writeln("<br/>");
空心菱形
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
if(j==1||j==(2*i-1))
document.writeln("*");
else
document.writeln(" ");
}
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
document.writeln("<br/>");
}
for(var i=n-1;i>=1;i--){
for(var j=n-i;j>=1;j--){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
if(j==1||j==(2*i-1))
document.writeln("*");
else
document.writeln(" ");
}
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
document.writeln("<br/>");
}
document.writeln("<br/>");
</script>
24讲
函数
<script language="javascript" type="text/javascript">
var n1=window.prompt("秦输入第一个数字");//请输入
var n2=window.prompt("秦输入第二个数字");//请输入
var op=window.prompt("秦输入运算");//请输入
n1=parseFloat(n1);
n2=parseFloat(n2);
var res=0;
document.write("res="+jisuan(n1,n2,op));
function jisuan(n1,n2,op){
var res=0;
if(op=="+")
{
res=n1+n2;
}
if(op=="-")
{
res=n1-n2;
}
if(op=="*")
{
res=n1*n2;
}
if(op=="/")
{
res=n1/n2;
}
return res;
}
</script>
其他html文件要使用该函数怎么办？
写一个js文件将函数放进去，需要时就引入
<script language="javascript" src="fuction1.js"></script>
var str="window.alert('0k')";//需求是把str当成一个脚本执行
eval(str);
var str1="所以其";
var str2=escape(str1);//防止汉字乱码 ，所以编码
var str3=unescape(str2);//解吗
26讲
在js 中有个arguments可以访问所有传入的值
27讲
数组：一个数组可以放几种不同的类型的数据
var weight={3,4,5,6};
.toFixed(2)//保留两位小数
数组越界会输出undefined
js数组可以动态增长（即可以赋值后大小长度可以自动增加1个）
数组拆分：.split
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
输出：
How,are,you,doing,today?//5个元素
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you
28讲
二位数组
排序
二份查找-有序数组
29讲
面向(基于)对象，
js中基于对象等同于面向对象
js么有class(类)但取了新名字叫原型对象=类
有封装 继承 多态
封装
<script language="javascript" type="text/javascript">
function cat(){
}
var cat1=new cat();
cat1.name="xiaobai";
cat1.age=3;
cat1.color="baise";
window.alert(cat1.name);
</script>
js中一切都是对象
如何判断某个对象是不是person类
if(a instanceof person)
if(a.constructor==person)
30讲
在js一切都是对象
var abc=89;//全局量
访对象属性
p1.name
p1["name"]
31讲
this:
function cat(){
this.name="xiaoming";//这样定义使用的name 是公有的
this.age=10;
this.show1=function(){ //这样定义使用的name 是公有的方法
window.alert(name);
}
function show2(){ //这样定义使用的name 是私有的方法
window.alert(name);
}
}
而不能
function cat(){
var name="xiaoming";//这样定义使用的name 是私有的
var age=10;
}
alert(name);==window.alert(name);
//
function text(){
alert(this.v);//this表示当前的对象；谁调用它就是谁
}
var v=90;
text（）；
答案是90
32讲构造函数，成员函数（还有两种方式写这里没有写）
function person(name,age){
this.name=name;
this.age=age;
this.showname=function(){
doucument.write("名字"+this.name);
}
this.jishu=function(n){
var res=0;
for(var i=1;i<=n;i++){
res=res+i;
}
return res;
}
}
var p1=new person("fg",90)
p1.show();
doucument.write("<br/>"+p1.jishu(100));
33讲 object类，闭包
可通过object类直接创建对象
var p1=new Object();
p1=.name="sfs";
var i=new Number(10);//var i=10;
Number.prototype.add=function(a){//建立Number公共函数，可以给类添加方法
return this+a;
}
window.alert(i.add(20).add(30));
var b=90;
window.alert(b.add(20));
体验Array//
js中没有重载；只认最后写的方法
如：function text(a){}
function text(a,b){}
text(20);//调用的是第二个
34讲
面向对象案例
玛丽亚游戏:
mario.html:
mario.css:
35讲
构造函数中不仅可以初始化数 ，还可以有函数（传函数）
创建对象实例的又一种形式；用于简单的，
var dog={name:'xiaogou',age:9,
fun1:function(){window.alert('sdfg');}};
window.alert(dog.name);
36讲
封装 继承 多态
封装：用var是私有
this是公共
继承：解决冗余代码
function Stu(name,age){
this.name=name;
this.age=age;
this.show=function(){
}
}
function dog(call){
this.call=call;
this.show=function(){
}
}
function midstu (name,age){//jicheng
this.stu=Stu; //就把Stu的构造函数（全部代码）交给他miastu的属性
this.stu(name,age);//不能缺少，否则没有赋值 由于是动态语言，执行时才负值
....
}
function pupil(name,age,call){//多重继承，用得少
this.stu=Stu;
this.dog=dog;
this.dog(call);
this.stu(name,age);
....
}
var m1=new midstu("fdg",20);
m1.show();
用对象冒充的方法实现继承//其实js没有继承extend
允许覆盖父方法,重写
多态：无态，天然多态
重载，js没有重载
但是支持可变参数，keyi
function abc(){
if(arguments.length==1){
}else if(arguments.length==2){
}else{
}
}
37讲 闭包
多态实例：obj.html
<script language="javascript" type="text/javascript">
function Master(){
this.feed=function(animal,food){//多态
document.write("gei"+animal.name+food.name);
}
}
function Food(name){
this.name=name;
}
function Fish(name){
this.food=Food;
this.food(name);
}
function Bone(name){
this.food=Food;
this.food(name);
}
function Animal(name){
this.name=name;
}
function cat(name){
this.animal=Animal;
this.animal(name);
}
function dog(name){
this.animal=Animal;
this.animal(name);
}
var cat1=new cat("sd");
var dog1=new dog("ddg");
var fish=new Fish("xiaoyu");
var bone=new Bone("bon");
var master=new Master();
master.feed(cat1,fish);
master.feed(dog1,bone);
</script>
闭包：涉及对象属性何时被gc处理
function A(){
var i=0;
function b(){
window.alert(i++);
}
return b;
}
var a1=new A();//闭包--〉gc回收//不会轻易回收i
a1();
a1();//表示此时i还是同一个，没回收
38讲
js内部类，系统函数
内部类：js中除了本身提供一些直接使用的类
object
JS Array
JS Boolean
JS Date
JS Math
JS Number
JS String
JS RegExp
JS Functions
JS Events
分为：静态类：类名.属性|方法
Math：
window.alert(Math.abs(-11));
abs(x)绝对值
ceil(x)进行上舍入
floor(x)下舍入
max(x,y)取大
min(x,y)小
round(x)4舍5入
random()随机值
Math.round(Math.random()*100) 1-100
动态类：var 对象=new 动态类(); 对象.属性|方法
1.Date:
var newdate=new Date();
newdate.getYear();-------
2.string类
3.Array类
4.Boolean类
5.Number类
注意：.toFiled(2)//保留两位小数
a=10;
a.tostring(2);//二进制转换
系统函数：如：parseFloat();
39讲 驱动 事件
事件驱动响应用户操作。
事件源(html元素，窗口,其他)--信息--〉事件处理程序
(监听)
案例：鼠标监听 event.html
<head>
//<script language="javascript" src="fuction1.js"></script>
<script language="javascript" type="text/javascript">
function text1(e){
window.alert( e.clientX);
}
</script>
</head>
<body onmousedown="text1(event)" >
</body>
案例：js如何访问元素style属性，进行样式修改
<head>
//<script language="javascript" src="fuction1.js"></script>
<script language="javascript" type="text/javascript">
function text1(e){
window.alert( e.clientX);
}
function test3(){
window.alert(new Date());
}
//js如何访问元素style属性，进行样式修改
function test4(e){
//window.alert(e.value);
if(e.value=="black"){
var div1=document.getElementById('div1');
div1.style.backgroundColor="black";
}else if(e.value=="red"){
var div1=document.getElementById('div1');
div1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<input type="button" value="显示时间" onclick="test3()"/>
<div id="div1" style="width:400px;height:300px;background-color:red">div1</div>
<input type="button" value="black" onclick="test4(this)"/>
<input type="button" value="red" onclick="test4(this)"/>
</body>
案例：访问外部定义的css样式//获取event.css中所有选择器都获取
event2.html
<head>
<link href="event2.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
function test4(e){
//获取event.css中所有选择器都获取
var ocssrules=document.styleSheets[0].rules;//第一个css
var style1=ocssrules[0];//第2个规则css即.style1
if(e.value=="black"){
style1.style.backgroundColor="black";}
else if(e.value=="red"){
style1.style.backgroundColor="red";}
}
</script>
</head>
<body>
<div id="div1" class="style1">div1</div>
<input type="button" value="black" onclick="test4(this)"/>
<input type="button" value="red" onclick="test4(this)"/>
</body>
event2.css
.style1{
width:600px;
height:400px;
background-color:red;
}
**js访问修改css样式
1，访问元素中style属性的 css样式
<div id="div1" style="width:400px;height:300px;background-color:red">div1</div>
2，访问外部定义的css样式
不同浏览器
<html>
<head>
<link href="event2.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
if(window.XMLHttpRequest){
if(!windowActiveXObject){
alert('Mozilla ff,safari');
}else{
alert('IE');
}
}else{
alert('IE6');
}
</script>
</head>
<body>
<div id="div1" class="style1">div1</div>
<input type="button" value="black" onclick="test4(this)"/>
<input type="button" value="red" onclick="test4(this)"/>
</body>
</html>
40讲
多个监听
onclick="test4(this),test5(this)"//有顺序关系
type="text" onfocus="test6(this)"//输入框被选
<body onload="test7()">//再打开页面前触发
</body>
<body onbeforeunload="test8()">//关掉页面qian
</body>
</body>
<body onunload="test8()">//关掉页面hou
</body>
</body>
<body oncontextmenu="return false">//使在网页中不能电击鼠标右键复制内容
</body>
</body>
<body onselectstart="return false">//使在网页中不许选择文字复制内容
</body>
转换：
1. 转换函数：
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数
。只有对String类型调用这些方法，这两个函数才能正确运行；
对其他类型返回的都是NaN(Not a Number)。
下面是使用parseFloat()方法的示例：
parseFloat("1234blue"); //returns 1234.0
parseFloat("0xA"); //returns NaN
parseFloat("22.5"); //returns 22.5
parseFloat("22.34.5"); //returns 22.34
parseFloat("0908"); //returns 908
parseFloat("blue"); //returns NaN
2. 强制类型转换
还可使用强制类型转换（type casting）处理转换值的类型。使用强制类型转换可以访问特定的值，
即使它是另一种类型的。ECMAScript中可用的3种强制类型转换如下：
Boolean(value)――把给定的值转换成Boolean型；Number(value)――
把给定的值转换成数字（可以是整数或浮点数）；String(value)――把给定的值转换成字符串。
用这三个函数之一转换值，将创建一个新值，存放由原始值直接转换成的值。
这会造成意想不到的后果。当要转换的值是至少有一个字符的字符串、非0数字或对象
（下一节将讨论这一点）时，Boolean()函数将返回true。如果该值是空字符串、数字0、
undefined或null，它将返回false。
：：：：：：
可以用下面的代码段测试Boolean型的强制类型转换。
Boolean(""); //false – empty string
Boolean("hi"); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object
用 法 结 果
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100
要执行这种强制类型转换，只需要调用作为参数传递进来的值的toString()方法，即把1转换成
"1 "，把true转换成 "true "，把false转换成 "false "，依此类推。
强制转换成字符串和调用toString()方法的唯一不同之处在于，
对null或undefined值强制类型转换可以生成字符串而不引发错误：
var s1 = String(null); //"null"
var oNull = null;
var s2 = oNull.toString(); //won’t work, causes an error
3. 利用js变量弱类型转换
举个小例子，一看，就会明白了。
<script> var str= '012.345 ';
var x = str-0;
x = x*1; </script>
数组思考转换：
<script language="javascript">
//js变量定义（在js中变量用var 不管类型）
var num1=456;
var num2=89;
var result=num1+num2;
//window.alert('结果为'+result);//arert函数
var a={};
a[0]="1";
a[1]="2";
var b={};
var d={};
var j=0;
var k=0;
for(var i=0;i<2;i++){
var c=a[i];
b[j++]=c;
d[k++]=parseFloat(c);
}
//var d=parseFloat(toString(b));
//window.alert(d);//arert函数
var e=b[0]+b[1];
var f=d[0]+d[1];
document.write(e);
document.write(f);
</script>
jisuanqi.html.....
41讲
内部类：Object Array Math String Boolen ....
dom编程
//乌龟抓鸡。mario.html
key=obj.keyCode;//获得按键
if(obj.value=="↓↓"||key==83){//按键s
mario1.style.top= (top1+10)+"px";
}
。。。。
dom编程
1.通过dom 可以写各种网页游戏
2.也是ajax的基础
dom=文档对象模型
dom是html xml的应用程序接口api
dom关系图
dom树
//把元素当对象，可以随意改变元素内容等
42讲
bom -浏览器对象模型
bom和dom
dom是bom的具体实现，从单拿出来
dom 对象层次图
window对象
1。confirm:
<html>
<head>
<script language="javascript" type="text/javascript">
function test(){
var res=window.confirm("delect");
window.alert(res);
}
</script>
</head>
<body>
<input type="button" value="delect" onclick="test()"></input>
</body>
</html>
2. setInterval:会不停的调用函数，直到dearInterval()调用或窗口关闭
<html>
<head>
<script language="javascript" type="text/javascript">
/*function test(){
var res=window.confirm("delect");
window.alert(res);
}*/
function hello(){
window.alert("hello");
}
function time(){
//在元素间的文本就是通过对象.innerText
document.getElementById("mytime").innerText=new Date().toLocaleString();
//document.write(new Date());
}
setInterval("time()",1000);
</script>
</head>
<body>
<input type="button" value="delect" onclick="test()"></input>
<span id="mytime"></span>
</body>
</html>
分析window1.html//
需求：小人动态
需求：小人走一分钟停下来休息（或者十步）
3。clearInterval()//停止
var myinterval=setInterval("time()",1000);
clearInterval(myinterval);
4。setTimeout()//在制定的毫秒后调用但只调用一次
打开页面后5秒在调用time()但只调用一次
setTimeout("time()",5000)；
43讲
5.clearTimeout//取消了setTimeout
var my=setTimeout("time()",5000)；
clearTimeout(my);
6。moveTo()//移动屏幕窗口
<html>
<head>
<script language="javascript" type="text/javascript">
function test1(){
window.moveTo(100,100);
}
</script>
</head>
<body>
<input type="button" onclick="test1()" value="移动"></input>
</body>
</html>
7。moveBy()//移动当前窗口
8。resizeTo()resizeBy
resizeTo(100,100);//调正道100，100
resizeBy(100，100);//增加100，100
9。window.open("newwindow.html","_self");//newwindow.html替换当前窗口
window.open("newwindow.html","_blank");//又打开窗口
10。opener
父窗口与子窗口通话
var new=window.open("newwindow.html","_blank");
子 传父
子窗口:
function notify(){
var val=document.getElementById("info").value;
opener.document.getElementById("myspan").innerText=val;
}
<input type="text" id="info" value="移动"></input>
<input type="button" onclick="notify()" value="通知"></input>
父窗口:
<span id="myspan">消息</span>//替换消息
。。。。
父传子
var new=window.open("newwindow.html","_blank");
new.document.getElementById("info").value=...;
window2.html:
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var new1;
function test2(){
new1=window.open("newwindow2.html","_blank");
}
function test3(){
new1.document.getElementById("info").value=document.getElementById("info2").value;
}
//-->
</script>
</head>
<body>我是窗口
<input type="button" onclick="test2()" value="打开新窗口"/>
<span id="myspan">消息</span>
<input type="text" id="info2"></input>
<input type="button" onclick="test3()" value="通知窗口"/>
</body>
</html>
newwindow2.html:
<html>
<head>
<script language="javascript" type="text/javascript">
function notify(){
var val=document.getElementById("info").value;
//window.alert(val);
opener.document.getElementById("myspan").innerText=val;
opener.document.getElementById("info2").value=document.getElementById("info").value;
}
</script>
</head>
<body>我是新窗口
<input type="text" id="info" value=""></input>
<input type="button" onclick="notify()" value="通知"></input>
</body>
</html>
案例登入:
login.html
<script language="javascript" type="text/javascript">
function checkuser(){
if(document.getElementById("uname").value=="suiqing"&&document.getElementById("pwd").value=="123"){
return true;
}else{
window.alert("cuo");
return false;
}
}
</script>
<form action="ok.html">
u:<input type="text" id="uname"/><br/>
p:<input type="password" id="pwd"/><br/>
<input type="submit" onclick="return checkuser();" value="login"/><br/>
ok.html
<script language="javascript" type="text/javascript">
//setTimeout("javascript:window.open('manage.html')",5000);
function tiao(){
clearInterval(my);
window.open('manage.html',"_self");
}
setTimeout("tiao()",5000);
function changsec(){
document.getElementById("myspan").innerText=parseFloat(document.getElementById("myspan").innerText)-1;
}
var my= setInterval("changsec()",1000);
</script>
登入成功<span id="myspan">5</span>
manage.html
<html>
<head>
</head>
<body>我是新窗口
</body>
</html>
44讲
控制状态栏：
猜拳游戏
History对象：
a.html
<a href="b.html">进入</a>
b.html
<script language="javascript" type="text/javascript">
function goback(){
history.back();// history.go(-1);
}
</script>
<a href="#" onclick="goback">返回</a>
Location对象：浏览器
Location 对象方法
属性 描述
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。
Location 对象属性
属性 描述
hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
案例
<script language="javascript" type="text/javascript">
function test(){
location.reload();
}
</script>
<body>
<input type="button" value="df" onclick="test()"/>
</body>
navigator对象：
navigator.appname//
screen对象：//屏幕
event 对象
关于邦定事件细节
1。直接邦定，跟前面监听一样
2。现获取元素再邦定
event2.html
<script language="javascript" type="text/javascript">
function test(){
document.write("hello");
}
<body>
<input type="button" id="but1" value="df" />
<script language="javascript" type="text/javascript">
document.getElementById("but1").onclick=test;
</script>
</body>
案例2：输入框不能输其他字符
<script language="javascript" type="text/javascript">
function test(event){
if(event.keyCode<48||event.keyCode>57){
window.alert("你输入的不是数字");
// window.event.returnValue=false;
return false;
}
}
<body>
<input type="text" id="text1" onkeypress="test(event)" value="df" />
<input type="button" id="but1" onclick="test()" value="提交" />
</body>
45讲
document对象
方法 描述
close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。 标签名
open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
getElementById() getElementsByName() //作用基本一样
动态创建元素，删除，添加
举例：
<html>
<head>
<script language="javascript" type="text/javascript">
function test(){
var myElement=document.createElement("a");//写希望创建的html元素标签名
//添加信息
myElement.href="http://www.sina.com";
myElement.innerText="连接sohu";
myElement.id="id1";
//myElement.style.left="200px";
//myElement.style.top="200px";
//myElement.position="absolute";
//添加到document.body
//.body.appendChild(myElement);
//添加到document.div
document.getElementById('div1').appendChild(myElement);
}
function test2(){
document.getElementById('div1').removeChild(document.getElementById('id1'));
//第二种document.getElementById('id1').parentNode.removeChild();
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="创建添加"></input>
<input type="button" onclick="test2()" value="删除id=id1"></input>
<div id="div1" style="">div1</div>
</body>
</html>
46讲
document对象
Node节点：dom树元素-〉节点
在编程中，一个html文档会做dom树对待，dom会把所有html元素影射成Node节点，于是你可以
使用Node节点的属性和方法
document.fgcolor="white";
document.bgcolor="white";
body对象
innerText//元素间的文本
innerHtml//元素间的html代码
appendChild//加元素
removeChild//删除元素
bgcolor//文档背景色
background//文档背景图
getElementsByTagName//
onload//加载时触发
onunload//关闭后触发
onbeforeunload//关闭前触发
body1.html
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
<!--
function windowonscroll(){
myHref.style.top=document.body.scrollTop+300;
myHref.style.left=document.body.scrollLeft;
}
function document_onselectstart(){
return flase;
}
//-->
</script>
<script language="javascript" for=document event=onselectstart>//=onselectstart=return false
<!--
window.alert('abc');
return document_onselectstart();
//-->
</script>
</head>
<body onscroll="return windowonscroll()" >
<textarea id="Textarea1" name="Textarea1" rows="500" cols="500">
（1）题目：如何登录学生在线服务系统？
关键字：学生在线服务系统，登录
答复：在百度中搜索“国家开发银行助学贷款信息网”，或直接在浏览器中输入网址：http://www.csls.cdb.com.cn。
（2）题目：忘记密码了怎么办？
关键字：学生在线服务系统，忘记密码
答复：学生可使用系统功能自行重置密码，系统功能包括两种，一是使用密码找回问题及答案，二是正确填写3项基础信息（第一联系人身份证号、QQ号、任意合同号）。此外，学生也可以联系95593呼叫中心或高校请求人工重置密码。
（3）题目：为什么系统提示该学生已经存在，无法注册？
关键字：学生在线服务系统，无法注册
答复：同一名学生只能在系统中注册一次，如果已经有了注册信息，则系统会提示不需再注册，直接使用原有注册信息登录即可。
（1）题目：如何登录学生在线服务系统？
关键字：学生在线服务系统，登录
答复：在百度中搜索“国家开发银行助学贷款信息网”，或直接在浏览器中输入网址：http://www.csls.cdb.com.cn。
（2）题目：忘记密码了怎么办？
关键字：学生在线服务系统，忘记密码
答复：学生可使用系统功能自行重置密码，系统功能包括两种，一是使用密码找回问题及答案，二是正确填写3项基础信息（第一联系人身份证号、QQ号、任意合同号）。此外，学生也可以联系95593呼叫中心或高校请求人工重置密码。
（3）题目：为什么系统提示该学生已经存在，无法注册？
关键字：学生在线服务系统，无法注册
答复：同一名学生只能在系统中注册一次，如果已经有了注册信息，则系统会提示不需再注册，直接使用原有注册信息登录即可。
</textarea>
<a id="myHref" href="http://www.sohu.com" style="left:0px;position:absolute;
top:300px;word-break:keep-all"><img src="aa.jpg"/></a>
</body>
</html>
47讲
body对象
小球撞击游戏
game1.html
<html>
<head>
<script language="javascript" type="text/javascript">
//定方向
directx=1;//x走
directy=1;
sunx=0;
suny=0;
function move(){
sunx+=directx;
suny+=directy;
sundiv.style.top=suny+"px";
sundiv.style.left=sunx+"px";
//判断转方向
//offsetWidth返回当前这个对象宽度
if(sunx+sundiv.offsetWidth>=document.body.clientWidth||sunx<=0){
directx=-directx;
}
if(suny+sundiv.offsetHeight>=document.body.clientHeight||suny<=0){
directy=-directy;
}
}
setInterval("move()",5);
</script>
</head>
<body style="background-image:url('aa.jpg')">
<div id="sundiv" style="position:absolute;">
<img src="sun.png"/>
</div>
</body>
</html>
<html>
<head>
<script language="javascript" type="text/javascript">
//定方向
directx=1;//x走
directy=1;
sunx=0;
suny=0;
function move(){
sunx+=directx;
suny+=directy;
sundiv.style.top=suny+"px";
sundiv.style.left=sunx+"px";
//判断转方向
//offsetWidth返回当前这个对象宽度
if(sunx+sundiv.offsetWidth>=610||sunx<=0){
directx=-directx;
}
if(suny+sundiv.offsetHeight>=410||suny<=0){
directy=-directy;
}
}
setInterval("move()",5);
</script>
</head>
<body >
<div id="div2" style="border:2px solid red;width:600px;height:400px;">
<div id="sundiv" style="position:absolute;">
<img src="sun.png"/>
</div>
</div>
</body>
</html>
木板游戏 game2.html
<html>
<head>
<script language="javascript" type="text/javascript">
//定方向
directx=1;//x走
directy=1;
sunx=0;
suny=0;
function move(){
sunx+=directx;
suny+=directy;
sundiv.style.top=suny+"px";
sundiv.style.left=sunx+"px";
//判断转方向
//offsetWidth返回当前这个对象宽度
var muban1=document.getElementById('muban1');
var muban1_top=muban1.style.top;
var muban1_left=muban1.style.left;
muban1_top=parseInt( muban1_top.substr(0, muban1_top.indexOf("p")));
muban1_left=parseInt( muban1_left.substr(0,muban1_left.indexOf("p")));
if(sunx+sundiv.offsetWidth>=610||sunx<=0){
directx=-directx;
}
if((suny==350&&sunx<=muban1_left+100&&sunx>=muban1_left)||suny<=0){
directy=-directy;
}
if(suny>356){
test3();
}
}
var i=setInterval("move()",5);
function move2(obj){
var muban1=document.getElementById('muban1');
if(window.event){
key=obj.keyCode;
}
var muban1_top= muban1.style.top;
var muban1_left=muban1.style.left;
muban1_top=parseInt(muban1_top.substr(0,muban1_top.indexOf("p")));
muban1_left=parseInt(muban1_left.substr(0,muban1_left.indexOf("p")));
if(key==83&&muban1_top<400){//按键s
muban1.style.top= (muban1_top+10)+"px";
muban1_top=muban1_top+10;
}
else if(key==68&&muban1_left<510){//按键d
muban1.style.left= (muban1_left+10)+"px";
muban1_left=muban1_left+2;
}
else if(key==65&&muban1_left>10){//按键a
muban1.style.left= (muban1_left-10)+"px";
muban1_left=muban1_left-2;
}
else if(key==87&&muban1_top>0){//按键w
muban1.style.top= (muban1_top-10)+"px";
muban1_top=muban1_top-10;
}
}
function test1(){
i=window.clearInterval(i);
// window.alert(sundiv.style.top+"-"+sundiv.style.left);
//window.alert(muban1.style.top+"-"+muban1.style.left);
}
function test2(){
i=setInterval("move()",5);
}
function test3(){
document.getElementById('sundiv').removeChild(document.getElementById('sun'));
window.alert("失败！");
}
function test4(){
location.reload(true);
//创建新元素
// var myElement=document.createElement("img");
// myElement.id="sun";
// myElement.src="sun.png";
// myElement.style.width:"30px";
// myElement.style.height:"30px";
// myElement.href="http://www.sina.com";
//myElement.innerText="连接sohu";
// myElement.id="id1";
//document.getElementById('sundiv').appendChild(myElement);
}
</script>
</head>
<body onkeydown="return move2(event)" style="margin:0 auto;">
<div id="div2" style="background-color:pink;width:600px;height:400px;">
<div id="sundiv" style="position:absolute;top:0px;left:0px;">
<img id="sun" src="sun.png" style="width:30px;height:30px;"/>
</div>
<div id="muban1" style="position:absolute;top:380px;left:0px;">
<img style="width:100px;height:20px;" src="muban.png" border="1" alt=""/>
</div>
</div>
<input type="button" onclick="test1()" value="创建"></input>
<input type="button" onclick="test2()" value="开赛"></input>
<input type="button" onclick="test4()" value="重新开始"></input>
<input type="button" onclick="test3()" value="结束"></input>
</body>
</html>
48讲
浮动窗口：fudongchuangkou.html
style对象：
与css结合
坦克转向
1。4个图片
2。一次加载背景图片，显示背景图的不同部分，实现转向
background-position-y:0px;//他是向上增大
background-position-y:30px;所以向左
background-position-y:60px;所以向下
background-position-y:240px;向上
background-position-y:-30px;所以向右
tank.html:
tankgame.html:
动态切换div
dongtaiqiehuan.html
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript">
function focustab(n){
if(n==1){
document.getElementById("div1").style.display='block';
document.getElementById("div2").style.display='none';
document.getElementById("div3").style.display='none';
document.getElementById("div4").style.display='none';
}
if(n==2){
document.getElementById("div2").style.display='block';
document.getElementById("div1").style.display='none';
document.getElementById("div3").style.display='none';
document.getElementById("div4").style.display='none';
}
if(n==3){
document.getElementById("div3").style.display='block';
document.getElementById("div1").style.display='none';
document.getElementById("div2").style.display='none';
document.getElementById("div4").style.display='none';
}
if(n==4){
document.getElementById("div4").style.display='block';
document.getElementById("div1").style.display='none';
document.getElementById("div3").style.display='none';
document.getElementById("div2").style.display='none';
}
}
</script>
</head>
<body>
<div style="float:left;">
<ul style="padding:0px;margin-top:5px;float:left;">
<li id="f1" onmouseover="focustab(1);" style="width:20px;list-style-type:none;background-color:pink">热销</li>
<li id="f2" onmouseover="focustab(2);" style="width:20px;list-style-type:none;background-color:red">新盘</li>
<li id="f3" onmouseover="focustab(3);" style="width:20px;list-style-type:none;background-color:blue">家装</li>
<li id="f4" onmouseover="focustab(4);" style="width:20px;list-style-type:none;background-color:green">二手房</li>
</ul>
</div>
<div id="div1" style="float:left;display:block;">
<ul style="list-style-type:none;padding:5px;margin-top:0px;float:left;">
<li><a href="#">一百元红包免费送</a></li>
<li><a href="#">手机客户端下载</a></li>
<li><a href="#">植物大战僵尸！</a></li>
<li><a href="#">泡泡龙(星球版)</a></li>
<li><a href="#">雷电战机之星战版</a></li>
<li><a href="#">滑雪大冒险西游伴</a></li>
<li><a href="#">地下城勇士神枪手</a></li>
<li><a href="#">搜狐手游权威媒体</a></li>
</ul>
</div>
<div id="div2" style="display:none;float:left">
<ul style="list-style-type:none;padding:5px;margin-top:0px;float:left;">
<li><a href="#">地铁一号线傍海掏现房</a></li>
<li><a href="#">明星投资公寓首看地段</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">龙(星球版)</a></li>
<li><a href="#">之星战版</a></li>
<li><a href="#">大冒险西游伴</a></li>
<li><a href="#">勇士神枪手</a></li>
<li><a href="#">权威媒体</a></li>
</ul>
</div>
<div id="div3" style="display:none;float:left">
<ul style="list-style-type:none;padding:5px;margin-top:0px;float:left;">
<li><a href="#">高达上</a></li>
<li><a href="#">发生</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大冒险西游伴</a></li>
<li><a href="#">大冒险西游伴</a></li>
<li><a href="#">大冒险西游伴</a></li>
<li><a href="#">大冒险西游伴</a></li>
<li><a href="#">大冒险西游伴</a></li>
</ul>
</div>
<div id="div4" style="display:none;float:left">
<ul style="list-style-type:none;padding:5px;margin-top:0px;float:left;">
<li><a href="#">花仙姑</a></li>
<li><a href="#">明星投资公寓首看地段</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大战僵尸！</a></li>
</ul>
</div>
</body>
</html>
49讲
仿搜狐页面动态切换div
50讲
style对象
树桩展开与关闭
style1.html
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript">
function test1_onclick(){
if(test1.innerText=="-"){
mylist.style.display="none";
test1.innerText="+";
}
else{
mylist.style.display="block";
test1.innerText="-";
}
}
</script>
</head>
<body>
<p><font face="宋体"><span id="test1" language=javascript
style="CURSOR:hand;border:1px ridge red; " //变小手
onclick="return test1_onclick()">-</span>myfamily</font></p>
<ul id="mylist">
<li>爸爸</li>
<li>妈妈</li>
<li>弟弟</li>
</ul>
</body>
</html>
**我的购物车
style2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title>style2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" language="javascript">
<!--
function gouwu(obj){
//遍历
//window.alert("ok");
var fruits=document.getElementsByName("fruit");
var totalprice=0;
//window.alert(fruits);
for(var i=0;i<fruits.length;i++){
if(fruits[i].checked){
totalprice+=parseFloat(fruits[i].value);
}
}
myspan.innerText=totalprice+"元";
//window.alert(totalprice);
}
//-->
</script>
</head>
<body>
<hl>我的购物车</hl><br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="10"/>苹果 10元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉 20元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>西瓜 30元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="40"/>李子 40元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>瓜 50元<br/>
总价是：<span id="myspan">0元</span>
</body>
</html>
**复选框
<html>
<head>
</head>
<body>
<select id=mycourse onchange="getcourse();">
<option value="" selected>--请选择一门课程--</option>
</select>
<textarea id=myares cols=30 rows=10>
</textarea>
<script type="text/javascript" language="javascript">
var last_select_num=3;
var myoption=document.createElement("option");
myoption.value="java";
myoption.text="java";
mycourse.add(myoption);
myoption=document.createElement("option");
myoption.value="oracle";
myoption.text="oracle";
mycourse.add(myoption);
myoption=document.createElement("option");
myoption.value="j2ee";
myoption.text="j2ee";
mycourse.add(myoption);
function getcourse(){
myares.value+="你选中了1："+mycourse.value+"\r\n";
}
</script>
</body>
</html>
style2.html
**全选与取消
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title>style2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" language="javascript">
<!--
function selectcheck(obj){
var fruits=document.getElementsByName("fruit");
if(obj.innerText=='全选'){
for(var i=0;i<fruits.length;i++){
fruits[i].checked=true;
}
}
else{
for(var i=0;i<fruits.length;i++){
fruits[i].checked=false;
}
}
}
//-->
</script>
</head>
<body>
<hl>我的购物车</hl><br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="10"/>苹果 10元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉 20元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>西瓜 30元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="40"/>李子 40元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>瓜 50元<br/>
<!-- 总价是：<span id="myspan">0元</span>-->
<a href="#" onclick="selectcheck(this)">全选</a>
<a href="#" onclick="selectcheck(this)">取消</a>
</body>
</html>
form对象//表单
allforms=document.forms;//获取所有表单
51讲
document-----
1.onclick="return checkinfo()"放在submit中
2.<form action="" onsubmit="return checkinfo()">
表单验证案例
register.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title>register.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./register.css">
<script type="text/javascript">
function checkinfo(){
span1.innerText="";
span2.innerText="";
span3.innerText="";
//获取表达的用户名
if(document.forms[0].username.value.length<4||document.forms[0].username.value.length>6){
span1.innerText="用户名在4-6";
return false;
}
//判断密码
if(document.forms[0].pwd1.value.length<=3){
span2.innerText="密码在大于3位";
return false;
}
if(document.forms[0].pwd2.value!=document.forms[0].pwd1.value){
span3.innerText="密码不相等";
return false;
}
}
</script>
</head>
<body>
<hl>用户注册</hl>
<form action="" onsubmit="return checkinfo()">
<table border="1">
<tr><td class="td1">用户名</td><td class="td2"><input class="style1" type="text" name="username"/><span id="span1" ></span></td></tr>
<tr><td>密码</td><td><input class="style1" type="password" name="pwd1"/><span id="span2" ></span></td></tr>
<tr><td>确认密码</td><td><input class="style1" type="password" name="pwd2"/><span id="span3" ></span></td></tr>
<tr><td>年龄</td><td><input class="style1" type="text" name="age"/></td></tr>
<tr><td>电子邮件</td><td><input class="style1" type="text" name="email"/></td></tr>
<tr><td>电话号码</td><td><input class="style1" type="text" name="phone"/></td></tr>
<tr><td><input type="submit" value="注册新用户"/></td>
<td><input type="reset" value="重新填写"/></td></tr>
</table>
</body>
</html>
register.css
.style1{
width:100px;
}
.td2{
width:300px;
}
.td1{
width:80px;
}
#span1,#span2,#span3{
font-size:10px;
color:red;
}
img对象
onerror="test1()"//图片加载失败
onload="test2()"//图片加载成功
link对象
all对象//提供html所有元素访问
52讲
table对象//表格
cells
rows
table2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title></title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="./register.css">-->
<script type="text/javascript">
function addhero(){
//遍历重复
for(var i=0;i<mytab.rows.length;i++){
var eachrow=mytab.rows[i];
if(eachrow.cells[0].innerText==no.value){
window.alert("编号不可重复");
return;
}
}
var tablerow=mytab.insertRow(mytab.rows.length);
tablerow.insertCell(0).innerText=no.value;
tablerow.insertCell(1).innerText=name1.value;
tablerow.insertCell(2).innerText=nickname.value;
}
</script>
</head>
<body>
<hl>英雄排行榜</hl>
<table id="mytab" border="1px">
<tr><td>排名</td><td>姓名</td><td>外号</td></tr>
<tr><td>1</td><td>松江</td><td>及时雨</td></tr>
<tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>
</table>
<hl>请输入新的浩瀚</hl><br/>
编号<input type="text" id="no"/><br/>
名字<input type="text" id="name1"/><br/>
外号<input type="text" id="nickname"/><br/>
<input type="button" onclick="addhero()" value="添加"/>
</body>
</html>
改良版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title></title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="./register.css">-->
<script type="text/javascript">
function addhero(){
//遍历重复
var s=0;
for(var i=0;i<mytab.rows.length;i++){
var eachrow=mytab.rows[i];
if(eachrow.cells[0].innerText==no.value){
window.alert("编号不可重复");
return;
}
else if(parseFloat(no.value)>parseFloat(eachrow.cells[0].innerText)){
s=parseFloat(i)+1;
}else{
s=parseFloat(i);
}
}
var tablerow=mytab.insertRow(s);
tablerow.insertCell(0).innerText=no.value;
tablerow.insertCell(1).innerText=name1.value;
tablerow.insertCell(2).innerText=nickname.value;
}
</script>
</head>
<body>
<hl>英雄排行榜</hl>
<table id="mytab" border="1px">
<tr><td>排名</td><td>姓名</td><td>外号</td></tr>
<tr><td>1</td><td>松江</td><td>及时雨</td></tr>
<tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>
</table>
<hl>请输入新的浩瀚</hl><br/>
编号<input type="text" id="no"/><br/>
名字<input type="text" id="name1"/><br/>
外号<input type="text" id="nickname"/><br/>
<input type="button" onclick="addhero()" value="添加"/>
</body>
</html>
53讲
正则表达式
寻找字串
判断字符验证
RegExp对象//regular expressive
模式匹配一类字符串公式
两种方法：
1.var reExp=/正则表达式/gi//g表示全局
2.var reExp=new RegExp(正则表达式,"gi");//i表示不区分大小写，可以去掉
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title>reg.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
<!--
function test(){
var con=content.innerText;
//window.alert(con);//在360不能运行
var myreg=/(\d){4}/gi;//找四个数字
//var myreg=new RegExp("(\\d){4}","gi");//注意转义
while(res=myreg.exec(con)){
window.alert("找到"+res[0]);
}
}
//-->
</script>
</head>
<body>
<textarea id="content" rows="10" cols="20"></textarea>
<input type="button" onclick="test()" value="测试"/>
</body>
</html>
54讲
1。
var myreg=/^(abc)/gi;//以abc 开头
若考虑换行:
var myreg=/^(abc)/gim;//以abc 开头
2.exec:
test:检测是否符合某个模式，返回true false
myreg.test(con);
3.match replace
function test3(){
var con=content.innerText;
var myreg=/(\d){4}/gi;
var newcon=con.replace(myreg,"这里是4个数");
content.innerText=newcon;
}
function test2(){
var con=content.innerText;
var myreg=/abc/gi;
res=con.match(myreg);
for(var i=o;i<res.length;i++){
window.alert(i+""+res[0]);
}
}
//index 找到字符串的下标
function test4(){
var con=content.innerText;
var myreg=/(\d){4}/gi;
while(res=myreg.exec(con)){
window.alert(RegExp.index+RegExp.leftcontext+RegExp.rightcontext);
//左边内容，右边内容
}
}
找8989
function test5(){
var con=content.innerText;
var myreg=/(\d)(\d)\2\1/gi;
while(res=myreg.exec(con)){
window.alert(res[0]);
}
}
**/(\d)(\d)\2\1/gi**第一个\d表示第一个子表达式，第2个\d表示第2个子表达式，
\2表示反向引用第2个子表达式，\1表示反向引用第1个子表达式，
找11223344
var myreg=/(\d)\1(\d)\2(\d)\3/gi;
找12321-333999111
var myreg=/(\d){5}-(\d)\2\2(\d)\3\3(\d)\4\4/gi;
元字符：
1。限字符
{n}//指定出现的次数
1{4}//表示1111
若1{3}去匹配1111111得到111 111 两个
{n,m}//表示至少出现n次最多m次
1{3,4}去匹配1111111得到1111 111 两个//先得到多的
+说明//
/a+/gi 表示1到多次
/1+/gi去匹配1111111得到1111111 1个//先得到多的
*//表示*号前一个字符出现0到多次
/a1*/gi去匹配a1111111得到a1111111 1个
?//表示？号前一个字符出现0到1次
/a1？/gi去匹配a111得到a1
a211得到a
[a-z]表示a-z任意字符
/[a-z]/gi 输入abcd 得a b c d 4个
/[a-z]{4}/gi 输入abcd 得abcd 1个
[^a-z]说明可以匹配不是a-z中任意字符
\d//0-9数字[0-9]
\D//不是0-9数字=[^0-9]
\w//英文和数字=[a-zA-Z0-9]
\W//相反
\s//匹配任意空白字符（空格 制表字符）
\S//相反
.//匹配\n之外的所有字符
需要加转义的字符：. * + ( ) $ / \ ? [ ] ^ { }
定位符：
/^han/gi去匹配开始位置hanshunping han han得到han
/han$/gi去匹配结束位置
选择匹配符：
/(han|韩)/gi
电子邮件：
1。只有一个@
2。前面用户名，可以a-zA-Z0-9 _-
3。后面域名---.com ---.--.cn
function test7(){
var con=content.innerText;
var myreg=/^[a-zA-Z0-0_-]+@([a-zA-Z0-9]+\.)+(com|cn)$/gi;
while(res=myreg.exec(con)){
window.alert(res[0]);
}
}
java script 是动态网页的基本
1，js是用于web开发的脚本语言
脚本语言往往不独立使用
脚本语言有自己的变量 语法 函数 控制语句
脚本语言实际是解释性语言（既执行时直接对源码执行）/不是编译语言
java程序 .java->,class->jvm js->浏览器
js在客户端浏览器执行
19讲
因为js是浏览器执行，因此不同的浏览器对js的支持不一样
js放的位置可以随意
<script language="javascript">
window.alert("hello");
</script>
可以出现多个script
<script language="javascript">
//js变量定义（在js中变量用var 不管类型）
var num1=456;
var num2=89;
var result=num1+num2;
window.alert('结果为'+result);//arert函数对话框
</script>
甚至可以去掉var 关键字
js中变量数据类型由js引擎决定
var name="dfg"//字符串
var kk=9;//数
js区分大小写
20讲
数组
对象
特殊类型
为空var a=null;
没负值或未定义则undefine;
强制转换：
21讲
var val=window.prompt("秦输入");//请输入
var val2=window.prompt("秦再输入");//请输入
document.writeln("nideshurushi"+parselFloat(val)+parselFloat(val2));//在html显示
<script>
document.write("<hr>for-in循环:");
document.write("<ul>");//JavaScript中用HTML的元素时,要输出这个元素才行
var a=new Array(3);
a[0]="香蕉";
a[1]="苹果";
a[2]="犁";
for(var s in a){
document.write("<li>"+a[s]+"</li>");
}
document.write("</ul>");
</script>
1>.数组的声明方式
var a1=new Array();//创建一个数组，包含0个元素,长度为0
var a2=new Array(size);//创建一个数组,长度为size
a2[0]=1;
a2[1]=2;
....,
a2[size-1]=size;
var a3=new Array(v1,v2,v3,...,vn);//创建一个数组,并且静态初始化
2>.数组的长度会自动调整
3>.数组元素的访问采用数组名[下标]的形式,有效下标为0~length-1
function <函数名>(<参数列表>){
<函数体代码>
[<return语句>](可选)
}
说明:JavaScript函数在定义时不需要指定返回值类型和是否有返回值
JavaScript中常用事件类型
onClick 组件被单击
onDbclick 组件被双击,如：
<input type="button" name="b1" value="开始测试" onClick="test1()">
onLoad 页面装载
onUnload 页面卸载,如：
<body onLoad="sayHello()" OnUnload="sayBye()">
onChange 组件内容或条目选种状态发生改变
onMousemove 鼠标移动，如：
function move(x,y){
mypic.style.left=x;
mypic.style.top=y;
}
<body onMousemove="move(event.x,event.y)">
正文信息:
<div class="mystyle" id="mypic">
<img src="63.gif">
</div>
</body>
onFocus 成为焦点
onBlur 当对象失去焦点，如：
username: <input type="text" name="username" value="请输入您的姓名.." onFocus="clear1()" onBlur="show()"/>
23讲
金字塔
空心金字塔
菱形
空心菱形
<script language="javascript">
var n=window.prompt("秦输入数字");//请输入
金字塔
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
document.writeln("*");
}
document.writeln("<br/>");
}
document.writeln("<br/>");
空心金字塔
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
if(i==n)document.writeln("*");
else if(j==1||j==(2*i-1))
document.writeln("*");
else
document.writeln(" ");
}
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
document.writeln("<br/>");
}
document.writeln("<br/>");
菱形
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
document.writeln("*");
}
document.writeln("<br/>");
}
for(var i=n-1;i>=1;i--){
for(var j=n-i;j>=1;j--){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
document.writeln("*");
}
document.writeln("<br/>");
}
document.writeln("<br/>");
空心菱形
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
if(j==1||j==(2*i-1))
document.writeln("*");
else
document.writeln(" ");
}
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
document.writeln("<br/>");
}
for(var i=n-1;i>=1;i--){
for(var j=n-i;j>=1;j--){
document.writeln(" ");
}
for(var j=1;j<=2*i-1;j++){
if(j==1||j==(2*i-1))
document.writeln("*");
else
document.writeln(" ");
}
for(var j=1;j<=n-i;j++){
document.writeln(" ");
}
document.writeln("<br/>");
}
document.writeln("<br/>");
</script>
24讲
函数
<script language="javascript" type="text/javascript">
var n1=window.prompt("秦输入第一个数字");//请输入
var n2=window.prompt("秦输入第二个数字");//请输入
var op=window.prompt("秦输入运算");//请输入
n1=parseFloat(n1);
n2=parseFloat(n2);
var res=0;
document.write("res="+jisuan(n1,n2,op));
function jisuan(n1,n2,op){
var res=0;
if(op=="+")
{
res=n1+n2;
}
if(op=="-")
{
res=n1-n2;
}
if(op=="*")
{
res=n1*n2;
}
if(op=="/")
{
res=n1/n2;
}
return res;
}
</script>
其他html文件要使用该函数怎么办？
写一个js文件将函数放进去，需要时就引入
<script language="javascript" src="fuction1.js"></script>
var str="window.alert('0k')";//需求是把str当成一个脚本执行
eval(str);
var str1="所以其";
var str2=escape(str1);//防止汉字乱码 ，所以编码
var str3=unescape(str2);//解吗
26讲
在js 中有个arguments可以访问所有传入的值
27讲
数组：一个数组可以放几种不同的类型的数据
var weight={3,4,5,6};
.toFixed(2)//保留两位小数
数组越界会输出undefined
js数组可以动态增长（即可以赋值后大小长度可以自动增加1个）
数组拆分：.split
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
输出：
How,are,you,doing,today?//5个元素
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you
28讲
二位数组
排序
二份查找-有序数组
29讲
面向(基于)对象，
js中基于对象等同于面向对象
js么有class(类)但取了新名字叫原型对象=类
有封装 继承 多态
封装
<script language="javascript" type="text/javascript">
function cat(){
}
var cat1=new cat();
cat1.name="xiaobai";
cat1.age=3;
cat1.color="baise";
window.alert(cat1.name);
</script>
js中一切都是对象
如何判断某个对象是不是person类
if(a instanceof person)
if(a.constructor==person)
30讲
在js一切都是对象
var abc=89;//全局量
访对象属性
p1.name
p1["name"]
31讲
this:
function cat(){
this.name="xiaoming";//这样定义使用的name 是公有的
this.age=10;
this.show1=function(){ //这样定义使用的name 是公有的方法
window.alert(name);
}
function show2(){ //这样定义使用的name 是私有的方法
window.alert(name);
}
}
而不能
function cat(){
var name="xiaoming";//这样定义使用的name 是私有的
var age=10;
}
alert(name);==window.alert(name);
//
function text(){
alert(this.v);//this表示当前的对象；谁调用它就是谁
}
var v=90;
text（）；
答案是90
32讲构造函数，成员函数（还有两种方式写这里没有写）
function person(name,age){
this.name=name;
this.age=age;
this.showname=function(){
doucument.write("名字"+this.name);
}
this.jishu=function(n){
var res=0;
for(var i=1;i<=n;i++){
res=res+i;
}
return res;
}
}
var p1=new person("fg",90)
p1.show();
doucument.write("<br/>"+p1.jishu(100));
33讲 object类，闭包
可通过object类直接创建对象
var p1=new Object();
p1=.name="sfs";
var i=new Number(10);//var i=10;
Number.prototype.add=function(a){//建立Number公共函数，可以给类添加方法
return this+a;
}
window.alert(i.add(20).add(30));
var b=90;
window.alert(b.add(20));
体验Array//
js中没有重载；只认最后写的方法
如：function text(a){}
function text(a,b){}
text(20);//调用的是第二个
34讲
面向对象案例
玛丽亚游戏:
mario.html:
mario.css:
35讲
构造函数中不仅可以初始化数 ，还可以有函数（传函数）
创建对象实例的又一种形式；用于简单的，
var dog={name:'xiaogou',age:9,
fun1:function(){window.alert('sdfg');}};
window.alert(dog.name);
36讲
封装 继承 多态
封装：用var是私有
this是公共
继承：解决冗余代码
function Stu(name,age){
this.name=name;
this.age=age;
this.show=function(){
}
}
function dog(call){
this.call=call;
this.show=function(){
}
}
function midstu (name,age){//jicheng
this.stu=Stu; //就把Stu的构造函数（全部代码）交给他miastu的属性
this.stu(name,age);//不能缺少，否则没有赋值 由于是动态语言，执行时才负值
....
}
function pupil(name,age,call){//多重继承，用得少
this.stu=Stu;
this.dog=dog;
this.dog(call);
this.stu(name,age);
....
}
var m1=new midstu("fdg",20);
m1.show();
用对象冒充的方法实现继承//其实js没有继承extend
允许覆盖父方法,重写
多态：无态，天然多态
重载，js没有重载
但是支持可变参数，keyi
function abc(){
if(arguments.length==1){
}else if(arguments.length==2){
}else{
}
}
37讲 闭包
多态实例：obj.html
<script language="javascript" type="text/javascript">
function Master(){
this.feed=function(animal,food){//多态
document.write("gei"+animal.name+food.name);
}
}
function Food(name){
this.name=name;
}
function Fish(name){
this.food=Food;
this.food(name);
}
function Bone(name){
this.food=Food;
this.food(name);
}
function Animal(name){
this.name=name;
}
function cat(name){
this.animal=Animal;
this.animal(name);
}
function dog(name){
this.animal=Animal;
this.animal(name);
}
var cat1=new cat("sd");
var dog1=new dog("ddg");
var fish=new Fish("xiaoyu");
var bone=new Bone("bon");
var master=new Master();
master.feed(cat1,fish);
master.feed(dog1,bone);
</script>
闭包：涉及对象属性何时被gc处理
function A(){
var i=0;
function b(){
window.alert(i++);
}
return b;
}
var a1=new A();//闭包--〉gc回收//不会轻易回收i
a1();
a1();//表示此时i还是同一个，没回收
38讲
js内部类，系统函数
内部类：js中除了本身提供一些直接使用的类
object
JS Array
JS Boolean
JS Date
JS Math
JS Number
JS String
JS RegExp
JS Functions
JS Events
分为：静态类：类名.属性|方法
Math：
window.alert(Math.abs(-11));
abs(x)绝对值
ceil(x)进行上舍入
floor(x)下舍入
max(x,y)取大
min(x,y)小
round(x)4舍5入
random()随机值
Math.round(Math.random()*100) 1-100
动态类：var 对象=new 动态类(); 对象.属性|方法
1.Date:
var newdate=new Date();
newdate.getYear();-------
2.string类
3.Array类
4.Boolean类
5.Number类
注意：.toFiled(2)//保留两位小数
a=10;
a.tostring(2);//二进制转换
系统函数：如：parseFloat();
39讲 驱动 事件
事件驱动响应用户操作。
事件源(html元素，窗口,其他)--信息--〉事件处理程序
(监听)
案例：鼠标监听 event.html
<head>
//<script language="javascript" src="fuction1.js"></script>
<script language="javascript" type="text/javascript">
function text1(e){
window.alert( e.clientX);
}
</script>
</head>
<body onmousedown="text1(event)" >
</body>
案例：js如何访问元素style属性，进行样式修改
<head>
//<script language="javascript" src="fuction1.js"></script>
<script language="javascript" type="text/javascript">
function text1(e){
window.alert( e.clientX);
}
function test3(){
window.alert(new Date());
}
//js如何访问元素style属性，进行样式修改
function test4(e){
//window.alert(e.value);
if(e.value=="black"){
var div1=document.getElementById('div1');
div1.style.backgroundColor="black";
}else if(e.value=="red"){
var div1=document.getElementById('div1');
div1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<input type="button" value="显示时间" onclick="test3()"/>
<div id="div1" style="width:400px;height:300px;background-color:red">div1</div>
<input type="button" value="black" onclick="test4(this)"/>
<input type="button" value="red" onclick="test4(this)"/>
</body>
案例：访问外部定义的css样式//获取event.css中所有选择器都获取
event2.html
<head>
<link href="event2.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
function test4(e){
//获取event.css中所有选择器都获取
var ocssrules=document.styleSheets[0].rules;//第一个css
var style1=ocssrules[0];//第2个规则css即.style1
if(e.value=="black"){
style1.style.backgroundColor="black";}
else if(e.value=="red"){
style1.style.backgroundColor="red";}
}
</script>
</head>
<body>
<div id="div1" class="style1">div1</div>
<input type="button" value="black" onclick="test4(this)"/>
<input type="button" value="red" onclick="test4(this)"/>
</body>
event2.css
.style1{
width:600px;
height:400px;
background-color:red;
}
**js访问修改css样式
1，访问元素中style属性的 css样式
<div id="div1" style="width:400px;height:300px;background-color:red">div1</div>
2，访问外部定义的css样式
不同浏览器
<html>
<head>
<link href="event2.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
if(window.XMLHttpRequest){
if(!windowActiveXObject){
alert('Mozilla ff,safari');
}else{
alert('IE');
}
}else{
alert('IE6');
}
</script>
</head>
<body>
<div id="div1" class="style1">div1</div>
<input type="button" value="black" onclick="test4(this)"/>
<input type="button" value="red" onclick="test4(this)"/>
</body>
</html>
40讲
多个监听
onclick="test4(this),test5(this)"//有顺序关系
type="text" onfocus="test6(this)"//输入框被选
<body onload="test7()">//再打开页面前触发
</body>
<body onbeforeunload="test8()">//关掉页面qian
</body>
</body>
<body onunload="test8()">//关掉页面hou
</body>
</body>
<body oncontextmenu="return false">//使在网页中不能电击鼠标右键复制内容
</body>
</body>
<body onselectstart="return false">//使在网页中不许选择文字复制内容
</body>
转换：
1. 转换函数：
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数
。只有对String类型调用这些方法，这两个函数才能正确运行；
对其他类型返回的都是NaN(Not a Number)。
下面是使用parseFloat()方法的示例：
parseFloat("1234blue"); //returns 1234.0
parseFloat("0xA"); //returns NaN
parseFloat("22.5"); //returns 22.5
parseFloat("22.34.5"); //returns 22.34
parseFloat("0908"); //returns 908
parseFloat("blue"); //returns NaN
2. 强制类型转换
还可使用强制类型转换（type casting）处理转换值的类型。使用强制类型转换可以访问特定的值，
即使它是另一种类型的。ECMAScript中可用的3种强制类型转换如下：
Boolean(value)――把给定的值转换成Boolean型；Number(value)――
把给定的值转换成数字（可以是整数或浮点数）；String(value)――把给定的值转换成字符串。
用这三个函数之一转换值，将创建一个新值，存放由原始值直接转换成的值。
这会造成意想不到的后果。当要转换的值是至少有一个字符的字符串、非0数字或对象
（下一节将讨论这一点）时，Boolean()函数将返回true。如果该值是空字符串、数字0、
undefined或null，它将返回false。
：：：：：：
可以用下面的代码段测试Boolean型的强制类型转换。
Boolean(""); //false – empty string
Boolean("hi"); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object
用 法 结 果
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100
要执行这种强制类型转换，只需要调用作为参数传递进来的值的toString()方法，即把1转换成
"1 "，把true转换成 "true "，把false转换成 "false "，依此类推。
强制转换成字符串和调用toString()方法的唯一不同之处在于，
对null或undefined值强制类型转换可以生成字符串而不引发错误：
var s1 = String(null); //"null"
var oNull = null;
var s2 = oNull.toString(); //won’t work, causes an error
3. 利用js变量弱类型转换
举个小例子，一看，就会明白了。
<script> var str= '012.345 ';
var x = str-0;
x = x*1; </script>
数组思考转换：
<script language="javascript">
//js变量定义（在js中变量用var 不管类型）
var num1=456;
var num2=89;
var result=num1+num2;
//window.alert('结果为'+result);//arert函数
var a={};
a[0]="1";
a[1]="2";
var b={};
var d={};
var j=0;
var k=0;
for(var i=0;i<2;i++){
var c=a[i];
b[j++]=c;
d[k++]=parseFloat(c);
}
//var d=parseFloat(toString(b));
//window.alert(d);//arert函数
var e=b[0]+b[1];
var f=d[0]+d[1];
document.write(e);
document.write(f);
</script>
jisuanqi.html.....
41讲
内部类：Object Array Math String Boolen ....
dom编程
//乌龟抓鸡。mario.html
key=obj.keyCode;//获得按键
if(obj.value=="↓↓"||key==83){//按键s
mario1.style.top= (top1+10)+"px";
}
。。。。
dom编程
1.通过dom 可以写各种网页游戏
2.也是ajax的基础
dom=文档对象模型
dom是html xml的应用程序接口api
dom关系图
dom树
//把元素当对象，可以随意改变元素内容等
42讲
bom -浏览器对象模型
bom和dom
dom是bom的具体实现，从单拿出来
dom 对象层次图
window对象
1。confirm:
<html>
<head>
<script language="javascript" type="text/javascript">
function test(){
var res=window.confirm("delect");
window.alert(res);
}
</script>
</head>
<body>
<input type="button" value="delect" onclick="test()"></input>
</body>
</html>
2. setInterval:会不停的调用函数，直到dearInterval()调用或窗口关闭
<html>
<head>
<script language="javascript" type="text/javascript">
/*function test(){
var res=window.confirm("delect");
window.alert(res);
}*/
function hello(){
window.alert("hello");
}
function time(){
//在元素间的文本就是通过对象.innerText
document.getElementById("mytime").innerText=new Date().toLocaleString();
//document.write(new Date());
}
setInterval("time()",1000);
</script>
</head>
<body>
<input type="button" value="delect" onclick="test()"></input>
<span id="mytime"></span>
</body>
</html>
分析window1.html//
需求：小人动态
需求：小人走一分钟停下来休息（或者十步）
3。clearInterval()//停止
var myinterval=setInterval("time()",1000);
clearInterval(myinterval);
4。setTimeout()//在制定的毫秒后调用但只调用一次
打开页面后5秒在调用time()但只调用一次
setTimeout("time()",5000)；
43讲
5.clearTimeout//取消了setTimeout
var my=setTimeout("time()",5000)；
clearTimeout(my);
6。moveTo()//移动屏幕窗口
<html>
<head>
<script language="javascript" type="text/javascript">
function test1(){
window.moveTo(100,100);
}
</script>
</head>
<body>
<input type="button" onclick="test1()" value="移动"></input>
</body>
</html>
7。moveBy()//移动当前窗口
8。resizeTo()resizeBy
resizeTo(100,100);//调正道100，100
resizeBy(100，100);//增加100，100
9。window.open("newwindow.html","_self");//newwindow.html替换当前窗口
window.open("newwindow.html","_blank");//又打开窗口
10。opener
父窗口与子窗口通话
var new=window.open("newwindow.html","_blank");
子 传父
子窗口:
function notify(){
var val=document.getElementById("info").value;
opener.document.getElementById("myspan").innerText=val;
}
<input type="text" id="info" value="移动"></input>
<input type="button" onclick="notify()" value="通知"></input>
父窗口:
<span id="myspan">消息</span>//替换消息
。。。。
父传子
var new=window.open("newwindow.html","_blank");
new.document.getElementById("info").value=...;
window2.html:
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var new1;
function test2(){
new1=window.open("newwindow2.html","_blank");
}
function test3(){
new1.document.getElementById("info").value=document.getElementById("info2").value;
}
//-->
</script>
</head>
<body>我是窗口
<input type="button" onclick="test2()" value="打开新窗口"/>
<span id="myspan">消息</span>
<input type="text" id="info2"></input>
<input type="button" onclick="test3()" value="通知窗口"/>
</body>
</html>
newwindow2.html:
<html>
<head>
<script language="javascript" type="text/javascript">
function notify(){
var val=document.getElementById("info").value;
//window.alert(val);
opener.document.getElementById("myspan").innerText=val;
opener.document.getElementById("info2").value=document.getElementById("info").value;
}
</script>
</head>
<body>我是新窗口
<input type="text" id="info" value=""></input>
<input type="button" onclick="notify()" value="通知"></input>
</body>
</html>
案例登入:
login.html
<script language="javascript" type="text/javascript">
function checkuser(){
if(document.getElementById("uname").value=="suiqing"&&document.getElementById("pwd").value=="123"){
return true;
}else{
window.alert("cuo");
return false;
}
}
</script>
<form action="ok.html">
u:<input type="text" id="uname"/><br/>
p:<input type="password" id="pwd"/><br/>
<input type="submit" onclick="return checkuser();" value="login"/><br/>
ok.html
<script language="javascript" type="text/javascript">
//setTimeout("javascript:window.open('manage.html')",5000);
function tiao(){
clearInterval(my);
window.open('manage.html',"_self");
}
setTimeout("tiao()",5000);
function changsec(){
document.getElementById("myspan").innerText=parseFloat(document.getElementById("myspan").innerText)-1;
}
var my= setInterval("changsec()",1000);
</script>
登入成功<span id="myspan">5</span>
manage.html
<html>
<head>
</head>
<body>我是新窗口
</body>
</html>
44讲
控制状态栏：
猜拳游戏
History对象：
a.html
<a href="b.html">进入</a>
b.html
<script language="javascript" type="text/javascript">
function goback(){
history.back();// history.go(-1);
}
</script>
<a href="#" onclick="goback">返回</a>
Location对象：浏览器
Location 对象方法
属性 描述
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。
Location 对象属性
属性 描述
hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
案例
<script language="javascript" type="text/javascript">
function test(){
location.reload();
}
</script>
<body>
<input type="button" value="df" onclick="test()"/>
</body>
navigator对象：
navigator.appname//
screen对象：//屏幕
event 对象
关于邦定事件细节
1。直接邦定，跟前面监听一样
2。现获取元素再邦定
event2.html
<script language="javascript" type="text/javascript">
function test(){
document.write("hello");
}
<body>
<input type="button" id="but1" value="df" />
<script language="javascript" type="text/javascript">
document.getElementById("but1").onclick=test;
</script>
</body>
案例2：输入框不能输其他字符
<script language="javascript" type="text/javascript">
function test(event){
if(event.keyCode<48||event.keyCode>57){
window.alert("你输入的不是数字");
// window.event.returnValue=false;
return false;
}
}
<body>
<input type="text" id="text1" onkeypress="test(event)" value="df" />
<input type="button" id="but1" onclick="test()" value="提交" />
</body>
45讲
document对象
方法 描述
close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。 标签名
open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
getElementById() getElementsByName() //作用基本一样
动态创建元素，删除，添加
举例：
<html>
<head>
<script language="javascript" type="text/javascript">
function test(){
var myElement=document.createElement("a");//写希望创建的html元素标签名
//添加信息
myElement.href="http://www.sina.com";
myElement.innerText="连接sohu";
myElement.id="id1";
//myElement.style.left="200px";
//myElement.style.top="200px";
//myElement.position="absolute";
//添加到document.body
//.body.appendChild(myElement);
//添加到document.div
document.getElementById('div1').appendChild(myElement);
}
function test2(){
document.getElementById('div1').removeChild(document.getElementById('id1'));
//第二种document.getElementById('id1').parentNode.removeChild();
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="创建添加"></input>
<input type="button" onclick="test2()" value="删除id=id1"></input>
<div id="div1" style="">div1</div>
</body>
</html>
46讲
document对象
Node节点：dom树元素-〉节点
在编程中，一个html文档会做dom树对待，dom会把所有html元素影射成Node节点，于是你可以
使用Node节点的属性和方法
document.fgcolor="white";
document.bgcolor="white";
body对象
innerText//元素间的文本
innerHtml//元素间的html代码
appendChild//加元素
removeChild//删除元素
bgcolor//文档背景色
background//文档背景图
getElementsByTagName//
onload//加载时触发
onunload//关闭后触发
onbeforeunload//关闭前触发
body1.html
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
<!--
function windowonscroll(){
myHref.style.top=document.body.scrollTop+300;
myHref.style.left=document.body.scrollLeft;
}
function document_onselectstart(){
return flase;
}
//-->
</script>
<script language="javascript" for=document event=onselectstart>//=onselectstart=return false
<!--
window.alert('abc');
return document_onselectstart();
//-->
</script>
</head>
<body onscroll="return windowonscroll()" >
<textarea id="Textarea1" name="Textarea1" rows="500" cols="500">
（1）题目：如何登录学生在线服务系统？
关键字：学生在线服务系统，登录
答复：在百度中搜索“国家开发银行助学贷款信息网”，或直接在浏览器中输入网址：http://www.csls.cdb.com.cn。
（2）题目：忘记密码了怎么办？
关键字：学生在线服务系统，忘记密码
答复：学生可使用系统功能自行重置密码，系统功能包括两种，一是使用密码找回问题及答案，二是正确填写3项基础信息（第一联系人身份证号、QQ号、任意合同号）。此外，学生也可以联系95593呼叫中心或高校请求人工重置密码。
（3）题目：为什么系统提示该学生已经存在，无法注册？
关键字：学生在线服务系统，无法注册
答复：同一名学生只能在系统中注册一次，如果已经有了注册信息，则系统会提示不需再注册，直接使用原有注册信息登录即可。
（1）题目：如何登录学生在线服务系统？
关键字：学生在线服务系统，登录
答复：在百度中搜索“国家开发银行助学贷款信息网”，或直接在浏览器中输入网址：http://www.csls.cdb.com.cn。
（2）题目：忘记密码了怎么办？
关键字：学生在线服务系统，忘记密码
答复：学生可使用系统功能自行重置密码，系统功能包括两种，一是使用密码找回问题及答案，二是正确填写3项基础信息（第一联系人身份证号、QQ号、任意合同号）。此外，学生也可以联系95593呼叫中心或高校请求人工重置密码。
（3）题目：为什么系统提示该学生已经存在，无法注册？
关键字：学生在线服务系统，无法注册
答复：同一名学生只能在系统中注册一次，如果已经有了注册信息，则系统会提示不需再注册，直接使用原有注册信息登录即可。
</textarea>
<a id="myHref" href="http://www.sohu.com" style="left:0px;position:absolute;
top:300px;word-break:keep-all"><img src="aa.jpg"/></a>
</body>
</html>
47讲
body对象
小球撞击游戏
game1.html
<html>
<head>
<script language="javascript" type="text/javascript">
//定方向
directx=1;//x走
directy=1;
sunx=0;
suny=0;
function move(){
sunx+=directx;
suny+=directy;
sundiv.style.top=suny+"px";
sundiv.style.left=sunx+"px";
//判断转方向
//offsetWidth返回当前这个对象宽度
if(sunx+sundiv.offsetWidth>=document.body.clientWidth||sunx<=0){
directx=-directx;
}
if(suny+sundiv.offsetHeight>=document.body.clientHeight||suny<=0){
directy=-directy;
}
}
setInterval("move()",5);
</script>
</head>
<body style="background-image:url('aa.jpg')">
<div id="sundiv" style="position:absolute;">
<img src="sun.png"/>
</div>
</body>
</html>
<html>
<head>
<script language="javascript" type="text/javascript">
//定方向
directx=1;//x走
directy=1;
sunx=0;
suny=0;
function move(){
sunx+=directx;
suny+=directy;
sundiv.style.top=suny+"px";
sundiv.style.left=sunx+"px";
//判断转方向
//offsetWidth返回当前这个对象宽度
if(sunx+sundiv.offsetWidth>=610||sunx<=0){
directx=-directx;
}
if(suny+sundiv.offsetHeight>=410||suny<=0){
directy=-directy;
}
}
setInterval("move()",5);
</script>
</head>
<body >
<div id="div2" style="border:2px solid red;width:600px;height:400px;">
<div id="sundiv" style="position:absolute;">
<img src="sun.png"/>
</div>
</div>
</body>
</html>
木板游戏 game2.html
<html>
<head>
<script language="javascript" type="text/javascript">
//定方向
directx=1;//x走
directy=1;
sunx=0;
suny=0;
function move(){
sunx+=directx;
suny+=directy;
sundiv.style.top=suny+"px";
sundiv.style.left=sunx+"px";
//判断转方向
//offsetWidth返回当前这个对象宽度
var muban1=document.getElementById('muban1');
var muban1_top=muban1.style.top;
var muban1_left=muban1.style.left;
muban1_top=parseInt( muban1_top.substr(0, muban1_top.indexOf("p")));
muban1_left=parseInt( muban1_left.substr(0,muban1_left.indexOf("p")));
if(sunx+sundiv.offsetWidth>=610||sunx<=0){
directx=-directx;
}
if((suny==350&&sunx<=muban1_left+100&&sunx>=muban1_left)||suny<=0){
directy=-directy;
}
if(suny>356){
test3();
}
}
var i=setInterval("move()",5);
function move2(obj){
var muban1=document.getElementById('muban1');
if(window.event){
key=obj.keyCode;
}
var muban1_top= muban1.style.top;
var muban1_left=muban1.style.left;
muban1_top=parseInt(muban1_top.substr(0,muban1_top.indexOf("p")));
muban1_left=parseInt(muban1_left.substr(0,muban1_left.indexOf("p")));
if(key==83&&muban1_top<400){//按键s
muban1.style.top= (muban1_top+10)+"px";
muban1_top=muban1_top+10;
}
else if(key==68&&muban1_left<510){//按键d
muban1.style.left= (muban1_left+10)+"px";
muban1_left=muban1_left+2;
}
else if(key==65&&muban1_left>10){//按键a
muban1.style.left= (muban1_left-10)+"px";
muban1_left=muban1_left-2;
}
else if(key==87&&muban1_top>0){//按键w
muban1.style.top= (muban1_top-10)+"px";
muban1_top=muban1_top-10;
}
}
function test1(){
i=window.clearInterval(i);
// window.alert(sundiv.style.top+"-"+sundiv.style.left);
//window.alert(muban1.style.top+"-"+muban1.style.left);
}
function test2(){
i=setInterval("move()",5);
}
function test3(){
document.getElementById('sundiv').removeChild(document.getElementById('sun'));
window.alert("失败！");
}
function test4(){
location.reload(true);
//创建新元素
// var myElement=document.createElement("img");
// myElement.id="sun";
// myElement.src="sun.png";
// myElement.style.width:"30px";
// myElement.style.height:"30px";
// myElement.href="http://www.sina.com";
//myElement.innerText="连接sohu";
// myElement.id="id1";
//document.getElementById('sundiv').appendChild(myElement);
}
</script>
</head>
<body onkeydown="return move2(event)" style="margin:0 auto;">
<div id="div2" style="background-color:pink;width:600px;height:400px;">
<div id="sundiv" style="position:absolute;top:0px;left:0px;">
<img id="sun" src="sun.png" style="width:30px;height:30px;"/>
</div>
<div id="muban1" style="position:absolute;top:380px;left:0px;">
<img style="width:100px;height:20px;" src="muban.png" border="1" alt=""/>
</div>
</div>
<input type="button" onclick="test1()" value="创建"></input>
<input type="button" onclick="test2()" value="开赛"></input>
<input type="button" onclick="test4()" value="重新开始"></input>
<input type="button" onclick="test3()" value="结束"></input>
</body>
</html>
48讲
浮动窗口：fudongchuangkou.html
style对象：
与css结合
坦克转向
1。4个图片
2。一次加载背景图片，显示背景图的不同部分，实现转向
background-position-y:0px;//他是向上增大
background-position-y:30px;所以向左
background-position-y:60px;所以向下
background-position-y:240px;向上
background-position-y:-30px;所以向右
tank.html:
tankgame.html:
动态切换div
dongtaiqiehuan.html
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript">
function focustab(n){
if(n==1){
document.getElementById("div1").style.display='block';
document.getElementById("div2").style.display='none';
document.getElementById("div3").style.display='none';
document.getElementById("div4").style.display='none';
}
if(n==2){
document.getElementById("div2").style.display='block';
document.getElementById("div1").style.display='none';
document.getElementById("div3").style.display='none';
document.getElementById("div4").style.display='none';
}
if(n==3){
document.getElementById("div3").style.display='block';
document.getElementById("div1").style.display='none';
document.getElementById("div2").style.display='none';
document.getElementById("div4").style.display='none';
}
if(n==4){
document.getElementById("div4").style.display='block';
document.getElementById("div1").style.display='none';
document.getElementById("div3").style.display='none';
document.getElementById("div2").style.display='none';
}
}
</script>
</head>
<body>
<div style="float:left;">
<ul style="padding:0px;margin-top:5px;float:left;">
<li id="f1" onmouseover="focustab(1);" style="width:20px;list-style-type:none;background-color:pink">热销</li>
<li id="f2" onmouseover="focustab(2);" style="width:20px;list-style-type:none;background-color:red">新盘</li>
<li id="f3" onmouseover="focustab(3);" style="width:20px;list-style-type:none;background-color:blue">家装</li>
<li id="f4" onmouseover="focustab(4);" style="width:20px;list-style-type:none;background-color:green">二手房</li>
</ul>
</div>
<div id="div1" style="float:left;display:block;">
<ul style="list-style-type:none;padding:5px;margin-top:0px;float:left;">
<li><a href="#">一百元红包免费送</a></li>
<li><a href="#">手机客户端下载</a></li>
<li><a href="#">植物大战僵尸！</a></li>
<li><a href="#">泡泡龙(星球版)</a></li>
<li><a href="#">雷电战机之星战版</a></li>
<li><a href="#">滑雪大冒险西游伴</a></li>
<li><a href="#">地下城勇士神枪手</a></li>
<li><a href="#">搜狐手游权威媒体</a></li>
</ul>
</div>
<div id="div2" style="display:none;float:left">
<ul style="list-style-type:none;padding:5px;margin-top:0px;float:left;">
<li><a href="#">地铁一号线傍海掏现房</a></li>
<li><a href="#">明星投资公寓首看地段</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">龙(星球版)</a></li>
<li><a href="#">之星战版</a></li>
<li><a href="#">大冒险西游伴</a></li>
<li><a href="#">勇士神枪手</a></li>
<li><a href="#">权威媒体</a></li>
</ul>
</div>
<div id="div3" style="display:none;float:left">
<ul style="list-style-type:none;padding:5px;margin-top:0px;float:left;">
<li><a href="#">高达上</a></li>
<li><a href="#">发生</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大冒险西游伴</a></li>
<li><a href="#">大冒险西游伴</a></li>
<li><a href="#">大冒险西游伴</a></li>
<li><a href="#">大冒险西游伴</a></li>
<li><a href="#">大冒险西游伴</a></li>
</ul>
</div>
<div id="div4" style="display:none;float:left">
<ul style="list-style-type:none;padding:5px;margin-top:0px;float:left;">
<li><a href="#">花仙姑</a></li>
<li><a href="#">明星投资公寓首看地段</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大战僵尸！</a></li>
<li><a href="#">大战僵尸！</a></li>
</ul>
</div>
</body>
</html>
49讲
仿搜狐页面动态切换div
50讲
style对象
树桩展开与关闭
style1.html
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript">
function test1_onclick(){
if(test1.innerText=="-"){
mylist.style.display="none";
test1.innerText="+";
}
else{
mylist.style.display="block";
test1.innerText="-";
}
}
</script>
</head>
<body>
<p><font face="宋体"><span id="test1" language=javascript
style="CURSOR:hand;border:1px ridge red; " //变小手
onclick="return test1_onclick()">-</span>myfamily</font></p>
<ul id="mylist">
<li>爸爸</li>
<li>妈妈</li>
<li>弟弟</li>
</ul>
</body>
</html>
**我的购物车
style2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title>style2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" language="javascript">
<!--
function gouwu(obj){
//遍历
//window.alert("ok");
var fruits=document.getElementsByName("fruit");
var totalprice=0;
//window.alert(fruits);
for(var i=0;i<fruits.length;i++){
if(fruits[i].checked){
totalprice+=parseFloat(fruits[i].value);
}
}
myspan.innerText=totalprice+"元";
//window.alert(totalprice);
}
//-->
</script>
</head>
<body>
<hl>我的购物车</hl><br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="10"/>苹果 10元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉 20元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>西瓜 30元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="40"/>李子 40元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>瓜 50元<br/>
总价是：<span id="myspan">0元</span>
</body>
</html>
**复选框
<html>
<head>
</head>
<body>
<select id=mycourse onchange="getcourse();">
<option value="" selected>--请选择一门课程--</option>
</select>
<textarea id=myares cols=30 rows=10>
</textarea>
<script type="text/javascript" language="javascript">
var last_select_num=3;
var myoption=document.createElement("option");
myoption.value="java";
myoption.text="java";
mycourse.add(myoption);
myoption=document.createElement("option");
myoption.value="oracle";
myoption.text="oracle";
mycourse.add(myoption);
myoption=document.createElement("option");
myoption.value="j2ee";
myoption.text="j2ee";
mycourse.add(myoption);
function getcourse(){
myares.value+="你选中了1："+mycourse.value+"\r\n";
}
</script>
</body>
</html>
style2.html
**全选与取消
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title>style2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" language="javascript">
<!--
function selectcheck(obj){
var fruits=document.getElementsByName("fruit");
if(obj.innerText=='全选'){
for(var i=0;i<fruits.length;i++){
fruits[i].checked=true;
}
}
else{
for(var i=0;i<fruits.length;i++){
fruits[i].checked=false;
}
}
}
//-->
</script>
</head>
<body>
<hl>我的购物车</hl><br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="10"/>苹果 10元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉 20元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>西瓜 30元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="40"/>李子 40元<br/>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>瓜 50元<br/>
<!-- 总价是：<span id="myspan">0元</span>-->
<a href="#" onclick="selectcheck(this)">全选</a>
<a href="#" onclick="selectcheck(this)">取消</a>
</body>
</html>
form对象//表单
allforms=document.forms;//获取所有表单
51讲
document-----
1.onclick="return checkinfo()"放在submit中
2.<form action="" onsubmit="return checkinfo()">
表单验证案例
register.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title>register.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./register.css">
<script type="text/javascript">
function checkinfo(){
span1.innerText="";
span2.innerText="";
span3.innerText="";
//获取表达的用户名
if(document.forms[0].username.value.length<4||document.forms[0].username.value.length>6){
span1.innerText="用户名在4-6";
return false;
}
//判断密码
if(document.forms[0].pwd1.value.length<=3){
span2.innerText="密码在大于3位";
return false;
}
if(document.forms[0].pwd2.value!=document.forms[0].pwd1.value){
span3.innerText="密码不相等";
return false;
}
}
</script>
</head>
<body>
<hl>用户注册</hl>
<form action="" onsubmit="return checkinfo()">
<table border="1">
<tr><td class="td1">用户名</td><td class="td2"><input class="style1" type="text" name="username"/><span id="span1" ></span></td></tr>
<tr><td>密码</td><td><input class="style1" type="password" name="pwd1"/><span id="span2" ></span></td></tr>
<tr><td>确认密码</td><td><input class="style1" type="password" name="pwd2"/><span id="span3" ></span></td></tr>
<tr><td>年龄</td><td><input class="style1" type="text" name="age"/></td></tr>
<tr><td>电子邮件</td><td><input class="style1" type="text" name="email"/></td></tr>
<tr><td>电话号码</td><td><input class="style1" type="text" name="phone"/></td></tr>
<tr><td><input type="submit" value="注册新用户"/></td>
<td><input type="reset" value="重新填写"/></td></tr>
</table>
</body>
</html>
register.css
.style1{
width:100px;
}
.td2{
width:300px;
}
.td1{
width:80px;
}
#span1,#span2,#span3{
font-size:10px;
color:red;
}
img对象
onerror="test1()"//图片加载失败
onload="test2()"//图片加载成功
link对象
all对象//提供html所有元素访问
52讲
table对象//表格
cells
rows
table2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title></title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="./register.css">-->
<script type="text/javascript">
function addhero(){
//遍历重复
for(var i=0;i<mytab.rows.length;i++){
var eachrow=mytab.rows[i];
if(eachrow.cells[0].innerText==no.value){
window.alert("编号不可重复");
return;
}
}
var tablerow=mytab.insertRow(mytab.rows.length);
tablerow.insertCell(0).innerText=no.value;
tablerow.insertCell(1).innerText=name1.value;
tablerow.insertCell(2).innerText=nickname.value;
}
</script>
</head>
<body>
<hl>英雄排行榜</hl>
<table id="mytab" border="1px">
<tr><td>排名</td><td>姓名</td><td>外号</td></tr>
<tr><td>1</td><td>松江</td><td>及时雨</td></tr>
<tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>
</table>
<hl>请输入新的浩瀚</hl><br/>
编号<input type="text" id="no"/><br/>
名字<input type="text" id="name1"/><br/>
外号<input type="text" id="nickname"/><br/>
<input type="button" onclick="addhero()" value="添加"/>
</body>
</html>
改良版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title></title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="./register.css">-->
<script type="text/javascript">
function addhero(){
//遍历重复
var s=0;
for(var i=0;i<mytab.rows.length;i++){
var eachrow=mytab.rows[i];
if(eachrow.cells[0].innerText==no.value){
window.alert("编号不可重复");
return;
}
else if(parseFloat(no.value)>parseFloat(eachrow.cells[0].innerText)){
s=parseFloat(i)+1;
}else{
s=parseFloat(i);
}
}
var tablerow=mytab.insertRow(s);
tablerow.insertCell(0).innerText=no.value;
tablerow.insertCell(1).innerText=name1.value;
tablerow.insertCell(2).innerText=nickname.value;
}
</script>
</head>
<body>
<hl>英雄排行榜</hl>
<table id="mytab" border="1px">
<tr><td>排名</td><td>姓名</td><td>外号</td></tr>
<tr><td>1</td><td>松江</td><td>及时雨</td></tr>
<tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>
</table>
<hl>请输入新的浩瀚</hl><br/>
编号<input type="text" id="no"/><br/>
名字<input type="text" id="name1"/><br/>
外号<input type="text" id="nickname"/><br/>
<input type="button" onclick="addhero()" value="添加"/>
</body>
</html>
53讲
正则表达式
寻找字串
判断字符验证
RegExp对象//regular expressive
模式匹配一类字符串公式
两种方法：
1.var reExp=/正则表达式/gi//g表示全局
2.var reExp=new RegExp(正则表达式,"gi");//i表示不区分大小写，可以去掉
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--xhtml-->
<html>
<head>
<title>reg.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
<!--
function test(){
var con=content.innerText;
//window.alert(con);//在360不能运行
var myreg=/(\d){4}/gi;//找四个数字
//var myreg=new RegExp("(\\d){4}","gi");//注意转义
while(res=myreg.exec(con)){
window.alert("找到"+res[0]);
}
}
//-->
</script>
</head>
<body>
<textarea id="content" rows="10" cols="20"></textarea>
<input type="button" onclick="test()" value="测试"/>
</body>
</html>
54讲
1。
var myreg=/^(abc)/gi;//以abc 开头
若考虑换行:
var myreg=/^(abc)/gim;//以abc 开头
2.exec:
test:检测是否符合某个模式，返回true false
myreg.test(con);
3.match replace
function test3(){
var con=content.innerText;
var myreg=/(\d){4}/gi;
var newcon=con.replace(myreg,"这里是4个数");
content.innerText=newcon;
}
function test2(){
var con=content.innerText;
var myreg=/abc/gi;
res=con.match(myreg);
for(var i=o;i<res.length;i++){
window.alert(i+""+res[0]);
}
}
//index 找到字符串的下标
function test4(){
var con=content.innerText;
var myreg=/(\d){4}/gi;
while(res=myreg.exec(con)){
window.alert(RegExp.index+RegExp.leftcontext+RegExp.rightcontext);
//左边内容，右边内容
}
}
找8989
function test5(){
var con=content.innerText;
var myreg=/(\d)(\d)\2\1/gi;
while(res=myreg.exec(con)){
window.alert(res[0]);
}
}
**/(\d)(\d)\2\1/gi**第一个\d表示第一个子表达式，第2个\d表示第2个子表达式，
\2表示反向引用第2个子表达式，\1表示反向引用第1个子表达式，
找11223344
var myreg=/(\d)\1(\d)\2(\d)\3/gi;
找12321-333999111
var myreg=/(\d){5}-(\d)\2\2(\d)\3\3(\d)\4\4/gi;
元字符：
1。限字符
{n}//指定出现的次数
1{4}//表示1111
若1{3}去匹配1111111得到111 111 两个
{n,m}//表示至少出现n次最多m次
1{3,4}去匹配1111111得到1111 111 两个//先得到多的
+说明//
/a+/gi 表示1到多次
/1+/gi去匹配1111111得到1111111 1个//先得到多的
*//表示*号前一个字符出现0到多次
/a1*/gi去匹配a1111111得到a1111111 1个
?//表示？号前一个字符出现0到1次
/a1？/gi去匹配a111得到a1
a211得到a
[a-z]表示a-z任意字符
/[a-z]/gi 输入abcd 得a b c d 4个
/[a-z]{4}/gi 输入abcd 得abcd 1个
[^a-z]说明可以匹配不是a-z中任意字符
\d//0-9数字[0-9]
\D//不是0-9数字=[^0-9]
\w//英文和数字=[a-zA-Z0-9]
\W//相反
\s//匹配任意空白字符（空格 制表字符）
\S//相反
.//匹配\n之外的所有字符
需要加转义的字符：. * + ( ) $ / \ ? [ ] ^ { }
定位符：
/^han/gi去匹配开始位置hanshunping han han得到han
/han$/gi去匹配结束位置
选择匹配符：
/(han|韩)/gi
电子邮件：
1。只有一个@
2。前面用户名，可以a-zA-Z0-9 _-
3。后面域名---.com ---.--.cn
function test7(){
var con=content.innerText;
var myreg=/^[a-zA-Z0-0_-]+@([a-zA-Z0-9]+\.)+(com|cn)$/gi;
while(res=myreg.exec(con)){
window.alert(res[0]);
}
}
0 0
- JS笔记
- js 笔记
- JS笔记
- JS 笔记
- Js笔记
- js笔记
- js笔记
- js笔记
- JS笔记
- js笔记
- js笔记
- js笔记
- JS笔记
- js笔记
- js笔记
- js 笔记
- JS笔记
- JS笔记
- [BZOJ1178][Apio2009]CONVENTION会议中心（单调栈+dp+set）
- Android 关于WebView全方面的使用（项目应用篇）
- Mybatis核心杂谈
- Spring 框架面试题总结
- apache的MultiViews的问题
- js笔记
- 递归建立链表单一head变量
- openCV-基础
- 设计模式-单例模式
- LightOJ1079-Just another Robbery
- 【编程素质】算法-合并排序
- 兼容性问题
- selinux对文件的控制
- Android触摸手势
