JavaWeb - JavaScript

1.JavaScript入门知识

　　*概念：一门客户端脚本语言

　　　　*运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎

　　　　*脚本语言：不需要编译，直接就可以被浏览器解析执行了

　　*功能：

　　　　*可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

　　*JavaScript发展史：

　　　　1.1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C - -，后来更名为ScriptEase

　　　　2.1995年，Netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript

　　　　3.1996年，微软抄袭JavaScript开发出JScript语言

　　　　4.1997年，ECMA（欧洲计算机制造协会），ECMAScript，就是所有客户端脚本语言的标准

　　　　*JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）

2.ECMAScript：客户端脚本语言的标准

　　1.基本语法：

　　　　1.与html结合的方式

　　　　　　1.内部JS

　　　　　　　　*定义<script>标签，标签体内容就是js代码

　　　　　　2.外部JS

　　　　　　　　*定义<script>标签，通过src属性引入外部的js文件

　　　　2.注释

　　　　　　1.单行注释：//注释内容

　　　　　　2.多行注释/注释内容/

　　　　3.数据类型

　　　　　　1.原始数据类型（基本数据类型）：

　　　　　　　　1.number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）

　　　　　　　　2.string：字符串

　　　　　　　　3.boolean：true或false

　　　　　　　　4.null：一个对象为空的占位符

　　　　　　　　5.undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

　　　　　　2.引用数据类型：对象

　　　　4.变量

　　　　　　*变量：一小块存储数据的内存空间

　　　　　　*Java语言是强类型语言，而JavaScript是弱类型语言

　　　　　　*语法：

　　　　　　　　* var 变量名 = 初始化值；

　　　　5.运算符

　　　　　　1.一元运算符：只有一个运算数的运算符

　　　　　　　　++ - - ， + （正号）

　　　　　　　　注意：在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

　　　　　　　　　　*string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）

　　　　　　　　　　*boolean转number：true为1，false为0

　　　　　　2.算术运算符

　　　　　　　　+ - * / % 。。。

　　　　　　3.赋值运算符

　　　　　　　　= += -= 。。。

　　　　　　4.比较运算符

　　　　　　　　> < >= <= == ===（全等于）

　　　　　　　　*类型相同：直接比较

　　　　　　　　　　*字符串：按照字典顺序比较，按位逐一比较，直到得出大小为止

　　　　　　　　*类型不同：先进行类型转换，再比较

　　　　　　　　　　*===，全等于，在比较之前，先判断类型，如果类型不一样，直接返回false

　　　　　　5.逻辑运算符

　　　　　　　　&& | | ！

　　　　　　　　*对于！非：其他类型转boolean，之后进行if判断时，可以简化书写

　　　　　　　　　　1.number：0或NaN为假，其他为真

　　　　　　　　　　2.string：除了空字符串（" "），其他都是true

　　　　　　　　　　3.null&undefined：都是false

　　　　　　　　　　4.对象：所有对象都是true

　　　　　　6.三元运算符

　　　　　　　　？：表达式如： a > b ? 1 : 3 ; 如果a大于b则取1，否则就是3

　　　　6.流程控制语句

　　　　　　1.if...else...

　　　　　　2.switch

　　　　　　　　*在java中，switch语句可以接受的数据类型：

　　　　　　　　　　*switch（变量）：byte int short char，枚举（1.5），String（1.7）

　　　　　　　　　　　　case 值：

　　　　　　　　*在JS中，switch语句可以接收任意的原始数据类型

　　　　　　3.while

　　　　　　4.do...while

　　　　　　5.for

　　　　7.JS特殊语法

　　　　　　*如果一行只有一条语句，可以省略分号（不建议）

　　　　　　*变量的定义使用var关键字，也可以不使用

　　　　　　　　*用var定义的变量是局部变量

　　　　　　　　*不用var定义的变量是全局变量

　　2.基本对象

　　　　1.Function：函数对象

　　　　　　1.创建

　　　　　　　　1. var fun = new Function（形参列表，方法体）；

　　　　　　　　2. function 方法名称（形参列表）{ 方法体 }

　　　　　　　　3. var 方法名称 = function（形参列表）{ 方法体 }

　　　　　　2.方法

　　　　　　3.属性

　　　　　　　　length：代表形参的个数

　　　　　　4.特点

　　　　　　　　1.方法定义时，形参的类型不用写，返回值类型也可以不写

　　　　　　　　2.方法是一个对象，如果定义名称相同的方法，会覆盖

　　　　　　　　3.在JS中，方法的调用只与方法的名称有关，和参数列表无关

　　　　　　　　4.在方法声明中，有一个隐藏的内置对象（数组），arguments，封装所有的实际参数

　　　　　　5.调用

　　　　　　　　方法名称（实参列表）；

<script>

        function fun1(a,b) {
            alert(a);
        }
        fun1(3);
        
        var fun2 = function (a,b) {
            alert(b);
        }
        document.write(fun1.length);

        //求任意个数的和
        function add() {
            var sum = 0;
            for(var i = 0; i < arguments.length; i++){
                sum += arguments[i];
            }
            return sum;
        }

    </script>

　　　　2.Array：数组对象

　　　　　　1.创建

　　　　　　　　1. var arr = new Array（元素列表）；

　　　　　　　　2. var arr = new Array（默认长度）；

　　　　　　　　3. var arr = 【元素列表】；

　　　　　　2.方法

　　　　　　　　join（参数）：将数组中的元素按照指定的分隔符拼接为字符串

　　　　　　　　push（）：向数组的尾部添加一个或更多元素，并返回新的长度

　　　　　　3.属性

　　　　　　4.特点

　　　　　　　 1.JS中，数组元素的类型是可变的

　　　　　　　　2.JS中，数组的长度是可变的

　　　　3.Date：日期对象

　　　　　　1.创建 var date = new Date（）；

　　　　　　2.方法：

　　　　　　　　toLocalString（）：返回当前date对象对应的本地字符串格式

　　　　　　　　getTime（）：获取1970年1月1日零点至今的毫秒值　　　

　　　　4.Math：数学对象

　　　　　　1.创建：

　　　　　　　　*特点：Math对象不用创建，直接使用。Math.方法名（）；

　　　　　　2.方法：

　　　　　　　　random（）：返回0-1之间的随机数。含0不含1

　　　　　　　　ceil（x）：对数进行向上取整

　　　　　　　　floor（x）：对数进行向下取整

　　　　　　　　round（x）：进行四舍五入

　　　　　　3.属性：

　　　　　　　　PI：圆周率

  <script>
        //取1-100之间的整数
        var number = Math.random();
        number = number * 100;
        var num = Math.floor(number);
        num += 1;
        document.write(num);
    </script>

　　　　5.RegExp：正则表达式对象

　　　　　　1.正则表达式：定义字符串的组成规则

　　　　　　　　1.单个字符：【】

　　　　　　　　　　如：【a】【ab】【a - z】【a - z A - Z 0 - 9_】

　　　　　　　　　　*特殊符号代表特殊含义的单个字符：

　　　　　　　　　　　　\d : 单个数字字符【0-9】

　　　　　　　　　　　　\w : 单个单词字符【a - z A - Z 0 - 9_】

　　　　　　　　2.量词符号：

　　　　　　　　　　? ：表示出现0次到1次

　　　　　　　　　　* ：表示0到无穷次贪婪匹配

　　　　　　　　　　+ ：出现1到无穷次贪婪匹配

　　　　　　　　　　{m,n} : 表示大于等于m，小于等于n

　　　　　　　　　　　　* m如果缺省： {，n}：最多n次

　　　　　　　　　　　　* n如果缺省：{m，}：最少m次

　　　　　　　　3.开始结束符号

　　　　　　　　　　* ^ ：开始

　　　　　　　　　　* $ ：结束

　　　　　　2.正则对象

　　　　　　　　1.创建

　　　　　　　　　　1. var reg = new RegExp（"正则表达式"）；

　　　　　　　　　　　　2. var reg = /正则表达式/；

　　　　　　　　2.方法

　　　　　　　　　　test（参数）：验证指定的字符串是否符合正则定义的规范　　　　　　　　　　

    <script>
        var reg = new RegExp("\\w{6,12}");
        var reg2 = /\w{6,12}/;
        var username = "zhangsan";
        var flag = reg.test(username);
        // document.write(flag);
        alert(flag);
    </script>

　　　　6.Global：全局对象

　　　　　　1.特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用

　　　　　　2.方法

　　　　　　　　1.encodeURI（）：url编码

　　　　　　　　2.decodeURI（）：url解码

　　　　　　　　3.encodeURIComponent（）：url编码，编码的字符更多

　　　　　　　　4.decodeURIComponent（）：url解码

　　　　　　　　5.parseInt（）：将字符串转为数字

　　　　　　　　　　*逐一判断每一个字符是否是数字，直到不是数字为止，将前面数字部分转为number

　　　　　　　　6.isNaN（）：判断一个值是否是NaN

　　　　　　　　　　*NaN六亲不认，连自己都不认。NaN参与的==比较全部为false

　　　　　　　　7.eval（）：将JavaScript字符串，并把它做为脚本代码来执行

　　　　　　3.URL编码 GBK：一个字符两个字节 UTF-8：一个字符三个字节一个字节8个二进制位

2.DOM简单学习

　　*功能：控制html文档的内容

　　*代码：获取页面标签（元素）对象 Element

　　　　* document.getElemetnById（"id值"）：通过元素的id获取元素对象

　　*操作Element对象：

　　　　1.修改其属性值：

　　　　　　1.明确获取的对象是哪一个？

　　　　　　2.查看API文档，找其中哪些属性可以设置

　　　　2.修改标签体内容

　　　　　　*属性：innerHTML，修改便签内的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部JS
    外部JS-->

</head>
<body>
    <img src="../HTMLandCSS/img/logo.jpg" id="p1">
    <h1 id="title">悔创阿里杰克马</h1>
    <script>
        var e1 = document.getElementById("p1");
        var title = document.getElementById("title");
        alert("我要换内容了");
        title.innerHTML = "还是京东好";
    </script>
</body>
</html>

4.事件简单学习

　　*功能：某些组件被执行了某些操作后，触发了某些代码的执行

　　*如何绑定事件

　　　　1.直接在html标签上，指定事件的属性（操作），属性值就是js代码

　　　　　　1.事件：onclick - - - 单击事件 <img src="../HTMLandCSS/img/logo.jpg" id="p1" onclick="f1();">

　　　　2.通过js获取元素对象，指定事件属性，设置一个函数

案例：开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <img src="img/off.gif" id="p1">
    <script>

        //1.获取图片对象
        var p1 = document.getElementById("p1");
        var flag = false; //代表灯是灭的
        function f1() {
            if(flag){ //如果灯开着就灭掉
                p1.src = "img/off.gif";
                flag = false;
            }else {
                p1.src = "img/on.gif";
                flag = true;
            }
                }
        p1.onclick = f1;

    </script>
</body>
</html>

5.BOM

　　1.概念：Browser Object Model 浏览器对象模型

　　　　*将浏览器的各个组成部分封装成对象

　　2.组成：

　　　　1.window：窗口对象

　　　　2.Navigator：浏览器对象

　　　　3.Screen：显示器屏幕对象

　　　　4.History：历史记录对象

　　　　5.Location：地址栏对象

　　3.window对象

　　　　1.创建

　　　　2.方法

　　　　　　1.与弹出框有关的方法：

　　　　　　　　alert（）显示带有一段消息和一个确认按钮的警告框

　　　　　　　　confirm（）显示带有一段消息以及确认按钮和取消按钮的对话框

　　　　　　　　　　*如果用户点击确定按钮，则方法返回true，如果点击取消按钮，则方法返回false

　　　　　　　　prompt（）显示可提示用户输入的对话框

　　　　　　　　　　*返回值，获取用户输入的值

　　　　　　2.与打开关闭有关的方法

　　　　　　　　open（）打开一个新的浏览器窗口

　　　　　　　　　　*返回一个新的window对象

　　　　　　　　close（）关闭浏览器窗口

　　　　　　　　　　*谁调用我，我关谁

<body>
    <input type="button" value="前往网页" id="tag_id1">
    <input type="button" value="关闭网页" id="tag_id2">
    <script>
        var tag1 = document.getElementById("tag_id1");
        var tag2 = document.getElementById("tag_id2");
        var obj;
        tag1.onclick = function () {
            obj = open("https://www.baidu.com");
        };
        tag2.onclick = function () {
            obj.close();
        }


    </script>
</body>

　　　　　　3.与定时器有关的方法

　　　　　　　　setTimeout（）在指定的毫秒数后调用函数或计算表达式一次性

　　　　　　　　　　*参数：

　　　　　　　　　　　　1.js代码或者方法　　函数对象

　　　　　　　　　　　　2.毫秒值

　　　　　　　　　　*返回值：唯一标识，用于取消定时器

　　　　　　　　clearTimeout（）取消由setTimeout（）方法设置的Timeout

　　　　　　　　setInterval（）按照指定的周期（以毫秒计）来调用函数或计算表达式循环

　　　　　　　 clearInterval（）取消由setInterval（）方法设置的Timeout

        var id = setInterval("alert('boom')",3000);
        clearInterval(id);

轮播图案例：

<body>

    <img src="../img/off.gif" id="pp">

    <script>
        var pid = document.getElementById("pp");
        var num = 1;
        function switchPicture() {
            num ++;
            if(num % 2==0){
                pid.src = "../img/off.gif";
            }else if(num % 2 == 1){
                pid.src = "../img/on.gif";
            }
        }
        setInterval(switchPicture,2000);

    </script>
</body>

　　　　3.属性

　　　　　　1.获取其他BOM对象

　　　　　　　　History

　　　　　　　　Location

　　　　　　　　Navigator

　　　　　　　　Screen

　　　　　　2.获取DOM对象

　　　　　　　　document

　　　　4.特点

　　　　　　*Window对象不需要创建可以直接使用 window使用。 window.方法名（）；

　　　　　　*window引用可以省略。方法名（）；

　　4.Location：地址栏对象

　　　　1.创建（获取）：window.location 或 location

　　　　2.方法

　　　　　　*reload（）：重新加载当前文档

　　　　3.属性

　　　　　　*href：设置或返回完整的URL Location.href = "https://www.baidu.com"

自动跳转首页案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }

    </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒后跳转至首页
    </p>

    <script>
        //通过定时器实现倒计时
        var second = 5;
        var time = document.getElementById("time");
        function showtime() {
            //时间如果小于0，则跳转
            second --;
            if(second <= 0){
                location.href = "https://www.baidu.com";
            }
            time.innerHTML = second + "";
        }
        setInterval(showtime,1000);

    </script>
</body>
</html>

自动跳转首页案例

　　5.History

　　　　1.创建：window.history

　　　　2.方法

　　　　　　1.back（）加载history列表中的前一个URL 和网页箭头一样

　　　　　　2.forward（）加载history列表中的下一个URL

　　　　　　3.go（参数）加载history列表中的某个具体页面

　　　　　　　　*参数：

　　　　　　　　　　正数：前进几个历史记录

　　　　　　　　　　负数：后退几个历史记录

　　　　3.属性：

　　　　　　*length 返回当前窗口历史列表中的URL数量

6.DOM

　　*概念：Document Object Model 文档对象模型

　　　　*将标记语言文档的各个组成部分，封装成对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作　　

　　*W3C DOM 标准被分为3个不同的部分：

　　　　*核心 DOM - 针对任何结构化文档的标准模型

　　　　　　*Document：文档对象

　　　　　　*Element：元素对象

　　　　　　*Attribute：属性对象

　　　　　　*Text：文本对象

　　　　　　*Comment：注释对象

　　　　　　*Node：节点对象，其他5个的父对象

　　　　*XML DOM - 针对 XML 文档的标准模型

　　　　*HTML DOM - 针对 HTML 文档的标准模型

　　*核心 DOM - 针对任何结构化文档的标准模型

　　　　　　*Document：文档对象

　　　　　　　　1.创建（获取）：在html dom模型中可以使用window对象来获取

　　　　　　　　2.方法：

　　　　　　　　　　1.获取Element对象

　　　　　　　　　　　　1.getElementById（）：根据ID属性值获取元素对象。ID属性值一般唯一

　　　　　　　　　　　　2.getElementsByTagName（）：根据元素的名称获取元素对象们。返回值是一个数组如a，p，div等标签

　　　　　　　　　　　　3.getElementsByClassNmae（）：根据Class的属性值来获取元素对象们。返回值是一个数组如相同的class值

　　　　　　　　　　　　4.getElementsByName（）：根据Name属性值获取元素对象们。返回值是一个数组如name值

　　　　　　　　　　2.创建其他的DOM对象

　　　　　　　　　　　　createAttribute（name）

　　　　　　　　　　　　createComment（）

　　　　　　　　　　　　createElement（）

　　　　　　　　　　　　createTextNode（）

　　　　　　*Element：元素对象

　　　　　　　　　　1.获取：通过document对象来获取和创建

　　　　　　　　　　2.方法：

　　　　　　　　　　　　1.removeAttribute（）：删除属性

　　　　　　　　　　　　2.setAttribute（）：设置属性

<body>
    <a>点我试试</a>
    <input type="button" id="tag_button" value="给超链接设置网页">

    <script>
        //获取这个a标签元素
        var ele_a = document.getElementsByTagName("a")[0];
        //拿到按钮
        var ele_button = document.getElementById("tag_button");
        //给按钮绑定事件
        ele_button.onclick = function () {
            ele_a.setAttribute("href","https://www.baidu.com");
        };

    </script>
</body>

　　　　　　*Node：节点对象，其他5个的父对象

　　　　　　　　*特点：所有DOM对象都可以被认为是一个节点

　　　　　　　　*方法：

　　　　　　　　　　*CRUD dom树：

　　　　　　　　　　　　*appendChild（）：向节点的子节点列表的结尾添加新的子节点

　　　　　　　　　　　　*removeChild（）：删除（并返回）当前节点的指定子节点

　　　　　　　　　　　　*replaceChild（）：用新节点替换一个子节点

　　　　　　　　　　　　注意：

　　　　　　　　　　　　　　超链接功能：
　　　　　　　　　　　　　　　　1.可以被点击；有样式
　　　　　　　　　　　　　　　　2.点击后跳转到href指定的url
　　　　　　　　　　　　　　需求：保留功能1，去掉功能2
　　　　　　　　　　　　　　实现：href="javascript:void(0);"

案例：删除子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            height: 200px;
            width: 200px;
        }
        #div2{
            height: 100px;
            width: 100px;
        }

    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
        超链接功能：
            1.可以被点击；有样式
            2.点击后跳转到href指定的url
        需求：保留功能1，去掉功能2
        实现：href="javascript:void(0);"
    <a href="javascript:void(0);">删除子节点</a>
    <script>
        var ele_a = document.getElementsByTagName("a")[0];
        //给超链接对象绑定点击事件
        ele_a.onclick = function () {
            //获取div1这个父节点对象
            var ele_div1 = document.getElementById("div1");
            var ele_div2 = document.getElementById("div2");
            ele_div1.removeChild(ele_div2);
        }

    </script>
</body>
</html>

删除子节

　　　　　　　　*属性：

　　　　　　　　　　*parentNode：返回节点的父节点

案例：动态增删表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">
    </div>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>小龙女</td>
            <td>女</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>

<script>
    /*
        添加：
            1.给添加按钮绑定单击事件
            2.获取文本框的内容
            3.创建td，去设置td的文本为文本框的内容
            4.创建tr
            5.将td添加到tr中
            6.获取table，将tr添加到table 中
        删除：
            1.确定删除的是哪一个超链接
                <a href="javascript:void (0);" onclick="del_tr(this)">
            2.怎么删除
     */
    //1.获取按钮
    document.getElementById("btn_add").onclick = function () {
        //获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //创建td，赋值td的标签体
        var td_id = document.createElement("td");
        //文本节点才能放入
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        //a标签的td
        var td_a = document.createElement("td");
        var a = document.createElement("a");
        var text_a = document.createTextNode("删除");
        a.appendChild(text_a);
        a.setAttribute("href","javascript:void(0);");
        a.setAttribute("onclick","delTr(this);");
        td_a.appendChild(a);


        //创建tr
        var tr = document.createElement("tr");

        //添加td到tr中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        //获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
        
        //删除方法
        function delTr(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            //获取tr对象
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
            alert(obj);
        }
    }
</script>
</body>
</html>

动态增删表格

　　*HTML DOM

　　　　1.标签体的设置和获取：innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">
    </div>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>小龙女</td>
            <td>女</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>

<script>
    /*
        添加：
            1.给添加按钮绑定单击事件
            2.获取文本框的内容
            3.创建td，去设置td的文本为文本框的内容
            4.创建tr
            5.将td添加到tr中
            6.获取table，将tr添加到table 中
        删除：
            1.确定删除的是哪一个超链接
                <a href="javascript:void (0);" onclick="del_tr(this)">
            2.怎么删除
     */
    //1.获取按钮
    document.getElementById("btn_add").onclick = function () {
        //获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        var ele_table = document.getElementsByTagName("table")[0];
        //向table里添加
        ele_table.innerHTML += "<tr>\n" +
            "            <td>"+id+"</td>\n" +
            "            <td>"+name+"</td>\n" +
            "            <td>"+gender+"</td>\n" +
            "            <td><a href=\"javascript:void (0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
            "        </tr>";
        //删除方法
        function delTr(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            //获取tr对象
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
            alert(obj);
        }
    }
</script>
</body>
</html>

使用HTMLDOM实现动态表格案例

　　　　2.使用html元素对象的属性

　　　　3.控制样式

　　　　　　1.使用元素的style属性来设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1"> div </div>

<script>
    var ele_div1 = document.getElementById("div1");
    ele_div1.onclick = function () {
        ele_div1.style.border = "1px solid red";
        //font-size --> fontSize
    }
</script>
</body>
</html>

style来控制

　　　　　　2.提前定义好类选择器的样式，通过元素的className属性来设置其class属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div1"> div </div>

<script>
    var ele_div1 = document.getElementById("div1");
    ele_div1.onclick = function () {
        ele_div1.className = "d1";
    }
</script>
</body>
</html>

class来控制

7.事件

　　概念：某些组件被执行了某些操作后，触发了某些代码的执行

　　　　*事件：某些操作，如单击、双击、键盘按下了，鼠标移动

　　　　*事件源：组件。如：按钮、文本输入框。。。

　　　　*监听器：代码

　　　　*注册监听：将事件、事件源、监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码

　　常见的事件：

　　　　1. 点击事件：

　　　　　　1.onclick ：单击事件

　　　　　　2.ondbclick ：双击事件

　　　　2. 焦点事件：

　　　　　　1.onblur ：元素失去焦点

　　　　　　　　*一般用于表单校验

　　　　　　2.onfocus ：元素获得焦点

　　　　3. 加载事件：

　　　　　　1.onload ：一张页面或一幅图像完成加载

　　　　4. 鼠标事件：

　　　　　　1.onmousedown ：鼠标按钮被按下

　　　　　　　　*定义方法时，定义一个形参，接收event对象

　　　　　　　　*event对象的button属性可以获取鼠标那个键被点击了左键 0 中键 1 右键 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function(){
            var ele_1 = document.getElementById("tag1");
            ele_1.onmousedown = function (event) {
                if(event.button==0){
                alert("左键被按下了");
            }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="tag1">
</body>
</html>

左键属性

　　　　　　2.onmouseup ：鼠标按键被松开

　　　　　　3.onmousemove ：鼠标被移动

　　　　　　4.onmouseover ：鼠标被移到某元素之上

　　　　　　5.onmouseout ：鼠标从某元素移开

　　　　5. 键盘事件：

　　　　　　1.onkeydown ：某个键盘按键被按下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function(){
            var ele_1 = document.getElementById("tag1");
            ele_1.onkeydown = function (event) {
                if(event.keyCode == 13){
                alert("提交表单 、");
            }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="tag1">
</body>
</html>

回车提交表单

　　　　　　2.onkeyup ：某个键盘按键被松开

　　　　　　3.onkeypress ：某个键盘按键被按下并松开

　　　　6. 选中和改变

　　　　　　1. onchange ：域的内容被改变

　　　　　　　　*三级联动时使用，比如省市选择时

　　　　　　2. onselect ：文本被选中

　　　　7.表单事件：

　　　　　　1. onsubmit ：确认按钮被点击

　　　　　　　　*可以阻止表单的提交

　　　　　　　　　　*方法返回false则表单被阻止提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm() {
            //校验用户名格式是否正确
            var flag = true;
            return flag;
        }
    </script>
</head>
<body>
<form action="#" onsubmit="return checkForm();">
    <input type="text" id="tag1" name="username">
    <input type="submit" value="提交">
</form>
</body>
</html>

阻止表单提交

　　　　　　2. onreset ：重置按钮被点击

案例：全选表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
        .over{
            background-color: deeppink;
        }
        .out{
            background-color: white;
        }
    </style>
    <script>
        /*
            分析：
                1.全选：
                    *获取所有的checkbox
                    *遍历cb，设置每一个cb的状态为选中 checked属性

        */
        //1.在页面加载完后绑定事件
        window.onload = function () {
            //2.给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function () {
                //全选功能，获取所有checkbox
                var cbs = document.getElementsByName("cb");
                //遍历
                for(var i = 0;1 < cbs.length; i++){
                    //设置每一个checked属性为true
                    cbs[i].checked = true;
                }
            }

            //3.给给不选按钮绑定单击事件
            document.getElementById("unSelectAll").onclick = function () {
                //全不选功能，获取所有checkbox
                var cbs = document.getElementsByName("cb");
                //遍历
                for(var i = 0;1 < cbs.length; i++){
                    //设置每一个checked属性为false
                    cbs[i].checked = false;
                }
            }

            //反选事件
            document.getElementById("selectRev").onclick = function () {
                //全选功能，获取所有checkbox
                var cbs = document.getElementsByName("cb");
                //遍历
                for(var i = 0;1 < cbs.length; i++){
                    cbs[i].checked = !cbs[i].checked;
                }
            }

            //第一个cb点击
            document.getElementById("first_cb").onclick = function () {
                //获取所有checkbox
                var cbs = document.getElementsByName("cb");
                //遍历
                for(var i = 0;1 < cbs.length; i++){
                    //设置每一个的状态和第一个的一样，this是onclick绑定的第一个cb
                    cbs[i].checked = this.checked;
                }
            }

            //给所有的tr绑定一个移到元素之上和移除事件
            var trs = document.getElementsByTagName("tr");
            //遍历
            for(var i = 0; i < trs.length; i++ ){
                //移到元素之上
                trs[i].onmouseover = function () {
                    this.className = "over";
                };
                //移出元素
                trs[i].onmouseout = function () {
                    this.className = "out";
                }
            }
        }

    </script>
</head>
<body>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th><input type="checkbox" name="cb" id="first_cb"></th>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tr>
            <th><input type="checkbox" name="cb"></th>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
        <tr>
            <th><input type="checkbox" name="cb"></th>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
        <tr>
            <th><input type="checkbox" name="cb"></th>
            <td>3</td>
            <td>岳不群</td>
            <td>？</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
    </table>
    <div>
        <input type="button" id="selectAll" value="全选">
        <input type="button" id="unSelectAll" value="全不选">
        <input type="button" id="selectRev" value="反选">
    </div>
</body>
</html>

全选表格

案例：表格校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>

        body{
            background: url("../../HTMLandCSS/img/register_bg.png") no-repeat center;
        }
        /*让所有元素都挨近 上下两行字*/
        *{
            margin: 0px;
            padding: 0px;

        }
        /*给最外层框框定义*/
        .register_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/
            margin: auto;
            margin-top: 25px;
        }
        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        .rg_center{
            /*border: 1px solid red;*/
            float: left;
            width: 450px;
            margin-top: 20px;
            margin-left: 30px;
        }
        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 10px;
        }
        /*选择左边div下的第一个p标签*/
        .rg_left > p:first-child{
            color:#FFD026;
            font-size:20px;
        }
        /*选择左边div下的最后一个p标签*/
        .rg_left > p:last-child{
            color:#A6A6A6;
            font-size: 20px;
        }
        .rg_right p a {
            color: palevioletred;
        }
        /*表格中所有左侧的元素*/
        .td_left{
            width: 100px;
            height: 45px;
            text-align: right;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#name,#tel,#checkcode,#birthday{
            width: 160px;
            height: 26px;
            border: 1px solid #A6A6A6;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkcode{
            width: 100px;
        }
        #img_check{
            height: 32px;
            /*设置垂直居中*/
            vertical-align: middle;
        }
        #sub{
            width: 120px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid  #FFD026;
            margin-left: 80px;
        }
        .error{
            color: red;
        }
        #td_sub{
            padding-left: 130px;
        }
    </style>
    <script>
        /*
            分析：
                1.给表单绑定onsubmit事件，监听器中判断每一个方法的校验结果
                    如果都为true，则监听器方法返回true
                    如果有一个为false，则监听器方法方法返回false
                2.定义一些方法，分别校验各个表单项
                3.给各个表单项绑定onblur离焦事件

        */

        window.onload = function () {
            //1.给表单绑定onsubmit事件
            document.getElementById("form").onsubmit = function () {
                //调用用户名校验方法、密码校验方法 checkUserName checkPassword
                return checkUserName() && checkPassword();
            }
            //给用户名和密码框分别绑定离焦事件  注意：只要函数对象！！！不要方法执行
            document.getElementById("username").onblur = checkUserName;
            document.getElementById("password").onblur = checkPassword;
        };

        //校验用户名
        function checkUserName() {

            //1.获取用户名的值
            var username = document.getElementById("username").value;

            //2.定义正则表达式
            var reg_username = /^\w{6,12}$/;
            //3.判断值是否符合正则的规则
            var flag = reg_username.test(username);
            //4.提示信息
            //通过span标签来添加后面的图片或者文字提示
            var s_username = document.getElementById("s_username");

            if(flag){
                //提示绿色对勾

                s_username.innerHTML = "<img width='35px' height='25px' src='../img/on.gif'/>"
            }else {
                //提示红色的用户名有误
                s_username.innerHTML = "用户名格式有误";
            }
        }

        //校验密码
        function checkPassword() {

            //1.获取用户名的值
            var password = document.getElementById("password").value;

            //2.定义正则表达式
            var reg_password = /^\w{6,12}$/;
            //3.判断值是否符合正则的规则
            var flag = reg_password.test(password);
            //4.提示信息
            //通过span标签来添加后面的图片或者文字提示
            var s_password = document.getElementById("s_password");

            if(flag){
                //提示绿色对勾

                s_password.innerHTML = "<img width='35px' height='25px' src='../img/off.gif'/>"
            }else {
                //提示红色的用户名有误
                s_password.innerHTML = "密码格式有误";
            }
        }

    </script>
</head>
<body>
<div class="register_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <!--中间的表格-->
            <form action="#" method="get" id="form">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入email"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male">男
                            <input type="radio" name="gender" value="female">女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入生日"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"><img src="../../HTMLandCSS/img/verify_code.jpg" id="img_check"></td>
                    </tr>
                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" value="注册" id="sub"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>
</div>
</body>
</html>

表格检验

posted @ 2020-07-04 12:54 五号世界阅读(370) 评论(0) 收藏举报

刷新页面返回顶部

五号世界

JavaWeb - JavaScript

1.JavaScript入门知识

*概念：一门客户端脚本语言

*运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎

*脚本语言：不需要编译，直接就可以被浏览器解析执行了

*功能：

*可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

*JavaScript发展史：

1.1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C - -，后来更名为ScriptEase

2.1995年，Netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript

3.1996年，微软抄袭JavaScript开发出JScript语言

4.1997年，ECMA（欧洲计算机制造协会），ECMAScript，就是所有客户端脚本语言的标准

*JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）

2.ECMAScript：客户端脚本语言的标准

1.基本语法：

1.与html结合的方式

1.内部JS

*定义<script>标签，标签体内容就是js代码

2.外部JS

*定义<script>标签，通过src属性引入外部的js文件

2.注释

1.单行注释：//注释内容

2.多行注释/*注释内容*/

3.数据类型

1.原始数据类型（基本数据类型）：

1.number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）

2.string：字符串

3.boolean：true或false

4.null：一个对象为空的占位符

5.undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

2.引用数据类型：对象

4.变量

*变量：一小块存储数据的内存空间

*Java语言是强类型语言，而JavaScript是弱类型语言

*语法：

* var 变量名 = 初始化值；

5.运算符

1.一元运算符：只有一个运算数的运算符

++ - - ， + （正号）

注意：在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

*string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）

*boolean转number：true为1，false为0

2.算术运算符

+ - * / % 。。。

3.赋值运算符

= += -= 。。。

4.比较运算符

> < >= <= == ===（全等于）

*类型相同：直接比较

*字符串：按照字典顺序比较，按位逐一比较，直到得出大小为止

*类型不同：先进行类型转换，再比较

*===，全等于，在比较之前，先判断类型，如果类型不一样，直接返回false

5.逻辑运算符

&& | | ！

*对于 ！ 非： 其他类型转boolean，之后进行if判断时，可以简化书写

1.number：0或NaN为假，其他为真

2.string：除了空字符串（" "），其他都是true

3.null&undefined：都是false

4.对象：所有对象都是true

6.三元运算符

？ ：表达式 如： a > b ? 1 : 3 ; 如果a大于b则取1，否则就是3

6.流程控制语句

1.if...else...

2.switch

*在java中，switch语句可以接受的数据类型：

*switch（变量）：byte int short char，枚举（1.5），String（1.7）

case 值：

*在JS中，switch语句可以接收任意的原始数据类型

3.while

4.do...while

5.for

7.JS特殊语法

*如果一行只有一条语句，可以省略分号（不建议）

*变量的定义使用var关键字，也可以不使用

*用var定义的变量是局部变量

*不用var定义的变量是全局变量

2.基本对象

1.Function：函数对象

1.创建

　　*概念：一门客户端脚本语言

　　　　*运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎

　　　　*脚本语言：不需要编译，直接就可以被浏览器解析执行了

　　*功能：

　　　　*可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

　　*JavaScript发展史：

　　　　1.1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C - -，后来更名为ScriptEase

　　　　2.1995年，Netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript

　　　　3.1996年，微软抄袭JavaScript开发出JScript语言

　　　　4.1997年，ECMA（欧洲计算机制造协会），ECMAScript，就是所有客户端脚本语言的标准

　　　　*JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）

　　1.基本语法：

　　　　1.与html结合的方式

　　　　　　1.内部JS

　　　　　　　　*定义<script>标签，标签体内容就是js代码

　　　　　　2.外部JS

　　　　　　　　*定义<script>标签，通过src属性引入外部的js文件

　　　　2.注释

　　　　　　1.单行注释：//注释内容

　　　　　　2.多行注释/注释内容/

　　　　3.数据类型

　　　　　　1.原始数据类型（基本数据类型）：

　　　　　　　　1.number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）

　　　　　　　　2.string：字符串

　　　　　　　　3.boolean：true或false

　　　　　　　　4.null：一个对象为空的占位符

　　　　　　　　5.undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

　　　　　　2.引用数据类型：对象

　　　　4.变量

　　　　　　*变量：一小块存储数据的内存空间

　　　　　　*Java语言是强类型语言，而JavaScript是弱类型语言

　　　　　　*语法：

　　　　　　　　* var 变量名 = 初始化值；

　　　　5.运算符

　　　　　　1.一元运算符：只有一个运算数的运算符

　　　　　　　　++ - - ， + （正号）

　　　　　　　　注意：在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

　　　　　　　　　　*string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）

　　　　　　　　　　*boolean转number：true为1，false为0

　　　　　　2.算术运算符

　　　　　　　　+ - * / % 。。。

　　　　　　3.赋值运算符

　　　　　　　　= += -= 。。。

　　　　　　4.比较运算符

　　　　　　　　> < >= <= == ===（全等于）

　　　　　　　　*类型相同：直接比较

　　　　　　　　　　*字符串：按照字典顺序比较，按位逐一比较，直到得出大小为止

　　　　　　　　*类型不同：先进行类型转换，再比较

　　　　　　　　　　*===，全等于，在比较之前，先判断类型，如果类型不一样，直接返回false

　　　　　　5.逻辑运算符

　　　　　　　　&& | | ！

　　　　　　　　*对于！非：其他类型转boolean，之后进行if判断时，可以简化书写

　　　　　　　　　　1.number：0或NaN为假，其他为真

　　　　　　　　　　2.string：除了空字符串（" "），其他都是true

　　　　　　　　　　3.null&undefined：都是false

　　　　　　　　　　4.对象：所有对象都是true

　　　　　　6.三元运算符

　　　　　　　　？：表达式如： a > b ? 1 : 3 ; 如果a大于b则取1，否则就是3

　　　　6.流程控制语句

　　　　　　1.if...else...

　　　　　　2.switch

　　　　　　　　*在java中，switch语句可以接受的数据类型：

　　　　　　　　　　*switch（变量）：byte int short char，枚举（1.5），String（1.7）

　　　　　　　　　　　　case 值：

　　　　　　　　*在JS中，switch语句可以接收任意的原始数据类型

　　　　　　3.while

　　　　　　4.do...while

　　　　　　5.for

　　　　7.JS特殊语法

　　　　　　*如果一行只有一条语句，可以省略分号（不建议）

　　　　　　*变量的定义使用var关键字，也可以不使用

　　　　　　　　*用var定义的变量是局部变量

　　　　　　　　*不用var定义的变量是全局变量

　　2.基本对象

　　　　1.Function：函数对象

　　　　　　1.创建

　　　　　　　　1. var fun = new Function（形参列表，方法体）；

　　　　　　　　2. function 方法名称（形参列表）{ 方法体 }

　　　　　　　　3. var 方法名称 = function（形参列表）{ 方法体 }

　　　　　　2.方法