JavaScript

程序员文章站 2022-07-13 13:10:54

...

JavaScript

zzj

一、JS的声明和引用

1.1 引用方式一

<script type="text/javascript">
	/*网页中的弹框*/
	alert("js 的学习课程");
    //控制台打印
    console.log('你好');
</script>

注意：这种方式既可以写在标签中，也可以写在标签的最后。

1.2 引用方式二

<script type="text/javascript" src="js/test.js" charset="UTF-8" ></script>

注意：src：引入文件的路径，这个方式只能写在标签当中

二、变量（重）

2.1 变量的声明

不需要指明具体的数据类型，所有数据类型都使用var去声明。

<script type="text/javascript">
    //1.声明并赋值
	var a=1;
	console.log(a);
	//2.先声明，再赋值
    var b;
    b=20;
    console.log(b)
</script>

2.2 变量使用的注意事项

（1）若只声明⽽没有赋值，则该变量的值为undefined。

<script type="text/javascript">
    var c;
	console.log(c);
</script>

（2）变量要有定义才能使⽤，若变量未声明就使⽤，JavaScript会报错，告诉你变量未定义。

<script type="text/javascript">
    console.log(c);
</script>

（3）可以在同⼀条var命令中声明多个变量。

<script type="text/javascript">
    var a1,b1,c1=1;
	console.log(a1,b1,c1);//undefined undefined 1
</script>

（4）若使⽤var重新声明⼀个已经存在的变量，是⽆效的。

<script type="text/javascript">
    var b=2;
    var b;
	console.log(b);//这次定义的变量无效，输出的值是第一次定义的变量值2
</script>

（5）若使⽤var重新声明⼀个已经存在的变量且赋值，则会覆盖掉前⾯的值。

<script type="text/javascript">
   var b=10;
   var b=20;
   console.log(b);//20
</script>

（6）JavaScript是⼀种动态类型、弱类型语⾔，也就是说，变量的类型没有限制，可以赋予各种类型的值。

<script type="text/javascript">
    var pa=1;
    var pb=true;
    var pc="字符串";
    var pd=[1,2,3];
    var pe={
        name:"张三",
        age:13
    }
</script>

2.3 变量提升

所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。

<script type="text/javascript">
    //变量提升
    console.log(abc);
    var abc=20;
</script>

三、数据类型（重）

注意：

NaN的数据类型时number
数组（Array）的数据类型是object
日期（Date）的数据类型时object
null的数据类型时object
未定义变量的数据类型为undefined

3.1 基本数据类型

3.1.1 数值类型

数值型包含两种数值：整型和浮点型。

（1）JS中1 与 1.0 相等，⽽且 1 加上1.0 得到的还是⼀个整数，js当中使用浮点数计算不精确，所以尽量不要用。

（2）在存储数值型数据时⾃动将可以转换为整型的浮点数值转为整型。

<script type="text/javascript">
    console.log(1 == 1.0); // true
    console.log(1 + 1.0); // 2
    var num = 8.0; // ⾃动将可以转换为整型的浮点数转为整型
    console.log(num); // 8
</script>

3.1.2 boolean类型

true(真),false（假），都小写的

3.1.3 字符串类型

使⽤ ’ ’ 或 " "引起来，如：‘hello’，“good”。

使⽤加号 ‘+’ 进⾏字符串的拼接，如：console.log(‘hello’ + ’ everybody’)。

3.1.4 undefined

undefined 是⼀个表示"⽆"的原始值，表示值不存在。

（1）当声明了一个变量而没有初始化时，这个变量的值就是undefined。

<script type="text/javascript">
    var a;
	console.log(a);
</script>

（2）调⽤函数时，该函数有形参，但未提供实参，则该参数为 undefined。

<script type="text/javascript">
    function sayB(b){
        console.log(b);
    }
    sayB();
</script>

（3）函数没有返回值时，默认返回 undefined。

<script type="text/javascript">
    function sayC(){
        console.log("函数");
    }
    var result=sayC();
    console.log(result);
</script>

3.1.5 null

注意：

undefined派生自null，所以等值比较返回true。

<script type="text/javascript">
    console.log(undefined == null);
    var box = null; // 赋值为null的变量
    var a; // 未初始化的变量 undfined
    console.log(a == box); // 两个的值相等
</script>

3.2 引用数据类型

3.2.1 对象

<script type="text/javascript">
    var person={
        name:"张三",
        age:13
    }
</script>

3.2.2 数组

<script type="text/javascript">
    var arr=[1,2,3];
    var arr2=new Array(1,2,3,4);
    var arr3=new Array(长度);
</script>

3.2.3 函数

<script type="text/javascript">
    function test(){}
</script>

四、类型转换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BEYvlLWe-1596371783535)(C:\Users\MECHREVO\Desktop\java总结笔记和思维导图\image\JavaScript中的数据类型转换图.png)]

4.1 自动类型转换

<script type="text/javascript">
    var a=1;
    if(a){
        console.log("对");
    }
</script>

4.2 函数转换

4.2.1 parseInt()

在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符

<script type="text/javascript">
    var num1="123abc";
    var num2="123.45";
    var num3="abc";
    console.log(parseInt(num1));//123
    console.log(parseInt(num2));//123
    console.log(parseInt(num3));//NaN
</script>

4.2.2 parseFloat(）

该方法与 parseInt() 方法的处理方式相似，从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把第二个小数点之前的字符串转换成数字。

<script type="text/javascript">
    var num1="123abc";
    var num2="123.45";
    var num3="abc";
    var num4="567.78.92";
    console.log(parseFloat(num1));//123
    console.log(parseFloat(num2));//123.45
    console.log(parseFloat(num3));//NaN
    console.log(parseFloat(num4));//567.78
</script>

4.3 显示转换

4.3.1 toString()

将数组转换成字符串形式

<script type="text/javascript">
    var data=10;
    console.log(data.toString());
    console.log(typeof(data));
</script>

注意：undefined不能使用toString，要不然会报错

4.3.2 toFixed()

Number还提供了**toFixed()**函数将根据小数点后指定位数将数字转为字符串，四舍五入。

<script type="text/javascript">
    data=1.4;
    console.log(data.toFixed(0));//1
    data=1.29;
    console.log(data.toFixed(1));//1.3
</script>

五、数组(重)

数组是按次序排列的一组数据，每个值的位置都有编号（从0开始），整个数组用方括号表示。

5.1 数组定义

分为：隐式创建、直接创建对象、创建数组设置长度通过for方法赋值

<script type="text/javascript">
    var arr=[1,2,3];
    console.log(arr);

    arr=new Array(1,2,3,4,5);
    console.log(arr);

    arr=new Array(5);
    console.log(arr);
</script>

5.2 数据的基本属性

<!--属性
1.获取长度
数组名.length
2.设置长度
数组名.length = 值
3.获取值    (如果下标存在，直接获取，如果下标不存在获取到的是undefined)
数组名[下标]
4.设置值    （如果下标存在，覆盖原值，如果下标不存在，创建新值）
数组名[下标] = 值-->
<script type="text/javascript">
    var arr=new Array(5);
    console.log(arr);
    
    console.log(arr.length);//5
    arr.length=10;
    console.log(arr.length);//10
    console.log(arr[0]);//undefined
    arr[20]=10;//数组会自动扩容成长度为20
    console.log(arr);
</script>

数组中可以存放多种数据类型的数据

<script type="text/javascript">
    var newArr=[1,'文学',true,undefined,null];
    newArr['key']='value';
    newArr.length=7;
    console.log(newArr);//数组长度为7且a[5]=a[6]=undefined,由于这两个值没有定义所以是系统自动生成的，a[7]为key=value
    console.log("!!!!!!!!");
</script>

5.3 数组的遍历

5.3.1 普通for循环遍历

这种遍历方式可以展示非空数据和空数据，但是不能输出属性（例如：value）。

<script type="text/javascript">
    var newArr=[1,'文学',true,undefined,null];
    newArr['key']='value';
    newArr.length=7;

    for(var i=0;i<newArr.length;i++){
        console.log(newArr[i]);
    }//1,'文学',true,undefined,null,undefined,undefined
</script>

5.3.2 for in 循环

展示下标，正常数据，可以输出属性，不能输出系统自己生成的undefined

<script type="text/javascript">
    var newArr=[1,'文学',true,undefined,null];
    newArr['key']='value';
    newArr.length=7;

    for(i in newArr){
        console.log(newArr[i]);
    }//1,'文学',true,undefined,null,value
</script>

5.3.3 for each 循环

展示下标，正常数据，不能输出属性

<script type="text/javascript">
    var newArr=[1,'文学',true,undefined,null];
    newArr['key']='value';
    newArr.length=7;

    newArr.forEach(function(num,index){
        console.log(num+"----"+index);
    });//1----0,'文学'----1,true----2,undefined-----3,null----4
</script>

5.4 数组提供的方法

push 添加元素到最后
unshift 添加元素到最前
pop 删除最后⼀项
shift 删除第⼀项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取（切⽚）数组，原数组不发⽣变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并

<script type="text/javascript">
    var arr=['1','a',5,'3'];
    console.log(arr);
    //最后添加数据
    arr.push(10);
    console.log(arr);
    //前面添加数据
    arr.unshift('b');
    console.log(arr);
    //删除最后一个
    arr.pop();
    console.log(arr);
    //删除第一个
    arr.shift();
    console.log(arr);
    //反转
    arr.reverse();
    console.log(arr);
    //数组转成字符串 并以,分隔开
    console.log(arr.join('\''));
    //获取数组的对应索引
    console.log(arr.indexOf('a'));
    //截取字符串
    console.log(arr.slice(2,5));
    console.log(arr);
    //置换元素 将第一个元素后面的一个值置换成'一','二'
    arr.splice(1,1,'一','二');
    console.log(arr);
    //连接
    var arr1=[0,'100'];
    console.log(arr.concat(arr1));
    console.log(arr);
    console.log(arr1);
</script>

六、函数

6.1 函数的分类

6.1.1 系统函数

字符串、数学函数、数组函数等，JS系统给我们提供好的函数。

6.1.2 自定义函数

自己定义的函数：函数的声明

function(形式参数1，形式参数2…){

语句。

}

6.2 函数的定义

有三种方式：函数声明语句、函数定义表达式、function构造函数

6.2.1 函数声明语句

<script type="text/javascript">
    function test(){
        console.log("test");
    }
    test();
    
    function test(f){
        console.log(f);
    }
    test();//undefined
</script>

声明提升（和声明变量提升是一样的）

<script type="text/javascript">
    test();
    function test(){
        console.log("test");
    }
</script>

6.2.2 函数定义表达式

<script type="text/javascript">
    var demo=function(a,b){//a，b为undefined,转换为数值类型为NaN
        console.log(a+b);
    }
    demo();//NaN
</script>

6.2.3 Function构造函数

<script type="text/javascript">
    var fun = new Function('a','b','c','console.log(a,b,c)');
    fun(6,7,8);
</script>

6.3 函数的参数

实参可以省略，那么对应形参为undefined。

<script type="text/javascript">
    function test(f){
        console.log(f);
    }
    test();//undefined
</script>

若函数形参同名（一般不会这么干）：在使用时以最后一个值为准。

<script type="text/javascript">
    function aa(num,num){
        console.log(num);
    }
    aa(10,20);//20
</script>

可以给参数默认值：当参数为特殊值时，可以赋予默认值。

<script type="text/javascript">
    function fun2(a){
        a=a||"没有值";
        console.log(a)
    }
    fun2();
    
    function fun3(b){
        b=(b==undefined&&b==null)?"没有值":b;
        console.log(b);
    }
    fun3();
</script>

参数为值传递，传递副本；引用传递时传递地址，操作的是同一个对象。

<script type="text/javascript">
    var a=29;
    function fun4(b){
        console.log(a+1);//30
    }
    fun4(a);
    console.log(a);//29

    var arr=[1,2,3];
    function fun5(arr2){
        arr2[3]=100;
    }
    fun5(arr);
    console.log(arr);//1,2,3,100
</script>

6.4 函数的作用域

全局变量（不用var声明的也是全局变量）

<script type="text/javascript">
    var a=2;
    function fun9(){
        pdd=23;
    }
    fun9();
    console.log(pdd);//23
</script>

局部变量（用var声明并且声明在函数当中的）

<script type="text/javascript">
     function fun9(){
       var pdd=23;
    }
    fun9();
    console.log(pdd);//会报错
</script>

七、内置对象

Arguments 只在函数内部定义，保存了函数的实参
Array 数组对象
Date ⽇期对象，⽤来创建和获取⽇期
Math 数学对象
String 字符串对象，提供对字符串的⼀系列操作

7.1 String

charAt(idx) 返回指定位置处的字符
indexOf(Chr) 返回指定⼦字符串的位置，从左到右。找不到返回-1
substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。(左闭右开)
toLowerCase() 将字符串中的字符全部转化成⼩写。
toUpperCase() 将字符串中的字符全部转化成⼤写。
length 属性，不是⽅法，返回字符串的⻓度。

7.2 Math

Math.random() 随机数
Math.ceil() 向上取整，⼤于最⼤整数
Math.floor() 向⼩取整，⼩于最⼩整数String

7.3 Date

// 获取⽇期
getFullYear() 年
getMonth() ⽉
getDate() ⽇

getHours() 时
getMinutes() 分
getSeconds() 秒

toLoacaleString() 转换成本地时间字符串

八、 JSON对象（key：value）

8.1 对象的创建

8.1.1 字面形式创建对象

<script type="text/javascript">
    var obj={
        'name':'hello',
        age:12,
        sayHello:function(){
            console.log("我是对象中的方法");
            console.log(this);
            console.log("========");
        },
        courses : {
            javase : 4,
            javascript : 3
        },
        isLike : true,
        members : [
            {name : "小红",age : 20},
            {name : "小绿",age : 22},
            {name : "小蓝",age : 27},
            {name : "小黄"}
        ]
    };
</script>

8.1.2 通过new Object()创建对象

<script type="text/javascript">
    var obj2=new Object();
    obj2.name="zhangsan";
    obj2.age=12;
    obj2.job="jc";
    console.log(obj2.name);
</script>

8.1.3 通过Object.create()创建对象

<script type="text/javascript">
    var obj4=Object.create(obj2);
    obj4.name="lisi";
    obj4.myjob="cxy";
    console.log(obj4);
    console.log(obj4.age);//输出的是obj2中的age
    console.log(obj4.name);//输出的是obj4中的name,相当于子父类关系
</script>

注意：这个方式相当于继承了obj2这个对象，若设置的属性在obj2中也存在，那么就会覆盖原属性。

8.2 对象的序列化和反序列化

序列化（将对象转换为字符串）

<script type="text/javascript">
    var objStr=JSON.stringify(obj);
    console.log(objStr);//原本是一个对象，现在变成了一个字符串
    console.log(typeof(objStr));
</script>

反序列化（将字符串转化为对象）

<script type="text/javascript">
    //反序列化
    var newObj=JSON.parse(objStr);
    console.log(newObj);
</script>

8.3 this关键字

8.3.1 在函数中使用this

表示全局对象，通过window对象来访问。

<script type="text/javascript">
    function testFun(){
        console.log(this);
    }
    testFun();
</script>

8.3.2 在对象中使用this

表示当前的上级对象。

<script type="text/javascript">
    var obj={
        age:12,
        sayHello:function(){
            console.log("我是对象中的方法");
            console.log(this);//代表的是整个obj对象
            console.log("========");
        }
    };
</script>

九、事件

9.1 常用事件类型

onload:当页面或图像加载完后立即触发

onblur:元素失去焦点

onfocus:元素获得焦点

onclick:单击

onchange:改变内容

onmouseover:鼠标移动到

onmouseout:鼠标离开

onkeyup:键盘按键抬起

onkeydown:键盘按键按下

9.2 事件流和事件模型

事件顺序分为两种：事件捕获和事件冒泡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
        <div id="myDiv">Click me</div>
    </body>
</html>

事件捕获

document–>html–>body–>div

事件冒泡

div–>body–>html–>document

9.3 事件处理程序

9.3.1 HTML事件处理程序

<button type="button" onclick="alert('HTML 事件处理程序  处理程序')">HTML 事件处理程序</button>

9.3.2 DOM0级事件处理程序

注意：若写了两个一样的点击事件，那么第二个事件会覆盖第一个事件。

<button type="button" id="lbw">DOM0级按钮</button>
<script type="text/javascript">
    var lbw=document.getElementById("lbw");
    lbw.onclick=function(){
        console.log("我是卢本伟");
    }
    
    lbw.onclick=function(){
        console.log("我是五五开");
    }
</script>

9.3.3 DOM2级事件处理程序

注意：若写了两个一样的点击事件，那么这两个点击事件都会有效，并且按着程序的先后进行执行。

<button type="button" id="pdd">DOM2级   按钮</button>
<button type="button" id="sc">删除事件监听 按钮</button>
<script type="text/javascript">
    var pdd=document.getElementById("pdd");
    pdd.addEventListener('click',function(){
        console.log("我是骚猪1");
    });

    function fn(){
        console.log("我是骚猪2");
    }
    pdd.addEventListener('click',fn);

    var sc=document.getElementById("sc");
    sc.onclick=function(){
        pdd.removeEventListener('click',fn);
    }
</script>

十、BOM对象

它的核心是window，表示浏览器的一个实例。

10.1 window对象的方法

10.1.1 对话框

（1）消息框：alter()

（2）输入框：prompt () 返回值为输入框中的内容

参数：第一个参数：输入框中应该要输入的内容

第二个参数：往输入框中输入默认的文本

（3）确认框：confirm 返回值为true或flase

<button type="button" onclick="fun1()">alert 消息框</button>
<button type="button" onclick="fun2()">prompt 输入框</button>
<button type="button" onclick="fun3()">confirm 确认框</button>
<script type="text/javascript">
    function fun1(){
        alert("alter消息框");
    }

    function fun2(){
        var name=prompt("请输入你的VIP账户","leader");
        if(name=="admin"){
            alert("登录成功"+name+"VIP");
        }else{
            alert("普通用户登录成功"+name);
        }
    }

    function fun3(){
        var bol=confirm("确认删除吗？");
        if(bol){
            alert("删除成功");
        }else{
            alert("取消成功");
        }
    }
</script>

10.1.2 浏览器窗口

打开窗口

<button type="button" onclick="fun1()">打开空窗口</button>
<button type="button" onclick="fun2()">打开本地资源</button>
<button type="button" onclick="fun3()">打开淘宝</button>
<button type="button" onclick="fun4()">当前窗口打开百度</button>
<script type="text/javascript">
    function fun1(){
        open();
    }

    function fun2(){
        open("01_系统弹出框.html");
    }

    function fun3(){
        open("http://www.taobao.com");
    }

    function fun4(){
        open("http://www.baidu.com","_self");
    }
</script>

关闭当前窗口

<button type="button" onclick="fun5()">关闭窗口</button>
<script type="text/javascript">
    function fun5(){
        window.close();
    }
</script>

10.1.3 与时间相关的函数

setTimeOut()
在指定毫秒数之后执行返回ID 方便关闭
var id = window.setTimeOut(“函数名”,毫秒数);
setInterval()
每隔指定毫秒数执行一次返回ID 方便关闭
var id = window.setInterval(“函数名”,毫秒数);

例子：制作一个时钟

<button type="button" onclick="startTime()">开始</button>
<button type="button" onclick="closeTime()">关闭</button>

<h2 id="tm"></h2>
<script type="text/javascript">
    function start(){
        var date=new Date();
        var newDate=formatDate(date);
        if(date.getSeconds()==0){
            document.getElementById("tm").style.color="red";
            document.getElementById("tm").innerHTML = newDate;
        }else{
            document.getElementById("tm").style.color="black";
            document.getElementById("tm").innerHTML = newDate;
        }

    }
    function startTime(){
        id=setInterval(start,1000);
    }
    function closeTime(){
        window.clearInterval(id);
    }
    function formatDate(date){
        var year=date.getFullYear();
        var month=date.getMonth()+1<10?'0'+(date.getMonth()+1):(date.getMonth()+1);
        var dat=date.getDate()<10?'0'+date.getDate():date.getDate();
        var hour=date.getHours()<10?'0'+date.getHours():date.getHours();
        var min=date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes();
        var secon=date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds();

        var str=year+'-'+month+'-'+dat+' '+hour+':'+min+':'+secon;
        return str;
    }
</script>

10.2 history对象

history
属性
length 获取到历史网页的个数
方法
back() ; 后退一个页面

forward(); 前进一个页面
go(1); 数据为正数1，前进数据为负数后退

注意：当下一个页面已经被打开之后，才能通过这个方法去进入下一个页面

第一个页面：

<body>
    <h2>页面1</h2>
    <a href="05_history对象2.html">跳转到页面二</a>
</body>

第二个页面：

<body>
    <h2>页面2</h2>
    <a href="05_history对象3.html">跳转到页面三</a>
    <a href="javascript:window.history.forward()">前进一个</a> <!--要先打开页面三，再回到页面二的时候，这个a标签才有效-->
    <a href="javascript:window.history.back()">后退一个</a>
</body>

第三个页面：

<body>
    <h2>页面3</h2>
    <a href="javascript:window.history.back()">回退一个</a>
    <a href="javascript:window.history.go(-2)">回退二个</a>
</body>

10.3 location对象

location
window.location.href=; 获取当前网页的url地址

方法
reload () 重新加载
replace () 替换

<h2>lcoation</h2>

<button type="button" onclick="test()">button</button>
<button type="button" onclick="test2()">刷新</button>
<button type="button" onclick="test3()">替换</button>

<script type="text/javascript">
    function test(){
        window.location.href="01_系统弹出框.html";
    }

    function test2(){
        location.reload();
    }

    function test3(){
        location.replace("http://www.taobao.com");
    }
</script>

十一、DOM对象

**注意：**操作DOM必须等节点初始化完毕之后，才能执行。

	因此有两种方式处理：

（1）把 script 调用标签移到html末尾即可

				（2）使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS

11.1 获取节点

getElementById() 根据id获取dom对象，如果id重复，那么以第一个为准
getElementsByTagName() 根据标签名获取dom对象数组
getElementsByClassName() 根据样式名获取dom对象数组
getElementsByName() 根据name属性值获取dom对象数组，常用于多选获取值

<p id="p1" class="para">这又是一个段落</p>
		<p id="p1" class="para">这是一个段落<span>文本</span></p>
		<input type="text" class="para" name="txt" />
		<input type="checkbox" name="hobby" value="游泳" />游泳
		<input type="checkbox" name="hobby" value="篮球" />篮球
		<input type="checkbox" name="hobby" value="足球" />足球
		<pre name="pr">
			
		</pre>
		<hr />
		<a href="javascript:testById()" >按照id获取</a>
		<a href="javascript:void(0)" onclick="testByName()">按照name获取</a>
		<a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取</a>
		<a href="javascript:void(0);" onclick="testByClass();">按照class获取</a>
		
		<script type="text/javascript">
			function testById(){
				var p=document.getElementById("p1");
				console.log(p);
			}
			
			function testByName(){
				var check=document.getElementsByName("hobby");
				console.log(check);
			}
			
			function testByTagName(){
				var inp=document.getElementsByTagName("a");
				console.log(inp);
			}
			
			function testByClass(){
				var pi=document.getElementsByClassName("para");
				console.log(pi);
			}
</script>

**注意：**通过id和name获取节点时只能使用：

document.getElementById()，

document.getElementsByName()：获取所有的节点，返回值是一个数组

document.getElementsByClassName()[0]：获取相同名称的第一个节点

通过tag和class获取节点时：

document.getElementsByTagName()：获取所有的节点，返回值是一个数组

document.getElementsByTagName()[0]：获取标签名相同的第一个节点

myform.getElementsByTagName()[0]：myfrom表示的是通过父节点ID所获取的父节点，再通过父节点来获取第一个标签

document.getElementsByClassNam()

myform.getElementsByClassName()

document.getElementsByClassName()[0]

myform.getElementsByClassName()[0]

<form id="myform" name="myform" action="" method="get">		
    姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
    个人说明:<textarea name="intro" class="area"></textarea>
    <button type="button" onclick="getTxt()" >获取元素内容</button>
</form>
<script type="text/javascript">
    function getTxt(){
        var myform=document.getElementById("myform");
        var txt=myform.getElementsByTagName("textarea")[0];
        console.log(txt.value);
        
        var txt2=myform.getElementsByClassName("area")[0];
        console.log(txt.value);
    }
</script>

11.2 创建节点和插入节点

11.2.1 创建节点

方法	概述
createElement()	创建⼀个新的节点，需要传⼊节点的标签名称，返回创建的元素对象
createTextNode()	创建⼀个⽂本节点，可以传⼊⽂本内容
innerHTML	也能达到创建节点的效果，直接添加到指定位置了

11.2.2 插入节点

方法	概述
write()	将任意的字符串插⼊到⽂档中
appendChild()（常用）	向元素中添加新的⼦节点，作为最后⼀个⼦节点
insertBefore(

<button onclick="addPara();">添加段落</button>
<button onclick="addImg();">添加图片</button>
<button onclick="addTxt();">添加文本框</button>
<button onclick="addOptions()">添加选项</button>
<select name="music">
    <option value="-1">你心内的一首歌</option>
    <option value="0">南山南</option>
    <option value="1">喜欢你</option>
</select>
<p id="newP">新的P标签</p>
<hr />
<div id="container"></div>

<script type="text/javascript">
    var div=document.getElementById("container");

    function addPara(){
        //方式一
        //var myP=document.createElement("p");
        //myP.style.color="red";
        //var text=document.createTextNode("我是段落标签");
        //myP.appendChild(text);
        //div.appendChild(myP);

        //方式二
        //var myP=document.createElement("p");
        //myP.innerHTML="需要文本";
        //div.appendChild(myP);

        //方式三
        var str="<p>'innerHTML方法'</p>";
        div.innerHTML +=str;
    }

    function addImg(){
        //方式一
        //var img=document.createElement("img");
        //img.src="../img/lbw.jpg";
        //img.width="200";
        //div.appendChild(img);
        //console.log(img);

        //方式二
        //var img=document.createElement("img");
        //img.setAttribute("src","../img/lbw.jpg");
        //img.setAttribute("width","200");
        //div.appendChild(img);

        //方式三
        var str="<img src='../img/lbw.jpg' width='100'/>";
        div.innerHTML +=str;
    }

    function addTxt(){
        //方式一
        //var input=document.createElement("input");
        //input.type="text";
        //input.name="wenben";
        //div.appendChild(input);
        //console.log(input);

        //方式二
        var input=document.createElement("input");
        input.setAttribute("type","text");
        input.setAttribute("name","wenben");
        div.appendChild(input);
    }

    function addOptions(){
        var str=window.prompt("请输入歌名");
        var sele=document.getElementsByName("music")[0];
        //方式一
        //var opt=document.createElement("option");
        //opt.value=2;
        //console.log(opt);
        //var text=document.createTextNode(str);
        //opt.appendChild(text);
        //sele.appendChild(opt);

        //方式二
        var opts=sele.options;
        var opt=new Option();
        opt.value=2;
        var text=document.createTextNode(str);
        opt.appendChild(text);
        sele.add(opt);
    }

11.3 间接查找节点方法

方法	概述
childNodes	返回元素的⼀个⼦节点的数组
firstChild	返回元素的第⼀个⼦节点
lastChild	返回元素的最后⼀个⼦节点
nextSibling	返回元素的下⼀个兄弟节点
parentNode	返回元素的⽗节点
previousSibling	返回元素的上⼀个兄弟节点

11.4 删除节点

方法	概述
removeChild()	先找到父元素，再从父元素中移除⼦节点

<span id="programmer">程序员</span>
<a href="javascript:void(0)" onclick="delNode()">删除</a>

<script type="text/javascript">
    function delNode(){
        var newSpan=document.getElementById("programmer");
        newSpan.parentNode.removeChild(newSpan);
    }
</script>

十二、表单

12.1 表单的获取

document.表单名称
document.getElementById(表单 id)
document.form[表单名称]
document.forms[索引]

<form id="myform" name="myform" action="" method="post"></form>
<form id="myform2" name="myform2" action="" method="post"></form>

<script type="text/javascript">
    console.log(document.myform2);

    console.log(document.getElementById("myform"));

    console.log(document.forms);//获取所有的表单
    console.log(document.forms["myform2"]);

    console.log(document.forms[0]);
</script>

12.2 获取表单中的元素

12.2.1 获取数据value

表单元素：节点对象.value 取值

加点对象.value="" 设置值

非表单对象：节点对象.innerHTML 取值

节点对象.innerHTML="" 设置值

12.2.2 获取输入框元素

通过 id 获取：document.getElementById(元素 id);
通过 form.名称形式获取: myform.元素名称; 表单的name属性值
通过 name 获取 :document.getElementsByName(name属性值)[索引]
通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引]

12.2.3 获取单选按钮

**注意：**单选按钮的name要相同

（1）获取单选框按钮

一般通过单选框的名字获取

（2）查看单选框选中的方式

通过单选框中的checked属性，若checked为true则被选中

**选中状态设定：**checked=“true” 或checked=“checked”

**未选中状态设定：**checked="false"或者移除存在的checked属性

<form action="" name="myform">
    <input type="text" name="inputName" value="aaa" />
    <input type="radio" name="rad" value="1" />	1
    <input type="radio" name="rad" value="2"  /> 2
    <button type="button" onclick="getRadio();" >获取单选选中内容</button>
</form>

<script type="text/javascript">
    function getRadio(){
        var ins=document.getElementsByName("rad");
        for (var i = 0; i < ins.length; i++) {
            if(ins[i].checked){//判断单选框是否被选中
                console.log(ins[i].value);
            }
        }
    }
</script>

12.2.4 获取多选按钮

操作方式与单选方式相同，但是多选框可以实现多选功能

<form action="" name="myform">
    <input type="checkbox" name="hobby" value="sing" />唱
    <input type="checkbox" name="hobby" value="dance" />跳	
    <input type="checkbox" name="hobby" value="basketball" />篮球
    <button type="button" onclick="getCheckbox();" >获取多选 选中内容</button>
</form>

<script type="text/javascript">
    function getCheckbox(){
        var check=document.getElementsByName("hobby");
        var str="";
        for (var i = 0; i < check.length; i++) {
            if(check[i].checked){
                str+=check[i].value+",";
            }
        }
        console.log(str.substr(0,str.length-1));
    }
</script>

12.2.5 获取下拉框选项

（1）获取select对象

var select=document.getElementById("sub")

（2）获取选中项的索引(这时select标签中的option只能选定一个，即只能单选)

索引从0开始

//获取选中项的索引
var index=select.selectedIndex;

（3）获取下拉框中的所有option标签

//获取下拉框中的所有option标签
var option=select.options;

（4）获取选中项的value值(这时select标签中的option只能选定一个，即只能单选)

//获取选中项的value
var val=select[index].value;

（5）获取选中项的文本(这时select标签中的option只能选定一个，即只能单选）

//获取选中项的文本
var text=select[index].text;

**注意：**当select标签中存在multiple="multiple"时，表示select支持多选，这个时候若需要获取它被选中的项时则需要使用for去循环判断。

<select multiple="multiple" name="sel1" id="sel1" style="width: 50px;height: 150px;" size="2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<script type="text/javascript">
    function movesomeTo2(){
        var ops = sel1.getElementsByTagName("option");
        for (var i = 0; i < ops.length; i++) {
            if(ops[i].selected){//判断是否被选中
                var op = document.createElement("option");
                op.value = ops[i].value;
                op.innerHTML = ops[i].innerHTML;
                sel2.appendChild(op);
                sel1.removeChild(ops[i]);
                i-=1;	
            }
        }
    }
</script>

12.3 提交表单

方式一：

<form id='myform1' name="myform2" action="http://www.baidu.com" method="get" enctype="multipart/form-data">	
    <input type="file" name="" id="" value="" />
    用户名：<input type="text"  name="test"  id="uname1"/>&nbsp;<span id="msg1" style="color: red;"></span><br />
    <!--通过js事件：sub()提交表单-->
    <input type="button" onclick="sub1();" value="提交表单1" />
</form>

<script type="text/javascript">
    //方式一
    function sub1(){
        var an=document.getElementById("uname1").value;
        if(an==null||an.trim==""){
            document.getElementById("msg1").innerHTML="请输入用户名";
            return;
        }
        document.myform2.submit();
    }
</script>

方式二：注意：返回给的父类的值，父类还要再次返回

<form id='myform1' name="myform2" action="http://www.baidu.com" method="get">
    用户名：<input type="text"  name="test"  id="uname2"/>&nbsp;<span id="msg2" style="color: red;"></span><br />
    <!--通过js事件：sub()提交表单-->
    <input type="submit" onclick="return sub2()" value="提交表单1" />
</form>

<script type="text/javascript">
    //方式二
    function sub2(){
        var an=document.getElementById("uname2").value;
        if(an==null||an.trim()==""){
            document.getElementById("msg2").innerHTML="请输入用户名";
            return false;
        }
        return true;
    }
</script>

十三、案例

13.1 表单校验案例

要求：

1、验证⽤户名
1)不能为空
2)⻓度为 6-12 位
2、验证密码
1)不能为空 *
2)⻓度为 6-12 位
3)不能包含⽤户名
3、年龄: 必须选择你懂得
4、爱好: 必须选择⼀项
5、来⾃: 必须选择⼀项
满⾜以上条件
1、弹出所有的内容
2、提交表单
否则
1、说明错误原因
2、不能提交表单

<body>
    <form id='myform' name="myform" method="get">
        姓名:<input type="text" id="uname" name="uname" onblur="checkName()"/><br />
        密码:<input type="password" id="upwd" name="upwd" onblur="checkPwd()"/><br /> 
        年龄:<input type="radio" name="uage" value="0" checked="checked" />小屁孩
        <input type="radio" name="uage" value="1" />你懂得 <br /> 
        爱好:<input type="checkbox" name="ufav" value="篮球" />篮球
        <input type="checkbox" name="ufav" value="爬床" />爬床
        <input type="checkbox" name="ufav" value="代码" />代码<br /> 
        来自:	<select id="ufrom" name="ufrom">
        <option value="-1" selected="selected">请选择</option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        </select><br />
        <div id="validate" style="color: red;"></div>
        <button type="submit" onclick="return checkForm()">提交</button>
        <button type="reset" onclick="resetForm()">重置</button>
    </form>

    <script type="text/javascript">
        var userName=document.getElementById("uname");
        var userPwd=document.getElementById("upwd");

        //校验姓名
        var name="";
        function checkName(){
            var val=userName.value;
            if(val==""){
                document.getElementById("validate").innerHTML="<p>用户名不能为空</P>";
                return false;
            }else if(val.length<6||val.length>12){
                document.getElementById("validate").innerHTML="用户名必须6到12位";
                return false;
            }
            name=val;
            document.getElementById("validate").innerHTML="";
            return true;
        }

        //校验密码
        var pwd="";
        function checkPwd(){
            var val2=userPwd.value;
            if(val2==""){
                document.getElementById("validate").innerHTML +="<p>密码不能为空</p>";
                return false;
            }else if(val2.length<6||val2.length>12){
                document.getElementById("validate").innerHTML+="<p>密码必须6到12位</p>";
                return false;
            }else if(val2.indexOf(userName.value)>=0){
                document.getElementById("validate").innerHTML+="<p>密码不能包含用户名</p>";
                return false;
            }
            console.log(val2);
            pwd=val2;
            document.getElementById("validate").innerHTML="";
            return true;
        }

        //校验年龄
        var age="";
        function checkAge(){
            var userAge=document.getElementsByName("uage");

            for (var i = 0; i < userAge.length; i++) {
                if(userAge[i].checked && userAge[i].value==0){
                    document.getElementById("validate").innerHTML+="<p>必须选择你懂的</p>";
                    return false;
                }
            }
            age="你懂的";
            document.getElementById("validate").innerHTML="";
            return true;
        }


        //校验爱好
        var favor="";
        function checkLike(){
            var userLike=document.getElementsByName("ufav");
            for (var i = 0; i < userLike.length; i++) {
                if(userLike[i].checked){
                    favor+=userLike[i].value+",";
                }
            }
            if(favor==""){
                document.getElementById("validate").innerHTML+="<p>爱好必须选择一个</p>";
                return false;
            }

            document.getElementById("validate").innerHTML="";
            return true;
        }

        //校验来自
        var come="";
        function checkCome(){
            var userCome=document.getElementById("ufrom");
            var val=userCome.value;
            if(val==-1){
                document.getElementById("validate").innerHTML+="<p>来自必须选择</p>";
                return false;
            }
            come=((val==0)?"北京":"上海");
            document.getElementById("validate").innerHTML="";
            return true;
        }
        function checkForm(){
            var boo=checkName()&&checkAge()&&checkAge()&&checkLike()&&checkCome();
            if(boo){
                var str="姓名:"+name+"\n密码:"+pwd+"\n年龄:"+age+"\n爱好:"+favor+"\n来自:"+come;
                alert(str);
                return true;
            }else{
                return false;
            }

        }

    </script>
</body>

13.2 隔行换色

<body>
    <table id="tb" align="center" width="800px" height="300px" border="2" style="border-collapse: collapse;">
        <tr>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="#">修改</a><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="#">修改</a><a href="#">删除</a></td>
        </tr>
        <tr  >
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="#">修改</a><a href="#">删除</a></td>
        </tr>
        <tr >
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="#">修改</a><a href="#">删除</a></td>
        </tr>
    </table>

    <script type="text/javascript">
        var tr=document.getElementsByTagName("tr");
        for (var i = 0; i < tr.length; i++) {
            if(i==0){
                tr[i].style.backgroundColor="white";
            }else{
                if(i%2==1){
                    tr[i].style.backgroundColor="orange";
                }else{
                    tr[i].style.backgroundColor="aliceblue";
                }
            }

        }
    </script>
</body>

13.3 全选全不选反选

**注意：**不能使用setAttribute(“checked”,“true”)的方式给多选框赋值。

<body>
    <table id="tb" align="center" width="800px" height="300px" border="2" style="border-collapse: collapse;">
        <tr>
            <th>
                <button type="button" id="all">全选</button>
                <button type="button" id="notall">全不选</button>
                <button type="button" id="res">反选</button>
            </th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input name="xz" type="checkbox"/></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="#">修改</a><a href="#">删除</a></td>
        </tr>
        <tr>
            <td><input name="xz" type="checkbox"/></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="#">修改</a><a href="#">删除</a></td>
        </tr>
        <tr>
            <td><input name="xz" type="checkbox"/></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="#">修改</a><a href="#">删除</a></td>
        </tr>
        <tr>
            <td><input name="xz" type="checkbox"/></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="#">修改</a><a href="#">删除</a></td>
        </tr>
    </table>
    <script type="text/javascript">
        var all=document.getElementById("all");
        var notall=document.getElementById("notall");
        var res=document.getElementById("res");
        var xz=document.getElementsByName("xz");


        all.onclick=function(){
            for (var i = 0; i < xz.length; i++) {
                xz[i].checked=true;//表示被选中
            }
        }

        notall.onclick=function(){
            for (var i = 0; i < xz.length; i++) {
                xz[i].checked=false;//取消选中
            }
        }

        res.onclick=function(){
            for (var i = 0; i < xz.length; i++) {
                if(xz[i].checked){
                    xz[i].checked=false;
                }else{
                    xz[i].checked=true;
                }
            }
        }
    </script>
</body>

13.4 省市联动

**注意：**当省级的选择内容发生变化之前，要把原来省级下拉框所对应的市级下拉框的内容清除掉，使用父类.removeChild(标签)的方式删除。

<body>
    <b>籍贯:</b>
    <select id="province" name="province">
        <option value="-1">-请选择-</option>
        <option value="0">江西省</option>
        <option value="1">广东省</option>
        <option value="2">湖北省</option>
    </select>
    <select id="city" name="city">
        <option value="-1">-请选择-</option>
    </select>

    <script type="text/javascript">
        var pro=document.getElementById("province");
        pro.onchange=function(){
            var val=pro.value;
            console.log("")
            switch(val+""){
                case "0":
                    clr();
                    jx();
                    break;
                case "1":
                    clr();
                    gd();
                    break;
                case "2":
                    clr();
                    hb();
                    break;
                default:
                    break;
            }
        }



        function jx(){
            var arr=["九江市","南昌市","宜春市"];
            var city=document.getElementById("city");
            for (var i = 0; i < arr.length; i++) {
                var op=document.createElement("option");
                op.innerHTML=arr[i];
                op.setAttribute("value",i);
                city.appendChild(op);
            }
        }

        function gd(){
            var arr=["深圳","广州"];
            var city=document.getElementById("city");
            for (var i = 0; i < arr.length; i++) {
                var op=document.createElement("option");
                op.innerHTML=arr[i];
                op.setAttribute("value",i);
                city.appendChild(op);
            }
        }
        function hb(){
            var arr=["武汉","黄冈"];
            var city=document.getElementById("city");
            for (var i = 0; i < arr.length; i++) {
                var op=document.createElement("option");
                op.innerHTML=arr[i];
                op.setAttribute("value",i);
                city.appendChild(op);
            }
        }
        //删除使用
        function clr(){
            var city=document.getElementById("city");
            var ops=city.getElementsByTagName("option");
            console.log(ops.length);
            for (var i = ops.length-1; i >0; i--) {
                city.removeChild(ops[i]);
            }
        }
    </script>
</body>

13.5 选择移动（下拉框)

<body>
    <select multiple="multiple" name="sel1" id="sel1" style="width: 50px;height: 150px;" size="2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
    <div style="width: 50px;height: 150px;display: inline-block;margin-top: -50px;">
        <input type="button" name="right1" id="right1" value=">" onclick="movesomeTo2()"/><br />
        <input type="button" name="right2" id="right2" value=">>" onclick="movesomeTo2()"/>
        <input type="button" name="right3" id="right3" value=">>>" onclick="moveAllTo2()"/>
        <input type="button" name="left1" id="left1" value="<" onclick="movesomeTo1()"/>
        <input type="button" name="left2" id="left2" value="<<"  onclick="movesomeTo1()"/>
        <input type="button"  name="left3" id="left3" value="<<<"  onclick="moveAllTo1()"/>
    </div>
    <select name="sel2" multiple="multiple" id="sel2" style="width: 50px;height: 150px;" size="2">
    </select>

    <script type="text/javascript">
        var r1 = document.getElementById("right1");
        var sel1 = document.getElementById("sel1");
        var sel2 = document.getElementById("sel2");
        function movesomeTo2(){
            var ops = sel1.getElementsByTagName("option");
            for (var i = 0; i < ops.length; i++) {
                if(ops[i].selected){
                    var op = document.createElement("option");
                    op.value = ops[i].value;
                    op.innerHTML = ops[i].innerHTML;
                    sel2.appendChild(op);
                    sel1.removeChild(ops[i]);
                    i-=1;	
                }
            }
        }
        function moveAllTo2(){
            var ops = sel1.getElementsByTagName("option");
            for (var i = 0; i < ops.length; i++) {
                var op = document.createElement("option");
                op.value = ops[i].value;
                op.innerHTML = ops[i].innerHTML;
                sel2.appendChild(op);
                sel1.removeChild(ops[i]);
                i-=1;	
            }
        }
        function movesomeTo1(){
            var ops = sel2.getElementsByTagName("option");
            for (var i = 0; i < ops.length; i++) {
                if(ops[i].selected){
                    var op = document.createElement("option");
                    op.value = ops[i].value;
                    op.innerHTML = ops[i].innerHTML;
                    sel1.appendChild(op);
                    sel2.removeChild(ops[i]);
                    i-=1;	
                }
            }
        }
        function moveAllTo1(){
            var ops = sel2.getElementsByTagName("option");
            for (var i = 0; i < ops.length; i++) {
                var op = document.createElement("option");
                op.value = ops[i].value;
                op.innerHTML = ops[i].innerHTML;
                sel1.appendChild(op);
                sel2.removeChild(ops[i]);
                i-=1;	
            }
        }
    </script>
</body>

el1 = document.getElementById(“sel1”);
var sel2 = document.getElementById(“sel2”);
function movesomeTo2(){
var ops = sel1.getElementsByTagName(“option”);
for (var i = 0; i < ops.length; i++) {
if(ops[i].selected){
var op = document.createElement(“option”);
op.value = ops[i].value;
op.innerHTML = ops[i].innerHTML;
sel2.appendChild(op);
sel1.removeChild(ops[i]);
i-=1;
}
}
}
function moveAllTo2(){
var ops = sel1.getElementsByTagName(“option”);
for (var i = 0; i < ops.length; i++) {
var op = document.createElement(“option”);
op.value = ops[i].value;
op.innerHTML = ops[i].innerHTML;
sel2.appendChild(op);
sel1.removeChild(ops[i]);
i-=1;
}
}
function movesomeTo1(){
var ops = sel2.getElementsByTagName(“option”);
for (var i = 0; i < ops.length; i++) {
if(ops[i].selected){
var op = document.createElement(“option”);
op.value = ops[i].value;
op.innerHTML = ops[i].innerHTML;
sel1.appendChild(op);
sel2.removeChild(ops[i]);
i-=1;
}
}
}
function moveAllTo1(){
var ops = sel2.getElementsByTagName(“option”);
for (var i = 0; i < ops.length; i++) {
var op = document.createElement(“option”);
op.value = ops[i].value;
op.innerHTML = ops[i].innerHTML;
sel1.appendChild(op);
sel2.removeChild(ops[i]);
i-=1;
}
}

```