JavaScript学习笔记-B站动力节点
2024-04-15 20:06:18
文章目录
- 1.1.什么是JavaScript，有什么用？
- 1.2.HTML，CSS，JavaSript三者关系
- 2.在HTML中怎么嵌入JavaScript代码？
- 3.JS的标识符和关键字
- 4.关于JS中的变量
- 5.JS的函数初步
- 6.局部变量和全局变量
- 7.数据类型
- 8.Undefined类型
- 9.Number类型
- 10.Boolean类型
- 11.String类型
- 12.Object类型
- 13.null NaN undefined这三个值有什么区别
- 14.JS的常用事件和注册事件的两种方式
- 15.JS代码的执行顺序（load事件）
- ----以后的代码都是按照以下这种方式写的----
- 16.JS代码设置节点的属性（load事件）
- 17.JS代码捕捉回车键（keydown事件）
- 18.JS的void运算符
- 19.JS的控制语句和JS的数组
- 20.JavaScript包括三块：ECMAScript、DOM、BOM
- 21.DOM编程-获取文本框的value
- 22.DOM编程-innerHTML和innerText操作div和span
- 23.DOM编程-关于正则表达式
- 24.DOM编程-去除字符串前后空白的trim函数
- 25.DOM编程-表单验证
- 26.DOM编程-复选框的全选和取消全选
- 27.DOM编程-获取下拉列表选中项的value
- 28.1.DOM编程-显示网页时钟和JS内置对象(内置支持类)Date
- 28.2.内置支持类Array
- 29.学会使用浏览器的F12
- 30.BOM编程-window对象的open和close方法
- 31.BOM编程-弹出消息框和确认框
- 32.BOM编程-将当前窗口设置为顶级窗口
- 33.BOM编程-window的history对象(类)
- 34.BOM编程-设置浏览器地址栏上的URL
- 35.JSON-介绍
- 36.JSON-复杂一些的JSON对象
- 37.JSON-eval函数
- 38.JSON-DOM-拼接html的方式，设置table的tbody
1.1.什么是JavaScript，有什么用？
JavaScript是运行在浏览器上的脚本语言。简称JS。JavaScript是网景公司（NetScape）的 布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。LiveScript的出现让浏览器更加的生动了，不再是单纯的静态页面了。页面更具有交互性。在历史的某个阶段，SUN公司和网景公司他们之间有合作关系，SUN公司把LiveScript的名字修改为JavaScript。JavaScript这个名字中虽然带有“Java”但是和Java没有任何关系，只是语法上优点类似。
他们运行的位置不同，Java运行在JVM当中，JavaScript运行在浏览器的内存当中。JavaScript程序不需要我们程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。
JavaScript的“目标程序”以普通文本形式保存，这种语言都叫做“脚本语言”。Java的目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言。网景公司1998年被美国在线收购。网景公司最著名的就是领航者浏览器：Navigator浏览器。LiveScript的出现，最初的时候是为Navigator浏览器量身定制一门语言，不支持其他浏览器。当Navigator浏览器使用非常广泛的时候，微软害怕了，于是微软在最短的时间内组建了一个团队，
开始研发只支持IE浏览器的脚本语言，叫做JScript。JavaScript和JScript并存的年代，程序员是很痛苦的，因为程序员要写两套程序。
在这种情况下，有一个非营利性组织站出来了，叫做ECMA组织（欧洲计算机协会）
ECMA根据JavaScript制定了ECMA-262号标准，叫做ECMA-Script。现代的javascript和jscript都实现了ECMA-Script规范。（javascript和jscript统一了。）以后大家会学习一个叫做JSP的技术，JSP和JS有啥区别？JSP : JavaServer Pages（隶属于Java语言的，运行在JVM当中）JS : JavaScript（运行在浏览器上。）
1.2.HTML，CSS，JavaSript三者关系
CSS和JavaScript为HTML服务CSS好比是HTML的化妆品一样。修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
JavaScript让网页能够动起来，更加生动，页面更具有交互性。
2.在HTML中怎么嵌入JavaScript代码？
三种方式第一种方式：<标签 ... 事件句柄="js代码" />第二种方式：脚本块的方式<script type="text/javascript">js代码</script>第三种方式：引入外部独立的js文件(推荐使用)
<!doctype html>
<html><head><title>HTML中嵌入JS代码的第一种方式</title></head><body><!--1.要实现的功能：用户点击以下按钮，弹出消息框。2.JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行相应的程序。在JS中有很多事件，其中一个事件叫做：鼠标单击(单词：click)。并且任何事件都会对应一个事件句柄，事件句柄是以HTML标签的属性存在的。事件句柄写法：在事件单词前加一个on。(比如鼠标单击事件的事件句柄是onclick)3.οnclick="js代码"，执行原理是什么？页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。4.怎么使用js代码弹出消息框？在js中有一个内置的对象叫做window(全部小写)，可以直接拿来使用，window代表的是浏览器对象。window对象有一个函数叫做：alert，用法是：window.alert("消息");这样就可以弹窗了。5.js中的字符串可以使用单引号，也可以使用双引号。6.js中的一条语句结束之后可以使用分号，也可以不用。--><input type="button" value="hello" onclick="window.alert('hello')"/><!--οnclick='window.alert("hello")'外面是单引号，里面就该是双引号--><input type="button" value="hello" onclick='window.alert("hello jscode")'/><!--连续出现三个弹窗--><input type="button" value="hello" onclick="window.alert('hello zhangsan')window.alert('hello lisi')window.alert('hello wangwu')"/><!--window.可以省略不写--><input type="button" value="hello" onclick="alert('hello zhangsan')alert('hello lisi')alert('hello wangwu')"/></body>
</html>
<!doctype html>
<html><head><title>HTML中嵌入JS代码的第二种方式</title></head><body><!--这个按钮会先执行，再执行下面的javaScript代码--><input type="button" value="我是一个按钮" /><!--第二种方式：脚本块的方式<script type="text/javascript">js代码</script>javaScript的脚本块在整篇代码中(在一个页面中)可以出现多次，没有要求。javaScript的脚本块在整篇代码中出现的位置没有要求，可以在<!doctype html>上面--><script type="text/javascript">/*暴露在脚本块当中的程序，在页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行(这个代码的执行不需要事件)。*/window.alert("Hello World!");//alert函数会阻塞整个HTML页面的加载//点击弹窗的确定键后，该行语句才执行结束，才会接着执行下一条语句window.alert("Hello JavaScript!");//js代码单行注释/*js代码多行注释*/</script></body>
</html>
html注释：<!---->css注释：要写在style里<style type="text/css">/* */</style>JavaScript注释：要写在script里<script type="text/javascript">//单行注释/* 多行注释 */</script>java注释：//单行注释/* 多行注释 *//***javadoc注释，这里的注释信息会被javadoc.exe工具解析提取生成帮助文档**/
<!doctype html>
<html><head><title>HTML中嵌入JS代码的第三种方式</title></head><body><!--引入外部独立的js文件(推荐使用)--><!--在需要的位置引入js脚本文件--><!--引入外部独立的js文件时，js文件中的代码会遵循自上而下的顺序依次逐行执行--><script type="text/javascript" src="js/1.js"></script><!--同一个js文件可以被引入多次，但实际开发中这种需求很少<script type="text/javascript" src="js/1.js"></script>注意：这种方式不行<script type="text/javascript" src="js/1.js" />--><script type="text/javascript" src="js/1.js">//在这里之间写的代码不会执行//window.alert("Test");</script><!--HTML中嵌入JS代码的第二种脚本块方式和第三种方式可以一起写：<script type="text/javascript" src="js/1.js"></script><script type="text/javascript">window.alert("hello");</script>--></body>
</html>
3.JS的标识符和关键字
JS的标识符命名规则和规范参照java命名规则(语法上的规定)：1.必须由数字、字母、下划线、美元符号组成2.不能以数字开头3.严格区分大小写4.不能使用关键字做标识符5.理论上没有长度限制命名规范：1.类名和接口名首字母大写，后面每个字母首字母大写2.方法名和变量的名字首字母小写，后面每个单词首字母大写3.常量名要求全部大写，并且单词与单词之间以下划线_相隔4.驼峰命名方式5.见名知意
4.关于JS中的变量
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>关于JS中的变量</title></head><body><script type="text/javascript">/*回顾java中的变量：1.java中怎么定义/声明变量？数据类型 变量名;例如：int i;double d;boolean flag;2.java中的变量怎么赋值？使用“=”运算符进行赋值运算（"="运算符右边先执行，将右边执行的结果赋值给左边的变量）变量名 = 值;例如：i = 10;d = 3.14;flag = false;3.java语言是一种强类型语言，强类型怎么理解？java语言存在编译阶段，假设有代码：int i;那么在Java中有一个特点是：java程序编译阶段就已经确定了i变量的数据类型，该i变量的数据类型在编译阶段是int类型，那么这个变量到最终内存释放，一直都是int类型，不可能变成其他类型。int i = 10;double d = i; 这行代码是说声明一个新的变量d，double类型，把i变量中保存的值传给d。i还是int类型。i = "abc"; 这行代码编译的时候会报错，因为i变量的数据类型是int类型，不能将字符串赋给i。java中要求变量声明的时候是什么类型，以后永远都是这种类型，不可变。编译期强行固定变量的数据类型，称为强类型语言。javascript当中的变量？怎么声明变量？var 变量名;怎么给变量赋值？变量名 = 值;javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。var i = 100;i = false;i = "abc";i = new Object();i = 3.14;重点：javascript是一种弱类型编程语言。0*///在JS当中，当一个变量没有手动赋值的时候，系统默认赋值undefined//undefined 在JS中是一个具体存在值var i;window.alert("i =" + i);alert(undefined);var k = undefined;alert("k = " + k);//一个变量没有声明/定义,直接用?// alert(age); 语法错误：age is not defined (变量age不存在,不能这样写)var a, b, c = 200;alert("a = " + a); //a=undefinedalert("b = " + b); //b=undefinedalert("c = " + c); //c=200a = false;alert(a); a = "abc";alert(a); a = 1.2;alert(a);</script></body>
</html>5.JS的函数初步
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS的函数初步</title></head><body><script type="text/javascript">/*1.JS中的函数：等同于java语言中的方法，函数也是一段可以被重复利用的代码片段。函数一般都是可以完成某个特定功能的。2.回顾java中的方法？[修饰符列表] 返回值类型 方法名(形式参数列表){方法体;}例如：public static boolean login(String username,String password){...return true;}boolean loginSuccess = login("admin","123");3.JS中的变量是一种弱类型的，那么函数应该怎么定义呢？语法格式：第一种方式：function 函数名(形式参数列表){函数体;}第二种方式：函数名 = function(形式参数列表){函数体;}JS中的函数不需要指定返回值类型，返回什么类型都行。*/function sum(a,b){//a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意)window.alert(a+b);}//函数必须调用才能执行的.//sum(10, 20);// 定义函数sayHellosayHello = function(username){window.alert("hello " + username);}//调用函数//sayHello("zhangsan");</script><!--使用事件句柄和脚本块联合的方式，并在事件句柄中调用脚本块中的函数--><input type="button" value="hello" onclick="sayHello('jack');" /> <input type="button" value="计算10和20的求和" onclick="sum(10, 20);" /></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS的函数初步</title></head><body><script type="text/javascript">/*java中的方法有重载机制，JS中的函数能重载吗？JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，JS就是这么随意（弱类型）重载的含义：方法名或者函数名一样，形参不同（个数、类型、顺序）JS中的函数不需要重载。*/function sum(a, b){return a + b;}// 调用函数sumvar retValue = sum(1, 2);alert(retValue);var retValue2 = sum("jack"); // jack赋值给a变量,b变量没有赋值系统默认赋值undefinedalert(retValue2); // jackundefinedvar retValue3 = sum();alert(retValue3); // NaN (NaN是一个具体存在的值，该值表示不是数字。Not a Number)var retValue4 = sum(1, 2, 3);alert("结果=" + retValue4); // 结果=3(第三个3没了)/*在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。*/function test1(username){alert("test1");}function test1(){alert("test1 test1");}test1("lisi"); // 这个调用的是第二个test1()函数.</script></body>
</html>6.局部变量和全局变量
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>设置table的tbody</title></head><body><script type="text/jscript">/*全局变量：在函数体之外声明的变量属于全局变量，全局变量的生命周期是：浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间。能使用局部变量尽量使用局部变量。局部变量：在函数体当中声明的变量，包括一个函数的形参都属于局部变量。局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。局部变量生命周期较短。*/// 全局变量var i = 100;function accessI(){// 访问的是全局变量alert("i = " + i);}accessI();// 全局变量var username = "jack";function accessUsername(){// 局部变量var username = "lisi";// 就近原则:访问局部变量alert("username = " + username);}// 调用函数accessUsername();// 访问全局变量alert("username = " + username);function accessAge(){var age = 20;alert("年龄 = " + age);}accessAge();// 报错(语法不对，无法调用局部变量)// alert("age = " + age);// 以下语法是很奇怪的.function myfun(){// 当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.myname = "dujubin";}myfun();// 访问函数alert("myname = " + myname); // myname = dujubin</script></body>
</html>7.数据类型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS中的数据类型</title></head><body><script type="text/javascript">/*1.虽然JS中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以这里也需要学习一下JS包括哪些数据类型？JS中数据类型有：原始类型、引用类型。原始类型：Undefined、Number、String、Boolean、Null引用类型：Object以及Object的子类2.ES规范(ECMAScript规范)，在ES6之后，又基于以上的6种类型之外添加了一种新的类型：Symbol3.JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。typeof运算符的语法格式：typeof 变量名typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写。"undefined""number""string""boolean""object""function"4.在JS当中比较字符串是否相等使用“==”完成。没有equals。*/// 求和,要求a变量和b变量将来的数据类型必须是数字,不能是其他类型// 因为以下定义的这个sum函数是为了完成两个数字的求和.function sum(a, b){if(typeof a == "number" && typeof b == "number"){return a + b;}alert(a + "," + b + "必须都为数字！");}// 别人去调用以上你写的sum函数.var retValue = sum(false, "abc");alert(retValue); //没有返回值，赋默认值 undefinedvar retValue2 = sum(1, 2);alert(retValue2); // 3var i;alert(typeof i); // "undefined"var k = 10;alert(typeof k); // "number"var f = "abc";alert(typeof f); // "string"var d = null;alert(typeof d); // "object" null属于Null类型,但是typeof运算符的结果是"object"(无法解释，是个bug)var flag = false;alert(typeof flag); // "boolean"var obj = new Object();alert(typeof obj); // "object"// sayHello是一个函数.function sayHello(){}alert(typeof sayHello); // "function"</script></body>
</html>8.Undefined类型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Undefined类型</title></head><body><script type="text/javascript">/*Undefined类型只有一个值，这个值就是 undefined当一个变量没有手动赋值，系统默认赋值undefined或者也可以给一个变量手动赋值undefined。*/var i; // undefinedvar k = undefined; // undefinedalert(i == k); // truevar y = "undefined"; // "undefined" 是字符串alert(y == k); // false</script></body>
</html>9.Number类型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Number类型</title></head><body><script type="text/javascript">/*1.Number类型包括哪些值？(java中使用byte short int long float double 6个类型来表示数字，js中只使用了一个Number)-1 0 1 2 2.3 3.14 100 .... NaN Infinity整数、小数、正数、负数、不是数字、无穷大都属于Number类型。2.isNaN() : 结果是true表示不是一个数字，结果是false表示是一个数字。3.parseInt()函数4.parseFloat()函数5.Math.ceil() 函数（Math是数学类，数学类当中有一个函数叫做ceil()，作用是向上取整(大于等于自己的最小整数)）*/var v1 = 1;var v2 = 3.14;var v3 = -100;var v4 = NaN;var v5 = Infinity;// "number"alert(typeof v1);alert(typeof v2);alert(typeof v3);alert(typeof v4);alert(typeof v5);// 关于NaN (表示Not a Number，不是一个数字，但属于Number类型)// 什么情况下结果是一个NaN呢？// 运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN.var a = 100;var b = "中国人";// 除号显然最后结果应该是一个数字,但是运算的过程中导致最后不是一个数字,那么最后的结果是NaNalert(a / b); var e = "abc";var f = 10;alert(e + f); //"abc10"(+号两边如果有字符串，会做字符串拼接，而不是做加法运算)// Infinity (当除数为0的时候，结果为无穷大)alert(10 / 0);// 思考:在JS中10 / 3 = ?alert(10 / 3); // 3.3333333333333335// 关于isNaN函数？// 用法：isNaN(数据),结果是true表示不是一个数字, 结果是false表示是一个数字.// isNaN : is Not a Numberfunction sum(a, b){if(isNaN(a) || isNaN(b)){alert("参与运算的必须是数字！");return;}return a + b;}sum(100, "abc"); //参与运算的必须是数字！alert(sum(100, 200)); //300// parseInt():可以将字符串自动转换成数字,并且取整数位.alert(parseInt("3.9999")); // 3alert(parseInt(3.9999)); // 3// parseFloat():可以将字符串自动转换成数字.alert(parseFloat("3.14") + 1); // 4.14alert(parseFloat("3.2") + 1); // 4.2// Math.ceil()alert(Math.ceil("2.1")); // 3</script></body>
</html>10.Boolean类型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Boolean类型</title></head><body><script type="text/javascript">/*1.JS中的布尔类型永远都只有两个值：true和false（这一点和java相同）2.在Boolean类型中有一个函数叫做：Boolean()。语法格式：Boolean(数据) Boolean()函数的作用是将非布尔类型转换成布尔类型。*//*if(布尔类型)如果括号里不是布尔类型，会自动调用函数Boolean()，将非布尔类型转换成布尔类型用法：Boolean("有")--->trueBoolean("没有")--->false规律:“有"就转换成true,"没有"就转换成false.alert(Boolean(1)); // truealert(Boolean(0)); // falsealert(Boolean("")); // falsealert(Boolean("abc")); // truealert(Boolean(null)); // falsealert(Boolean(NaN)); // falsealert(Boolean(undefined)); // falsealert(Boolean(Infinity)); // true*/var username = "";//用户名不能为空//var username = "jack"; 欢迎你jackif(username){alert("欢迎你" + username);}else{alert("用户名不能为空！");}/*if(Boolean(username)){alert("欢迎你" + username);}else{alert("用户名不能为空！");}*//*死循环while(10 / 3){alert("hehe");}*/for(var i = 0; i < 10; i++){alert("i = " + i);}// Null类型只有一个值,nullalert(typeof null); //注意：typeof null 为 "object"</script></body>
</html>11.String类型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">/*String类型：1.在JS当中字符串可以使用单引号，也可以使用双引号。var s1 = 'abcdef';var s2 = "test";2.在JS当中，怎么创建字符串对象呢？两种方式：第一种：var s = "abc";第二种（使用JS内置的支持类String）： var s2 = new String("abc");需要注意的是：String是一个内置的类，可以直接用，String的父类是Object。3.无论小string还是大String，他们的属性和函数都是通用的。4.关于String类型的常用属性和函数？常用属性：length 获取字符串长度常用函数：indexOf 获取指定字符串在当前字符串中第一次出现处的索引lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引replace 替换substr 截取子字符串substring 截取子字符串toLowerCase 转换小写toUpperCase 转换大写split 拆分字符串*/// 小string(属于原始类型String)var x = "king";alert(typeof x); // "string"// 大String(属于Object类型)var y = new String("abc");alert(typeof y); // "object"//无论小string还是大String，他们的属性和函数都是通用的。//字符串的length属性，获取字符串的长度alert(x.length); // 4alert(y.length); // 3//字符串的indexOf函数，获取指定字符串在当前字符串中第一次出现处的索引alert("http://www.baidu.com".indexOf("http")); // 0alert("http://www.baidu.com".indexOf("https")); // -1// 判断一个字符串中是否包含某个子字符串？alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含"); // 不包含// replace函数 (注意：只替换了第一个)alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value// 继续调用replace方法,就会替换第“二”个.// 想全部替换需要使用正则表达式(后面再讲).alert("name=value%name=value%name=value".replace("%","&").replace("%", "&")); // name=value&name=value&name=value// 考点:经常问 substr和substring的区别？// substr(startIndex, length) 下标从0开始alert("abcdefxyz".substr(2,4)); //cdef// substring(startIndex, endIndex) 注意:不包含endIndexalert("abcdefxyz".substring(2,4)); //cd</script></body>
</html>可以查看JScript.chm帮助文档
12.Object类型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Object类型</title></head><body><script type="text/javascript">/*Object类型：1.Object类型是所有类型的超类，自定义的任何类型，默认继承Object。2.Object类包括哪些属性？prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。constructor属性3.Object类包括哪些函数？toString()valueOf()toLocaleString()4.在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。换句话说，自己定义的类中也有prototype属性。5.在JS当中怎么定义类？怎么new对象？定义类的语法：第一种方式：function 类名(形参){}第二种方式：类名 = function(形参){}创建对象的语法：new 构造方法名(实参); // 构造方法名和类名一致。*/function sayHello(){}// 把sayHello当做一个普通的函数来调用.sayHello();// 这种方式就表示把sayHello当做一个类来创建对象.var obj = new sayHello(); // obj是一个引用,保存内存地址指向堆中的对象.// 定义一个学生类function Student(){alert("Student.....");}// 当做普通函数调用Student();// 当做类来创建对象var stu = new Student();alert(stu); // [object Object]//可以通过函数名首字母小写,类名首字母大写来区分是函数还是类// JS中的类的定义,同时又是一个构造函数的定义// 在JS中类的定义和构造函数的定义是放在一起来完成的.function User(a, b, c){ // a b c是形参,属于局部变量.// 声明属性 (this表示当前对象)// User类中有三个属性:sno/sname/sagethis.sno = a;this.sname = b;this.sage = c;}// 创建对象var u1 = new User(111, "zhangsan", 30);// 访问对象的属性alert(u1.sno);alert(u1.sname);alert(u1.sage);var u2 = new User(222, "jackson", 55);alert(u2.sno);alert(u2.sname);alert(u2.sage);// 访问一个对象的属性,还可以使用这种语法alert(u2["sno"]);alert(u2["sname"]);alert(u2["sage"]);// 定义类的另一种语法/*Emp = function(a, b){this.ename = a;this.sal = b;}*/Emp = function(ename,sal){// 属性this.ename = ename;this.sal = sal;}var e1 = new Emp("SMITH", 800);alert(e1["ename"] + "," + e1.sal);//另一个例子Product = function(pno,pname,price){// 属性this.pno = pno;this.pname = pname;this.price = price;// 函数this.getPrice = function(){return this.price;}}var xigua = new Product(111, "西瓜", 4.0);var pri = xigua.getPrice();alert(pri); // 4.0// 可以通过prototype这个属性来给类动态扩展属性以及函数//意思是在类写完之后,又想给类添加新的属性/函数,这样就可以使用属性prototypeProduct.prototype.getPname = function(){return this.pname;}// 调用后期扩展的getPname()函数var pname = xigua.getPname();alert(pname);// 给String扩展一个函数String.prototype.suiyi = function(){alert("这是给String类型扩展的一个函数，叫做suiyi");}"abc".suiyi();</script></body>
</html><!--java语言怎么定义类，怎么创建对象？（强类型）public class User{private String username;private String password;public User(){}public User(String username,String password){this.username = username;this.password = password;}}User user = new User();User user = new User("lisi","123");JS语言怎么定义类，怎么创建对象？（弱类型）User = function(username,password){this.username = username;this.password = password;}var u = new User();var u = new User("zhangsan");var u = new User("zhangsan","123");
-->
13.null NaN undefined这三个值有什么区别
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>null NaN undefined这三个值有什么区别</title></head><body><script type="text/javascript">// null NaN undefined 数据类型不一致.alert(typeof null); // "object"alert(typeof NaN); // "number"alert(typeof undefined); // "undefined"// null和undefined可以等同.alert(null == NaN); // falsealert(null == undefined); // truealert(undefined == NaN); // false// 在JS当中有两个比较特殊的运算符// ==(等同运算符：只判断值是否相等)// ===(全等运算符：既判断值是否相等，又判断数据类型是否相等)alert(null === NaN); // falsealert(null === undefined); // falsealert(undefined === NaN); // false// == 是等同运算符alert(1 == true); // truealert(1 === true); // false</script></body>
</html>14.JS的常用事件和注册事件的两种方式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS的常用事件</title></head><body><script type="text/javascript">/*JS中的常用事件：blur 失去焦点 focus 获得焦点click 鼠标单击dblclick 鼠标双击 (doubleclick)keydown 键盘按下keyup 键盘弹起mousedown 鼠标按下mouseover 鼠标经过mousemove 鼠标移动mouseout 鼠标离开mouseup 鼠标弹起reset 表单重置submit 表单提交change 下拉列表选中项改变，或文本框内容改变select 文本被选定load 页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在）*/// 对于当前程序来说,sayHello函数被称为回调函数(callback函数)// 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.function sayHello(){alert("hello js!");}/*java中也有回调函数机制：public class MyClass{public static void main(String[] args){// 主动调用run()方法，站在这个角度看run()方法叫做正向调用。run();}// 站在run方法的编写者角度来看这个方法，把run方法叫做回调函数。public static void run(){System.out.println("run...");}}*/</script><!--注册事件的第一种方式：直接在标签中使用事件句柄--><!--以下代码的含义是：将sayHello函数 注册 到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。--><input type="button" value="hello" onclick="sayHello()"/><!--第二种注册事件的方式--><input type="button" value="hello2" id="mybtn" /><input type="button" value="hello3" id="mybtn1" /><input type="button" value="hello4" id="mybtn2" /><script type="text/javascript">//第二种注册事件的方式，是使用纯JS代码完成事件的注册。function doSome(){alert("do some!");}// 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)//通过document对象的getElementById(...)方法(通过id获得元素),返回一个button对象var btnObj = document.getElementById("mybtn");// 第二步:给按钮对象的onclick属性赋值(这里通过函数调用的方法)// 注意:千万别加小括号. doSome()代表返回值，函数会立即执行；doSome代表这个函数//btnObj.onclick = doSome();--->如果这样写,不按按钮就会出现弹窗// 这行代码的含义是,将回调函数doSome注册到click事件上.btnObj.onclick = doSome; //到此第二种方式结束//可以通过匿名函数代替上述函数var mybtn1 = document.getElementById("mybtn1");// 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.mybtn1.onclick = function(){ alert("test.........."); }//一行代码写完第二种方式(以后第二种方式就用这种)document.getElementById("mybtn2").onclick = function(){alert("test22222222.........");}</script></body>
</html>15.JS代码的执行顺序（load事件）
初步：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS代码的执行顺序</title></head><!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生--><body onload="ready()"><!--这样写的顺序是错的页面打开之后，会自上而下执行。<script type="text/javascript">第一步:根据id获取节点对象返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)var btn = document.getElementById("btn"); 第二步:给节点对象绑定事件btn.onclick = function(){alert("hello js");}</script><input type="button" value="hello" id="btn" />--><!--如何解决上述问题？1.把按钮写在前面2.使用load事件load事件发生之后，ready()函数才会执行；load事件什么时候发生？页面加载完毕之后(页面所有元素加载完毕之后)，load事件才会发生。--><script type="text/javascript">function ready(){var btn = document.getElementById("btn");btn.onclick = function(){alert("hello js");}}</script><input type="button" value="hello" id="btn" /></body>
</html>最终：如果顺序写成上面这样，事件注册的第二种方式按照以下代码写
----以后的代码都是按照以下这种方式写的----
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS代码的执行顺序</title></head><body><!--<body οnlοad="ready()"> 不把onload写在这里了<script type="text/javascript">window.onload = ready; 不能写=ready() 这是函数的返回值 参照事件的第二种注册方式function ready(){var btn = document.getElementById("btn");btn.onclick = function(){alert("hello js");}}</script><input type="button" value="hello" id="btn" />--><!--再使用匿名函数简化--><script type="text/javascript">// 页面加载的过程中,将a函数注册给了load事件// 页面加载完毕之后,load事件发生了,此时执行回调函数a// 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件// 当id="btn"的节点发生click事件之后,b函数被调用并执行.window.onload = function(){ // 这个回调函数叫做adocument.getElementById("btn").onclick = function(){ // 这个回调函数叫做balert("hello js..........");}}</script><input type="button" value="hello" id="btn" /></body>
</html>16.JS代码设置节点的属性（load事件）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">window.onload = function(){document.getElementById("btn").onclick = function(){var mytext = document.getElementById("mytext");// 一个节点对象中只要有的属性都可以"."mytext.type = "checkbox";}}</script><!--如何将文本框修改为复选框？即把text改为checkbox先给文本框和按钮加上id，再看上面代码--><input type="text" id="mytext"/><input type="button" value="将文本框修改为复选框" id="btn"/><!--总结：一个节点有什么属性都可以：节点的id.属性 = "..." 来设置--></body>
</html>17.JS代码捕捉回车键（keydown事件）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS代码捕捉回车键</title></head><body><!--什么叫捕捉回车键？有时候在网页中，用户填完信息后，不点登录按钮，而是按回车键(按回车键也能登录)如何捕捉这个回车键？在文本框/密码框捕捉回车键，使用keydown事件--><script type="text/javascript">window.onload = function(){var usernameElt = document.getElementById("username");/*随便按键盘上的一个键，就会触发keydown事件：usernameElt.onkeydown = function(){alert(111);}*//*我们的任务是:获取用户所按的键,而键盘上的每个键都有对应的键值,即获取键值回车键的键值是13;ESC键的键值是27在浏览器中,当keydown事件发生时,浏览器会将当前事件对象(keydown事件对象)当作形参传到下面函数,来调用下面这个回调函数.event只是一个形参的名字,写a/b/c...都可以,但为了程序的可读性，写eventusernameElt.onkeydown = function(event){}当某事件发生时，浏览器会new一个当前事件对象，去调用回调函数(将当前事件对象传给函数的形参)usernameElt.onkeydown = function(){ alert(111); }--->会new当前事件对象传给回调函数，但没有形参接受usernameElt.onkeydown = function(a){ alert(a); } [object KeyboardEvent] 这就是当前事件对象usernameElt.onkeydown = function(a,b){ alert(b); } undefined 因为当前对象传给了a，b没有任何东西usernameElt.onkeydown = function(a,b,c){ alert(c); } undefined usernameElt.onkeydown = function(event){//获取键值 回车键的键值是13;ESC键的键值是27//对于“键盘事件对象"来说,都有keyCode属性用来获取键值.alert(event.keyCode);}*/usernameElt.onkeydown = function(event){if(event.keyCode === 13){alert("正在进行验证....");}} }</script><input type="text" id="username"/></body>
</html>18.JS的void运算符
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS的void运算符</title></head><body><!--JS有很多运算符，只讲void-->页面顶部<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!--实现一个功能：既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转--><!--<a href="..." οnclick="window.alert('test code')">既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。</a>上述代码中，页面会跳转到...所写的东西href="" 代表当前路径，会跳到当前页面要页面不能跳转，就要让...所写的东西消失方法：使用void()运算符void运算符的语法：void(表达式)运算原理：执行表达式，但不返回任何结果。但是这样写：href="void(0)" 也不行，会把void(0)当作某个路径跳过去了要这样写： href="javascript:void(0)"其中javascript:作用是告诉浏览器后面是一段JS代码。以下程序的javascript:是不能省略的。注意：void(这里写的东西不唯一，但必须要写些东西/表达式) href="javascript:void(0)"这样写之后，页面就不会跳转了，因为void(表达式) 执行表达式之后不会返回任何结--><a href="javascript:void(0)" onclick="window.alert('test code')">既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。</a><br><br><br></body>
</html>把鼠标放到超链接上，有时会看到左下角的javascript:void(0)
19.JS的控制语句和JS的数组
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JS的控制语句</title></head><body><script type="text/javascript">/*JS的控制语句：1、if2、switch3、while4、do .. while..5、for循环6、break7、continue8、for..in语句（了解）9、with语句（了解）前7个和java用法相同，只讲第8个和第9个*/// 创建JS数组 (JS中数组中元素的类型随意.元素的个数随意，数组大小会自动扩容)var arr = [false,true,1,2,"abc",3.14]; // 遍历数组for循环for(var i = 0; i < arr.length; i++){alert(arr[i]);}// for..in语句第一种用法：用在数组方面for(var i in arr){//i是arr数组的元素下标//alert(i); 输出 0 1 2 3 4 5alert(arr[i]); //输出数组元素}// for..in语句第二种用法：可以遍历对象的属性//User类User = function(username,password){this.username = username;this.password = password;}var u = new User("张三", "444");alert(u.username + "," + u.password);//输出 张三,444alert(u["username"] + "," + u["password"]);//输出 张三,444//属性名--->shuXingMingfor(var shuXingMing in u){//alert(shuXingMing); 输出username password//alert(typeof shuXingMing); 输出string string//alert(u.shuXingMing); 输出 undefined undefinedalert(u[shuXingMing]);//shuXingMing本就是字符串，不需要加双引号，输出：张三 444}//with的用法/*alert(u.username);alert(u.password);都有u，使用with,可以不写u，如下：*/with(u){alert(username + "," + password);}</script></body>
</html><!--
java数组：public class Test{public static void main(String[] args){int[] arr = {1,2,3,4,5,6};int[] arr2 = new int[5]; // 等同于：int[] arr2 = {0,0,0,0,0};String[] arr3 = {"a","b","c"};String[] arr4 = new String[3]; // 等同于：String[] arr4 = {null,null,null};}}
-->
20.JavaScript包括三块：ECMAScript、DOM、BOM
ECMAScript：JavaScript的核心语法DOM编程：处理网页内容是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，规范是W3C制定的。文档对象模型 Document Object ModelBOM编程：是对浏览器本身的操作浏览器对象模型 Brower Object Model例如：前进、后退、地址栏、关闭窗口、弹窗等由于浏览器有不同的厂家制造，所有BOM缺少规范，一般只有一个默认的行业规范JavaScript包括三大块：ECMAScript：JS的核心语法（ES规范 / ECMA-262标准）DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程）HTML文档被当做一棵DOM树来看待。一个HTML文档中有head和body，head和body里又有被标上不同id的不同标签。//DOM编程的代表，通过id获取元素对象var domObj = document.getElementById("id"); BOM：Browser Object Model（浏览器对象模型）关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等都是BOM编程。DOM和BOM的区别和联系？BOM的顶级对象是：windowDOM的顶级对象是：document实际上BOM是包括DOM的！(网页是在浏览器上的)<script type="text/javascript">window.onload = function(){//其实document.getElementById("btn")是window.document.getElementById("btn")//省略了window.--->BOM是包括DOM的var btnElt = document.getElementById("btn");alert(btnElt); // object HTMLInputElement}</script><input type="button" id="btn" value="hello" />
21.DOM编程-获取文本框的value
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DOM编程-获取文本框的value</title></head><body><!--点击按钮，获取文本框中填写的东西--><script type="text/javascript">window.onload = function(){var btnElt = document.getElementById("btn");// 获取btn节点btnElt.onclick = function(){//.value属性可以获取文本框的内容var usernameElt = document.getElementById("username");// 获取username节点var username = usernameElt.value;//获取文本框的valuealert(username);//一行代替上面三行//alert(document.getElementById("username").value);//.value="..." 还可以修改它的value//document.getElementById("username").value = "zhangsan";}}</script><input type="text" id="username" /><input type="button" value="获取文本框的value" id="btn"/> <hr><!--案例：有两个文本框，点第一个文本框的按钮可以把第一个文本框的内容设置给第二个文本框--><script type="text/javascript">window.onload = function(){document.getElementById("btn1").onclick = function(){document.getElementById("text2").value = document.getElementById("text1").value;}}</script><input type="text" id="text1"> <!--第一个文本框--><input type="button" value="获取text1的value设置给text2" id="btn1"> <!--第一个按钮--><br><input type="text" id="text2"> <!--第二个文本框--><!--blur事件：失去焦点事件--><!--οnblur="当失去焦点时执行这段代码" 焦点就是闪烁的光标--><!--以下代码中的this代表的是当前input节点对象,this.value就是这个节点对象的value属性。--><!--以下这种也是获取文本框的value--><input type="text" onblur="alert(this.value)" /></body>
</html>22.DOM编程-innerHTML和innerText操作div和span
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DOM编程-innerHTML和innerText操作div和span</title><!--使用id选择器先设置一下div的样式--><style type="text/css">#div1{background-color: aquamarine;width: 300px;height: 300px;border: 1px black solid;position: absolute;top: 100px;left: 100px;}</style></head><body><!--innerText和innerHTML属性有什么区别？相同点：都是设置元素内部的内容。不同点：innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。--><script type="text/javascript">window.onload = function(){var btn = document.getElementById("btn");btn.onclick = function(){// 设置div的内容// 第一步:获取div对象var divElt = document.getElementById("div1");// 第二步:使用innerHTML属性/innerText属性来设置元素内部的内容/*divElt.innerHTML = "写东西/HTML代码--->执行并展示出效果";divElt.innerText = "不管写的是不是HTML代码，都只当作普通文本，不执行并展示出效果";*/// divElt.innerHTML = "fjdkslajfkdlsajkfldsjaklfds";divElt.innerHTML = "<font color='red'>用户名不能为空！</font>";//divElt.innerText = "<font color='red'>用户名不能为空！</font>";}}</script><!--要求：点击按钮，设置div的内容--><input type="button" value="设置div中的内容" id="btn" /><!--<div id="div1">写东西/JS代码</div> 这种方式可以直接设置div的内容<div id="div1">实际上，上面那种写法就是将信息写在这里</div>--><div id="div1"></div></body>
</html>23.DOM编程-关于正则表达式
正则表达式不会写就百度
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DOM编程-关于正则表达式</title></head><body><script type="text/javascript">/*1.什么是正则表达式，有什么用？正则表达式：Regular Expression正则表达式主要用在字符串格式匹配方面。2.正则表达式实际上是一门独立的学科，在Java语言中支持，C语言中也支持，javascript中也支持。大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号等。目前使用最多的是计算机编程领域，用作字符串格式匹配。包括搜索方面等。3.正则表达式，对于我们javascript编程来说，掌握哪些内容呢？第一：常见的正则表达式符号要认识。第二：简单的正则表达式要会写。第三: 他人编写的正则表达式要能看懂。第四：在javascript当中，怎么创建正则表达式对象！（new对象）第五：在javascript当中，正则表达式对象有哪些方法！（调方法）第六：要能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性。4.常见的正则表达式符号？. 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配字符串的开始 $ 匹配字符串的结束//匹配次数的： * 重复零次或更多次 + 重复一次或更多次 ? 重复零次或一次 {n} 重复n次 {n,} 重复n次或更多次 {n,m} 重复n到m次//匹配反义词： \W 匹配任意不是字母，数字，下划线，汉字的字符 \S 匹配任意不是空白符的字符 \D 匹配任意非数字的字符 \B 匹配不是单词开头或结束的位置 [^x] 匹配除了x以外的任意字符 [^aeiou] 匹配除了aeiou这几个字母以外的任意字符 正则表达式当中的小括号()优先级较高。[1-9] 表示1到9的任意1个数字（次数是1次）[A-Za-z0-9] 表示A-Z a-z 0-9中的任意1个字符[A-Za-z0-9-] 表示A-Z、a-z、0-9、- 以上所有字符中的任意1个字符(A-Z是区间，最后一个-是减号)| 表示或者5.简单的正则表达式要会写QQ号的正则表达式：^[1-9][0-9]{4,}$6.他人编写的正则表达式要能看懂？email邮箱地址正则：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$7.怎么创建正则表达式对象，怎么调用正则表达式对象的方法？第一种创建方式：var regExp = /正则表达式/[flags];第二种创建方式:使用内置支持类RegExpvar regExp = new RegExp("正则表达式",["flags"]);关于flags(flags可以有也可以没有)：g：全局匹配i：忽略大小写匹配m：多行搜索匹配（ES规范制定之后才支持m）当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用。正则表达式对象的test()方法？true / false = 正则表达式对象.test(用户填写的字符串);true : 字符串格式匹配成功false: 字符串格式匹配失败*/window.onload = function(){// 给按钮绑定clickdocument.getElementById("btn").onclick = function(){var email = document.getElementById("email").value;var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;var ok = emailRegExp.test(email);if(ok){//合法document.getElementById("emailError").innerText = "邮箱地址合法";}else{// 不合法document.getElementById("emailError").innerText = "邮箱地址不合法";}}// 使文本框获得焦点时后面的span提示信息消失//给文本框绑定focus(获得焦点)document.getElementById("email").onfocus = function(){document.getElementById("emailError").innerText = "";}}</script><!--点击按钮，验证输入的邮箱格式是否正确--><input type="text" id="email" /><!--使用span输出提示邮箱是否合法信息--><span id="emailError" style="color: red; font-size: 12px;"></span><br><input type="button" value="验证邮箱" id="btn" /></body>
</html>
24.DOM编程-去除字符串前后空白的trim函数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>去除字符串的前后空白trim</title></head><body><script type="text/javascript">window.onload = function(){document.getElementById("btn").onclick = function(){// 获取用户名var username = document.getElementById("username").value;// 去除前后空白(这是字符串String的函数)username = username.trim();// 测试alert("--->" + username + "<----");}}// 低版本的IE浏览器不支持字符串的trim()函数,怎么办？// 可以使用prototype属性自己对String类扩展一个全新的trim()函数!String.prototype.trim = function(){/*alert("扩展之后的trim方法"); 自己扩展了这个函数之后,后期使用的trim是自己扩展的函数,不再使用原来的trim函数即可以使用prototype属性重写已经写好的代码/函数。*//*去除当前字符串的前后空白在当前的方法中的this代表的就是当前字符串.使用String类的replace方法：replace(xxx,yyy);--->用yyy替换xxxthis.replace(前空白,"").replace(后空白,"");使用正则表达式来表示前空白和后空白：正则表达式写法：/正则表达式/前空白：/^\s+/后空白：/\s+$/this.replace(/^\s+/,"").replace(/\s+$/,"");只用一次replace:/正则表达式/flagsflags=g 全局匹配/^\s+或\s+$/g*/return this.replace(/^\s+|\s+$/g, "");}</script><!--要求：按按钮时，获取用户名并且去除前后空白--><input type="text" id="username" /><input type="button" value="获取用户名" id="btn" /></body>
</html>25.DOM编程-表单验证
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单验证</title><!--第三步：设置span的样式：标签选择器--><style type="text/css">span {color: red;font-size: 12px;}</style></head><body><!--需求：表单验证（1）用户名不能为空（2）用户名必须在6-14位之间（3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）（4）密码和确认密码一致，邮箱地址合法。（5）统一失去焦点验证（6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。（7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value（8）最终表单中所有项均合法方可提交--><!--该表单验证还不够严谨，有些功能没实现--><script type="text/javascript">//第四步：统一失去焦点验证//第五步：用户名window.onload = function(){// 获取username的span标签var usernameErrorSpan = document.getElementById("usernameError");//第六步var usernameElt = document.getElementById("username");// 给用户名文本框绑定blur事件usernameElt.onblur = function(){// 获取用户名var username = usernameElt.value;// 去除前后空白username = username.trim();// 判断用户名是否为空/*第一种方式：if(username){// 代表username不是空字符串alert("username = " + username);}else{// 代表username是空字符串alert("username是空字符串");}*///第二种方式： if(username.length == 0){}//第三种方式:if(username === ""){// 用户名为空usernameErrorSpan.innerText = "用户名不能为空";}else{// 用户名不为空(第八步)// 继续判断长度[6-14]if(username.length < 6 || username.length > 14){// 用户名长度非法usernameErrorSpan.innerText = "用户名长度必须在[6-14]之间";}else{// 用户名长度合法// 继续判断是否含有特殊符号var regExp = /^[A-Za-z0-9]+$/;var ok = regExp.test(username);if(ok){// 用户名最终合法}else{// 用户名中含有特殊符号usernameErrorSpan.innerText = "用户名只能由数字和字母组成";}}}}/*第七步：1.文本框输入的value错误,删除valuie2.光标回到文本框，span错误提示信息消失*/// 给username这个文本框绑定获得焦点事件usernameElt.onfocus = function(){// 清空非法的valueif(usernameErrorSpan.innerText != ""){usernameElt.value = ""; }// 清空spanusernameErrorSpan.innerText = "";}// 获取密码错误提示的span标签(第十步)var pwdErrorSpan = document.getElementById("pwdError");//第九步:密码与确认密码// 获取确认密码框对象var userpwd2Elt = document.getElementById("userpwd2");// 绑定blur事件userpwd2Elt.onblur = function(){// 获取密码和确认密码var userpwdElt = document.getElementById("userpwd");var userpwd = userpwdElt.value;var userpwd2 = userpwd2Elt.value;if(userpwd != userpwd2){// 密码不一致(第十步)pwdErrorSpan.innerText = "密码不一致";}else{// 密码一致}}//第十一步(同第七步)// 绑定focus事件userpwd2Elt.onfocus = function(){if(pwdErrorSpan.innerText != ""){userpwd2Elt.value = "";}pwdErrorSpan.innerText = "";}// 获取email的span(第十三步)var emailSpan = document.getElementById("emailError");//第十二步:// 给email绑定blur事件var emailElt = document.getElementById("email");emailElt.onblur = function(){// 获取emailvar email = emailElt.value;//email能不能为空/前后空白就不写了// 编写email的正则var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;var ok = emailRegExp.test(email);if(ok){// 合法}else{// 不合法(第十三步)emailSpan.innerText = "邮箱地址不合法";}}//第十四步:与第七步,第十一步相同// 给emailElt绑定focusemailElt.onfocus = function(){if(emailSpan.innerText != ""){emailElt.value = "";}emailSpan.innerText = "";}//第十五步:最终表单中所有项均合法方可提交//第十五步2：给提交按钮绑定鼠标单击事件var submitBtnElt = document.getElementById("submitBtn");submitBtn.onclick = function(){/*第十五步5:下面的if(表单所有项目都是合法的){}表单所有项目都是合法的 怎么写？三个span错误提示都没有但是，最开始什么都不写，三个span错误提示也都没有解决办法：先点一下文本框，即focus；在让光标消失，即blur；这样就会出现span错误提示信息：不能为空有相应的方法代替上述手动操作：.focus().blur()*/// 触发username的blur userpwd2的blur email的blur// 不需要人工操作,使用纯JS代码触发事件.usernameElt.focus();usernameElt.blur();userpwd2Elt.focus();userpwd2Elt.blur();emailElt.focus();emailElt.blur();// 当所有表单项都是合法的时候,提交表单(第十五步3)if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){//第十五步4，提交表单，使用form对象的submit方法，给form标签添加id// 获取表单对象var userFormElt = document.getElementById("userForm");// 可以在这里设置action,也可以不在这里.userFormElt.action = "http://localhost:8080/jd/save";// 提交表单userFormElt.submit();}}}</script><!--第一步：首先画一个表单：这个表单提交应该使用post，这里为了检测，所以使用get--><!--第二步：使用span在框框后写错误提示信息，不使用div，因为div独占一行--><!--第十五步4修改了这个form<form action= "http://localhost:8080/jd/save" method="get">--><form id="userForm" method="get">用户名<input type="text" name="username" id="username"/><span id="usernameError"></span><br><br>密码<input type="password" name="userpwd" id="userpwd"/><br>确认密码<input type="password" id="userpwd2" /><!--不需要提交，name不需要写--><span id="pwdError"></span><br><br>邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br><br><!--第十五步1：先把具有提交功能的按钮submit改为button但是这样就无法提交了，那么就给这个按钮加id和安装鼠标单击事件<input type="submit" value="注册" />--><input type="button" value="注册" id="submitBtn"/> <input type="reset" value="重置" /></form></body>
</html>26.DOM编程-复选框的全选和取消全选
查看W3School离线手册.chm
JavaScript--->HTML DOM--->DOM参考--->HTML对象---> <input> checkbox
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>复选框的全选和取消全选</title></head><body><script type="text/javascript">/*window.onload = function(){var firstChk = document.getElementById("firstChk");firstChk.onclick = function(){获取第一个复选框的选中状态(复选框对象是checkbox对象)checkbox对象有一个属性：checkedcheckbox.checked = true; 复选框被选中checkbox.checked = false; 复选框未被选中alert(firstChk.checked);//(要获取剩下三个复选框)根据name获取所有元素//name相同,返回的是那3个name相同的元素,此时返回的是数组/元素var aihaos = document.getElementsByName("aihao");if(firstChk.checked == true){//全选for(var i= 0; i <aihaos.length; i++){aihaos[i].checked = true;}}else{//取消全选for(var i= 0; i <aihaos.length; i++){aihaos[i].checked = false;}}}}*///简化上述代码window.onload = function(){var aihaos = document.getElementsByName("aihao");//获取除第一个复选框以外的所有复选框var firstChk = document.getElementById("firstChk");//获取第一个复选框firstChk.onclick = function(){//点击第一个复选框时执行以下函数for(var i= 0; i <aihaos.length; i++){//所有复选框都被选中aihaos[i].checked = firstChk.checked;}}//另一个要求:当下面三个复选框都选上时,第一个复选框自动选上//即：总数量和选中的数量相等的时候,第一个复选框选中.var all = aihaos.length;//获得所有的复选框数量(除第一个复选框)// 对上面获得的aihaos数组进行遍历for(var i = 0; i < aihaos.length; i++){//第一个循环是给每一个复选框都注册click事件和绑定回调函数//即<input type="checkbox" name="aihao" value="smoke" οnclick="alert(回调函数)" />抽烟//然后当某个复选框被选中时执行回调函数aihaos[i].onclick = function(){var checkedCount = 0;//记录被选中的复选框数量//第二个循环是判断有几个复选框被选中for(var i = 0; i < aihaos.length; i++){if(aihaos[i].checked == true){checkedCount++;}}/*if(all == checkedCount){firstChk.checked = true;}else{firstChk.checked = false;}简化这个代码：*/firstChk.checked = (all == checkedCount);}}}</script><!--要求：点击第一个checkbox，下面三个checkbox全选；不点击，取消全选--><input type="checkbox" id="firstChk"/><br><input type="checkbox" name="aihao" value="smoke" />抽烟<br><input type="checkbox" name="aihao" value="drink" />喝酒<br><input type="checkbox" name="aihao" value="tt" />烫头</body>
</html>27.DOM编程-获取下拉列表选中项的value
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>获取下拉列表选中项的value</title></head><body><!--要求：假如选择河北省，得到它的value 001使用change事件(下拉列表选中项改变，或文本框内容改变)，加入onchange事件句柄第一种写法：<select οnchange="alert(this.value)"><option value="">--请选择省份--</option><option value="001">河北省</option><option value="002">河南省</option><option value="003">山东省</option><option value="004">山西省</option></select>--><!--第二种写法--><script type="text/javascript">window.onload = function(){var provinceListElt = document.getElementById("provinceList");provinceListElt.onchange = function(){// 获取选中项的valuealert(provinceListElt.value);}}</script><select id="provinceList"><option value="">--请选择省份--</option><option value="001">河北省</option><option value="002">河南省</option><option value="003">山东省</option><option value="004">山西省</option></select></body>
</html><!--
实际上的功能是：选择地区时，根据下拉列表，先选择省，再选择省里的市...(这个功能目前还实现不了)省份和市区的关系是：1对多省份表t_provinceid pcode pname----------------------------1 001 河北省2 002 河南省3 003 山东省4 004 山西省市区表t_cityid ccode cname pcode(fk)----------------------------------------------1 101 石家庄 0012 102 保定 0013 103 邢台 0014 104 承德 0015 105 张家口 0016 106 邯郸 0017 107 衡水 001前端用户选择的假设是河北省，那么必须获取到河北省的pcode，获取到001然后将001发送提交给服务器，服务器底层执行一条SQL语句：select * from t_city where pcode = '001';返回一个List集合，List<City> cityList;cityList响应浏览器，浏览器在解析cityList集合转换成一个新的下拉列表。
-->
28.1.DOM编程-显示网页时钟和JS内置对象(内置支持类)Date
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>显示网页时钟</title></head><body><script type="text/javascript">//首先学习JS内置的支持类：Date类，用来获取时间/日期////获取系统当前时间var nowTime = new Date();//输出系统当前时间//document.write(nowTime);Sat Feb 19 2022 15:44:03 GMT+0800 (中国标准时间)//上一种输出格式看不懂,换一种方式,转换成具有本地语言环境的日期格式.nowTime = nowTime.toLocaleString();document.write(nowTime);// 2022/2/19 15:45:15//javascript里面换行不能直接写<br>document.write("<br>");//若以上格式还是不满意.可以获取年月日,自己设定格式var t = new Date();//如果使用getYear(),那么2022年只会出现22年var year = t.getFullYear(); // 返回年信息,以全格式返回.var month = t.getMonth(); // 月份是:0-11// var dayOfWeek = t.getDay(); 获取的一周的第几天(0-6)var day = t.getDate(); // 获取日信息.document.write(year + "年" + (month+1) + "月" + day + "日");document.write("<br>");/* 重点:怎么获取毫秒数？(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)var times = t.getTime();document.write(times); 一般会使用毫秒数当做时间戳. (timestamp)*/document.write(new Date().getTime());</script><script type="text/javascript">function displayTime(){var time = new Date();var strTime = time.toLocaleString();document.getElementById("timeDiv").innerHTML = strTime;}/*window.setInterval(code,millisec) 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。code:要调用的函数或要执行的代码串。millisec:周期性执行或调用 code 之间的时间间隔，以毫秒计。返回值：一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。setInterval() 方法会不停地调用函数，直到 window.clearInterval() 被调用或窗口被关闭*/ // 每隔1秒调用displayTime()函数function start(){// 从这行代码执行结束开始,则会不间断的,每隔1000毫秒调用一次displayTime()函数.v = window.setInterval("displayTime()", 1000); }function stop(){window.clearInterval(v);}</script><br><input type="button" value="显示系统时间" onclick="start();"/><input type="button" value="系统时间停止" onclick="stop();" /><!--一点击按钮，就把时间显示在div上--><div id="timeDiv"></div></body>
</html>28.2.内置支持类Array
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>内置支持类Array</title></head><body><script type="text/javascript">/*// 创建长度为0的数组var arr = [];alert(arr.length); 0// 数据类型随意var arr2 = [1,2,3,false,"abc",3.14];alert(arr2.length); 6// 下标会越界吗arr2[7] = "test"; // 不会，自动扩容.document.write("<br>");// 遍历for(var i = 0; i < arr2.length; i++){document.write(arr2[i] + "<br>");}// 另一种创建数组的对象的方式var a = new Array();alert(a.length); 0var a2 = new Array(3); // 3表示长度.alert(a2.length); 3var a3 = new Array(3,2); //3,2表示数组中的元素 不是长度了alert(a3.length); // 2*/var a = [1,2,3,9];var str = a.join("-");alert(str); // "1-2-3-9"// 在数组的末尾添加一个元素(数组长度+1)a.push(10);alert(a.join("-"));//1-2-3-9-10// 将数组末尾的元素弹出(数组长度-1)var endElt = a.pop();alert(endElt); //10alert(a.join("-")); //1-2-3-9// 注意:JS中的数组可以自动模拟栈数据结构:后进先出,先进后出原则.// push压栈// pop弹栈// 反转数组.a.reverse();alert(a.join("-"));//9-3-2-1</script></body>
</html>29.学会使用浏览器的F12
30.BOM编程-window对象的open和close方法
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>BOM编程-open和close</title></head><body><script type="text/javascript">/*1、BOM编程中，window对象是顶级对象，代表浏览器窗口。2、window有open和close方法，可以开启窗口和关闭窗口。window.open()window.close()*/</script><input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');" /><input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com', '_self');" /><input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com', '_blank');" /><input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com', '_parent');" /><input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com', '_top');" /><input type="button" value="打开表单验证" onclick="window.open('002-BOM编程-open和close.html')"/></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>BOM编程-open和close</title></head><body><!--与上面程序的最后一行代码交互--><input type="button" value="关闭当前窗口" onclick="window.close();" /></body>
</html>31.BOM编程-弹出消息框和确认框
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>弹出消息框和确认框</title></head><body><!--window.alert() 弹出消息框window.confirm() 弹出确认框--><script type="text/javascript">function del(){/*确认框var ok = window.confirm("亲，确认删除数据吗？");//alert(ok);if(ok){alert("delete data ....");}*/if(window.confirm("亲，确认删除数据吗？")){alert("delete data ....");}}</script><!--删除操作的时候都要提前先得到用户的确认。--><input type="button" value="弹出确认框(删除)" onclick="del();" /><input type="button" value="弹出消息框" onclick="window.alert('消息框!')" /></body>
</html>32.BOM编程-将当前窗口设置为顶级窗口
004-当前窗口设置为顶级窗口.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>将当前窗口设置为顶级窗口</title></head><body><script type="text/javascript">/*如果当前这个窗口不是顶级窗口，将当前窗口设置为顶级窗口004为顶级窗口，004中套了一个005页面，将005设置为顶层窗口*/</script><!--如何让004页面中套一个005页面？使用內联框架iframe--><iframe src="005-child-window.html" width="500px" height="500px"></iframe></body>
</html>005-child-window.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>child-window</title></head><body>005页面<script type="text/javascript">//如果当前窗户不是顶级窗口,将当前窗口设置为顶级窗口//通过按钮，将005页面设置为顶级窗口function setTop(){//window代表当前窗口,当前浏览器005页面//window.top就是当前窗口的顶级窗口 004窗口//window.self表示当前自己这个窗口 005窗口if(window.top != window.self){//将顶级窗口的location地址设置为005地址window.top.location = window.self.location;}}</script><input type="button" value="如果当前窗户不是顶级窗口,将当前窗口设置为顶级窗口" onclick="setTop()" /></body>
</html>
33.BOM编程-window的history对象(类)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>006-history对象(类)</title></head><body><!--演示浏览器上的前进后退按钮--><a href="007.html">007页面</a><!--前进，从006页面，到007页面；先点击上方链接到达007页面，然后点击007页面的后退按钮回到006页面，再按前进按钮就到了007页面--><input type="button" value="前进" onclick="window.history.go(1)" /></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>007-history对象(类)</title></head><body>007 Page!<!--演示浏览器上的后退按钮，从007页面退到006页面两种方法：window.history.back()window.history.go(-1)--><!--运行006，点击007链接，到达007页面，点击后退按钮，返回006页面--><input type="button" value="后退" onclick="window.history.back()"/><input type="button" value="后退" onclick="window.history.go(-1)"/></body>
</html>
34.BOM编程-设置浏览器地址栏上的URL
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>设置浏览器地址栏上的URL</title></head><body><script type="text/javascript">function goBaidu(){//首先获取地址栏对象var locationObj = window.location; //设置地址栏的URLlocationObj.href = "http://www.baidu.com";//上面两步连在一起写//window.location.href = "http://www.baidu.com";//href可以省略不写//window.location = "http://www.baidu.com";//这样写也行//document.location.href = "http://www.baidu.com";//href也可以省略//document.location = "http://www.baidu.com";}</script><input type="button" value="百度" onclick="goBaidu()" /></body>
</html><!--总结，有哪些方法可以通过浏览器往服务器发请求？1、表单form的提交（可以是get，也可以是post）2、超链接(get请求)<a href="http://localhost:8080/oa/save?username=zhangsan&password=123">用户只能点击这个超链接</a>3、document.location.href=url;4、window.location.href=url;5、window.open("url")6、直接在浏览器地址栏上输入URL，然后回车(get请求)（这个也可以手动输入，提交数据也可以成为动态的。）以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。
-->
35.JSON-介绍
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>001</title></head><body><script type="text/javascript">/*1、什么是JSON，有什么用？JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）（比如： C语言与Java之间进行数据交换）2、JSON是一种标准的轻量级的数据交换格式。特点是：体积小，易解析。3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）4、JSON的语法格式：var jsonObj = {"属性名" : 属性值,"属性名" : 属性值,"属性名" : 属性值,"属性名" : 属性值,....};*/// 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)var studentObj = {"sno" : "110","sname" : "张三","sex" : "男"};// 访问JSON对象的属性alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);// 之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.Student = function(sno,sname,sex){this.sno = sno;this.sname = sname;this.sex = sex;}var stu = new Student("111","李四","男");alert(stu.sno + "," + stu.sname + "," + stu.sex);// JSON数组var students = [//三个JSON对象{"sno":"110","sname":"张三","sex":"男"},{"sno":"120","sname":"李四","sex":"男"},{"sno":"130","sname":"王五","sex":"男"}];// 遍历(JSON解析很简单，就是遍历)for(var i = 0; i < students.length; i++){var stuObj = students[i];alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);}</script></body>
</html>XML介绍：students.xml
<?xml version="1.0" encoding="GBK"?><!--HTML和XML有一个父亲：SGML（标准通用的标记语言。）HTML主要做页面展示：所以语法松散。很随意。XML主要做数据存储和数据描述的：所以语法相当严格。
-->
<students><student sno="110"><sname>张三</sname><sex>男</sex></student><student sno="120"><sname>李四</sname><sex>男</sex></student><student sno="130"><sname>王五</sname><sex>男</sex></student>
</students>
36.JSON-复杂一些的JSON对象
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>复杂一些的JSON对象</title></head><body><script type="text/javascript">var user = {"usercode" : 110,"username" : "张三","sex" : true,"address" : {//家庭住址address可以是一个JSON对象"city" : "北京","street" : "大兴区","zipcode" : "12212121",},"aihao" : ["smoke","drink","tt"] //爱好是一个数组};// 访问人名以及居住的城市alert(user.username + "居住在" + user.address.city);/*请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。*/var jsonData = {"total" : 3,"students" : [{"name":"zhangsan","birth":"1980-10-20"},{"name":"lisi","birth":"1981-10-20"},{"name":"wangwu","birth":"1982-10-20"}]};</script></body>
</html>37.JSON-eval函数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>eval函数</title></head><body><script type="text/javascript">//window对象的eval函数的作用是：将字符串当做一段JS代码解释并执行。window.eval("var i = 100;");alert("i = " + i); // i = 100/*java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.可以使用eval函数,将json格式的字符串转换成json对象.*/var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"window.eval("var jsonObj = " + fromJava);// 访问json对象alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据.//JSON配合eval函数,才能真正实现后台和前端的数据交换/*面试题：在JS当中：[]和{}有什么区别？[] 是数组。{} 是JSON。java中的数组：int[] arr = {1,2,3,4,5};JS中的数组：var arr = [1,2,3,4,5];JSON：var jsonObj = {"email" : "zhangsan@123.com","age":25};*/var json = {"username" : "zhangsan"};// JS中访问json对象的属性(第一种方式)alert(json.username);// JS中访问json对象的属性(第二种方式)alert(json["username"]);</script><!--JSON是一种行业内的数据交换格式标准。JSON在JS中以JS对象的形式存在。--></body>
</html>38.JSON-DOM-拼接html的方式，设置table的tbody
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>设置table的tbody</title></head><body><script type="text/javascript">// 有这些json数据var data = {"total" : 4,"emps" : [//JSON数组,里面使JSON对象{"empno":7369,"ename":"SMITH","sal":800.0},{"empno":7361,"ename":"SMITH2","sal":1800.0},{"empno":7360,"ename":"SMITH3","sal":2800.0},{"empno":7362,"ename":"SMITH4","sal":3800.0}]};// 希望把数据展示到table当中.window.onload = function(){var displayBtnElt = document.getElementById("displayBtn");displayBtnElt.onclick = function(){var emps = data.emps;var html = "";for(var i = 0; i < emps.length; i++){var emp = emps[i];html += "<tr>";html += "<td>"+emp.empno+"</td>";html += "<td>"+emp.ename+"</td>";html += "<td>"+emp.sal+"</td>";html += "</tr>";}document.getElementById("emptbody").innerHTML = html;document.getElementById("count").innerHTML = data.total;}}</script><!--以后开发就是：通过底层java语言jdbc把数据库里面的数据查出来，查出来之后发给浏览器，浏览器将json格式的字符串转换成json对象，把json对象的数据放在表格里这个程序就是这个意思--><!--按完这个按钮之后，将上面JSON的数据放到tbody中--><input type="button" value="显示员工信息列表" id="displayBtn" /><h2>员工信息列表</h2><hr><!--先把table画出来--><table border="1px" width="50%"><tr><th>员工编号</th><th>员工名字</th><th>员工薪资</th></tr><tbody id="emptbody"><!-- <tr><td>7369</td><td>SMITH</td><td>800</td></tr><tr><td>7369</td><td>SMITH</td><td>800</td></tr><tr><td>7369</td><td>SMITH</td><td>800</td></tr>--></tbody></table>总共<span id="count">0</span>条数</body>
</html>注：该文章部分转载自动力节点
JavaScript学习笔记-B站动力节点相关推荐
- MySQL学习笔记-B站动力节点
文章目录 MySQL Day1 1.概述 2.sql.DB.DBMS分别是什么?他们之间的关系? 3.表 4.sql语句分类 5.导入数据 6.sql脚本 7.删除数据库命令 8.查看表结构 9.查看 ...
- html学习笔记-B站动力节点
文章目录 1.系统结构介绍 2.软件环境准备 3.什么是HTML?怎么开发HTML?怎么运行HTML? 4.HTML是谁制定的? 5.我的第一个HTML 6.HTML的基本标签 7.HTML的实体符号 ...
- JDBC学习笔记-B站动力节点
文章目录 1.JDBC是什么? 2.JDBC的本质是什么? 3.JDBC开发前的准备工作,先从官网下载对应的驱动jar包,然后将其配置到环境变量classpath当中. 4.JDBC编程六步(需要背会 ...
- Dubbo教程学习笔记——B站动力节点
文章目录 001-前言 002-初始Dubbo 003-Dubbo框架 3.1 概述 3.2 dubbo支持的协议 3.3 dubbo的使用--直连方式 (1)服务的提供者provider (2)服务 ...
- （B站动力节点老杜MySQL教程）MySQL课堂笔记-day01.txt
文章目录 文件来源/资料下载: MySQL课堂笔记-day01.txt 1.sql.DB.DBMS分别是什么,他们之间的关系? 2.什么是表? 3.学习MySQL主要还是学习通用的SQL语句,那么SQ ...
- JavaScript学习笔记：创建、添加与删除节点
JavaScript学习笔记:创建.添加与删除节点 文章目录 JavaScript学习笔记:创建.添加与删除节点 一.DOM对象节点类型 二.创建节点 1.创建元素节点 2.创建文本节点 3.创建属性 ...
- （B站动力节点老杜MySQL教程）MySQL课堂笔记-day03.txt
文章目录 文件来源/资料下载: MySQL课堂笔记-day03.txt 1.约束 1.1.唯一性约束(unique) 1.2.主键约束 1.3.外键约束 2.存储引擎?(整个内容属于了解内容) 2.1 ...
- （B站动力节点老杜MySQL教程）MySQL课堂笔记-day02.txt
文章目录 文件来源/资料下载: MySQL课堂笔记-day02.txt 1.关于查询结果集的去重? 2.连接查询 2.1.什么是连接查询? 2.2.连接查询的分类? 2.3.在表的连接查询方面有一种现 ...
- 数据库 MySQL （学习全过程）（B站动力节点杜老师）（DAY 1）
数据库 MySQL (B站动力节点杜老师) Day one 删库跑路: 1.运行安装包 点击remove 2. 删除 program file 里的 mysql 3. 和 program date里的 ...
最新文章
- android support v4、v7、v13
- Arm收购进展、元宇宙、GPU涨价……听听黄仁勋怎么说
- Anaconda安装包报错——UnavailableInvalidChannel: The channel is not accessible or is invalid
- ListView之SimpleAdapter的使用
- MyBatis中PersistenceException:Error querying database. Cause: org.apache.ibatis.type.TypeException:
- 一道网易游戏笔试题的不同解法
- 深入了解Token认证的来龙去脉
- Ubuntu18.04更换为国内源
- bytevalue_Java Short类byteValue（）方法及示例
- python实现三级菜单
- 存储函数与存储过程的区别
- 电子基础知识：常用电子元器件和基本工具
- 行为树 中断的理解
- 高中英语语法(005)-五大句型(下)
- Windows环境下搭建Redis集群
- 探究CSS3中的transition和transform属性方法使用
- 地理信息系统（GIS） 知识详解
- Android VideoView播放avi格式视频有声音无图像问题
- unity ，color组件
- Android移动开发问题 AAPT: error: resource xml/11 (aka com.example.myapplication:xml/11) not found.