首页 > 编程语言 >JavaScript学习（三）

JavaScript学习（三）

时间：2025-01-20 19:57:36浏览次数：3  
标签：函数 菜鸟 JavaScript 学习 getElementById HTML document

有事情的缘故导致中间几天没有进行学习。

今天开始继续后端的学习，学习的第五天（2025.1.20）

JavaScript 函数定义

        JavaScript 使用关键字 function 定义函数。

        函数可以通过声明定义，也可以是一个表达式。

        函数声明

        在之前的教程中，你已经了解了函数声明的语法 :

        function functionName(parameters) {
          执行的代码
        }

        函数声明后不会立即执行，会在我们需要的时候调用到。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>

        分号是用来分隔可执行JavaScript语句。
        由于函数声明不是一个可执行语句，所以不以分号结束。

        函数表达式

        JavaScript 函数可以通过一个表达式定义。

        函数表达式可以存储在变量中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>函数可以存储在变量中:</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

        在函数表达式存储在变量后，变量也可作为一个函数使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>函数存储在变量后，变量可作为函数使用：</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>

</body>
</html>

        以上函数实际上是一个 匿名函数 (函数没有名称)。

        函数存储在变量中，不需要函数名称，通常通过变量名来调用。

        上述函数以分号结尾，因为它是一个执行语句。

  

        Function() 构造函数

        在以上实例中，我们了解到函数通过关键字 function 定义。

        函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>JavaScrip 内置构造函数。</p>
<p id="demo"></p>
<script>
var myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

        实际上，你不必使用构造函数。上面实例可以写成：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo"></p>
<script>
var myFunction = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

        在 JavaScript 中，很多时候，你需要避免使用 new 关键字。

        函数提升（Hoisting）

        在之前的教程中我们已经了解了 "hoisting(提升)"。

        提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的行为。

        提升（Hoisting）应用在变量的声明与函数的声明。

        因此，函数可以在声明之前调用：

        myFunction(5);

        function myFunction(y) {
            return y * y;
        }

        但使用表达式定义函数时无法提升。

        自调用函数

        函数表达式可以 "自调用"。

        自调用表达式会自动调用。

        如果表达式后面紧跟 () ，则会自动调用。

        不能自调用声明的函数。

        通过添加括号，来说明它是一个函数表达式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>函数可以自动调用：</p>
<p id="demo"></p>
<script>
(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>

</body>
</html>

        以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。

        函数可作为一个值使用

        JavaScript 函数作为一个值使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>函数可作为一个值：</p>
<p>x = myFunction(4,3) 或 x = 12</p>
<p>两种情况下，x 的值都为 12。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

        JavaScript 函数可作为表达式使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>函数可作为一个表达式使用。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

        函数是对象

        在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

        但是JavaScript 函数描述为一个对象更加准确。

        JavaScript 函数有 属性 和 方法。

        arguments.length 属性返回函数调用过程接收到的参数个数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p> arguments.length 属性返回函数接收到参数的个数：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

        toString() 方法将函数作为一个字符串返回:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p> toString() 将函数作为一个字符串返回：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>

</body>
</html>

        箭头函数

        ES6 新增了箭头函数。

        箭头函数表达式的语法比普通函数表达式更简洁。

        (参数1, 参数2, …, 参数N) => { 函数声明 }

        (参数1, 参数2, …, 参数N) => 表达式(单一)
        // 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

        当只有一个参数时，圆括号是可选的：

        (单一参数) => {函数声明}
        单一参数 => {函数声明}

        没有参数的函数应该写成一对圆括号:

        () => {函数声明}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript 箭头函数</h2>

<p>箭头函数不需要使用 function、return 关键字及大括号 {}。</p>

<p>IE11 及更早 IE 版本不支持箭头函数。</p>

<p id="demo"></p>

<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

        有的箭头函数都没有自己的 this。 不适合定义一个 对象的方法。

        当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

        箭头函数是不能提升的，所以需要在使用之前定义。

        使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。

        如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript 箭头函数</h2>

<p>IE11 及更早 IE 版本不支持箭头函数。</p>

<p id="demo"></p>

<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>


</body>
</html>

JavaScript 函数参数

        JavaScript 函数对参数的值没有进行任何的检查。

        函数显式参数(Parameters)与隐式参数(Arguments)

        在先前的教程中，我们已经学习了函数的显式参数:

        functionName(parameter1, parameter2, parameter3) {
            // 要执行的代码……
        }

        函数显式参数在函数定义时列出。

        函数隐式参数在函数调用时传递给函数真正的值。

        参数规则

        JavaScript 函数定义显式参数时没有指定数据类型。

        JavaScript 函数对隐式参数没有进行类型检测。

        JavaScript 函数对隐式参数的个数没有进行检测。

        默认参数

        ES5 中如果函数在调用时未提供隐式参数，参数会默认设置为： undefined

        有时这是可以接受的，但是建议最好为参数设置一个默认值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>设置参数的默认值。</p>
<p id="demo"></p>
<script>
function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }    
    return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>

</body>
</html>

        或者，更简单的方式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>设置函数参数默认值。</p>
<p id="demo"></p>
<script>
function myFunction(x, y) {
    y = y || 0;
    return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>

</body>
</html>

        如果 y 已经定义，y || 0 返回 y，因为 y 是 true，否则返回 0，因为 undefined 为 false。

        如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名。 只能使用 arguments 对象来调用。

        ES6 函数可以自带参数

        ES6 支持函数带有默认参数，就判断 undefined 和 || 的操作：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>设置参数的默认值。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction(x, y = 10) {
    // 如果不传入参数 y ，则其默认值为 10
    return x + y;
}
// 输出 2
document.getElementById("demo1").innerHTML = myFunction(0, 2) ;
// 输出 15, y 参数的默认值
document.getElementById("demo2").innerHTML = myFunction(5);
</script>

</body>
</html>

        arguments 对象

        JavaScript 函数有个内置的对象 arguments 对象。

        arguments 对象包含了函数调用的参数数组。

        通过这种方式你可以很方便的找到最大的一个参数的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>查找最大的数。</p>
<p id="demo"></p>
<script>
x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

        或者创建一个函数用来统计所有数值的和：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>计算所有参数之和：</p>
<p id="demo"></p>
<script>
function sumAll() {
    var i, sum = 0;
    for(i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
} 
document.getElementById("demo").innerHTML =
	sumAll(1, 123, 500, 115, 44, 88);
</script>

</body>
</html>

        通过值传递参数

        在函数中调用的参数是函数的隐式参数。

        JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。

        如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。

        隐式参数的改变在函数外是不可见的。

        通过对象传递参数

        在JavaScript中，可以引用对象的值。

        因此我们在函数内部修改对象的属性就会修改其初始的值。

        修改对象属性可作用于函数外部（全局变量）。

        修改对象属性在函数外是可见的。

JavaScript 函数调用

        JavaScript 函数有 4 种调用方式。

        每种方式的不同在于 this 的初始化。

        this 关键字

        一般而言，在Javascript中，this指向函数执行时的当前对象。

        作为一个函数调用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>
全局函数 (myFunction) 返回参数参数相乘的结果：
</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
	return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>

</body>
</html>

        以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

        在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。

        在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

        myFunction() 和 window.myFunction() 是一样的：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>全局函数 myFunction() 会自动成为 window 对象的方法。</p>
<p>myFunction() 类似于 window.myFunction()。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
	return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2); 
</script>

</body>
</html>

        这是调用 JavaScript 函数常用的方法， 但不是良好的编程习惯
        全局变量，方法或函数容易造成命名冲突的bug。

        全局对象

        当函数没有被自身的对象调用时 this 的值就会变成全局对象。

        在 web 浏览器中全局对象是浏览器窗口（window 对象）。

        该实例返回 this 的值是 window 对象:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>在 HTML 中 <b>this</b> 的值, 在全局函数是一个 window 对象。</p>
<p id="demo"></p>
<script>
function myFunction() {
	return this;
}
document.getElementById("demo").innerHTML = myFunction(); 
</script>

</body>
</html>

        函数作为全局对象调用，会使 this 的值成为全局对象。
        使用 window 对象作为一个变量容易造成程序崩溃。

        函数作为方法调用

        在 JavaScript 中你可以将函数定义为对象的方法。

        以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>myObject.fullName() 返回 John Doe:</p>
<p id="demo"></p>
<script>
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function() {
		return this.firstName + " " + this.lastName;
    }
}
document.getElementById("demo").innerHTML = myObject.fullName(); 
</script>

</body>
</html>

        fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。

        this对象，拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。

        测试以下！修改 fullName 方法并返回 this 值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>在一个对象方法中 ，<b>this</b> 的值是对象本身。</p>
<p id="demo"></p>
<script>
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function() {
		return this;
    }
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>

</body>
</html>

        函数作为对象方法调用，会使得 this 的值成为对象本身。    

        使用构造函数调用函数

        如果函数调用前使用了 new 关键字, 则是调用了构造函数。

        这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例中， myFunction 是函数构造函数:</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
	this.firstName = arg1;
    this.lastName  = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName; 
</script>

</body>
</html>

            构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

        构造函数中 this 关键字没有任何的值。
        this 的值在函数调用实例化对象(new object)时创建。

        作为函数方法调用函数

        在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

        call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var myObject;
function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);    // 返回 20
document.getElementById("demo").innerHTML = myObject; 
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var myObject, myArray;
function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2]
myObject = myFunction.apply(myObject, myArray);      // 返回 20
document.getElementById("demo").innerHTML = myObject; 
</script>

</body>
</html>

        两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

        在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。

        在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

        通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

JavaScript 闭包

        JavaScript 变量可以是局部变量或全局变量。

        私有变量可以用到闭包。

        全局变量

        函数可以访问由函数内部定义的变量，如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>函数可以访问函数内部定义的变量:</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var a = 4;
    document.getElementById("demo").innerHTML = a * a;
} 
</script>

</body>
</html>

        函数也可以访问函数外部定义的变量，如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>函数可以访问定义在函数外的变量：</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var a = 4;
function myFunction() {
	document.getElementById("demo").innerHTML = a * a;
} 
</script>

</body>
</html>

        后面一个实例中， a 是一个 全局 变量。

        在web页面中全局变量属于 window 对象。

        全局变量可应用于页面上的所有脚本。

        在第一个实例中， a 是一个 局部 变量。

        局部变量只能用于定义它函数内部。对于其他的函数或脚本代码是不可用的。

        全局和局部变量即便名称相同，它们也是两个不同的变量。修改其中一个，不会影响另一个的值。

        变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

        变量生命周期

        全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。

        而在函数内部声明的变量，只在函数内部起作用。这些变量是局部变量，作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。

        计数器困境

        设想下如果你想统计一些数值，且该计数器在所有函数中都是可用的。

        你可以使用全局变量，函数设置计数器递增：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>全局变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var counter = 0;
function add() {
    return counter += 1;
}
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

 

        计数器数值在执行 add() 函数时发生变化。

        但问题来了，页面上的任何脚本都能改变计数器，即便没有调用 add() 函数。

        如果我在函数内声明计数器，如果没有调用函数将无法修改计数器的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
function add() {
    var counter = 0;
    return counter += 1;
}
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

        以上代码将无法正确输出，每次我调用 add() 函数，计数器都会设置为 1。

        JavaScript 内嵌函数可以解决该问题。

        JavaScript 内嵌函数

        所有函数都能访问全局变量。  

        实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。

        JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

        该实例中，内嵌函数 plus() 可以访问父函数的 counter 变量：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>局部变量计数。</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
	var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}
</script>

</body>
</html>

        如果我们能在外部访问 plus() 函数，这样就能解决计数器的困境。

        我们同样需要确保 counter = 0 只执行一次。

        我们需要闭包。

        JavaScript 闭包

        还记得函数自我调用吗？该函数会做什么？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

        变量 add 指定了函数自我调用的返回字值。

        自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

        add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

        这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

        计数器受匿名函数的作用域保护，只能通过 add 方法修改。

        闭包是一种保护私有变量的机制，它在函数执行时创建一个私有作用域，从而保护内部的私有变量不受外界干扰。

        直观地说，闭包就像是一个不会被销毁的栈环境。

JavaScript 类(class)

        类是用于创建对象的模板。

        我们使用 class 关键字来创建一个类，类体在一对大括号 {} 中，我们可以在大括号 {} 中定义类成员的位置，如方法或构造函数。

        每个类中包含了一个特殊的方法 constructor()，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的对象。

        创建一个类的语法格式如下：

        class ClassName {
          constructor() { ... }
        }

        实例：

        class Runoob {
          constructor(name, url) {
            this.name = name;
            this.url = url;
          }
        }

        以上实例创建了一个类，名为 "Runoob"。

        类中初始化了两个属性： "name" 和 "url"。

        浏览器支持

        表格中的数字表示支持该属性的第一个浏览器版本号。

Chrome 49Edge 12Firefox 45Safari 9Opera 36
Mar, 2016Jul, 2015Mar, 2016Oct, 2015Mar, 2016

        使用类

        定义好类后，我们就可以使用 new 关键字来创建对象： 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript 类</h2>

<p>如何使用 JavaScript 类</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}
 
let site = new Runoob("菜鸟教程",  "https://www.runoob.com");
document.getElementById("demo").innerHTML =
site.name + "：" + site.url;
</script>

</body>
</html>

        创建对象时会自动调用构造函数方法 constructor()。

        类表达式

        类表达式是定义类的另一种方法。类表达式可以命名或不命名。命名类表达式的名称是该类体的局部名称。

        // 未命名/匿名类
        let Runoob = class {
          constructor(name, url) {
            this.name = name;
            this.url = url;
          }
        };
        console.log(Runoob.name);
        // output: "Runoob"
 
        // 命名类
        let Runoob = class Runoob2 {
          constructor(name, url) {
            this.name = name;
            this.url = url;
          }
        };
        console.log(Runoob.name);
        // 输出: "Runoob2"

        构造方法

        构造方法是一种特殊的方法：

  • 构造方法名为 constructor()。
  • 构造方法在创建新对象时会自动执行。
  • 构造方法用于初始化对象属性。
  • 如果不定义构造方法，JavaScript 会自动添加一个空的构造方法。

        类的方法

        我们使用关键字 class 创建一个类，可以添加一个 constructor() 方法，然后添加任意数量的方法。

        class ClassName {
          constructor() { ... }
          method_1() { ... }
          method_2() { ... }
          method_3() { ... }
        }

        以下实例我们创建一个 "age" 方法，用于返回网站年龄：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript 类的方法</h2>

<p>类中如何定义方法</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
 
let runoob = new Runoob("菜鸟教程", 2018);
document.getElementById("demo").innerHTML =
"菜鸟教程 " + runoob.age() + " 岁了。";
</script>

</body>
</html>

        我们还可以向类的方法发送参数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript 类的方法</h2>

<p>传递参数到 "age()" 方法。</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
 
let date = new Date();
let year = date.getFullYear();
 
let runoob = new Runoob("菜鸟教程", 2020);
document.getElementById("demo").innerHTML=
"菜鸟教程 " + runoob.age(year) + " 岁了。";
</script>

</body>
</html>

        严格模式 "use strict"

        类声明和类表达式的主体都执行在严格模式下。比如，构造函数，静态方法，原型方法，getter 和 setter 都在严格模式下执行。

        如果你没有遵循严格模式，则会出现错误：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript 类必须遵循严格模式 "strict mode" 的规则 </h2>

<p>JavaScript 类不能使用没有声明的变量。</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // 错误
    let date = new Date(); // 正确
    return date.getFullYear() - this.year;
  }
}


myCar = new Runoob("菜鸟教程", 2020);
document.getElementById("demo").innerHTML =
"菜鸟教程 " + myCar.age() + " 岁了。";
</script>

</body>
</html>

         更多严格模式可以参考：JavaScript 严格模式(use strict)

        参考

        类方法

方法描述
constructor()构造函数，用于创建和初始化类

        类关键字

关键字描述
extends继承一个类
static在类中定义一个静态方法
super调用父类的构造方法

JavaScript 类继承

        JavaScript 类继承使用 extends 关键字。

        继承允许我们依据另一个类来定义一个类，这使得创建和维护一个应用程序变得更容易。

        super() 方法用于调用父类的构造函数。

        当创建一个类时，您不需要重新编写新的数据成员和成员函数，只需指定新建的类继承了一个已有的类的成员即可。这个已有的类称为基类（父类），新建的类称为派生类（子类）。

        继承代表了 is a 关系。例如，哺乳动物是动物，狗是哺乳动物，因此，狗是动物，等等。

 

        代码如下： 

        // 基类
        class Animal {
            // eat() 函数
            // sleep() 函数
        };
 
        //派生类
        class Dog extends Animal {
            // bark() 函数
        };

        以下实例创建的类 "Runoob" 继承了 "Site" 类:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript 类继承</h2>

<p>JavaScript 类继承使用 extends 关键字。</p>
<p>"super" 方法用于调用父类的构造函数。</p>

<p id="demo"></p>

<script>
class Site {
  constructor(name) {
    this.sitename = name;
  }
  present() {
    return '我喜欢' + this.sitename;
  }
}
 
class Runoob extends Site {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  show() {
    return this.present() + ', 它创建了 ' + this.age + ' 年。';
  }
}
 
let noob = new Runoob("菜鸟教程", 5);
document.getElementById("demo").innerHTML = noob.show();
</script>

</body>
</html>

        super() 方法引用父类的构造方法。

        通过在构造方法中调用 super() 方法，我们调用了父类的构造方法，这样就可以访问父类的属性和方法。

        继承对于代码可复用性很有用。

        JavaScript 并没有像其他编程语言一样具有传统的类，而是基于原型的继承模型。

        ES6 引入了类和 class 关键字，但底层机制仍然基于原型继承。

        使用原型链继承

        在下面实例中，Animal 是一个基类，Dog 是一个继承自 Animal 的子类，Dog.prototype 使用 Object.create(Animal.prototype) 来创建一个新对象，它继承了 Animal.prototype 的方法和属性，通过将 Dog.prototype.constructor 设置为 Dog，确保继承链上的构造函数正确。

        function Animal(name) {
          this.name = name;
        }
 
        Animal.prototype.eat = function() {
          console.log(this.name + " is eating.");
        };
 
        function Dog(name, breed) {
          Animal.call(this, name);
          this.breed = breed;
        }
 
        // 建立原型链，让 Dog 继承 Animal
        Dog.prototype = Object.create(Animal.prototype);
        Dog.prototype.constructor = Dog;
 
        Dog.prototype.bark = function() {
          console.log(this.name + " is barking.");
        };
 
        var dog = new Dog("Buddy", "Labrador");
        dog.eat();  // 调用从 Animal 继承的方法
        dog.bark(); // 调用 Dog 的方法

        使用 ES6 类继承

        ES6 引入了 class 关键字，使得定义类和继承更加清晰，extends 关键字用于建立继承关系，super 关键字用于在子类构造函数中调用父类的构造函数。

        class Animal {
          constructor(name) {
            this.name = name;
          }
 
          eat() {
            console.log(this.name + " is eating.");
          }
        }
 
        class Dog extends Animal {
          constructor(name, breed) {
            super(name);
            this.breed = breed;
          }
 
          bark() {
            console.log(this.name + " is barking.");
          }
        }
 
        const dog = new Dog("Buddy", "Labrador");
        dog.eat();
        dog.bark();

        不论是使用原型链继承还是 ES6 类继承，都可以实现类似的继承效果，在选择哪种方法时，可以根据个人偏好和项目需求来决定。

        getter 和 setter

        类中我们可以使用 getter 和 setter 来获取和设置值，getter 和 setter 都需要在严格模式下执行。

        getter 和 setter 可以使得我们对属性的操作变的很灵活。

        类中添加 getter 和 setter 使用的是 get 和 set 关键字。

        以下实例为 sitename 属性创建 getter 和 setter：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript Class Gettter/Setter</h2>

<p>类中添加 getter 和 setter 使用的是 get 和 set 关键字。</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name) {
    this.sitename = name;
  }
  get s_name() {
    return this.sitename;
  }
  set s_name(x) {
    this.sitename = x;
  }
}
 
let noob = new Runoob("菜鸟教程");
 
document.getElementById("demo").innerHTML = noob.s_name;
</script>

</body>
</html>

        注意：即使 getter 是一个方法，当你想获取属性值时也不要使用括号。

        getter/setter 方法的名称不能与属性的名称相同，在本例中属名为 sitename。

        很多开发者在属性名称前使用下划线字符 _ 将 getter/setter 与实际属性分开：

        以下实例使用下划线 _ 来设置属性，并创建对应的 getter/setter 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript Class Gettter/Setter</h2>

<p>很多开发者在属性名称前使用下划线字符 _ 将 getter/setter 与实际属性分开。</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name) {
    this._sitename = name;
  }
  get sitename() {
    return this._sitename;
  }
  set sitename(x) {
    this._sitename = x;
  }
}
 
let noob = new Runoob("菜鸟教程");
 
document.getElementById("demo").innerHTML = noob.sitename;

</script>

</body>
</html>

        要使用 setter，请使用与设置属性值时相同的语法，虽然 set 是一个方法，但需要不带括号：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript Class Setter</h2>

<p>要使用 setter，请使用与设置属性值时相同的语法，虽然 set 是一个方法，但需要不带括号。</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name) {
    this._sitename = name;
  }
  set sitename(x) {
    this._sitename = x;
  }
  get sitename() {
    return this._sitename;
  }
}
 
let noob = new Runoob("菜鸟教程");
noob.sitename = "RUNOOB";
document.getElementById("demo").innerHTML = noob.sitename;
</script>

</body>
</html>

        提升

        函数声明和类声明之间的一个重要区别在于, 函数声明会提升，类声明不会。

        你首先需要声明你的类，然后再访问它，否则类似以下的代码将抛出 ReferenceError：

        // 这里不能这样使用类，因为还没有声明
        // noob = new Runoob("菜鸟教程")
        // 报错
 
        class Runoob {
          constructor(name) {
            this.sitename = name;
          }
        }
 
        // 这里可以使用类了
        let noob = new Runoob("菜鸟教程")

        使用前没有声明会报错：

 

JavaScript 静态方法

        静态方法是使用 static 关键字修饰的方法，又叫类方法，属于类的，但不属于对象，在实例化对象之前可以通过 类名.方法名 调用静态方法。

        静态方法不能在对象上调用，只能在类中调用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript 类的静态方法</h2>

<p>静态方法不能在对象上调用，只能在类中调用。</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name) {
    this.name = name;
  }
  static hello() {
    return "Hello!!";
  }
}
 
let noob = new Runoob("菜鸟教程");
 
// 可以在类中调用 'hello()' 方法
document.getElementById("demo").innerHTML = Runoob.hello();
 
// 不能通过实例化后的对象调用静态方法
// document.getElementById("demo").innerHTML = noob.hello();
// 以上代码会报错
</script>

</body>
</html>

        实例对象调用静态方法会报错：        如果你想在对象 noob 中使用静态方法，可以作为一个参数传递给它：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript 类的静态方法</h2>

<p>"noob" 对象可以作为参数传递给静态方法。</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name) {
    this.name = name;
  }
  static hello(x) {
    return "Hello " + x.name;
  }
}
let noob = new Runoob("菜鸟教程");
document.getElementById("demo").innerHTML = Runoob.hello(noob);
</script>

</body>
</html>

JavaScript HTML DOM

        通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

        HTML DOM (文档对象模型)

        当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

        HTML DOM 模型被构造为对象的树：

        通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

        查找 HTML 元素

        通常，通过 JavaScript，您需要操作 HTML 元素。

        为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

        通过 id 查找 HTML 元素

        在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

        本例查找 id="intro" 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="intro">你好世界!</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>

</body>
</html>

        如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

        如果未找到该元素，则 x 将包含 null。

        通过标签名查找 HTML 元素

        本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>

</body>
</html>

        通过类名找到 HTML 元素

        本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>

JavaScript HTML DOM - 改变 HTML

        HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

        改变 HTML 输出流

        JavaScript 能够创建动态的 HTML 内容：

        今天的日期是： Mon Jan 20 2025 16:40:27 GMT+0800 (香港标准时间)

        在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

        绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

        改变 HTML 内容

        修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

        如需改变 HTML 元素的内容，请使用这个语法：

        document.getElementById(id).innerHTML=新的 HTML

        本例改变了 <p>元素的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>

</body>
</html>

        本例改变了 <h1> 元素的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1 id="header">旧标题</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
<p>"旧标题" 被 "新标题" 取代。</p>

</body>
</html>

        实例讲解：

  • 上面的 HTML 文档含有 id="header" 的 <h1> 元素

  • 我们使用 HTML DOM 来获得 id="header" 的元素

  • JavaScript 更改此元素的内容 (innerHTML)

        改变 HTML 属性

        如需改变 HTML 元素的属性，请使用这个语法：

        document.getElementById(id).attribute=新属性值

        本例改变了 <img> 元素的 src 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

</body>
</html>

        实例讲解：

  • 上面的 HTML 文档含有 id="image" 的 <img> 元素
  • 我们使用 HTML DOM 来获得 id="image" 的元素
  • JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

JavaScript HTML DOM - 改变CSS

        HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

        改变 HTML 样式

        如需改变 HTML 元素的样式，请使用这个语法：

        document.getElementById(id).style.property=新样式

        下面的例子会改变 <p> 元素的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>

</body>
</html>

        使用事件

        HTML DOM 允许我们通过触发事件来执行代码。

        比如以下事件：

  • 元素被点击。
  • 页面加载完成。
  • 输入框被修改。
  • ……

        本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>

</body>
</html>

        让文本隐藏和显示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>
</html>

JavaScript HTML DOM 事件

        HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

        对事件做出反应

        我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

        如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

        onclick=JavaScript

        HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

        在本例中，当用户在 <h1> 元素上点击时，会改变其内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

</body>
</html>

        本例从事件处理器调用一个函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>

</body>
</html>

        HTML 事件属性

        如需向 HTML 元素分配 事件，您可以使用事件属性。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

        在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。

        使用 HTML DOM 来分配事件

        HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

        在上面的例子中，名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。

        按钮点击时Javascript函数将会被执行。

        onload 和 onunload 事件

        onload 和 onunload 事件会在用户进入或离开页面时被触发。

        onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

        onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body onl oad="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
	
</body>
</html>

        onchange 事件

        onchange 事件常结合对输入字段的验证来使用。

        下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

        onmouseover 和 onm ouseout 事件

        onmouseover 和 onm ouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div onm ouseover="mOver(this)" onm ouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

        onmousedown、onmouseup 以及 onclick 事件

        onmousedown, onm ouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onm ousedown 事件，当释放鼠标按钮时，会触发 onm ouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

        当用户按下鼠标按钮时，更换一幅图像：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function lighton(){
	document.getElementById('myimage').src="bulbon.gif";
}
function lightoff(){
	document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head>

<body>
<img id="myimage" onm ousedown="lighton()" onm ouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>

        当页面完成加载时，显示一个提示框：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function mymessage(){
	alert("消息在 onl oad 事件触发后弹出。");
}
</script>
</head>

<body onl oad="mymessage()"></body>

</html>

        当输入字段获得焦点时，改变其背景色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(x){
	x.style.background="yellow";
}
</script>
</head>
<body>

输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

</body>
</html>

        当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1 onm ouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文本上</h1>

</body>
</html>

      

JavaScript HTML DOM EventListener

        addEventListener() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

        addEventListener() 方法用于向指定元素添加事件句柄。

        addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

        你可以向一个元素添加多个事件句柄。

        你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

        你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

        addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

        当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

        你可以使用 removeEventListener() 方法来移除事件的监听。

        语法

        element.addEventListener(event, function, useCapture);

        第一个参数是事件的类型 (如 "click" 或 "mousedown").

        第二个参数是事件触发后调用的函数。

        第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

        注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

        向原元素添加事件句柄

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

</body>
</html>

        你可以使用函数名，来引用外部函数:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}
</script>

</body>
</html>

        向同一个元素中添加多个事件句柄

        addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函数已执行!")
}
</script>

</body>
</html>

        你可以向同个元素添加不同类型的事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

</body>
</html>

        向 Window 对象添加事件句柄

        addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支持的事件对象如: xmlHttpRequest 对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>实例在 window 对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

        传递参数

        当传递参数值时，使用"匿名函数"调用带参数的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

</body>
</html>

        事件冒泡或事件捕获？

        事件传递有两种方式：冒泡与捕获。

        事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

        在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

        在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

        addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

        addEventListener(event, function, useCapture);

        默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

</body>
</html>

        removeEventListener() 方法

        removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<style>
#myDIV {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
    color: white;
}
</style>
</head>
<body>

<div id="myDIV"> div 元素添加了 onm ousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

addEventListener()1.09.01.01.07.0
removeEventListener()1.09.01.01.07.0

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p> Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法。</p>
<p>该实例演示了所有浏览器兼容的解决方法。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
    x.attachEvent("onclick", myFunction);
}
function myFunction() {
    alert("Hello World!");
}
</script>

</body>
</html>

        HTML DOM 事件对象参考手册

        所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。

JavaScript HTML DOM 元素 (节点)

        本章节介绍如何向文档中添加和移除元素(节点)。

        创建新的 HTML 元素 (节点) - appendChild()

        要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

        实例解析

        以下代码是用于创建 <p> 元素:

        var para = document.createElement("p");

        为 <p> 元素创建一个新的文本节点：

        var node = document.createTextNode("这是一个新的段落。");

        将文本节点添加到 <p> 元素中：

        para.appendChild(node);

        最后，在一个已存在的元素中添加 p 元素。

        查找已存在的元素：

        var element = document.getElementById("div1");

        添加到已存在的元素中:

        element.appendChild(para);

        创建新的 HTML 元素 (节点) - insertBefore()

        以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。

        如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

</body>
</html>

        移除已存在的元素

        要移除一个元素，你需要知道该元素的父元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

        早期的 Internet Explorer 浏览器不支持 node.remove() 方法。

        实例解析

        HTML 文档中 <div> 元素包含两个子节点 (两个 <p> 元素):

        <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
        </div>

        查找 id="div1" 的元素:

        var parent = document.getElementById("div1");

        查找 id="p1" 的 <p> 元素:

        var child = document.getElementById("p1");

        从父元素中移除子节点：

        parent.removeChild(child);

        如果能够在不引用父元素的情况下删除某个元素，就太好了。
        不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

        以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）：

        var child = document.getElementById("p1");
        child.parentNode.removeChild(child);

        替换 HTML 元素 - replaceChild()

        我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

</body>
</html>

        更多有关使用 JavaScript 访问 HTML DOM 的知识，请访问我们完整的 HTML DOM 教程。

        JavaScript HTML DOM 集合(Collection)

        本章节介绍 DOM 集合的使用。

        HTMLCollection 对象

        getElementsByTagName() 方法返回 HTMLCollection 对象。

        HTMLCollection 对象类似包含 HTML 元素的一个数组。

        以下代码获取文档所有的 <p> 元素：

        var x = document.getElementsByTagName("p");

        集合中的元素可以通过索引(以 0 为起始位置)来访问。

        访问第二个 <p> 元素可以是以下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myCollection[1].innerHTML + '</span>';
</script>

</body>
</html>

        HTMLCollection 对象 length 属性

        HTMLCollection 对象的 length 属性定义了集合中元素的数量。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "文档包含" + myCollection.length + " 个段落。";
</script>

</body>
</html>

        实例解析

        获取 <p> 元素的集合：

        var myCollection = document.getElementsByTagName("p");

        显示集合元素个数：

        document.getElementById("demo").innerHTML = myCollection.length;

        集合 length 属性常用于遍历集合中的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p>点击按钮修改 p 元素的背景颜色。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    var myCollection = document.getElementsByTagName("p");
    var i;
    for (i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
}
</script>

</body>
</html>

        注意

        HTMLCollection 不是一个数组！

        HTMLCollection 看起来可能是一个数组，但其实不是。

        你可以像数组一样，使用索引来获取元素。

        HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

JavaScript HTML DOM 节点列表

        NodeList 对象是一个从文档中获取的节点列表 (集合) 。

        NodeList 对象类似 HTMLCollection 对象。

        一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。

        所有浏览器的 childNodes 属性返回的是 NodeList 对象。

        大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

        以下代码选取了文档中所有的 <p> 节点：

        var myNodeList = document.querySelectorAll("p");

        NodeList 中的元素可以通过索引(以 0 为起始位置)来访问。

        访问第二个 <p> 元素可以是以下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myNodelist[1].innerHTML + '</span>';
</script>

</body>
</html>

        NodeList 对象 length 属性

        NodeList 对象 length 属性定义了节点列表中元素的数量。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "文档包含 " + myNodelist.length + " 个段落。";
</script>

</body>
</html>

        实例解析

        获取 <p> 元素的集合：

        var myNodelist = document.querySelectorAll("p");

        显示节点列表的元素个数：

        document.getElementById("demo").innerHTML = myNodelist.length;

        length 属性常用于遍历节点列表。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p>点击按钮修改所有 p 元素的背景颜色。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    var myNodelist = document.querySelectorAll("p");
    var i;
    for (i = 0; i < myNodelist.length; i++) {
        myNodelist[i].style.color = "red";
    }
}
</script>

</body>
</html>

        HTMLCollection 与 NodeList 的区别

        HTMLCollection 是 HTML 元素的集合。

        NodeList 是一个文档节点的集合。

        NodeList 与 HTMLCollection 有很多类似的地方。

        NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

        NodeList 与 HTMLCollection 都有 length 属性。

        HTMLCollection 元素可以通过 name，id 或索引来获取。

        NodeList 只能通过索引来获取。

        只有 NodeList 对象有包含属性节点和文本节点。

        节点列表不是一个数组！

        节点列表看起来可能是一个数组，但其实不是。

        你可以像数组一样，使用索引来获取元素。

        节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

感谢大家的阅读，祝各位早日成为IT大牛！！！

标签：函数,菜鸟,JavaScript,学习,getElementById,HTML,document
From： https://blog.csdn.net/meweisir/article/details/145261789

相关文章

  • AAAI2024论文解读|Bidirectional Contrastive Split Learning for Visual Question An
    论文标题BidirectionalContrastiveSplitLearningforVisualQuestionAnswering双向对比分裂学习用于视觉问答论文链接BidirectionalContrastiveSplitLearningforVisualQuestionAnswering论文下载论文作者YuweiSun,HideyaOchiai内容简介本文提出了一种名......
  • python的函数学习
    函数定义方式Python:defmy_function(param1,param2,keyword_param=None):returnparam1+param2+(keyword_paramifkeyword_paramisnotNoneelse0)Python使用def关键字来定义函数。参数类型不需要显式声明，Python是动态类型语言。C/C++:intmy_function(intp......
  • rust学习-函数的定义与使用
    rust学习-函数的定义与使用1.函数的基本定义2.函数的参数多个参数3.返回值提前返回4.函数调用5.函数的所有权和借用传递所有权借用6.函数作为参数和返回值函数作为参数函数作为返回值7.泛型函数8.函数注释（文档注释）1.函数的基本定义在Rust中，函数使用fn......
  • Doris 2.1 Queries Acceleration -Tuning Plan学习笔记
    1OptimizingTableSchemaDesign1.1Case1:TableEngineSelection1.1.1Thequeryperformanceofthesetablemodels,frombesttoworst,is:Duplicate>MOW>MOR==Aggregate.1.2Case2:BucketColumnSelection1.2.1Selectingappropriatebucket......
  • 清风数学建模学习——01层次分析法
    层次分析法矩阵若矩阵各元素aij>0,且aij*aji=1，则称其为正互反矩阵若正互反矩阵满足aij*ajk=aik，ann=1，则称其为一致矩阵第一步层次结构图可用SmartArt生成亿图图示第二步构造判断矩阵第三步计算相对权重，并进行一致性检验算数平均法几何平均法特征值法一致性......
  • Web安全测试学习手册-业务逻辑测试
    首先感谢朋友倾璇的邀请，参与了的相关撰写，目前负责业务逻辑测试这一块的撰写，目前初步已经成型，先发出来让大家看看，欢迎点评，也可以加入我们一起来撰写~业务逻辑测试介绍：这里对Web应用业务逻辑方面的安全缺陷进行介绍和常见案例讲解。任意用户密码重置常见的缺陷*1.验证码类缺......
  • AI大模型-提示工程学习笔记9-生成知识提示
    卷首语：我所知的是我自己非常无知，所以我要不断学习。写给AI入行比较晚的小白们（比如我自己）看的，大神可以直接路过无视了。有一种改进大语言模型（LLM）推理能力的技术：生成知识作为提示的一部分。这种方法由Liu等人（2022）提出，旨在通过让模型先生成相关知识，再将这些知识整合到推理过......
  • Python Playwright学习笔记（二）
    一、模拟手机playwright.devices可以配置模拟器。importasynciofromplaywright.async_apiimportasync_playwrightasyncdefrun(playwright):iphone_12=playwright.devices['iPhone12']browser=awaitplaywright.webkit.launch(headless=False)conte......
  • 【转】[JavaScript] 解构赋值
    转自：kimi.ai解构赋值（DestructuringAssignment）是JavaScript中一种非常强大的语法特性，用于从数组或对象中快速提取数据并赋值给变量。它可以让代码更简洁、更易读。1.数组解构赋值数组解构赋值允许你从数组中按顺序提取值，并将它们赋值给变量。1.1基本用法JavaScript复制......
  • AST反混淆学习--化简常量
    本文章是个人学习AST反混淆的笔记记录，发出来供大家参考指正，希望可以多多交流以提高个人技术！！！（注：本文章中所有内容仅供学习交流，不可用于任何商业用途和非法用途，否则后果自负，如有侵权，请联系作者立即删除！）常见的常量混淆常量混淆一直是js中最喜欢使用的一种方式之一，其形式包括计......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99