JavaScript(3)前端

JavaScript(3)前端,第1张

1 JavaScript介绍
  • Javascript是一种面向对象,动态类型,区分大小的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
  • 以前的服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。
  • JavaScript 的正式名称是 “ECMAScript”。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 1996 年开始,已经出现在所有的 Netscape 和 Microsoft 浏览器中。ECMA-262 的开发始于 1996 年,在 1997 年 7 月,ECMA 会员大会采纳了它的首个版本。
  • JavaScript的组成包含ECMAScript、DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等。

(1)ECMAScript:是一种由欧洲计算机制造商协会(ECMA)通过ECMA-262标准化的脚本程序语言。
简单点说,ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象。
(2)DOM:把整个页面规划成由节点层构成的文档,它不与浏览器、平台、语言相关,为web开发者提供一个标准可以访问站点中的数据、脚本和表现层对象.DOM编程可以实现网页内容校验和动态变化的效果。
(3)BOM:是浏览器的一种特性,它可以对浏览器窗口进行访问和 *** 作,例如移动、关闭窗口,调整窗口的大小,支持cookie等。BOM编程可以实现动态控制浏览器本身行为的效果。

注意:简单归纳:
ECMAScript可以理解为JS的基础语法部分
DOM可以简单理解为,使用document对象 *** 作文档内容的编程
BOM可以理解为,使用window对象 *** 作浏览器行为的编程

  • JavaScript的特点:
     JS是运行在浏览器上的一种脚本语言
    1.脚本语言
     脚本语言是一种简单的程序,规模小,不需要编译,运行快,是由一些ASCII字符构成,可以使用任何一种文本编辑器编写。脚本语言是指在web浏览器内有解释器解释执行的编程语言,每次运行程序的时候,解释器会把程序代码翻译成可执行的格式。一些程序语言(如C、C++、Java等)都必须经过编译,将源代码编译成二进制的可执行文件之后才能运行,而脚本语言不需要事先编译,只要有一个与其相适应的解释器就可以执行。
    2.基于对象的语言
     面向对象有三大特点(封装,继承,多态)缺一不可。通常"基于对象"是使用对象,但是无法利用现有的对象模板产生新的对象类型,也就是说"基于对象"没有继承的特点。没有了继承的概念也就无从谈论"多态"
    3.事件驱动:
     在网页中执行了某种 *** 作的动作,被称为"事件"(Event),比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
    4.简单性
     变量类型是采用弱类型,并未使用严格的数据类型。var a,b,c; a=123; b=“abc”; a=b;
    5.安全性
     JavaScript不能访问本地的硬盘,不能将数据存入到服务器上,不能对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互
    6.跨平台性
     JavaScript依赖于浏览器本身,与 *** 作平台无关, 只要计算机安装了支持JavaScript的浏览器(装有JavaScript解释器),JavaScript程序就可以正确执行。
     缺点:
     各种浏览器支持JavaScript的程度是不一样的,支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时,效果会有一定的差距,有时甚至会显示不出来。
    7.JS 和java的区别
    区别1:公司不同,前身不同
     JavaScript是Netscape公司的产品,是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言,它的前身是Live Script;Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发; Java的前身是Oak语言。
    区别2:基于对象和面向对象
     JavaScript是脚本语言,是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用,但不支持继承和多态。Java是面向对象的,是一种真正的面向对象的语言,支持封装、继承和多态。
    区别3:变量类型强弱不同
     Java采用强类型变量检查,即所有变量在编译之前必须声明为某一指定类型。如: int x=1234;JavaScript中是弱类型变量。统一采用var声明,可赋各种数据类型值。
    区别4: 运行的位置不同
     Java是运行在服务器端的大型编程语言, JS是运行于客户端(浏览器)一种小规模脚本语言
    8.HTML和CSS和JS这之间的关系
    HTML和CSS和JS都是前端的主要技术,三者各有分工.HTML可以用于制作网页的主体结构,CSS用于给网页做美化,JS用于在网页上添加动态效果。
2 JS的引入方式 2.1 内嵌式引入
DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title>title>
                
                <script type="text/javascript">
                        /*定义一个函数(方法)*/
                        function fun1(){
                                /*d窗提示一点信息 */
                                alert("你好")
                        }       
                script>
        head>
        <body>   
                <input type="button" value="点我呀" onclick="fun1()" />     
        body>
html>

  • 缺点:
    (1)我们定义的JS代码只能在当前一个网页中使用,代码复用度低,可维护性低
    (2)JS代码和HTML代码混合在一个文件中,可阅读性差
2.2 链接式引入


将JS代码放入外部JS文件中,通过script标签引入

DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                
                <script type="text/javascript" src="js/myjs.js">script>
                <script type="text/javascript" src="js/myjs2.js">script>
                
                                alert("总能见到你")
                        }
                script>
        body>
html>
  • 优点:
    代码复用度高,更易于维护代码
  • 注意事项:
    (1)在一个页面上可以同时引入多个JS文件
    (2)每个JS文件的引入都要使用一个独立的script标签
    (3)内嵌式和链接式的引入不能使用同一标签
3 JS数据类型和运算符 3.1 数据类型

(1)数值型:
number整数和浮点数统称为数值。例如85或3.1415926等。
(2)字符串型:
String由0个,1个或多个字符组成的序列。在JavaScript中,用双引号或单引号括起来表示,如"您好"、‘学习JavaScript’ 等。
(3)逻辑(布尔)型:
boolean用true或false来表示。
(4)空(null)值:
表示没有值,用于定义空的或不存在的引用。要注意,空值不等同于空字符串""或0。
(5)未定义(undefined)值:
它也是一个保留字。表示变量虽然已经声明,但却没有赋值。
(6)除了以上五种基本的数据类型之外,JavaScript还支持复合数据类型Object,复合数据类型包括对象和数组两种。

DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        /*
                         * 1 JS是弱类型的脚本语言,所有的变量 对象 的数据类型的声明统统是var 
                         * 2  变量声明时没有确定具体的数据类型,在变量赋值时确定变量具体的数据类型
                         * 3 JS中数据类型有哪些 ?  number  string
                         * 4 JS中的变量可以反复声明,后声明的会覆盖之前声明的同名变量
                         * 5 JS中的得代码可以不用以;作为结尾  每一行代码都是一个独立的语句(建议写)
                         * 6 JS中字符串一般不区分 ""  ''  只要不混用即可
                         * 6 可以用不同的类型的数据给变量赋值,变量会自动改变自身的数据类型
                         * 7 当给一个变量赋值为null时,变量的类型为 object 
                         * 8 变量只声明不赋值的情况下,数据和数据类型都显示 undefined
                         * 9 对象 数组其他类型可以叫做复合数据类型 object
                         * 10 JS中的标识符命名规则和JAVA中的保持一致即可 尽量避免 使用$ 会和jQuery冲突
                         * */
                        
                        /*var i=10;
                        alert(i);*/
                        
                        /*var i;
                        i=10;*/
                        
                        /*var i =10;
                        i=20;
                        
                        var i=30;
                        alert(i);*/
                        
                        /*var i= 10;
                        alert(typeof i);*/
                        
                        /*var  i =3.14;
                        alert(i)*/
                        
                        /*var j="你好";
                        var z ='hello js';
                        alert(j)
                        alert(z)
                        alert(typeof j)*/
                        
                        /*var i=10;
                        alert(i);
                        alert(typeof i);
                        i="你好";
                        alert(i);
                        alert(typeof i);*/
                        
                        /*var b=2>1;
                        alert(b);
                        alert(typeof b)*/
                        
                        /*var i= null; 
                        alert(i);
                        alert(typeof i);*/
                        
                        /*var i;
                        alert(i)
                        alert(typeof i);*/
                        
                        /*var i=[1,2,3];
                        alert(i)
                        alert(typeof i)*/
                        
                        /*var i=new Date();
                        alert(typeof i)*/
                script>
        head>
        <body>
        body>
html>
3.2 运算符号

JS中运算符号大部分和java中的运算符一样,我们在这里分析一下特殊的运算符号

3.2.1 /%符号

JS中,数字类型都是number,除法的结果中如果没有小数位,直接就是一个整数,如有小数位,才是浮点数

JS中如果出现除零,那么结果是 infinity,而不是报错

   				<script>
                        /* 
                         * 能除尽,则默认结果就是一个整数,不能除尽,结果默认就是浮点数
                         * 除零不会出现异常,而是出现 Infinity
                         * 和0取余数,出现NaN   not a number 不是一个数字
                         * */
                        alert(10/3);
                        alert(10/0);
                        alert(10%3);
                        alert(10%0);
                        
                script>

JS取余数运算对于浮点数仍然有效,如果和0取余数,结果是NaN(not a number)

3.2.2 +符号
  • 同时也是连接运算符,看两端的变量类型,如果都是number那么就是算数中的加法 如果有字符串,那么就是连接符号,如果是布尔类型和number相加,那么会将true转化为1 将false 转化为0
 				<script>
                        /*
                         * +号中 如果一段是字符串,就变成了文字拼接
                         * 数字和 boolean类型相加  true会转变成1  false会转变成0  再做数学运算
                         * */
                        var i=1;
                        alert(i+1);
                        alert(1+"1");
                        alert(1+true);
                script>
3.2.3 == 等值符

先比较类型,如果类型一致,再比较内容,如果类型不一致,会强制转换为number再比较内容

                <script>
                        /*
                         * == 等值符
                         * 先比较类型,如果类型一致,则比较值是否相同
                         * 如果类型不一致,会将数据尝试转换number 再比较内容
                         * */
                        var a =1;
                        var b="1";
                        var c=true;
                        var d="true";
                        alert(a==b)// t
                        alert(a==c)// t
                        alert(a==d)// f
                        alert(b==c)// t
                        alert(b==d)// f
                        alert(c==d)// f
                script>
3.2.4 ===等同符

数据类型不同 直接返回false如果类型相同 才会比较内容

     <script>
                        /*
                         * === 等同符
                         * 如果数据类型不同,直接返回false  如果类型相同,才会继续比较内容
                         * 
                         * */
                        var a =1;
                        var b="1";
                        var c=true;
                        var d="true";
                        alert(a===b)//f
                        alert(a===c)//f
                        alert(a===d)//f
                        alert(b===c)//f
                        alert(b===d)//f
                        alert(c===d)//f
                        alert("asdf"==="asdf")//t
                script>
3.3 流程控制 3.3.1 分支结构 if switch
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        /*
                         * 定义变量表示月份
                         * 根据月份输出该月的季节和应季活动
                         * */
                        var i=10;
                        if(i ==12 || i ==1 || i==2){
                                alert("大约在冬季: 冬天吃火锅");
                        }else if(i >= 3 && i<=5 ){
                                alert("春天来了: 春天吃青菜");
                        }else if(i >= 6 && i <= 8){
                                alert("夏天到了: 吃烧烤喝啤酒");
                        }else if(i >= 9 && i <=11){
                                alert("秋天到了: 贴秋膘");
                        }else{
                                alert("月份有误")
                        }
                        
                        switch(i){
                                case 3:
                                case 4:
                                case 5:
                                        alert("春眠不觉晓");
                                        break;
                                case 6:
                                case 7:
                                case 8:
                                        alert("夏天蚊子咬");
                                        break;
                                case 9:
                                case 10:
                                case 11:
                                        alert("秋天一身包");
                                        break;
                                case 1:
                                case 2:
                                case 12:
                                        alert("冬天蚊子死翘翘");
                                        break;
                                default:
                                        alert("月份有误")
                        }      
                script>
        head>
        <body>
        body>
html>
3.3.2 循环结构 while do_while for
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        var i=1;
                        while(i<=10){
                                alert(i)
                                i++;
                        }
                        /*
                         * 考试,直到分数过线为止
                         * 求1-10整数和 1+10*(10/2) */
                        var sum=0;
                        var j=1;
                        do{
                                sum+=j;
                                j++;
                        }while(j<=10);
                        alert(sum)
                        
                        var sum2=0;
                        for(var z=1;z<=10;z++){
                                sum2+=z;
                        }
                        alert(sum2)
                script>
        head>
        <body>  
        body>
html>
3.4 函数
  • 类似于java中的方法,JS中也可以定义一些函数,java中的方法签名包含访问修饰符,返回值类型,方法名,参数列表,异常列表,但是JS中定义函数的语法相对简单很多。
  • 主要以function作为函数关键字,具备函数名和参数列表,但是没有访问修饰符也没有返回值类型关键字和异常列表
  • 函数定义的三种语法
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        /*
                         * 第一种语法格式 常见
                         * function 函数名(参数列表){js代码}
                         * 
                         * 
                         * 第二种语法
                         * var 函数名=function(参数列表){JS代码}
                         * 
                         * 第三种语法 不常用 了解
                         * var 函数名=new Function('js代码')
                         * 
                         * */
                        function fun1(){
                                alert("你好");
                        }
                        
                        var fun2=function(){
                                alert("你很好")
                        }
                        
                        var fun3=new Function('alert("你非常好");');
                        
                        // 调用方法
                        fun1();
                        fun2();
                        fun3();
                script>
        head>
        <body>
        body>
html>
  • 函数参数和返回值
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        /*
                         * 1传入的实参可以和形参个数不一致 
                         * 2如果函数中有返回值,那么直接用return关键字返回即可
                         * */
                        function fun1(a,b,c){
                                alert("a:"+a);
                                alert("b:"+b);
                                alert("c:"+c);
                        }
                        
                        //fun1(10,"hello js",false);
                        // 少传参数 OK
                        //fun1(1,2);
                        // 多传参数 OK 多出来的参数相当于没传
                        //fun1(10,"hello js",false,new Date());
                        
                        
                        function fun2(a,b){
                                var c=a*b;
                                return c;
                        }
                        
                        //var x =fun2(10,20);
                        //alert(x)
                        
                        // 方法本身作为参数(了解)
                        
                        function funa( i ,j){
                                return i+j;
                        }
                        
                        function funb(a){
                                return a(10,20);
                        }
                
                        var sum =funb(funa)
                        alert(sum)    
                script>
        head>
        <body>
        body>
html>
4 JS中数组的使用 4.1 创建方式
DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title>
    <script>
        /*第一种
         *创建了一个空数组 new Array();
         * 会自动根据索引生成最大索引长度的数组
         * */
        var arr=new Array();
        arr[0]=1;
        arr[5]=2
        console.log(arr);

        /*
         *第二种
         * 创建定长数组 new Array(5);
         * */
        var arr2=new Array(5);
        arr2[0]="x";
        arr2[4]=true;
        console.log(arr2)


        /*
         * 第三种创建语法
         * 创建时,直接指定元素值
         * */

        var arr3=new Array("asdf",10,20.3,true);
        console.log(arr3)


        /*
         *第四种语法
         * 相当于第三种语法的简写
         * */
        var arr4=["asdf",10,20.3,true];
        console.log(arr4)

    script>
head>
<body>
body>
html>
4.2 元素和长度
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script type="text/javascript">
                        var arr=[11,22,33];
                        console.log(arr)
                        console.log(arr[0]);
                        console.log(arr.length)
                        
                        /*
                         * JS中的数组是可以通过修改length属性来改变数组长度的
                         * */
                        arr.length=5;
                        console.log(arr)
                        /*
                         * JS的数组可以通过索引改变数组的长度
                         * */
                        arr[9]=99;
                        console.log(arr);
                        
                script>
        head>
        <body>
        body>
html>
4.3 遍历方式
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        var arr=[5,7,3,1,6,2,4,9,8];
                        /*
                         * 普通for循环遍历数组
                         * */
                        for(var i=0;i<arr.length;i++){
                                console.log(arr[i])
                        }
                        
                        /*
                         *foreach循环遍历数组
                         * JS 中foreach写法为  for( var i in 数组)
                         * i 不是元素  是索引
                         * */
                        for (var i in arr){
                                console.log(arr[i])
                        }
                        
                script>
        head>
        <body>
        body>
html>
4.4 常用方法
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        var arr=[1,2,3,4,5,6,7,8,9];
                        var index =arr.indexOf(7);//查询元素索引的方法
                        console.log(index)
                        
                        // 合并两个数组
                        var hege = ["Cecilie", "Lone"];
                        var stale = ["Emil", "Tobias", "Linus"];
                        var children = hege.concat(stale);
                        console.log(children)
                        
                        // 合并三个数组
                        var parents = ["Jani", "Tove"];
                        var brothers = ["Stale", "Kai Jim", "Borge"];
                        var children = ["Cecilie", "Lone"];
                        var family = parents.concat(brothers, children);
                        console.log(family)
                        
                        // 合并字符串
                        var fruits = ["Banana", "Orange", "Apple", "Mango"];
                        var fs =fruits.join();
                        console.log(fs)
                        
                        // 移除最后一个元素
                        var fruit=fruits.pop();
                        console.log(fruits)
                        console.log(fruit)
                        
                        // 想结尾增加元素
                        fruits.push("Grape");
                        console.log(fruits)
                        
                        //反转数组
                        fruits.reverse();
                        console.log(fruits)
                        
                        //删除数组第一个元素
                        var ss =fruits.shift();
                        console.log(fruits);
                        console.log(ss)
                        
                        //向第一个位置添加元素
                        fruits.unshift("火龙果");
                        console.log(fruits);
                        
                        // 截取子数组  从哪个索引开始,到哪个索引结束 包头不包尾
                        var citrus = fruits.slice(1,3);
                        console.log(citrus)
                        
                        var numbers =[1,2,3,4,5,6,7,8,9]
                        /*
                         * 删除数组中的某些元素
                         * 2 从哪个索引开始删除
                         * 3 删除多个少个元素
                         * */
                        /*numbers.splice(2,3);
                        console.log(numbers)*/
                        /*
                         * 如果第二个参数是0 那么就变成了在指定索引位置增加元素
                         * */
                        numbers.splice(2,0,100);
                        console.log(numbers)
                script>
        head>
        <body>
        body>
html>
5 JS中的对象 5.1 常用对象
  • JS基于对象的脚本语言 ,有类和对象,但是没有封装,继承,多态,Java script 中有一些浏览器直接识别并使用的对象,常见的对象有Array,String,Math,Number,Date对象等等.
5.1.1 String
  • String和java中的String很类似.
  • String的常用方法
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        
                        // 根据索引获取字符
                        /*var str ="hello js";
                        var c =str.charAt(6);
                        console.log(c)*/
                        
                        // 拼接字符串
                        
                        var a="hi";
                        var b="good";
                        var c ="China";
                        
                        var d=c.concat(a,b);
                        console.log(d)
                        
                        var e ="adsf";
                        var f=e.repeat(3);
                        console.log(f)
                       
                        // 截取字符串
                        var g="helloJhon";
                        var h=g.substr(1,5);// 从哪里开始,连续截取多少个字符
                        console.log(h)
                        // 包头不包尾
                        var i=g.substring(1,7);// 从哪里开始,到哪里结束
                        console.log(i)
                        
                        // 获取长度
                        console.log(g.length)// length属性
                        
                        // JS中非常特殊的一个函数,可以将一段字符串当做JS代码来执行
                        // 将字符串内容解析称JS代码并运行
                        var testStr=" var x =10 ";
                        eval(testStr);
                        console.log(x)
                        
                script>
        head>
        <body>
        body>
html>
5.1.2 Number的常用属性和方法(包装类)
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        console.log(Number.MAX_VALUE)
                        console.log(Number.MIN_VALUE)
                        console.log(Number.MAX_SAFE_INTEGER)
                        console.log(Number.MIN_SAFE_INTEGER)
                        
                        
                        console.log(Number.parseFloat("10.123")+20);
                        console.log(Number.parseInt("30")+20);
                        
                        
                        var i = 10%0;
                        var j = 10/0;
                        console.log(i)
                        console.log(j)
                        console.log(Number.isNaN(i)) // is not a number 是不是NAN
                        console.log(Number.isFinite(j))
                        console.log(Number.isSafeInteger(Number.MAX_VALUE))
                        console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER))
                        
                script>
        head>
        <body>
        body>
html>
5.1.3 Math对象
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        console.log(Math.round(3.64))
                        console.log(Math.floor(3.14))// 地板数
                        console.log(Math.ceil(3.01))// 天花板数
                        console.log(Math.max(1,2,3,5.6))
                        console.log(Math.min(1,2,3,5.6))
                        console.log(Math.random())
                        console.log(Math.sqrt(16))
                        // 属性
                        console.log(Math.PI)
                        // 生成给定范围内的随机数
                        
                        var start =10;
                        var end =16;
                        var result =Math.floor(Math.random()*(end-start+1)+start);
                        console.log(result)
                        
                        
                script>
        head>
        <body>
        body>
html>
5.1.4 Date对象

Date 对象用于处理日期与时间。
创建 Date 对象语法: new Date()
以下四种方法同样可以创建 Date 对象:

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        /*
                         * 在程序中 西方的月份编号从0开始
                         * 1 2 3 4 5 6 
                         * 0 1 2 3 4 5
                         * */
                        var today = new Date()
                        var d1 = new Date("October 13, 1975 11:13:00")
                        var d2 = new Date(79,5,24)
                        var d3 = new Date(79,5,24,11,33,0)
                        console.log(d1);
                        console.log(d2);
                        console.log(d3);
                        
                        
                        var d4 = new Date(2048,0,13,16,51,20,123)
                        console.log(d4)
                        // set***  略自己尝试一下
                        console.log(d4.getYear());// 和1900年的年份差
                        console.log(d4.getFullYear());// 完整的年份
                        console.log(d4.getMonth());
                        console.log(d4.getDate());
                        console.log(d4.getHours());
                        console.log(d4.getMinutes());
                        console.log(d4.getSeconds());
                        console.log(d4.getMilliseconds());
                        var d5 = new Date(2048,0,13,16,51,20,456)
                        console.log(d4<d5)
                        
                        
                        // 关于日期对象格式化处理
                        /*date对象的格式化方法*/
                        /*修改Date原型,添加一个format格式化的方法*/
                        Date.prototype.format = function(fmt){
                          var o = {
                            "M+" : this.getMonth()+1,                 //月份
                            "d+" : this.getDate(),                    //日
                            "h+" : this.getHours(),                   //小时
                            "m+" : this.getMinutes(),                 //分
                            "s+" : this.getSeconds(),                 //秒
                            "q+" : Math.floor((this.getMonth()+3)/3), //季度
                            "S"  : this.getMilliseconds()             //毫秒
                          };
                        
                          if(/(y+)/.test(fmt)){
                            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
                          }
                                
                          for(var k in o){
                            if(new RegExp("("+ k +")").test(fmt)){
                              fmt = fmt.replace(
                                RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));  
                            }       
                          }
                          return fmt;
                        }
                        
                        
                        var fmt=d4.format("yyyy-MM-dd hh:mm:ss");
                        console.log(fmt)
                        
                script>
        head>
        <body>
        body>
html>
5.2 自定义对象
  • JS除了一些常用方法和类以外,允许我们自己定义对象,在JS中自定义对象有三种可用的语法格式,分别为:
    (1)调用系统的构造函数创建对象
    (2)自定义构造函数创建对象
    (3)字面量的方式创建对象
5.2.1 调用系统的构造函数创建对象(Object)
                <script>
                        // 实例化对象
                        var obj =new Object();
                        // 给对象添加属性
                        obj.name="张思锐";
                        obj.age=35;
                        obj.gender="男";
                        // 给对象添加方法
                        obj.eat=function(food){
                                console.log(this.name+"正在吃"+food)	
                        }
                        
                        // 查看对象属性
                        console.log(obj.name);
                        console.log(obj.age);
                        console.log(obj.gender);
                        // 调用对象方法
                        obj.eat("蛋糕");
                        
                script>
5.2.2 自定义构造函数创建对象(function)
       <script>
                        // 准备一个构造方法 
                        function Person(pname,page){
                                this.pname=pname;
                                this.page=page;
                                
                                this.eat=function(food){
                                        console.log(this.page+"岁的"+this.pname+"正在吃"+food);
                                }	
                        }
                        
                        var p1=new Person("张思锐",10);
                        // 查看对象属性
                        console.log(p1.pname);
                        console.log(p1.page);
                        // 调用对象方法
                        p1.eat("油条");
                script>
5.2.3 字面量的方式创建对象(JSON)
<script>
       /*	JSON 
               var 对象名 ={属性名:属性值,属性名:属性值, ... ... ,方法名:方法声明,方法名:方法声明}
       */
        var person ={
                        name:"晓明",
                        gender:"男",
                        age:10,
                        eat:function(food){
                                console.log(this.age+"岁的"+this.gender+"孩儿"+this.name+"正在吃"+food)
                        }
                };
                
        // 查看对象属性
        // 调用对象方法
        console.log(person.name)
        console.log(person.gender)
        console.log(person.age)
        person.eat("馒头")
script>
5.3 原型
  • 当我们用构造方法创建一个类时,在内存会预先调用构造方法创建一个对象,这对象我们称之为原型对象,构造方法对象中有一个prototype属性指向该对象,原型对象中有一个constructor属性指向构造方法.获得一个类的原型对象可以通过类名.prototype的方式获得.
  • 构造方法和原型的关系
    // 准备一个构造方法 
    function Person(pname,page){
                this.pname=pname;
                this.page=page;
                
                this.eat=function(food){
                        console.log(this.page+"岁的"+this.pname+"正在吃"+food);
                }	
        }
        
    console.log(Person)// Constructor对象  构造方法对象
    console.log(Person.prototype)
  • 当前类对象和原型的关系
    当前类的每一个对象内部有一个 _proto_的一个属性,指向他们的原型, 当我们用对象获取属性和调用方法时,如果当前对象中没有,那么会去他们所对应的原型对象中去找,也就是说,我们通过对原型的 *** 作可以实现为一个类所有的对象添加属性和方法.
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        // 准备一个构造方法 
                        function Person(pname,page){
                                this.pname=pname;
                                this.page=page;
                                
                                this.eat=function(food){
                                        console.log(this.page+"岁的"+this.pname+"正在吃"+food);
                                }	
                        }
                        
                        console.log(Person)// Constructor对象  构造方法对象
                        console.log(Person.prototype)
                        // 给Person所有的对象增加属性和方法
                        //给Person的原型增加属性
                        Person.prototype.gender="男";
                        //给Person的原型增加一个方法
                        Person.prototype.sleep=function(){
                                console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉");
                        }
                        var p1=new Person("张三",10);
                        p1.eat("蛋挞")
                        p1.sleep();
                        
                        var p2=new Person("李四",8);
                        p2.eat("牛角面包")
                        p2.sleep()
                        
                        console.log(p1);
                        console.log(p2);
                script>
        head>
        <body>
        body>
html>
5.4 原型链
  • 一个类的原型是一个Object类的对象,也就是说,原型也有一个_proto_属性,指向Object的原型对象,那么也就是说 Person prototype中没有的属性和方法会继续向Object prototype去找,也就是说,我们在Object原型中添加的属性和方法,我们在person1和person2中也可以使用.那么这种连续的 _proto_属性指向就形成了原型链。
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        // 准备一个构造方法 
                        function Person(pname,page){
                                this.pname=pname;
                                this.page=page;
                                
                                this.eat=function(food){
                                        console.log(this.page+"岁的"+this.pname+"正在吃"+food);
                                }	
                        }
                        
                        // 给所有的对象增加属性和方法
                        //给最终原型增加属性
                        Object.prototype.gender="男";
                        //给Person的原型增加一个方法
                        Object.prototype.sleep=function(){
                                console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉");
                        }
                        var p1=new Person("张三",10);
                        p1.eat("蛋挞")
                        p1.sleep();
                        
                        var p2=new Person("李四",8);
                        p2.eat("牛角面包")
                        p2.sleep()
                        
                        console.log(p1);
                        console.log(p2);
                script>
        head>
        <body>
        body>
html>
6 JS中的事件
  • 什么是事件?
    事件式可以被浏览器侦测到的人或者浏览器本身的行为,人对浏览器或者浏览器对网页做了什么事,JS可以根据不同行为。绑定一些不同的响应代码处理,让浏览器和人的行为之间有一个交互
  • 事件的绑定和触发:给页面上的元素先绑定事件 然后通过行为去触发
6.1 鼠标事件
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <style>
                        .d1{
                                width: 100px;
                                height: 100px;
                                background-color: greenyellow;
                        }
                style>
                <script>
                        function fun1(){
                                console.log("双击666")
                        }
                        function fun2(){
                                console.log("鼠标按下")
                        }
                        function fun3(){
                                console.log("鼠标抬起")
                        }
                        function fun4(){
                                console.log("鼠标进入")
                        }
                        function fun5(){
                                console.log("鼠标离开")
                        }
                        function fun6(){
                                console.log("鼠标移动")
                        } 
                script>
        head>
        <body>
                <div class="d1" 
                        ondblclick="fun1()" 
                        onmousedown="fun2()" 
                        onmouseup="fun3()" 
                        onmouseenter="fun4()" 
                        onmouseleave="fun5()" 
                        onmousemove="fun6()">
                div>
        body>
html>
6.2 键盘事件
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        function fun1(){
                                console.info("按钮按下")
                        }
                        function fun2(){
                                console.info("按钮抬起")
                        }
                        function fun3(){
                                console.info("按钮按下并抬起")
                        }
                script>
        head>
        <body>
                <input type="text" onkeydown="fun1()" onkeyup="fun2()" onkeypress="fun3()" />
        body>
html>
6.3 表单事件
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        function fun1(){console.log("获得焦点");}
                        function fun2(){console.log("失去焦点");}
                        function fun3(){console.log("正在输入");}// 只要输入了,就会触发
                        function fun4(){console.log("内容改变");}// 内部信息发生变化的同时,要失去焦点
                        function fun5(sel){console.log("内容发生改变了"+sel.value)}
                        function fun6(){
                                alert("发生了提交事件");
                                // 做了一些运算之后 动态决定表单能否提交
                                
                                return false ;
                        }
                        function fun7(){ 
                                console.log("发生了重置事件");
                                return true;
                        }
                script>
        head>
        <body>
                <form method="get"  action="https://www.baidu.com" onsubmit="return fun6()" onreset="return fun7()">
                        <input name=""  value=""  type="text" onfocus="fun1()" onblur="fun2()" oninput="fun3()" onchange="fun4()"/><br />
                        <select name="city" onchange="fun5(this)">
                                <option selected>-请选择城市-option>
                                <option value="1">北京option>
                                <option value="2">天津option>
                                <option value="3">上海option>
                                <option value="4">重庆option>
                        select>
                        <br />
                        <input type="submit" value="提交数据" />
                        <input type="reset"  value="重置数据" />
                        
                form>
        body>
html>
6.4 页面加载事件
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        
                        function testFun(){
                                var in1=document.getElementById("i1");
                                var v1=in1.value;
                                console.log(v1)
                        }
                        
                script>
        head>
        <body onload="testFun()">
                <input type="text" value="测试文字" id="i1" />
        body>
html>
7 BOM编程学习 7.1 BOM和DOM

(1)什么是BOM
BOM是Browser Object Model的简写,即浏览器对象模型。
BOM有一系列对象组成,是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是window对象
(2)什么是DOM
DOM是Document Object Model的简写,即文档对象模型。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示。
DOM由一系列对象组成,是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。
DOM的顶层是document对象

(3)DOM和BOM的关系
 红色框内是归DOM,绿色框内归BOM;也可以说DOM也是归BOM管的。
 BOM编程就是把整个浏览器抽象成一个对象(window),这个对象中有很多的属性和方法,访问这些属性或者调用这些方法就可以控制浏览器作出…行为。
 DOM编程就是把浏览器当前页面对应的文档抽象成一个对象(document),这个对象中有很多关于 *** 作文档的一些属性和方法,访问这些属性和方法的时候,我们就可以通过代码动态控制页面上显示的内容。
 BOM 是为了 *** 作浏览器出现的 API,window 是其根对象。
 DOM 是为了 *** 作文档出现的 API,document 是其根对象。

7.2 window对象及常用方法
  • 什么是window对象
      Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中,Window 对象是全局对象,所有的表达式都在当前的环境中计算。也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。例如,可以只写document,而不必写 window.document。同样,可以把当前窗口对象的方法当作函数来使用,如只写alert(),而不必写 Window.alert()。
      除了上面列出的属性和方法,Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口,而不仅仅是隐式地引用它时,可以使用这两个属性。除了这两个属性之外,parent 属性、top 属性以及frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。
  • Window 对象属性
  • Window 对象方法
  • Window 三种d窗方式
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        function fun1(){
                                /*
                                 * 如果是使用window对象调用的方法和访问的属性 那么window对象都可以省略不写
                                 * 
                                 * */
                                window.alert("你好呀");//普通信息提示框
                                
                                var con =window.confirm("确定要删除***女友吗?");// 确认框
                                console.log(con);
                                
                                var message =window.prompt("请输入3号女友的名字","例如:小刚");// 信息输入框
                                console.log(message)
                        }
                        
                script>
        head>
        <body>
                <input type="button" value="测试按钮"  onclick="fun1()"/>
        body>
html>

  • 定时器的使用
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        
                        var intervalIDS =new Array(); // [1,2,3 ]
                        // 循环执行的定时器任务
                        function startInterval(){
                                // 2
                                var intervalID = window.setInterval(
                                        function(){
                                                var today =new Date();
                                                var hours=today.getHours();
                                                var minutes=today.getMinutes();
                                                var seconds =today.getSeconds();
                                                var str = hours+"点"+minutes+"分"+seconds+"秒";
                                                
                                                var ta =document.getElementById("timeArea");
                                                ta.value =str;
                                        
                                        },
                                        1000
                                );
                                intervalIDS.push(intervalID);
                        }
                        function stopInterval(){
                                while(intervalIDS.length >0){
                                        window.clearInterval(intervalIDS.shift());
                                }
                                
                                
                        }
                        
                        var timeoutIDS =new Array();
                        // 执行一次的定时器任务
                        function startTimeout(){
                                
                                var timeoutID =window.setTimeout(
                                        function(){
                                                var today =new Date();
                                                var hours=today.getHours();
                                                var minutes=today.getMinutes();
                                                var seconds =today.getSeconds();
                                                var str = hours+"点"+minutes+"分"+seconds+"秒";
                                                console.log(str)
                                        
                                        },
                                        5000
                                );
                                
                                timeoutIDS.push(timeoutID);
                        }
                        
                        function stopTimeout(){
                                while(timeoutIDS.length >0){
                                        window.clearTimeout(timeoutIDS.shift());
                                }
                        }
                        
                script>
        head>
        <body>
                <input type="text" id="timeArea" /> <br />
                <input type="button" value="开始Interval" onclick="startInterval()" />
                <input type="button" value="结束Interval" onclick="stopInterval()" />
                <input type="button" value="开始timeout" onclick="startTimeout()" />
                <input type="button" value="结束timeout" onclick="stopTimeout()" />
        body>
html>

  • open和close方法
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        function fun1(){
                                window.open("https://www.baidu.com")
                        }
                        function fun2(){
                                window.close();
                        }
                script>
        head>
        <body>
                <input type="button" value="打开百度" onclick="fun1()" />
                <input type="button" value="关闭页面" onclick="fun2()" />
        body>
html>
7.3 BOM中其他常见对象
  • location对象
    location对象,是window对象的一个属性,代表浏览器上URL地址栏,使用location对象可以 *** 作地址栏
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        function fun1(){
                                console.log(location.host);// 服务器的IP+端口号
                                console.log(location.hostname);// IP 
                                console.log(location.port);// 端口号
                                console.log(location.href);// 地址栏中具体的文字
                        
                                location.href="https://www.baidu.com"
                        }
                        
                script>
        head>
        <body>
                <input type="button" value="测试location" onclick="fun1()" />
        body>
html>
  • history对象
    history对象是window对象的一个属性,代表浏览器访问历史记录,通过history的 *** 作我们可以实现翻阅浏览器历史网页
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        function fun1(){
                                window.history.forward();
                                
                        }
                        function fun2(){
                                history.back();
                        }
                        function fun3(){
                                history.go(2); // 正整数 向前跳转 * 页  负整数 向后跳转*页
                        }
        
                        
                script>
        head>
        <body>
                <a href="a.html" target="_self">pageAa>
                <input type="button" value="向前" onclick="fun1()"/>
                <input type="button" value="向后" onclick="fun2()"/>
                <input type="button" value="go" onclick="fun3()"/>
        body>
html>
  • screen和navigator
    screen代表屏幕,navigator代表浏览器软件本身,通过这两个对象可以获得屏幕和浏览器软件的一些信息
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        function fun1(){
                                console.info(window.screen.width)
                                console.info(window.screen.height)
                                console.info(navigator.userAgent)
                                console.info(navigator.appName)
                        }
                script>
        head>
        <body onload="fun1()">
        body>
html>
8 DOM编程学习 8.1 DOM介绍
  • 简单来说,DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.
  • document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在。
  • document对象是window对象的一个成员属性,通过window.document来访问,当然也可以直接使用document,根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。
  • DOM节点分类node
    结点对象Node:document对象中的每一个分支点都是一个node对象,它有三个子类
    (1)元素节点Element: 如:我的链接
    (2)属性节点Attribute: 如:href="链接地址"
    (3)文本节点Text: 如:我的链接

  • DOM *** 作的内容
    (1)查询元素(获取元素,进而 *** 作元素,或者元素的属性,文本)
    (2) *** 作文本
    (3) *** 作属性
    (4) *** 作元素
    (5) *** 作CSS样式(一个特殊的属性style)

  • 例子

DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>页面分析title>
        head>
        <body>
               x
                <div id="d1" style="width: 100px;height: 100px; border: 1px solid red;">
                        1a
                        <span>hellospan>
                        2b
                        <span>thank youspan>
                        3c
                        <span>thank you very muchspan>
                        4d
                div>
               y
        body>
html>

上面HTML页面代码的树形结构图如下

  • Node节点常用的属性和方法
8.2 节点 *** 作
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        function fun1(){
                                // 获得document对象
                                var element1 =document.getElementById("d1");
                                console.log(element1);
                                element1.innerText="这是我的div";
                        }
                        function fun2(className){
                                var elements =document.getElementsByClassName(className);
                                console.log(elements)
                                for(var i =0;i<elements.length;i++){
                                        console.log(elements[i])
                                }
                        }
                        function fun3(){
                                var elements =document.getElementsByTagName("input");
                                console.log(elements);
                                for(var i =0;i<elements.length;i++){
                                        console.log(elements[i])
                                }
                        }
                        function fun4(){
                                var elements=document.getElementsByName("hobby");
                                console.log(elements);
                                for(var i =0;i<elements.length;i++){
                                        console.log(elements[i])
                                }
                        }
                script>
        head>
        <body>
                <div id='d1' class="a">这是第一个divdiv>
                <div id='d2' class="a">这是第二个divdiv>
                <div id='d3' class="a">这是第三个divdiv>
                <input id='i1' class="a" name='name1'/>
                <div id='d4' class="b" name='name1'>这是第四个divdiv>
                <div id='d5' class="b">这是第五个divdiv>
                爱好:
                <input type="checkbox" name="hobby"  value="1" />篮球
                <input type="checkbox" name="hobby"  value="2" />足球
                <input type="checkbox" name="hobby"  value="3" />羽毛球
        
                <hr />
                <input type="button" value="id值获取" onclick='fun1()' />
                <input type="button" value="class属性值获取" onclick='fun2("b")' />
                <input type="button" value="标签名获取" onclick='fun3()' />
                <input type="button" value="name属性值获取" onclick='fun4()' />
        body>
html>
8.3 节点属性 *** 作
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <script>
                        function fun1(){
                                //获得属性值
                                var node =document.getElementById("in1");
                                
                                // 语法1     获得  节点.属性名    修改  节点.属性名 =属性值
                                console.log(node.type);
                                console.log(node.value);
                                //改变属性值
                                node.type="button";
                                node.value="你好我也好";

                                // 语法2  getAttribute   setAttribute
                                console.log(node.getAttribute("type"));
                                console.log(node.getAttribute("value"));
                        
                                node.setAttribute("type","button");
                                node.setAttribute("value","大家好");
                        }
                script>
        head>
        <body>
                <input type="text" value="你好呀" id="in1" /> 
                <hr />
                <input type="button" value="" onclick="fun1()"  />
        body>
html>
8.4 节点样式 *** 作
DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <style>
                        #div1{
                                width: 100px;
                                height: 100px;
                                border: 1px solid red;
                                
                        }
                        .a{
                                background-color: lightblue;
                                color: blue;
                                font-size: 40px;
                        }
                style>
                <script>
                        function fun1(){
                                // 节点.style.样式名=样式值
                                var element =document.getElementById("div1");
                                element.style.width="200px";
                                element.style.height="200px";
                                element.style.border="10px solid green";
                                // css样式在更多的时候是以class选择器的形式作用到元素上
                                // 可以通过修改class属性,影响div的样式
                                element.setAttribute("class","a")
                        }
                script>
        head>
        <body>
                <div id="div1" >
                        你好呀
                div>
                <hr/>
                <input type="button" value="测试" onclick="fun1()" />
        body>
html>

8.5 节点标签文本 *** 作

(1)innerHtml *** 作双标签中间的HTML
(2)innerText *** 作双标签中间的 Text
(3)value *** 作表单标签值

DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>title>
                <style>
                        div{
                                border: 1px solid red;
                                width: 200px;
                                height: 200px;
                        }
                style>
                <script>
                        function fun1(){
                                var element1=document.getElementById("d1");
                                
                                /*
                                 * innerText  不包含HTML结构
                                 * innerHTML  包含HTML结构
                                 * */
                                
                                console.log("innerText>>>"+element1.innerText);
                                console.log("innerHTML>>>"+element1.innerHTML);
                                
                                
                                var element2=document.getElementById("i1");
                                console.log(element2.value)
                        }
                        function fun2(){
                                var element1=document.getElementById("d1");
                                //element1.innerText="一刻也不能分割"
                                element1.innerHTML="一刻也不能分割"
                                
                                var element2=document.getElementById("i1");
                                element2.value="无论我走到哪里";  
                        }
                script>
        head>
        <body>
                <div id='d1'>
                        a
                        <span>文字span>
                        b
                div>
                <input type="text" value="我和我的祖国" id='i1' />
                <input type="button" value="获取内容"  onclick="fun1()"/>
                <input type="button" value="修改内容"  onclick="fun2()"/>
        body>
html>
8.6 增加和删除节点


创建元素createElement()
增加元素appendChild()
删除元素removeChild()

DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>title>
                <style>
                        #d1{
                                border: 1px solid red;
                                width: 80%;
                                height: 200px;
                        }
                style>
                <script>
                        function fun1(){
                                var div1=document.getElementById("d1");
                                // 通过JS创建标签
                                var in1=document.createElement("input");
                                in1.setAttribute("type","text");
                                in1.setAttribute("value","请输入内容");
                                
                                var in2=document.createElement("input");
                                in2.setAttribute("type","password");
                                in2.setAttribute("value","123456789");
                                
                                var in3=document.createElement("input");
                                in3.setAttribute("type","button");
                                in3.setAttribute("value","删除");
                                
                                var br=document.createElement("br");
                                
                                in3.onclick=function (){
                                        div1.removeChild(in1)
                                        div1.removeChild(in2)
                                        div1.removeChild(in3)
                                        div1.removeChild(br)
                                }
                                div1.appendChild(in1);
                                div1.appendChild(in2);
                                div1.appendChild(in3);
                                div1.appendChild(br);
                        }
                script>
        head>
        <body>
                <div id="d1">
                        
                div>
                <input type="button" value="增加" onclick="fun1()" />
        body>
html>

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/799523.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-06
下一篇 2022-05-06

发表评论

登录后才能评论

评论列表(0条)

保存