JavaScript学习（一）

目录

概述

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

    • 运行在客户端浏览器中的，每一个浏览器都有Javascript的解析引擎
    • 脚本语言：不需要编译，直接就可以被浏览器解析执行

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

  • JavaScript的发展史：

    1. 1992年，Nombase公司，开发出全球第一门客户端脚本语言，专门用于表单的校验。命名为：C--。后来更名为：ScriptEase
    2. 1995年，NetScape(网景)公司，开发了一门客户端脚本语言：LiveScript。同年Java语言发布了 JDK1.0版本，后来请来了SUN公司的专家，修改LiveScript，命名为：JavaScript。
    3. 1996年，微软抄袭JavaScript开发出 Jscript 语言。
    4. 1997年，ECMA(欧洲计算机制造商协会)站出来，制定了一套标准：ECMAScript，就是所有客户端脚本语言的标准。

  • JavaScript = ECMAScript + JavaScript自己特有的东西 (BOM+DOM)

ECMAScript

  • 客户端脚本语言的标准

基本语法

与html的结合方式

  1. 内部JS：
    • 定义<script>，标签体内容就是js代码
  2. 外部JS：
    • 定义<script>，通过src属性引入外部的js文件

注意：

  1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行的顺序。
  2. <script>可以定义多个。
  • 示例：
<!--内部JS-->
<script>
alert("HelloWorld");
</script>
<!-- 外部JS -->
<script src="js/a.js"></script>

注释

  1. 单行注释：// 注释内容
  2. 多行注释：/* 注释内容 */

数据类型

  1. 原始数据类型(基本数据类型)：
    1. number：数字。整数 / 小数 / NaN(not a number 一个不是数字的数字类型)
    2. string：字符串。字符串 如："abc"、 "a" 、'abc'
    3. boolean：true 和 false
    4. null：一个对象为空的占位符
    5. undefined：未定义的。如果一个变量没有给初始化值，则会默认赋值为 undefined
  2. 引用数据类型：对象

变量

  • 变量：一小块存储数据的存储空间。

  • Java语言是强类型语言，而 JavaScript是弱类型语言。

    • 强类型：在开辟变量存储空间时，定义了空间将来存储数据的数据类型。只能存储固定的数据
    • 弱类型：在开辟变量存储空间时,没有定义空间将来存储数据的数据类型。可以存放任意类型的数据

  • 语法：

    • var 变量名 = 初始化值;

  • typeof运算符：获取变量的类型。

    • 注：typeof(null); 得到是 object

  • 示例：

	// 定义变量
	/*var a = 3;
	alert(a);
	a = "abc";
	alert(a);*/

	// 定义number类型
	var num1 = 1;
	var num2 = 1.2;
	var num3 = NaN;
	// 输出到页面上
	document.write(num1 + "<br>");
	document.write(num2 + "<br>");
	document.write(num3 + "<br>");

	// 定义string类型
	var str1 = "abc";
	var str2 = 'def';
	document.write(str1 + "<br>");
	document.write(str2 + "<br>");

	// 定义boolean类型
	var flag = true;
	document.write(flag + "<br>");

	// 定义null、undefined
	var obj1 = null;
	var obj2 = undefined;
	var obj3;
	document.write(obj1 + "<br>");
	document.write(obj2 + "<br>");
	document.write(obj3 + "<br>");

运算符

  1. 一元运算符：只有一个运算数的运算符
    • ++、--、+(-)(正负号)
  • 示例：
/*
一元运算符：
    * ++(--)：自增(自减)
    * + (-) 正负号
     注意：在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动的将运算数进行类型装换
    * 其他类型转number：
        * string转number：按照字面值转换。如果字面值不是数字，则转为NaN(不是数字的数字)
        * boolean转number：true 转为 1 false 转为 0
        * null转number：null 转为 0
        * undefined转number：undefined 转为 NaN
*/
    var num = +3;
    document.write(typeof(num) + "---"); // number
    document.write(num); // 3
    document.write("<hr>");

    var num2 = +"123";
    document.write(typeof(num2)+ "---"); // number
    document.write(num2); // 123
    document.write("<hr>");

    var num3 = +"123abc";
    document.write(typeof(num3)+ "---"); // number
    document.write(num3); // NaN
    document.write("<hr>");

    var num4 = +null;
    document.write(num4); // 0
    document.write("<hr>");

    var num5 = +undefined;
    document.write(num5); // NaN
  1. 算术运算符
  • /、%、-、+、*
  • 示例：
var a = 3;
var b = 4;
document.write(a + b + "<br>"); // 7
document.write(a - b + "<br>"); // -1
document.write(a * b + "<br>"); // 12
document.write(a / b + "<br>"); // 0.75
document.write(a % b + "<br>"); // 3

  1. 赋值运算符

    • =、-= 、+= ……

  2. 比较运算符

    • <、>、<=、>=、、===(全等于)
  • 示例：
/**
 * 比较运算符比较方式(了解)：
 *	1.类型相同：直接比较
 *		* 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止
 *	2.类型不同：先进行类型转换，再比较
 *		* ===：全等于。在比较之前先判断类型，如果类型不一样，则直接返回false
 */
document.write((3 > 4) + "<br>"); // fales
document.write(("abc" > "abd") + "<br>"); // false
document.write(("122" < 123) + "<br>");  // true
document.write(("123" == 123) + "<br>");  // true
document.write(("123" === 123) + "<br>");  // false
  1. 逻辑运算符
    • &&、||、!
  • 示例：
/**
 * 逻辑运算符：
 * &&：与（短路）
 * ||：或（短路）
 * !：非
 *      * 其他类型转 boolean(重点掌握)：
 *          1.number：0 或 NaN 为假，其他为真
 *          2.string：除了空字符串("")，其他都是ture
 *          3.null & undefined：都是false
 *          4.对象：所有对象都为 true
 */
var flag = true;
document.write(flag + "<br>"); // true
document.write(!flag + "<br>"); // false

document.write("<hr>");
// number
var num = 3;
var num2 = 0;
var num3 = NaN;
document.write(!!num + "<br>"); // true
document.write(!!num2 + "<br>"); // false
document.write(!!num3 + "<br>"); // false

 /*死循环
 while (1) {}*/

 document.write("<hr>");
 // string
 var str = "abc";
 var str2 = "";
 document.write(!!str + "<br>"); // true
 document.write(!!str2 + "<br>"); // fales

 /*if (str != null && str.length != 0) {
 	alert(123);
 }*/

 // JS中可以这样写，简化书写
 if (str2) {
     alert(456);
 }

document.write("<hr>");
// null & undefined
var obj1 = null;
var obj2 = undefined;
document.write(!!obj1 + "<br>"); // false
document.write(!!obj2 + "<br>"); // false

document.write("<hr>");
// 对象
var o = new Date();
document.write(!!o + "<br>"); // true

/*if (o != null) {
    alert(111);
}*/
// JS中可以这样写，简化书写
if (o) {
    alert(222);
}
  1. 三元运算符
    • 表达式 ? 值1 : 值2

流程控制语句

  1. if...else...

  2. switch:

    • 在Java中，switch可以接受的数据类型：byte short int char 枚举(JDK1.5) String(1.7)
    • 在JS中，switch语句可以接受任意的原始数据类型

  3. while

  4. do .. while

  5. for

JS特殊语法

  • 示例：
// 1. 语句以 ; 结尾，如果一行只有一条语句，则 ; 而可以省略不写(不推荐)
var a = 2
/*alert(a)*/

/*
   2. 变量的定义使用 var 关键字,也可以不使用
    * 用：定义的变量是局部变量
    * 不用：定义的变量是全局变量(不推荐)
 */
var b;
function f() {
    b = 5;
    alert(b);
}
f();

99乘法表练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        td {
            border: 1px solid;
        }
    </style>
    <script>
        // document.write("<table border='1' align='center'>");
        document.write("<table align='center'>");
        // 1.完成基本的for循环嵌套，展示乘法表
        for (var i = 1; i <= 9; i++) {
            document.write("<tr>")
            for (var j = 1; j <= i; j++) {
                document.write("<td>");
                document.write(j+" * "+i+" = "+(i*j)+"&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            // 输出换行
            /*document.write("<br>");*/
            document.write("</tr>");
        }
        // 2.完成表格嵌套
        document.write("</table>");
    </script>
</head>
<body>

</body>
</html>

基本对象

Function:函数(方法)对象

  1. 创建方式：

    1. var 方法名称 = new Function(形式参数列表, 方法体); (不建议使用)
    2. function 方法名称(形式参数列表) {
      方法体
      }
    3. var 方法名称 = function(形式参数列表) {
      方法体
      }

  2. 方法：

  3. 属性：
    length：代表形参的个数

  4. 特点：

    1. 方法定义时，形参的类型不用写，返回值类型也不用写
    2. 方法是一个对象，如果定义名称相同的方法，会覆盖
    3. (重点)在JS中，方法的调用只与方法名称有关，和参数列表无关
    4. 在方法声明中，有一个隐藏的内置对象(数组)，arguments，封装所有的实际参数

  5. 调用：
    方法名称(实际参数列表);

  • 示例：
 // 1.创建对象方式2
 function fun1(a, b) {
     alert(a+b);
 }
 // 调用方法
 // fun1(1, 2);

 // 2.创建对象方式3
 var fun1 = function (a, b) {
     alert(a-b);
 }
 // fun1(1, 2);

 fun1 = function (a, b) { // 会覆盖原来的方法
     alert(a);
     alert(b);
 }
 // fun1(1, 2, 3);

 // 定义一个方法，来返回多个数的和
 function add() {
 var sum = 0;
 for (var i = 0; i < arguments.length; i++) { // 内置arguments对象
            sum += arguments[i];
     }
     return sum;
 }
 // 方法调用
 var sum = add(1,2,3,4);
 alert(sum); // 10

Array：数组对象

  1. 创建方式
    1. var 数组对象名称 = new Array(元素列表);
    2. var 数组对象名称 = new Array(默认长度);
    3. var 数组对象名称 = [元素列表];
  2. 方法
    1. join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
    2. push(参数)：向数组的末尾添加一个或更多元素，并返回新的长度
  3. 属性
    length：数组的长度
  4. 特点
    1. JS中，数组元素的类型是可变的
    2. JS中，数组长度可变的

Boolean

一个基本数据类型的包装类

Date：日期对象

  1. 创建：
    var date = new date();
  2. 方法：
    1. toLocalString()：返回当前date对象对应的时间本地字符串
    2. getTime()：获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差
var date = new Date();
document.write(date + "<br>");
document.write(date.toLocaleString() + "<br>");
document.write(date.getTime() + "<br>");

Math：数学对象

  1. 创建：
    • 特点：Math对象不用创建，直接使用。Math.方法名称();
  2. 方法：
    1. random()：返回 [0,1) 之间的随机数
    2. cell(x)：对数进行上舍入
    3. floor(x)：对数进行下舍入
    4. round(x)：四舍五入
  3. 属性：
    PI
  • 示例：
/**
 * 取 1~100之间的随机数
 * 分析：
 *      1.Math.random() 产生 [0,1)之间的随机数
 *      2.乘以100 --> [0,99.999..]的随机数
 *      3.舍弃小数部分 floor() --> [0,99]
 *      4.整体加 1 --> [1,100]
 */
var randomNumber = Math.floor(Math.random() * 100) + 1;
document.write(randomNumber);

Number

String

RegExp：正则表达式对象

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

    1. 单个字符：[ ]
      • 如：[a], [ab], [a-zA-Z0-9_]
      • 特殊符号代表特殊含义的单个字符：
        • d：单个数字字符 [0-9]
        • w：单个单词字符 [a-zA-Z0-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(参数)：验证指定的字符串是否符合正则定义的规范
  • 示例：
// 字符串中的反斜线带有转义的含义，需加 \ 才能避免转义
var reg = new RegExp("\w{6,12}");
var reg2 = /^w{6,12}$/; // 避免写成字符串的形式
var username = "zhangsan";
var flag = reg.test(username);
alert(flag); // true

Global：全局对象

  1. 特点：全局对象，这个Global对象中封装的方法不需要对象就可以直接调用。方法名()
  2. 方法：
    • encodeURI():url 编码
    • decodeURI():url 解码
    • encodeURIComponent():url 编码，编码的字符更多
    • decodeURIComponent():url 解码，解码的字符更多
    • parseInt():将字符串转为数字
      • 逐一判断每一个字符是否是数字，直到不是数字为止，将前边的数字部分转为number
    • isNaN():判断一个值是不是NaN
      • NaN六亲不认，连自己都不认。NaN参与的==比较全部为false
    • eval():将 JavaScript 字符串作为脚本代码来执行
  3. URL编码
    • 传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2(12个字节，utf-8编码)
  • 示例：
var str = "传智播客";
var encode = encodeURI(str);
document.write(encode + "<br>"); // %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

var decode = decodeURI(encode);
document.write(decode + "<br>"); // 传智播客

var str2 = "http://www.传智播客";
var encode2 = encodeURIComponent(str2);
document.write(encode2 + "<br>"); // 传智播客

var str3 = "123abc";
var num =  parseInt(str3);
document.write(num + "<br>"); // 传智播客

var a = NaN;
document.write((a == NaN) + "<br>"); // false
document.write(isNaN(a) + "<br>"); // true

var jscode = "alert(123)";
document.write(jscode + "<br>"); // alert(123)
// eval(jscode);

DOM简单学习

  • 功能：获取html文档的内容（标签属性、标签体内容、注释……）

  • 代码：获取页面标签(元素)对象 Element

    • document.getElementById("id值"):通过元素的 id 获取元素对

  • 操纵Element对象：

    1. 修改属性值：

      1. 明确获取的对象是哪一个？
      2. 查看API文档，查找其中有那些属性可以修改？

    2. 修改标签体内容：

      • 属性：innerHTML

  • 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素对象</title>

</head>
<body>
    <img id="light" src="img/off.jpg">
    <h1 id="title">我是一个标题</h1>
    <script>
        // 通过 id获取元素对象
        // var light = document.getElementById("light");
        // alert("我要换图片了!");
        // light.src = "img/on.jpg";

        // 获取 h1 标签对象
        var title = document.getElementById("title");
        alert("我要换内容了！")
        // 修改内容
        title.innerHTML = "我是另外一个标题";
    </script>
</body>
</html>

事件简单学习

  • 功能：某些组件被执行了某些操作后，触发某些代码的执行。
  • 绑定事件的方式(2种)：
    1. 直接在html标签上，指定事件的属性(操作)，属性值就是 js 代码
      1. 事件：onclick --> 单击事件
    2. 通过js获取元素对象，指定事件属性，设置一个函数
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>

<!--    <img src="img/on.jpg" onclick="alert('我被点击了');">-->
<!--    <img src="img/on.jpg" onclick="fun();">-->

<img src="img/off.jpg" id="light">

<script>
    function fun() {
        alert("我被点击了");
    }

    // 获取元素对象
    var light = document.getElementById("light");
    light.onclick = fun2; // 注意！！！

    function fun2() {
        alert("咋老是点我");
    }
</script>
</body>
</html>

案例:电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>

<img src="img/off.jpg" id="light">
<script>
    /*
        分析：
            1.获取图片对象
            2.绑定单击事件
            3.每次点击切换图片
                * 规则：
                    如果灯是开的 on，则关掉 off
                    如果灯是灭的 off，则打开 on
                * 使用标记flag来完成
     */
    var light = document.getElementById("light");
    var flag = false; // 灯初始为 off
    light.onclick = function () { // 匿名函数
        if (flag) {
            light.src = "img/off.jpg";
            flag = false;
        } else {
            light.src = "img/on.jpg";
            flag = true;
        }
    }

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

BOM

概述

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

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

  2. 组成：

    • Window：窗口对象
    • Navigator：浏览器对象
    • Screen：显示器屏幕对象
    • History：历史记录对象
    • Location：地址栏对象

Window:窗口对象

  1. 创建：不需要创建，直接使用即可

  2. 方法：

    1. 与弹出框有关的方法

      • alert():显示带有一段消息和一个确认按钮的警告框。
      • confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
      • 如果用户点击确定按钮，则方法返回 true
      • 如果用户点击取消按钮，则方法返回 false
    • prompt():显示可提示用户输入的对话框。
      * 返回值：获取用户输入的值

    1. 与打开、关闭有关的方法

      • open():打开一个新的浏览器窗口或查找一个已命名的窗口。
      • 返回新的 Window 对象
      • close():关闭浏览器窗口。
        • 谁调用我，我关谁

    2. 与定时器有关的方法

    • setTimeout():在指定的毫秒数后调用函数或计算表达式。
      * 参数
      1. js代码 或 方法对象
      2. 毫秒值
      * 返回值：唯一标识，用于取消定时器
      • clearTimeout():取消由 setTimeout() 方法设置的 timeout。
        • 参数:取消定时器的 唯一标识
      • setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式。
      • clearInterval():取消由 setInterval() 设置的 timeout。

  3. 属性：

    1. 获取其他BOM对象
      • history
      • location
      • Navigator
      • Screen
    2. 获取DOM对象
      • document

  4. 特点：

    • Window对象不需要创建可以直接使用 window使用。window.方法名();
    • window引用可以省略。方法名();
  • 示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象</title>
</head>
<body>
<input type="button" value="打开窗口" id="openBtn">
<input type="button" value="关闭窗口" id="closeBtn">

<script>
    /*var flag = confirm("您确定要退出吗？");
    window.alert(flag);*/

    /*
        var username = prompt("请输入您的用户名");
        alert(username);
    */

    // 打开新窗口
    // open();

    // 获取元素对象
    var openBtn = document.getElementById("openBtn");
    var closeBtn = document.getElementById("closeBtn");
    // 绑定事件
    var newWindow;
    openBtn.onclick = function () {
        newWindow = window.open('https://www.baidu.com');
    }

    closeBtn.onclick = function () {
        // window.close(); // 关闭自己
        newWindow.close(); // 关闭 百度网址
    }

    // 一次性定时器
    // setTimeout("fun();", 2000);
    var id = setTimeout(fun, 2000);

    clearTimeout(id); // 取消一次性定时器

    // 循环定时器
    // var id = setInterval(fun, 2000);
    // clearInterval(id); // 取消循环定时器

    function fun() {
        alert("ping~~");
    }
</script>
</body>
</html>

案例:轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
<img id="img" src="img/banner2.jpg" width="100%">

<script>
    /*
        分析：
            1.在页面上使用img标签展示图片
            2.定义一个方法，修改图片的src属性
            3.定义一个定时器，每3秒修改调用一次方法
     */
    var number = 1;
    function fun() {
        number++;
        if (number > 4) {
            number = 2
        }
        var img = document.getElementById("img");
        // img.src = "img/banner"+(number++ % 3 + 2)+".jpg";
        img.src = "img/banner"+(number)+".jpg";
    }
    // 定义一个循环定时器
    setInterval(fun, 3000);

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

Location:地址栏对象

  1. 创建(获取)

    1. window.location
    2. location

  2. 方法：

    • reload()：重新加载当前文档。刷新当前页面

  3. 属性：

    • href：设置或返回完整的URL
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>
</head>
<body>
    <input type="button" id="btn_refresh" value="刷新">
    <input type="button" id="btn_jump" value="跳转">

<script>
    /*

     */
    // 获取标签对象
    var btn_refresh = window.document.getElementById("btn_refresh");
    // 设置点击属性值
    btn_refresh.onclick = function () {
        // 调用location中的 reload方法，刷新
        location.reload();
    }

    var btn_jump = document.getElementById("btn_jump");
    btn_jump.onclick = function () {
        location.href = "https://www.baidu.com";
    }
</script>
</body>
</html>

案例:自动跳转首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
        p {
            text-align: center;
        }

        span {
            color: #FF0000;
        }

    </style>
</head>
<body>

<p>
    <span id="time">5</span>&nbsp;秒之后自动跳转...
</p>
<script>
    /*
        分析:
            1. 显示页面效果
            2. 倒计时读秒效果显示
                2.1 定义一个方法，获取span标签，修改span标签的内容，时间--
                2.2 定义一个计时器，每一秒执行一次
            3. 在方法中判断如果时间 <= 0，则跳转
     */
    // 倒计时读秒效果显示
    var second = 5;
    var time = document.getElementById("time");
    function countDown() {
         time.innerHTML = --second + ""; // 加空字符串是为了把second变成字符串
        // 在方法中判断如果时间 <= 0，则跳转
         if (second <= 0) {
             location.href = "https://www.baidu.com";
         }
    }
	// 定义一个计时器，每一秒执行一次
    setInterval(countDown, 1000);
</script>
</body>
</html>

history:历史记录对象

  1. 创建(获取)：

    1. window.history
    2. history

  2. 方法：

    1. back()：加载 history 列表中的前一个 URL
    2. forward()：加载 history 列表中的下一个 URL
    3. go(参数)：加载 history 列表中的某个具体页面
      • 参数：
        • 正数：前进几个历史记录
        • 负数：后退几个历史记录

  3. 属性：

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

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对象来获取
    1. window.document
    2. document
  2. 方法：
    1. 获取Element对象：
      1. getElementById()：根据id属性值获取元素对象。id属性值一般唯一。
      2. getElementByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
      3. getElementByClassName()：根据Class属性值获取元素对象们。返回值是一个数组。
      4. getElementByName()：根据name属性值获取元素对象们。返回值是一个数组。
    2. 创建其他DOM对象
      1. createAttribute(name)
      2. createComment()
      3. createElement()
      4. createTextNode()

Element：元素对象

  1. 获取/创建：通过document对象来获取和创建
  2. 方法：
    1. removeAttribute()：删除属性
    2. setAttribute()：设置属性

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

  1. 特点：所有DOM对象都可以被认为是一个节点
  2. 方法：
    • CRUD DOM树：
      • appendChild()：向节点的子节点列表的结尾添加新的子节点。
      • removeChild()：删除（并返回）当前节点的指定子节点。
      • replaceChild()：用新节点替换一个子节点。
  3. 属性：
    • parentNode：返回节点的父节点。
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div {
            border: 1px solid red;
        }

        #div1 {
             200px;
            height: 200px;
        }

        #div2 {
             100px;
            height: 100px;
        }

        #div3 {
             100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
<!--    <a id="del" href="">删除子节点</a>-->
    <!-- 实际上是删除了子节点，当由于 href中为空，再次跳转到当前页面，效果看不到 -->

<!--    <input type="button" value="删除子节点" id="del">-->
    <a id="del" href="javascript:void(0);">删除子节点</a>
    <a id="add" href="javascript:void(0);">添加子节点</a>
<script>
    // 获取a标签
    var element_a = document.getElementById('del');
    // 获取div1标签
    var div1 = document.getElementById("div1");
    // 绑定单击事件
    element_a.onclick = function () {
        // 获取div2标签
        var div2 = document.getElementById("div2");
        // 删除子节点
        div1.removeChild(div2);
    }
    /*
        超链接功能：
            1. 可以被点击：样式
            2. 点击后就跳转到href指定的url
        需求：保留1功能，去掉2功能
        实现：href="javascript:void(0);"
     */
    var element_a2 = document.getElementById("add");
    element_a2.onclick = function () {
        // 创建div3节点
        var div3 = document.createElement("div");
        // 设置 id 属性值
        div3.setAttribute("id", "div3");
        // 添加子节点
        div1.appendChild(div3);
    }
</script>
</body>
</html>

案例:动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table {
            border: 1px solid red;
            margin: auto;
             500px;
        }

        td,th {
            text-align: center;
            border: solid;
        }

        div {
            border: 1px solid red;
            text-align: center;
            margin: 50px;
        }

    </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. 添加:
                1. 给添加按钮绑定单击事件
                2. 获取文本框输入的内容
                3. 创建td，设置td的文本为文本框的内容
                4. 创建tr
                5. 将td添加到tr中
                6. 获取table，将tr添加到table中
            2. 删除：
                1. 确定点击的是哪一个超连接
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
                2. 怎么删除
     */
/*
    document.getElementById("btn_add").onclick = function () {
        // 通过 values属性 获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        // 转换为文本节点
        var text_id = document.createTextNode(id);
        var text_name = document.createTextNode(name);
        var text_gender = document.createTextNode(gender);

        // 创建td
        var td_id = document.createElement("td");
        var td_name = document.createElement("td");
        var td_gender = document.createElement("td");

        // a标签的td
        var td_a = document.createElement("td");
        // 创建a标签
        var ele_a = document.createElement("a");
        // javascript:void(0);
        ele_a.setAttribute("href", "javascript:void(0);");
        ele_a.setAttribute("onclick", "delTr(this);");

        var text_a = document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);

        // 将文本框节点添加到td中
        td_id.appendChild(text_id);
        td_name.appendChild(text_name);
        td_gender.appendChild(text_gender);

        // 创建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);

    }
*/
    // 使用innerHTML来完成添加
    document.getElementById("btn_add").onclick = function() {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        // 获取table
        var table = document.getElementsByTagName("table")[0];
        // 追加一行
        table.innerHTML += "    <tr>
" +
            "        <td>"+id+"</td>
" +
            "        <td>"+name+"</td>
" +
            "        <td>"+gender+"</td>
" +
            "        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
" +
            "    </tr>
";
    }


    // 删除方法
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }

</script>

</body>
</html>

HTML DOM

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

  2. 使用html元素对象的属性：看文档

  3. 控制样式

    1. 使用元素的style属性来设置
      如：
    var div1 = document.getElementById("div1");
div1.onclick = function() {
    div1.style.border = "1px solid #FF0000";
    div1.style.width = "200px";
    // font-size --> fontSize
    div1.style.fontSize = "20px";
}

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

      如：

    var div2 = document.getElementById("div2");
div2.onclick = function () {
    div2.className = "d1";
}

事件监听机制

概述

  • 概念：某些组件被执行了某些操作后，触发某些代码的执行。
    • 事件：某些操作。如：单击，双击，键盘被按下了，鼠标被移动了
    • 事件源：组件。如：按钮，文本输入框
    • 监听器：代码。
    • 注册监听：将事件、事件源、监听器结合在一起。当事件源上发生了某个事件，则触发执行某个代码

常见的事件

  1. 点击事件

    1. onclick:单击事件
    2. ondblclick：双击事件

  2. 焦点事件

    1. onblur：失去焦点
      • 一般用于表单校验
    2. onfocus：获得焦点

  3. 加载事件

    1. onload：一张页面或一张图像完成加载
      • 支持该事件的 JavaScript 对象：image, layer, window

  4. 鼠标事件

    1. onmousedown：鼠标按钮被按下。
      • 定义方法时，定义了一个形参，接受event对象
      • event对象的button属性可以获取鼠标按钮键被点击了
    2. onmouseup：鼠标按键被松开。
    3. onmousemove：鼠标被移动。
    4. onmouseover：鼠标移到某元素之上。
    5. onmouseout：鼠标从某元素移开。

  5. 键盘事件

    1. onkeydown：某个键盘按键被按下。
    2. onkeyup：某个键盘按键被松开。
    3. onkeypress：某个键盘按键被按下并松开。

  6. 选择和改变

    1. onchange：域的内容被改变。
    2. onselect：文本被选中。

  7. 表单事件

    1. onsubmit：确认按钮被点击。
      • 可以阻止表单的提交
        • 方法返回false，则表单被阻止提交
    2. onreset：重置按钮被点击。
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>

        // 加载完成事件
        window.onload = function () {
/*
            // 失去焦点事件
            document.getElementById("username").onblur = function () {
                alert("失去焦点了!");
            }
            // 绑定鼠标移动到元素之上事件
            document.getElementById("username").onmouseover = function () {
                alert("鼠标来了！");
            }
            // 绑定鼠标点击事件
            document.getElementById("username").onmousedown = function (event) {
                // alert("鼠标点击了！");
                alert(event.button);
            }
            // 绑定键盘按下事件
            document.getElementById("username").onkeydown = function (event) {
                if (event.keyCode == 13) {
                    alert("表单提交了");
                }
            }
            // 选择事件
            document.getElementById("city").onchange = function () {
                alert("改变了！");
            }
*/
/*
            // 第一种写法：这个函数将来是被js引擎内部的方法调用，被第三方调用
            document.getElementById("form").onsubmit = function () {
                // 检验用户名格式是否正确
                var flag = false;
                return flag;
            }
*/
        }

        function checkForm() {
            return false;
        }
    </script>
</head>
<body>
<!--
        function fun() {
        // 而我们自己写的方法要被调用，【注意：需要在方法前加上 return】
            return checkForm();
        }
 -->
    <!-- 第二种写法：-->
    <form id="form" action="#" onclick="return checkForm();">
        <input type="text" id="username" name="username">
        <!-- 下拉列表 select -->
        <select id="city">
            <option>--请选择--</option>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <input type="submit" value="提交">
    </form>
</body>
</html>

案例:全选表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table {
            border: 1px solid;
             500px;
            /*margin: auto;*/
            margin-left: 30%;
        }

        th, td {
            text-align: center;
            /*border: solid;*/
            border: 1px solid;
        }

        div {
            /*text-align: center;*/
            margin-top: 20px;
            margin-left: 30%;
            margin-bottom: 50px;
        }

        .over {
            background-color:aqua;
        }

        .out {
            background-color: white;
        }
    </style>

</head>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" id="btn_add" value="添加">
</div>

<body>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

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

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>

<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>


<script>
    /*
        分析：
            1. 全选
                * 获取所有的checkbox
                * 遍历 cb，设置每一个cb的属性为被选中，checked
     */
    // 1.在页面加载完成后绑定事件
    window.onload = function () {
        // 2.给全选按钮绑定单击事件
        document.getElementById("selectAll").onclick = function () {
            // 1.获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            // 2.遍历
            for (var i = 0; i < cbs.length; i++) {
                // 设置为一个cb的状态为 true
                cbs[i].checked = true;
            }
        }
        // 3.给全不选按钮绑定单击事件
        document.getElementById("unSelectAll").onclick = function () {
            // 1.获取所有的checkbox
            var cbs = document.getElementsByName("cb");
            // 2.遍历
            for (var i = 0; i < cbs.length; i++) {
                // 设置为一个cb的状态为 false
                cbs[i].checked = false;
            }
        }
        // 4.给反选按钮绑定单击事件
        document.getElementById("selectRev").onclick = function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                // 直接取反即可，不必进行选择判断
                cbs[i].checked = !cbs[i].checked;
            }
        }

        // 5.给第一个多选框绑定事件
        document.getElementById("firstCb").onclick = function () {
            // 获取所有的checkbox按钮
            var cbs = document.getElementsByName("cb");
            for (var i = 1; i < cbs.length; i++) {
                // 设置每一个cb的状态和第一个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";
            }
        }
    }
    // 删除操作
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }

    // 添加操作
    document.getElementById("btn_add").onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        // 获取table
        var table = document.getElementsByTagName("table")[0];
        // 追加一行
        table.innerHTML += "    <tr>
" +
            "        <td><input type="checkbox" name="cb"></td>
" +
            "        <td>"+id+"</td>
" +
            "        <td>"+name+"</td>
" +
            "        <td>"+gender+"</td>
" +
            "        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
" +
            "    </tr>
"
    }


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

案例:表单校验

  • 效果图：

表单校验.png

  • 代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body {
            background: url("img/register_bg.jpg") no-repeat center;
        }

        .rg_layout {
             900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/
            margin: auto;
            margin-top: 15px;
        }

        .rg_left {
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }

        .rg_left > p:first-child {
            color: #FFD026;
            font-size: 20px;
        }

        .rg_left > p:last-child {
            color: #A6A6A6;
            font-size: 20px;
        }

        .rg_center {
            /*border: 1px solid red;*/
            float: left;

             530px;
        }

        .rg_right {
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }

        .rg_right > p:first-child {
            font-size: 15px;
        }

        .rg_right p a {
            color: pink;
        }

        .td_left {
             100px;
            text-align: right;
            height: 45px;
        }

        .td_right {
            padding-left: 40px;
        }

        #username, #password, #checkcode, #birthday, #tel, #name, #email {
             251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }

        #checkcode {
             110px;
        }

        #img_check {
            height: 32px;
            /*垂直居中*/
            vertical-align: middle;
        }

        #btn_sub {
             150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;
        }

        .error {
            color: red;
        }

        #td_sub {
            padding-left: 150px;
        }

    </style>
    <script>
        /*
            分析：
                1. 给表单绑定 onsubmit 事件。监听器中判断每一个方法校验的结果
                    如果都为 true，则监听器方法返回的是true
                    如果有一个为false，则返回false
                2. 定义一些方法分别校验表单中的表单项
                3. 给各个表单项绑定 onblur 事件(失去焦点)
         */

        window.onload = function () {
            document.getElementById("form").onsubmit = function () {
                // 调用用户名校验方法
                // 调用密码检验方法
                return checkUsername() && checkPassword();
            }

            // 给用户名和密码框分别绑定离焦事件
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
        }

        // 检验用户名的方法
        function checkUsername() {
            // 获取用户名内容
            var username = document.getElementById("username").value;
            // 获取提示信息
            var s_username = document.getElementById("s_username");
            // 定义正则表达式
            var reg_username = /^w{6,12}$/;
            // 测试用户名是否满足正则表达式
            var flag = reg_username.test(username);
            // 判断
            if (flag) {
                // 验证通过
                s_username.innerHTML = "<img width='35' height='25' src='img/duigou.jpg'/>";
            } else {
                // 验证失败
                s_username.innerHTML = "用户名格式有误";
            }
            return flag;
        }

        // 检验密码的方法
        function checkPassword() {
            // 获取用户名内容
            var password = document.getElementById("password").value;
            // 获取提示信息
            var s_password = document.getElementById("s_password");
            // 定义正则表达式
            var reg_password = /^w{6,12}$/;
            // 测试用户名是否满足正则表达式
            var flag = reg_password.test(password);
            // 判断
            if (flag) {
                // 验证通过
                s_password.innerHTML = "<img width='35' height='25' src='img/duigou.jpg'/>";
            } else {
                // 验证失败
                s_password.innerHTML = "密码格式有误";
            }
            return flag;
        }

    </script>
</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单-->
            <form action="#" id="form" method="get">
                <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>

                    <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">性别</td>
                        <td class="td_right"><input type="radio" name="gender" value="male" checked>男
                            <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"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right"><input type="text" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="./img/verify_code.jpg" width="100">
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2" id="td_sub"><input id="btn_sub" type="submit" value="注册"></td>
                    </tr>

                </table>

            </form>

        </div>
    </div>
    <div class="rg_right">
        <p>已用账号？<a href="#">立即登录</a></p>
    </div>

</div>

</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/rainszj/p/12188852.html