JavaScript 函数、类与事件

一、函数

函数格式如下所示:

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元素

  1. 通过 id 找到 HTML 元素

    var x=document.getElementById("intro");
    

    如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

    如果未找到该元素,则 x 将为 null

  2. 通过标签名找到 HTML 元素

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

    var x=document.getElementById("main");
    var y=x.getElementsByTagName("p");//返回的是伪数组类型
    
  3. 通过类名找到 HTML 元素

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

    var x=document.getElementsByClassName("intro");
    

3.2 改变HTML

  1. 改变HTML输出流

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

    <!DOCTYPE html>
    <html>
    <body>
    
    <script>
    document.write(Date());
    </script>
    
    </body>
    </html>
    

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

  1. 改变HTML内容

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

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

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

    <html>
    <body>
    
    <p id="p1">Hello World!</p>
    
    <script>
    document.getElementById("p1").innerHTML="新文本!";
    </script>
    
    </body>
    </html>
    
  2. 改变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>
    
  3. 改变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 事件

  1. 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>
      
  2. 事件类别

类别作用
onload用户进入页面时被触发
onunload用户离开页面时被触发
onchange用户改变内容时触发
onmouseover用户的鼠标移在 HTML 元素上方时触发函数
onmouseout用户的鼠标移在 HTML 元素移出元素时触发函数
onmousedown首先当点击鼠标按钮时,会触发 onmousedown 事件
onmouseup当释放鼠标按钮时,会触发 onmouseup 事件
onclick当完成鼠标点击时,会触发 onclick 事件

3.4 addEventListener() 方法

  1. 语法和作用

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

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

    你可以向同个元素添加多个同类型的事件句柄,如:两个 “click” 事件。

    element.addEventListener(event, function, useCapture);

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

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

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

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

  2. 向元素添加多个句柄

    <!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>
    
  3. 冒泡和捕获

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

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

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

    addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型:

    addEventListener(event, function, useCapture);

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

  4. 移除句柄

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

    element.removeEventListener("mousemove", myFunction);

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值