文章目录
一、函数
函数格式如下所示：
function function_name()
{
// 执行代码
}
1.1 匿名函数
在函数表达式存储在变量后，变量也可作为一个函数使用：
var x = function (a, b) {return a * b};
var z = x(4, 3);
1.2 匿名自调用函数
如果表达式后面紧跟 () ，则会自动调用。不能自调用声明的函数。
(function () {
var x = "Hello!!"; // 我将调用自己
console.log(x);
})();
1.3 箭头函数
箭头函数表达式的语法比普通函数表达式更简洁。
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}
没有参数的函数应该写成一对圆括号:
() => {函数声明}
具体例子如下所示：
//1. 箭头函数的形式如下
// const css = (参数列表) =>{}
//2.无参形式
const c1 = () =>{}
//3.多参形式
const c2 = (num1, num2) =>{
return num1 + num2
}
//4. 只有一个参数时可以简写
const c3 = num1 =>{
return num1 * num1
}
//5. 主函数里只有一行代码可以进行简写
const c4 = num1 => num1 * num1
console.log(c4(5))
1.4 默认参数
ES6 支持函数带有默认参数，就判断 undefined 和 || 的操作：
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y 参数的默认值
1.5 arguments 对象
如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名。 只能使用 arguments 对象来调用。
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;
}
1.6 作为函数方法调用函数
使用call以及apply函数来进行调用
call() 方法可以接收多个参数列表，
apply() 方法只能接收数组形式的参数，数组元素将作为参数列表传递给被调用的函数
调用形式如下：
函数名.call(被指定作为函数this的对象，函数参数1，函数参数2，函数参数3...)
函数名.apply(被指定作为函数this的对象，函数参数数组)
//我们用来调用的累加函数
//并将结果存至当前上下文的 result属性中
function sum() {
var res = 0
for (var n = 0; n < arguments.length; n++) {
res += arguments[n]
}
this.result = res
}
//创建两个空对象用来测试
var obj_1 = {}
var obj_2 = {}
//使用apply 调用
//第一个参数为要指定的上下文对象obj_1
//第二个参数为要传递给sum函数的参数，数组形式
sum.apply(obj_1, [1,2,3,4])
//使用call 调用
//第一个参数为要指定的上下文对象obj_21/后续参数都为要传递给sum函数的参数
sum.call(obj_2,5,6,7,8)
//测试结果
console.log(obj_1.result === 10) // true
console.log(obj_2.result === 26)// true
二、类
创建一个类的语法格式如下：
class ClassName {
constructor() { ... }
}
其中 constructor 是构造方法，与java一样，没有的话会自动添加一个空的构造方法，后面还可以添加新的方法，与java一样也可以new一个对象。
2.1 类的匿名
类的创建可以匿名也可以命名，如下例所示：
// 未命名/匿名类
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"
2.2 类的继承
与java类似，使用 extends 关键字，也可以使用 super() 调用父类的构造方法和一般方法
2.3 静态方法
静态方法是使用 static 关键字修饰的方法，又叫类方法，属于类的，但不属于对象，在实例化对象之前可以通过 类名.方法名 调用静态方法。
静态方法不能在对象上调用，只能在类中调用。
class Runoob {
constructor(name) {
this.name = name;
}
static hello() {
return "Hello!!";
}
}
let noob = new Runoob("Hello");
// 可以在类中调用 'hello()' 方法
document.getElementById("demo").innerHTML = Runoob.hello();
// 不能通过实例化后的对象调用静态方法
// document.getElementById("demo").innerHTML = noob.hello();
// 以上代码会报错
三、HTML DOM(Document Object Model)
3.1 查找HTML元素
-
通过 id 找到 HTML 元素
var x=document.getElementById("intro");如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将为 null
-
通过标签名找到 HTML 元素
本例查找
id="main"的元素，然后查找id="main"元素中的所有<p>元素：var x=document.getElementById("main"); var y=x.getElementsByTagName("p");//返回的是伪数组类型 -
通过类名找到 HTML 元素
本例通过 getElementsByClassName 函数来查找
class="intro"的元素：var x=document.getElementsByClassName("intro");
3.2 改变HTML
-
改变HTML输出流
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。
-
改变HTML内容
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(*id*).innerHTML=*新的 HTML*本例改变了
<p>元素的内容：<html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="新文本!"; </script> </body> </html> -
改变HTML属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(*id*).*attribute=新属性值*本例改变了
<img>元素的src属性：<!DOCTYPE html> <html> <body> <img id="image" src="smiley.gif"> <script> document.getElementById("image").src="landscape.jpg"; </script> </body> </html> -
改变HTML样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(*id*).style.*property*=*新样式*下面的例子会改变
<p>元素的样式：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>1</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>
3.3 事件
-
HTML事件的方式
-
JS不参与
当用户在
<h1>元素上点击时，会改变其内容：<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> </body> </html> -
调用JS的函数
<!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerHTML="Ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">点击文本!</h1> </body> </html>也可以不传入参数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>1</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> -
JS中写入事件
<script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script>
-
-
事件类别
| 类别 | 作用 |
|---|---|
| onload | 用户进入页面时被触发 |
| onunload | 用户离开页面时被触发 |
| onchange | 用户改变内容时触发 |
| onmouseover | 用户的鼠标移在 HTML 元素上方时触发函数 |
| onmouseout | 用户的鼠标移在 HTML 元素移出元素时触发函数 |
| onmousedown | 首先当点击鼠标按钮时，会触发 onmousedown 事件 |
| onmouseup | 当释放鼠标按钮时，会触发 onmouseup 事件 |
| onclick | 当完成鼠标点击时，会触发 onclick 事件 |
3.4 addEventListener() 方法
-
语法和作用
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
element.addEventListener(event, function, useCapture);第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
-
向元素添加多个句柄
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document</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> -
冒泡和捕获
事件传递定义了元素事件触发的顺序。 如果你将
<p>元素插入到<div>元素中，用户点击<p>元素, 哪个元素的 “click” 事件先被触发呢？在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：
<p>元素的点击事件先触发，然后会触发<div>元素的点击事件。在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：
<div>元素的点击事件先触发 ，然后再触发<p>元素的点击事件。addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：
addEventListener(event, function, useCapture);默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
-
移除句柄
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄，如
element.removeEventListener("mousemove", myFunction);
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
