第一部分 js基础
一、 定义变量
var 变量名;
使用typeof 运算符判断变量的类型。
二、 输出
(1) window.alert();主要用于做代码的调试。
(2) document.write();在页面中输出内容,它可以输出html标记。
(3) console.log();控制台输出,主要用于做代码的调试。
三、 程序的流程控制
1、 if语句
2、 if…else语句
3、 if..elseif …..else语句。
练习:输入一个成绩,求其等级。
<script type="text/javascript"> var a=window.prompt('输入一个成绩',60); if(a>100||a<0){ alert('成绩不合法'); }else{ if(a>=90){ alert('优秀'); }else if(a>=80){ alert('良好'); }else if(a>=70){ alert('中等'); }else if(a>=60){ alert('及格'); }else{ console.log('张三<br/>'); document.write('<b style="color:red;">不及格</b>'); } } </script> |
练习:输入两个数,和一个运算符,求四则运算(+ - * /),并输出结果。
<script type="text/javascript"> var a=prompt('请输入第一个数',''); a=parseInt(a); var b=prompt('请输入第二个数',''); b=parseInt(b); var c=prompt('请输入一个运算符',''); if(c=='+'){ alert(a+b); }else if(c=='-'){ alert(a-b); }else if(c=="+"){ alert(a*b); }else{ alert(a/b); }
</script> |
4、 多分支选择语句switch
格式:
Switch(表达式){
Case 常量:语句break;
Case 常量:语句 break;
…
Default:
语句n
}
练习:输入一个成绩,求其等级。
<script type="text/javascript"> var a=prompt('输入成绩',0); a=parseInt(a/10);//转换到0-10之间的数。 switch(a){ case 10: case 9:alert('优秀');break; case 8:alert('良好');break; case 7:alert('中等');break; case 6:alert('及格');break; default: alert('不及格'); } </script> |
5循环结构
(1) while(条件){
循环语句
应该有使循环趋于结束的语句、i++
}
(2) do{
循环体
}while(条件);
(3) for(1;2;3){
循环体
}
如:
For(;;){
}
While循环 1+2+3+。。。+100
<script type="text/javascript"> var sum=0;//定义一个变量存储和 var i=1; while(i<=100){ sum=sum+i;//sum存储中间结果也存储最终结果。 i++; } alert('sum='+sum); /* (1)sum=0 i=1 i<=100? sum=0+1;i=2 (2)i=2 i<=100? sum=0+1+2 0+1+2+3+4+5+6 * */ </script> |
for循环 1+2+3+。。。+100
<script type="text/javascript"> var sum=0; for(var i=0;i<=100;i++) { sum=sum+i; } alert(sum); </script> |
第二部分 js的高级部分
一、函数
1、定义也叫方法 它可以完成一个功能。类似于封装。它的好处是定一次,可以反复调用。
2、如何定义函数
function 函数名(参数){
函数体;
}
说明:
(1)函数名要符合标识符的命名规则(字母、数字、下划线和$符号)如:
function $(){
}//在jquery 中$(‘#one’)
(2)函数名后手圆括号不能省,括号中是参数,可以有,也可以没有,如果没有参数就叫无参函数,如果有,就叫有参函数。如:
function print(){//无参函数
alert(‘hello funtion’);
}
function sum(a,b){//有参函数
alert(a+b);
}
说明:在定义函数时,函数的形式参数在定义时不能指定var 关键字。
3、函数的调用
函数名(实际参数);函数不调用,是不会执行的。
4、函数的返回值 return
在一个函数内部可以有,也可以没有return语句,可以有一个,也可以有多个,但遇到第一个return语句,函数就不再往下执行了。有没有return语句,取决于我们是不是要用这个返回值做其它的运算,如果用必须有return.
练习:定义一个函数,求1+2+…..+n的和。N自行输入。
function sum(n){ var total=0; for(var i=0;i<=n;i++){ total+=i; } return total; } var n=prompt('请输一个数n',0); // var c=sum(n); // alert(c); alert(sum(n)); |
说明:在函数定义时,不会为形式参数分配存储空间,只有发生函数调用时,才会为形参分配空间,而且当函数调用结束,形参自动释放掉。在函数调用时传递实参给形参,如果实参是普通变量,改变形参的值不会改变实参的值。
5、函数的嵌套调用,它是指在调用一个函数的过程,又调用了其它的函数。
练习:
<script type="text/javascript"> function test1(a,b){ alert(a+b+test2(a,b)); } function test2(x,y){ return x-y; } test1(3,4); </script> |
6、递归调用,在调用一个函数的过程中又直接或间接调用自己。
练习:求5!1*2*3*4*5; 1的阶乘。
var t=1;//存储阶乘的结果 function test(n){ if(n==1){ return 1; }else{ t=n*test(n-1); } return t; } |
7、回调函数,是指在调用一个函数的过程,使用一个函数作为参数,并且在调用的过程中回调了作为参数的函数。这里会使用匿名函数,匿名函数用于回调函数中使用。那么回调用函数通常用于js的事件处理中。
<script> //函数名是什么东西? /*function fun(){ alert('test'); } alert(fun); 结论:函数名代表整个函数的定义 */ //函数名可不可以做为函数的参数使用 /*function fun1(a,b,fun){ alert(fun); } function fun2(){ alert('fun2'); } fun1(3,4,fun2); 结论:函数名可以作为函数的参数使用是可以的。 * */ /*function fun1(a,b,fun){ alert(fun); } function fun2(){alert('fun2');} fun1(3,4,function fun2(){ alert('fun2'); } ); 结论:把整个函数定义作为参数使用是可以的 * */ function fun1(a,b,fun){ fun(a,b); } fun1(3,4,function(x,y){ alert() }); </script> |
8、函数定义的另一种形式
var 变量名=function(){
函数体;
}
//函数定义的另一种形式 var test=function(){ alert('ok'); } test(); |
注意:此时变量名,就相当于函数名。
作业:定义一个函数,实现以下功能:
1.求一个输入区间如:1-100,输出这个区间能被3整除的数。
2.求一个输入区间如:-100-100,输出这个区间的所有负数
要求用回调函数实现。
<script type="text/javascript"> //定义的函数它可以取出能被3整除的数 function ys(start,end,fun){ for(var i=start;i<=end;i++){ if(fun(i)){ document.write(i+"<br/>"); } } } ys(1,100,function(num){ if(num%3==0){ return true; }else{ return false; } }); ys(-100,100,function(num){ if(num<0){ return true; }else{ return false; } }); </script> |
9、自调用函数,就是自己调用自己。
格式:
(function(形参列表){
函数体
})(实参列表);
(function(x,y){ alert(x+y); })(3,5); |
10、全局变量和局部变量
全局变量:不是定义在函数内部的变量,就是全局变量,它的生命周期是从定义的位置开始到程序结束。
局部变量,一般就是定义在函数内部的变量。
var num=5; function test(){ var num=8; } test(); alert(num); |
11、函数的参数数组。Arguments,在调用函数时,在被调用的函数中隐藏着一个数组arguments,它用来存储函数调用时,传递过来的参数。
function fun(){ //alert('ok'); //alert(arguments[3]); for(var i=0,sum=0;i<arguments.length;i++){ sum+=arguments[i]; } alert(sum); } fun(1,3,5); |
二、数组
1、为什么要使用数组?数组元素的值是无规律的,而数组的下标是有规律。
2、如何定义数组?
(1)字面量定义形式 var a=[];a是数组名,[]是用于存储数组元素的,在js中数组不需要指定大小。数组元素可以是任意类型的(包括对象类型)。
(2)使用构造函数定义数组 格式:
var 数组名=new Array();
var a=[ { name:'张三', age:10 }, { name:'李四', age:20 } ]; alert(a[0].name); |
在定义数组时,直接赋值。
var arr=new Array(1,3,5,7,9); alert(arr[3]); |
当只指构造函数指定一个值时,不是表示一个数组元素,而是表示数组的大小。
var arr=new Array(2); alert(arr[0]); |
3、数组元素的引用
使用下标的方式引用数组元素,注意:数组下标是从0开始的。
4、数组名代表什么?
ar arr=new Array(1,3,5,7,9); alert(arr); |
通过数组名,可以输出全部的数组元素。
5、使用数组作为函数的参数进行传递
var a=[1,3,5,7,9]; function fun(b){ for(var i=0;i<b.length;i++){ b[i]+=1; } } fun(a); for(var i=0;i<a.length;i++){ document.write(a[i]+"<br/>"); } |
6、数组常用的属性和方法
(1)length属性,用于获取数组的长度。
(2)push(x),它是向数组中最后的位置添加数组元素x。返回数组的大小。
(3)pop();删除数组中的最后一个元素。
(4)unshift(x),作用是向数组开头添加x元素。
(5)shift(),作用是删除数组中的第一个元素。
练习:定义一个数组arr,里面包含5个数分别是42,58,93,79,85,求出数组中的最大值,最小值和平均值。
var a=[42,58,93,79,85]; var max=a[0]; var min=a[0]; var sum=0,avg=0; a.push(50,40,30,100,9); for(var i=0;i<a.length;i++){ if(max<a[i]){ max=a[i]; } if(min>a[i]){ min=a[i]; } sum+=a[i]; } avg=sum/a.length; document.write('max='+max+"<br/>"); document.write('min='+min+"<br/>"); document.write('avg='+avg); |
二、js面向对象编程
澄清一个问题,js中不存在类的概念。在js中实质上叫原型对象。但是为了统一在js中也都称为类和对象。
1、什么是类?类实质上就是一个模版,所有的对象都参照类来进行创建。
2、什么是对象?对象是依据类模版来创建的一个具体实例。
3、什么是属性?它是用于描述对象特征的。如人的身高、体重、身份证号等等。
4、什么是方法?是类或对象具有的行为动作。
5、如何创建类 格式:
function 类名称(参数){
成员属性
成员方法
}
说明:
(1)在js中定义的类和函数方式相同,但是类名称在写书写是要大写,用于区分函数。
(2)参数是用于创建对象时使用的,主要是给成员属性赋值。
(3)成员属性,是用于描述对象特征的,它也分为公有属性和私有属性。
(4)成员方法,是用于描述对象的行为动作的,它也分为公有方法和私有方法。
6、如何创建对象?格式:
(1)var 对象名=new 类名称();
function Cat(){ var name='小白'; var age='5'; } var cat=new Cat(); alert(typeof cat); |
注意:在类内部,通过var关键字定义的成员属性,它实质上是私有属性,不能被外界直接访问。
(2)var 对象名=new Object();不用创建类,直接使用Object祖先类,直接创建对象。
7、成员属性
(1)在定义类时,在类内部直接定义成员属性,它是私有的。
(2)先创建类,再创建对象,动态为类添加成员属性。但是动态添加的成员属性只用于当前对象。
(3)成员属性的引用:
对象名.属性名和对象名[“属性名”]
注意:在js中通过对象名[“属性名”]引用属性的方式,很有实际用处,在js处理css样式属性时会使用。
(4)this关键字,代表当前对象,在js中通过this关键可以实现将成员属性公有化。此外,this在方法调用中也非常有用,这时this通常代表调用方法的对象。谁调用了该方法this就代表谁。
(5)通过工厂方法访问私有属性,格式:
function 类名称(参数){
Var 对象名=new Object();
对象名.动态属性=属性值;
对象名.动态属性=属性值;
return 对象名;
}
创建对象,var 对象名=new 类名称(参数);
工厂方法也是解决在类外部访问私有属性的一种方法。
8、为对象添加成员方法
(1)在定义类时,也可以直接添加成员方法,但是它是私有的。
function Person(name,age){ this.name=name; this.age=age; function study(){ alert('I can study'); } } var p=new Person('张三',25); p.study();//私有方法,无法访问 |
(2)为类对象动态添加成员方法。
第一种,先定义成员方法(函数),然后为类对象指定成员方法。
先定义函数
function 函数名(){
}
再创建对象并指定成员方法
var 对象名=new 类名();
对象名.成员方法名=函数名;
通过对象名.成员方法名()的方法调用函数,就实现了为类对象动态添加成员方法。
function Person(name,age){ this.name=name; this.age=age; } var p=new Person('张三',25); function study(){ alert('我不学习,就挂科了!'); } p.action=study; p.action(); |
第二种:直接将一个匿名函数的定义赋值给成员方法。
对象名.成员方法名=function(){
函数体
}
function Person(name,age){ this.name=name; this.age=age; } var p=new Person('张三',25); p.action=function(){ alert('我不学习,就挂科了!'); } p.action(); |
注意:动态添加成员方法,只针对当前对象是有效的。其它对象无效。
(3)为类对象添加公有方法
function 类名(){
成员属性
this.成员方法=function(){
}
}
但是,通过以上方式添加的公有方法,存在问题。
alert(p.speak==p2.speak); |
系统为每个对象的speak方法都分配一个内存空间。浪费内存。
(4)通过prototype指定公有方法,可以解决内存浪费的问题。格式:
类名称.prototype.成员方法名=function(){}
练习:
定义一个Student类,该学生类的对象具有以下功能:
1.定义一个方法speak,,可以输出显示“我是学生,职责就是学习”。
2.定义一个方法sum,可以完成求1-100的和。
3.定义一个add方法,实现输入两个数,求a+b的和。
function Student(){ this.sum=function(){ for(var i=1,sum=0;i<=100;i++){ sum+=i; } alert('sum='+sum); } } var stu=new Student(); stu.speak=function(){ alert('学习吧,再不学习,就找不到工作啦!'); } Student.prototype.add=function(a,b){ alert("a+b="+(a+b)); } stu.speak(); stu.sum(); stu.add(3,4); |
9、创建对象常用形式
var 对象名={
属性:属性值,
属性:属性值,
…..,
run:function(参数){
}
}
说明:此种表现形式在ajax和json 中经常遇到。属性与属性值使用冒号分隔,多个属性之间使用逗号分隔。最后一个属性或方法后不需要添加逗号。
var p={ name:'tom', age:8, run:function(){ alert('I can run'); } }; alert(p.name); p.run(); |
三、js中的内部类
1、分类:分为动态内部类和静态内部类。
静态内部类:对象不需要new关键字创建,直接使用类名称就可以。Math对象
动态内部类:必须使用new 关键字创建对象。Date对象。
2、Array、Date、String、Math
(1) Math
属性:
PI:获取圆周率的值。alert(Math.PI);
方法:
abs(x):求x的绝对值
ceil(x):返回大于x的最小整数。
var a=3.14; alert(Math.ceil(a)); |
floor(x):返回小于x的最大整数
var a=3.56; alert(Math.floor(a)); |
round(x):返回四舍五入之后的x值。
var a=3.12; alert(Math.round(a)); |
random():返回17位随机小数,小数范围是在0-1之间,但不包含0和1。
练习:
产生1-10之间的随机整数
产生5-10之间的随机整数
alert(Math.ceil(Math.random()*10)); alert(Math.round(Math.random()*5)+5); alert(Math.round(Math.random()*5+5)); alert(Math.floor(Math.random()*6)+5); |
(2) Date 用于获取日期和时间,它是一个动态内部类。
var 时期对象=new Date();
常用的方法
toLocaleString();将日期时间转换为本日期和时间。
getYear();获取年份
getFullYear();获取四位完整年份。
getMonth();获取月份。从0-11表示12个月。
getDate();获取月天数。
getDay();获取星期,从0-6表示周一到周六
getHours();获取小时数
getMinutes();获取分钟数
getSeconds();获取秒数。
getMilliSeconds();获取毫秒数。
练习:动态在页面显示年月日时分秒及问侯语
如:
2018年10月15日 星期一11:21:30 中午好
5:00-7:00 早上好
7:01-11:30 上午好
11:31-14:30 中午好
14:31-16:30 下午好
16:31-18:30 傍晚好
18:31-11:59晚上好
12:00-4:59凌晨好
window.setInterval(程序代码,时间间隔);时间间隔函数
含义是:每隔指定的时间间隔,执行一次程序代码。时间间隔是以毫秒为单位,1000ms=1s.
(3)String 动态内部类。
var str=”hello”;
var str1=new String(“hello”);
属性:
length:获取字符串的长度。所以字符串本身就相当于一个数组。
方法:
str.split(‘分隔符’);按照指定的分隔符将字符串拆分成字符数组。
ar str1=new String('wor,ld'); var a=str1.split(','); alert(a[1]); |
str.indexOf(字符串,起始位置);作用是查找指定字符串在str中首次出现的位置。
str.substr(起始位置,长度);是在str字符串指定起始位置开始,截取指定长度的字符串。
var str="hello world"; alert(str.substr(0,3)); |
str.substring(起始位置,结束位置);在str字符串中,从起始位置开始截取到结束位置之前的字符串。
第三部分BOM和DOM
一、BOM :Browser Object Model
BOM主要讲解的是Document对象和Window对象
1、window对象,它是一个全局对象。
function test(){ alert(this.name); alert(window.name); } var name='tom'; window.test(); |
2、window对象常用方法和属性
(1)window.alert(字符串);弹窗显示文本
(2)window.prompt(提示文本,默认值);提示用户输入。
(3)window.confirm(提示文字);确认框
(4)window.open(打开的文件,文件名称,窗口属性);
(5)window.setTimeout(程序代码,时间);延迟函数,表示延迟一定的时间后去执行程序代码.时间以毫秒为单位.但setTimout只执行一次.
练习:
先显示当前时间,再显示5秒钟后的时间.
<script type="text/javascript"> var time=document.querySelector('#time'); var date=new Date();//取当前时间 time.innerHTML=date.getHours()+':' +date.getMinutes() +':'+date.getSeconds(); window.setTimeout(function(){ var date=new Date();//取当前时间 time.innerHTML+=date.getHours()+':' +date.getMinutes() +':'+date.getSeconds(); },5000); </script> |
(6)clearTimeout(id值);清除setTimeout返回的id值.使setTimeout方法失效.
(7)setInterval(程序代码,时间);时间间隔函数.
clearInterval(id值); 清除setInterval返回的id值.使setInterval方法失效.
练习:倒计时
<p>距离活动结束时间还有:</p> <p id="show"></p> <button id="btnShow">显示倒计时</button> <button id="btnClear">取消倒计时</button> <script type="text/javascript"> //获取在js中要使用的html元素 var btnShow=document.querySelector('#btnShow'); var btnClear=document.querySelector('#btnClear'); var pShow=document.querySelector('#show'); var i=0; //为显示按钮添加时间 btnShow.οnclick=function(){ i=setInterval(function(){ //设置目标时间 var setTime=new Date('2018/11/11 00:00:00'); //获取当前时间 var nowTime=new Date(); //获取差值以毫秒位单位 var restTime=setTime.getTime()-nowTime.getTime(); var day=Math.floor(restTime/1000/60/60/24);//获取天数 var hour=Math.floor(restTime/1000/60/60%24);//获取小时数 var min=Math.floor(restTime/1000/60%60);//获取分钟数 var sec=Math.floor(restTime/1000%60);//获取秒数 restTime=day+'天'+hour+'小时'+min+'分钟'+sec+'秒' pShow.innerHTML=restTime; },1000); } btnClear.οnclick=function(){ clearInterval(i); } </script> |
二、事件处理
1、事件
(1)事件分类
窗体事件:
- onload加载事件
- onunload关闭事件
- onbeforeunload 关闭之前一般用于刷新操作
鼠标事件
- onclick单击事件
- ondblclick双击事件
- onmousedown 鼠标按下事件
- onmouseover 鼠标经过事件
- onmouseout 鼠标移出事件
- onmousemove 鼠标移动事件
- onouseup 鼠标按键抬事件。
键盘事件
- onkeydown 键盘按下事件
- onkeypress 键盘按下并松开事件
- onkeyup 键盘按键抬起事件
其它事件
- onchange 元素内容改变触发的事件
- onfocus 元素获得焦点事件。
- onblur 失去焦点事件
- onscorll 滚动滚动事件
- onmousewheel 鼠标滚轮滚动事件
声明:on实质叫前缀,on后的关键字才是事件名称。
2、如何为元素点添加事件
(1)直接在html标记中添加事件
<标记 事件名=”事件处理程序”></标记>
缺点:没有实现js代码和html代码分离。
(2)直接在html标记中添加事件,事件处理程序写在一个函数中。
<标记 事件名=”函数名()”></标记>
说明:以上两种方式都没有真正实现js代码和html代码分离。
(3)直接在js中获取html结点对象。动态添加事件
格式 :
结点对象.事件名=function(){
}
此种情况还有一种表现形式:
结点对象.事件名=函数名;
(4)第三种添加事件的方式在有些特殊操作会出现递归死锁现象。所以还有一种W3C的标准形式。
格式:
结点对象.addEventListener(‘事件名’,事件处理程序,是否冒泡);
说明:
事件名,不能包含on关键字。
事件处理程序,是一个匿名函数,用于完成事件触发时具体功能。
是否冒泡,非IE浏览器本身就不支持冒泡。只有IE支持。冒泡指的含义是:在前元素上产生的事件是否向其父元素传递。所以这个值一般就是false.
3、事件处理对象event,当一个事件产生时,会有一个事件处理对象记录事件所包含基本信息。
(1)关于兼容的问题
在事件处发时,都会产生一个event对象。但是在调用事件处理程序时,非IE浏览器会传递一个事件对象给函数。而IE浏览器,不会传递事件对象。因为它是IE的全局对象,直接通过window.event使用就可以了。
btn.οnclick=function(evt){ var e=evt||window.event; } |
IE11不用考虑兼容的问题。
(2)clientX和clientY,用来获取鼠标相对于浏览器窗口左上角的坐标点。它是event对象的属性。
<div id="mydiv" style="width:50px;height:50px;background:red; position:absolute; left:10px; top:0px;"
> </div> <script type="text/javascript"> document.onc=function(evt){ var x=evt.clientX; var y=evt.clientY; var mydiv=document.getElementById('mydiv'); mydiv.style.left=x+'px'; mydiv.style.top=y+'px'; //console.log(mydiv.style.left); //alert("x="+x+",y="+y); } </script> |
(3)screenX和screenY,获取鼠标相对于屏幕窗口左上角的坐标点。它是event对象的属性。
<script type="text/javascript"> document.οnclick=function(evt){ var x=evt.screenX; var y=evt.screenY; alert("x="+x+",y="+y);
} </script> |
(4)button属性。用来获取鼠标左中右三键按键。确定你按下的是鼠标的那个键。
当button=0时,表示按下左键
当button=1时,表示按下中键
当button=2时,表示按下右键
但在IE11以下存在兼容问题。怎么解决?自己研究吧!
<script type="text/javascript"> document.οnmοusedοwn=function(evt){ //var e=evt||window.event; var btn=getButton(evt); console.log(btn); if(btn==0){ alert('你按的是左键'); }else if(btn==1){ alert('你按的是中键'); }else if(btn==2){ alert('你按的是右键'); } //alert(e.button); } function getButton(evt){ if(evt){//代表非IE浏览器 return evt.button;//让IE浏览向非浏览器统一 }else{ if(window.event.button==1){ return 0; }else if(window.event.button==4){ return 1; }else if(window.event.button==2){ return 2; } } } </script> |
(5)keyCode,它可以获取键盘的按键码即。ASCII码值。
数字键:48-57
A:65 a:97
回车键:13
空格键:32
退格键:8
向左:37
向上:38
向右:39
向下:40
- onkeydown事件:可以获取所有的按键码,但对英文不区分大小写。
- onkeypress事件:可以获取除功能键外的按键码,对英文区分大小写。
- onkeyup事件:可以获取所有的按键码,但对英文不区分大小写。
<div id="mydiv" style="width:50px;height:50px;background:red; position:absolute; left:10px; top:0px;" > </div> <script type="text/javascript"> var mydiv=document.getElementById('mydiv'); document.οnkeydοwn=function(e){ var left=parseInt(mydiv.style.left); var top=parseInt(mydiv.style.top); switch(e.keyCode){ case 37: left=left-10; mydiv.style.left=left+'px'; break; case 38: top=top-10; mydiv.style.top=top+'px'; break; case 39: left=left+10; mydiv.style.left=left+'px'; break; case 40: top=top+10; mydiv.style.top=top+'px'; break; } } </script> |
二、DOM –Document Object Model文档对象模型。
Document代表html文档
文档对象模型是按树形结构进行描述的。
注意:在html中,以上结构中都叫html标记,但在DOM中叫结点,具有同一个父元素的结点,叫兄弟结点。所谓的DOM就是要操作这些结点。
1、结点的分类
元素结点:所谓的元素结点就是html标记。
属性结点:所谓的属性结点就早html标记的属性。
文本结点:是指标记之间的文本内容。
空白结点:就是由于回车换行时产生的标记与标记之间的空白部分。它会对DOM操作产生影响。
2、结点的共有属性
(1)nodeName:表示结点名称。
元素结点:nodeName是标记的名称
属性结点:nodeName 就是属性名称
文本结点:nodeName=#text 标识文本结点
(2)nodeType:表示结点的类型。
元素结点:nodeType=1
属性结点:nodeType=2
文本结点:nodeType=3
(3)nodeValue:表示结点的值。
元素结点:nodeValue=null,注意元素结点nodeValue不代表标记之间的文本内容。是标记本身的值。元素结点本身就不具有nodeValue值。
属性结点:nodeValue 是元素属性的属性值。
文本结点:nodeValue 就是文本内容。
不同类型的结点的属性的值是不一样的。后面再补充讲解。
3、如何获取结点。
(1)、document.getElementById(‘id值’);在文档对象中根据元素结点的Id值,获取元素。
(2)、document.getElementsByTagName(‘标记名称’);作用是在html文档中根据标记名称获取结点,返回的是一个数组。
(3)、document.getElementsByName(‘name值’);
作用是根据标记的name属性值获取元素结点。返回的是一个数组。IE浏览认为只有表单可以具有name属性,而非表单元素不具有name属性。非IE浏览认为所有标记都可以具有name属性。所以该方法存在兼容问题
(4)、document.getElementsClassName(‘类名称’);作用是根据类名获取元素结点。返回的也是一个数组。
(5)、document.querySelector(‘xx’);获取第一个叫xx的元素结点。Id值前需要加”#”号,类名前需要加”.”
(6)、document.querySelectorAll(‘xx’);获取所有叫xx的元素结点,返回的就是一个数组。
4、元素结点的属性
id属性:可以设置或获取元素结点的id属性值。
tagName属性:可以获取html标记的名称。
相当于nodeName.
className属性:可以设置或获取类名称。
innerHTML属性:用于设置标记之前的文本内容,它也支持html标记作为文本内容。但不会显示,而是将html标记解析显示了。
innerText属性:用于设置标记之前的文本内容,但不会对html标记进行解析。
Style属性:它可以设置或获取行内样式属性。主要作用是操作css样式表。
5、节点的层次属性
(1)childNodes,作用是获取当前元素所有子结点。它是一个集合。可以看成是一个数组。
(2)firstChild,获取父元素的第一个孩子结点。
(3)lastChild,获取父元素的最后一个孩子结点。
(4)nextSibling,获取当前结点的下一个兄弟结点
(5)previouSibling,获取当前结点的前一个兄弟结点。
(6)parentNode,获取当前元素的父结点。
6、attributes:属性结点,获取所有的属性结点。它是一个集合。也相当于一个数组。
var mydiv=document.getElementById('mydiv'); alert(mydiv.attributes[0].nodeValue); |
(1)setAttribute(属性,属性值);设置添加属性,并指定属性值。
(2)getAttribute(属性);获取属性值。
(3)removeAttribute(属性);移除属性。
7、结点的操作
(1)创建新结点。
document.createElement(‘标记名称’);
创建的新标记,不会出现在文档中。
(2)添加新结点。向父结点的最后一个位置添加子元素。
父结点.appendChild(新结点);
(3)创建文本结点
document.createTextNode(文本)
(4)父结点.insertBefore(新结点,目标结点)是在目标结点之间插入新结点。
(5)父结点.replaceChild(新结点,原结点)作用是使用新结点替换原有的结点。
(6)当前结点.cloneNode(true|false);作用是复制结点。如果里面的参数为true则不但复制结点还复制结点中文本内容。如果为false只复结点。
(7)父结点.removeChild(节点名称);删除子结点。
三、表单操作
1、获取单选按钮选中值
<input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 var sexs=document.getElementsByName('sex'); for(var i=0;i<sexs.length;i++){ sexs[i].οnclick=function(){ alert(this.value); } } |
2、制作播放按钮
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #btnPlay{ width:30px; height:30px; background:red; border-radius: 50%; text-align:center; line-height: 30px; color:#fff; cursor:pointer; } .rot{ animation: gx 2s linear infinite; } @keyframes gx{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } </style> </head> <body> <div id="btnPlay" >H</div> <script type="text/javascript"> var btnPlay=document.getElementById('btnPlay'); var flag=true; btnPlay.οnclick=function(){ if(flag){ btnPlay.className='rot'; flag=false; }else{ btnPlay.className=''; flag=true; } } </script> </body> </html> |
3、全选操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 兴趣爱好: <input type="checkbox" name="hobby" id="" value="" />吃饭 <input type="checkbox" name="hobby" id="" value="" />睡觉 <input type="checkbox" name="hobby" id="" value="" />打豆豆 <input type="checkbox" name="checkAll" id="checkAll" />全选 <!--<button>全选</button> <button>全不选</button>--> </form> <script type="text/javascript"> var sexs=document.getElementsByName('sex'); for(var i=0;i<sexs.length;i++){ sexs[i].οnclick=function(){ alert(this.value); } } var checkAll=document.getElementById('checkAll'); var hobbys=document.getElementsByName('hobby'); checkAll.οnclick=function(){ for(var i=0;i<hobbys.length;i++){ if(checkAll.checked){ hobbys[i].checked=true; }else{ hobbys[i].checked=false; } }
} </script> </body> </html> |
4、省市县三级联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 省:<select id="province"></select> 市:<select id="city"></select> 县/区:<select id="country"></select> <script type="text/javascript"> var pros=['吉林省','辽宁省','黑龙江省']; var citys=[ ['长春市','吉林市','松原市'], ['沈阳市','大连市','铁岭市'], ['哈尔滨市','大庆市','密山市'] ]; var countrys=[ [['朝阳区','高新区','宽城区'],['丰满区','船营区','昌邑区'],['宁江区','松原B区','长岭县']], [['沈阳A区','沈阳B区','沈阳C区'],['大连A区','大连B区','大连C区'],['铁岭A区','铁岭B区','铁岭C区']], [['哈尔滨A区','哈尔滨B区','哈尔滨C区'],['大庆A区','大庆B区','大庆C区'],['密山A区','密山B区','密山C区']] ]; var pro=document.getElementById('province'); var mycity=document.getElementById('city'); var country=document.getElementById('country'); for(var i=0;i<pros.length;i++){ var option=document.createElement('option'); option.innerHTML=pros[i]; option.value=i;//用于记录前选择的是哪个省 pro.appendChild(option); } /* 当我们选择省的时候触发onchange,让市这个select标记 添加下拉列表选项option * */ pro.οnchange=function(){ //alert('ok'); mycity.innerHTML=""; var optVal=pro.value;//获取当前省份对应的value值。 var city=citys[optVal]; //alert(optVal); for(var i=0;i<city.length;i++){ var option=document.createElement('option'); option.innerHTML=city[i]; option.value=i; mycity.appendChild(option); } } mycity.οnchange=function(){ country.innerHTML=""; var proVal=pro.value;//确定选择那个省。 var cityVal=mycity.value;//确定选择那个市 var con=countrys[proVal][cityVal]; for(var i=0;i<con.length;i++){ var option=document.createElement('option'); option.innerHTML=con[i]; country.appendChild(option); } } </script> </body> </html> |
1、轮播图实例
2、放大镜
知识点:DOM尺寸和位置属性
(1)offsetLeft属性和offsetTop:获取当前元素相对于父元素的left和top偏移量。
(2)offsetParent:获取当前元素的父元素。
(3)offsetWdith和offsetHeight:获取当前元素的实际宽度和高度,包含边框和内边距。
第二部分H5+CSS3
最实用的内容:地理位置定位、Canvas画布、操作摄头等。
主要学习h5新增的标记、属性和css3新增的选择器和css样式属性
一、h5新增的标记
1、结构标记
header:表示一个网页的头部或一个区域的头部。一般会包含标题(h1-h6)
nav:表示导航区域。
hgroup:表示标题组,如果一个区域出现两级标题,应该使用hgroup包含起来。
section:为页面或区域分块儿的。一般会包含标题。
article:表示一个独立的内容,一般是文章或评论。它也可以标题。
article和section可以嵌套使用。
aside:表示与主内容不相关的信息,通常指的就是侧边栏
footer:表示一个页面结尾或一个区域的结尾。
说明:以上这些标记和div标记在显示效果上没有差别,其实质就是div改了个名。
这些结构标记,主要是在语义为搜索引擎提供支持。
2、其它语义标记
figure:用于呈现媒体信息,一般指的图像。在使用时需要结合figcaption一起使用。
<figure> <img src="img/2.jpg" alt="" /> <figcaption>巧克力</figcaption> </figure> |
progress:表示的是进度条。
<progress min="0" max="100" value="10"></progress> <script> var pro=document.querySelector('progress'); var i=0; window.setInterval(function(){ pro.value=i++; },1000); </script> |
meter:用于表示度量信息以及状态。如投票功能。
<meter min="0" max="100" value="98" low="25" high="95" optimum="20"></meter> |
low、high、optimum警界状态值。
mark:以黄色底纹强调文字。
menu:菜单,目前只有火狐支持。