JS基础

第一部分 js基础

一、定义变量

var 变量名;
使用typeof 运算符判断变量的类型。

二、输出

(1) window.alert();主要用于做代码的调试。

(2) document.write();在页面中输出内容，它可以输出html标记。

(3) console.log();控制台输出，主要用于做代码的调试。

三、程序的流程控制

1、 if语句

2、 if…else语句

3、 if..elseif …..else语句。

练习：输入一个成绩，求其等级。

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>

练习：输入两个数，和一个运算符，求四则运算(+ - * /)，并输出结果。

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

}

练习：输入一个成绩，求其等级。

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

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

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、函数的嵌套调用，它是指在调用一个函数的过程，又调用了其它的函数。

练习：

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的事件处理中。

//函数名是什么东西？

/*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,输出这个区间的所有负数

要求用回调函数实现。

//定义的函数它可以取出能被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秒钟后的时间.

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>

<button id="btnShow">显示倒计时</button>

<button id="btnClear">取消倒计时</button>

//获取在js中要使用的html元素

var btnShow=document.querySelector('#btnShow');

var btnClear=document.querySelector('#btnClear');

var pShow=document.querySelector('#show');

var i=0;

//为显示按钮添加时间

btnShow.onclick=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.onclick=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.onclick=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>

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对象的属性。

document.onclick=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以下存在兼容问题。怎么解决？自己研究吧！

document.onmousedown=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>

var mydiv=document.getElementById('mydiv');

document.onkeydown=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].onclick=function(){

alert(this.value);

}

2、制作播放按钮

<!DOCTYPE html>

<html>

<head>

#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>

var btnPlay=document.getElementById('btnPlay');

var flag=true;

btnPlay.onclick=function(){

if(flag){

btnPlay.className='rot';

flag=false;

}else{

btnPlay.className='';

flag=true;

}

</script>

</body>

</html>

3、全选操作

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<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>

</form>

var sexs=document.getElementsByName('sex');

for(var i=0;i<sexs.length;i++){

sexs[i].onclick=function(){

alert(this.value);

}

var checkAll=document.getElementById('checkAll');

var hobbys=document.getElementsByName('hobby');

checkAll.onclick=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>

</head>

<body>

省：<select id="province"></select>

市：<select id="city"></select>

县/区:<select id="country"></select>

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.onchange=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.onchange=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>

progress:表示的是进度条。

var pro=document.querySelector('progress');

var i=0;

window.setInterval(function(){

pro.value=i++;

},1000);

</script>

meter:用于表示度量信息以及状态。如投票功能。

low、high、optimum警界状态值。

mark：以黄色底纹强调文字。

menu:菜单，目前只有火狐支持。

posted on 2019-02-18 20:30 WYM先生阅读(202) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

JS基础

导航

公告