javascript基础02

已于 2023-04-14 20:41:39 修改
阅读量84 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 开发语言
于 2023-04-14 20:37:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46670673/article/details/130161564
版权

javascript基础02

学习目标

1.掌握js的ECMAScript6的新特性
2.掌握js的常用内置对象
3.掌握DOM编程
4.掌握BOM编程
5.掌握this关键字的含义

一、ES6新特性

1.1 反撇号表达式

es6推出新特性**``** 反撇号表达式，不仅可以描述字符串，还可以通过${对象.key}引入js中的对象内容。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反撇号表达式</title>
    <script>
        let str = 'hello';
        //反撇号可以像''一样描述字符串
        let str2 = `hello`;
        console.log(str);
        console.log(str2);
        let number = 3;
        console.log(`hello${number}${str2}`)
        let zhangSan= {
            id:1,
            name:'张三'
        }
        let arr = [1,2,3]
        console.log(`hello${zhangSan.name}${arr[1]}`)
    </script>
</head>
<body>
    
</body>
</html>

1.2 解构

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值；解构分为：

  • 数组解构
  • 对象解构

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构</title>
    <script>
        //数组解构
        let arr = [1,2,3];
        //将数组内容赋值到a、b、c三个变量中
        let [a,b,c] = arr;
        console.log(a,b,c);
        //对象解构
        let obj = {
            id:1,
            name:'爱丽丝',
            sex:'女'
        }
        //将对象的属性赋值到相同名字的变量中
        let{id,name,sex} = obj;
        console.log(id,name,sex);
    </script>
</head>
<body>
    
</body>
</html>

1.3 对象字面量简化写法

对象字面量在es6中存在这简化写法，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象字面量简写</title>
    <script>
        let id = 1;
        let name = '张三';
        let age = 18;
        let obj = {
            id:id,
            name:name,
            age:age
        }
        //es6可以简写
        let obj2 = {
            id,
            name,
            age,
            eat(){
                console.log('吃的香')
            }
        }
        console.log(obj2)
        obj2.eat();
    </script>
</head>
<body>
    
</body>
</html>

1.4 箭头函数

箭头函数是对函数表达式的简写

js的箭头函数和java中的lambda表达式语法相似，java的lambda表达式借鉴的es6箭头函数语法；语法如下

在这里插入图片描述

当参数是一个的时候，存在如下简写

在这里插入图片描述

当方法体只有一句代码的时候，存在如下简写

在这里插入图片描述

函数的定义分为两种形式：

  • 函数声明
  • 函数表达式

而箭头函数是函数表达式的简写，所以箭头函数的使用场景是

  • 存储在变量中的函数表达式
  • 当作参数使用时
  • 当作对象方法使用时

示例1：函数表达式简写为箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>剪头函数</title>
    <script>
        //函数表达式写法
        let fun1 = function(a,b){
            let res = a+b;
            return res;
        }
        //箭头函数简写
        let fun2 = (a,b)=>{
            let res = a+b;
            return res;
        }
        let res = fun2(1,2);
        console.log(res);

        //函数表达式写法
        let fun3 = function(a){
            console.log(a);
        }
        //箭头函数简写
        let fun4 = a=>console.log(a);

        fun4(3);
    </script>
</head>
<body>
    
</body>
</html>

示例2：回调函数简写为箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数应用场景</title>
    <script>
        //箭头函数在回调函数中应用
        let arr = [1,2,3];
        arr.forEach(value=>console.log(value));
        let arr2 = arr.map(value=>value*10);
        console.log(arr2);
    </script>
</head>
<body>
    
</body>
</html>

示例3：箭头函数用在对象的方法上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数3</title>
    <script>
        //正常写法
        let user = {
            id: 1,
            name: '张三',
            eat: function(food) {
                console.log(`吃的${food}`);
            }
        }

        //箭头函数
        let user2 = {
            id: 1,
            name: '张三',
            eat: food => console.log(`吃的${food}`)
        }
        user2.eat('鸡蛋西红柿');
    </script>
</head>

<body>

</body>

</html>

1.5 小节

  1. 反撇号表达式
  2. 数组和对象的解构
  3. 对象字面量简写
  4. 箭头函数

二、内置对象

常见的内置对象有：

  • Array（已讲）
  • Date
  • String
  • Math
  • JSON

2.1 Date

date的常用方法如下：

  • new Date() 创建对象，获得系统当前时间

  • toLocaleString() 将日期转为本地字符串 年月日 时分秒

  • toLocaleDateString() 将日期转为本地字符串 年月日

  • toLocaleTimeString()将日期转为本地字符串 时分秒

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>date的常用方法</title>
    <script>
        // 获得当前系统时间
        let date = new Date();
        console.log(date);
        // 将日期转为本地字符串 年月日 时分秒 
        console.log(date.toLocaleString())

        // 将日期转为本地字符串 年月日
        console.log(date.toLocaleDateString())

        // 将日期转为本地字符串 年月日 时分秒
        console.log(date.toLocaleTimeString());
    </script>
</head>

<body>

</body>

</html>

2.2 String

String的常用方法如下：

  • length------>字符串的长度
  • charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串
  • indexOf(要找的字符串,从某个位置开始的索引);返回的是这个字符串的索引值,没找到则返回-1
  • lastIndexOf(要找的字符串);从后向前找,但是索引仍然是从左向右的方式,找不到则返回-1
  • replace(“原来的字符串”,“新的字符串”);用来替换字符串的
  • split(“要干掉的字符串”,切割后留下的个数);切割字符串
  • substr(开始的位置,个数);返回的是截取后的新的字符串
  • substring(开始的索引,结束的索引),返回截取后的字符串,不包含结束的索引的字符串
  • toLocaleLowerCase();转小写
  • toLowerCase();转小写
  • toLocaleUpperCase()转大写
  • toUpperCase();转大写
  • trim();干掉字符串两端的空格

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String 常用方法</title>
    <script>
        let str = ' abcdefgc     ';
        // - length------>字符串的长度
        console.log(str.length);
        // - charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串
        console.log(str.charAt(2));
        // - indexOf(要找的字符串,从某个位置开始的索引);返回的是这个字符串的索引值,没找到则返回-1
        console.log(str.indexOf('c'))
        // - lastIndexOf(要找的字符串);从后向前找,但是索引仍然是从左向右的方式,找不到则返回-1
        console.log(str.lastIndexOf('c'));
        // - replace("原来的字符串","新的字符串");用来替换字符串的
        console.log(str.replace('d', 'D'));
        // - split("要干掉的字符串",切割后留下的个数);切割字符串
        console.log(str.split('e'));
        // - substr(开始的位置,个数);返回的是截取后的新的字符串
        console.log(str.substr(0, 3));
        // - substring(开始的索引,结束的索引),返回截取后的字符串,不包含结束的索引的字符串
        console.log(str.substring(0, 3));
        // - toLowerCase();转小写
        console.log(str.toLowerCase());
        // - toUpperCase();转大写
        console.log(str.toUpperCase());
        // - trim();干掉字符串两端的空格
        console.log(str.trim());
    </script>
</head>

<body>

</body>

</html>

2.3 Math

Math的常用方法如下：

  • random：生成0-1之间的随机数（包含0不包括1）
  • ceil：向上取整
  • floor：向下取整
  • max：找最大数
  • min：找最小数
  • pow：幂运算
  • abs：绝对值

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math的常用方法</title>
    <script>
        // 生成0-1之间的随机数（包含0不包括1） 
        console.log(Math.random())
            // ceil：向上取整 
        console.log(Math.ceil(7.1));
        // floor：向下取整 
        console.log(Math.floor(7.9));
        // max：找最大数 
        console.log(Math.max(1, 2, 9, 3));
        // min：找最小数 
        console.log(Math.min(1, 2, 3, -5));
        // pow：幂运算 
        console.log(Math.pow(2, 3));
        // abs：绝对值
        console.log(Math.abs(-10));
    </script>
</head>

<body>

</body>

</html>

2.4 JSON

2.4.1 JSON 数据格式

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。

实际开发网站中，经常由服务器响应json数据，然后由js将json数据渲染到页面。

json数据分为数组和对象两种格式，语法如下：
在这里插入图片描述

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json数据格式</title>
    <script>
        //定义json对象属性名必须是String类型
        let jsonObj = {
            'id': 1,
            'name': '张三',
            'age': 18
        }

        //使用json数据
        console.log(jsonObj.id);
        console.log(jsonObj.name);
        console.log(jsonObj.age);
        //定义json数组
        let jsonStr = [1, 2, 3, 4, 5];
        //使用json
        console.log(jsonStr[0]);


        // 定义复杂json类型
        let arrs = [{
            'id': 1,
            'name': '张三',
            'age': 18
        }, {
            'id': 2,
            'name': '李四',
            'age': 29
        }]

        // 使用json
        for (let i = 0; i < arrs.length; i++) {
            console.log(arrs[i].id);
            console.log(arrs[i].name);
            console.log(arrs[i].age);
        }
    </script>
</head>

<body>

</body>

</html>

2.4.2 JSON 对象常用方法(易忘点)

JSON的常用方法如下：

  • parse() 将json字符串转为js对象或数组
  • stringif()将js对象或数组转为json字符串

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON</title>
    <script>
        //js对象
        let user = {
            id: 1,
            name: '张三',
            age: 21,
            eat: function() {

            }
        }

        //js对象转json对象,如果存在方法直接舍去
        let data = JSON.stringify(user);
        console.log(data);
        console.log(typeof data);

        // json数据转js对象
        let obj = JSON.parse(data);
        console.log(typeof obj);
        console.log(obj.id);
        console.log(obj.name);
        console.log(obj.age);
    </script>
</head>

<body>

</body>

</html>

2.5 小结(默写)

  1. Array常用方法
push()//添加元素到数组的尾部
unshift()//添加元素到数组的头部
pop()//从尾部弹出一个元素
shift()//从头部弹出一个元素
splice()//从某个位置开始删除指定个数的元素
forEach()//遍历数组
join()//数组转字符串
filter()//过滤 参数为回调函数
map()//对元素进行集体操作 参数为回调函数
  1. Date常用方法
toLocalString()//获取字符串形式的时间
toLocalDateString()//获取字符串形式的日期
toLocalTimeString()//获取字符串形式的时分秒
  1. String常用方法
length//注:length不是方法而是一个属性
charAt()//返回某个位置的字符
indexof()//从某个位置开始查询字符的位置
tolastIndexof()//从后向前获取需要查询字符的位置
split()//分割函数，返回字符串数组
replace()//替换函数，只会替换第一个
replaceAll()//替换函数，会替换全部
substr()//从某个位置截取一定长度的字符串
substring()//从某个位置开始再从某个位置结束，截取之间的字符串
toUppercase()//转大写
toLocalUpperCase()//转大写
tolowercase()//转小写
toLocallowercase()//转小写
trim()//删除字符串两端的空格
  1. Math常用方法
Math.ceil()//向上取整
Math.floor()//向下取整
Math.max()//求最大值
Math.min()//求最小值
Math.pow()//求幂
Math.abs()//求绝对值
  1. JSON常用方法
parse()//将json转为对象或数组
stringify()//将对象或数组转为json

三、 DOM

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

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

3.1 获取元素的方式

当网页被加载时，页面文档的所有标签元素都会被加载到document对象中，document对象代表的就是html文档。

通过document获得元素标签对象的方法如下：

  • document.getElementById(id); 根据id获取元素节点

  • document.getElementsByTagName(“标签名字”);

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获得标签元素的几种方式</title>

</head>

<body>
    <div id="adv">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </div>
</body>
<script>
    let adv = document.getElementById('adv');
    console.log(adv);
    let lis = adv.getElementsByTagName('li');
    for (let i = 0; i < lis.length; i++) {
        console.log(lis[i])
    }
</script>

</html>

3.2 设置元素的内容

设置元素的内容有两种方式：

  • 元素对象.innerHTML 设置/获取元素内的所有内容
  • 元素对象.innerText 设置/获取元素内的所有文本

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置/获取元素内容</title>

</head>

<body>
    <div id="logo">
        <h1>胖叔讲Java</h1>
    </div>
</body>
<script>
    let logo = document.getElementById('logo');
    //获得logo内的所有内容包含h1标签
    console.log(logo.innerHTML);
    //获得logo内的文本，不包含标签名字
    console.log(logo.innerText)

    //设置logo内容
    // logo.innerHTML = '<h1>胖叔讲js</h1';
    // 设置logo内容 如果有标签元素会转义成文本    
    logo.innerText = '<h1>胖叔讲js</h1>'
</script>

</html>

3.3 设置元素的属性

设置元素的属性有以下几种方式：

  • 元素对象.属性 ，只能操作标签内置的属性
  • 元素对象.setAttribute（‘属性名字’,属性值） 能够操作自定义属性
  • 元素对象.getAttribute(‘属性名字’) 能够操作自定义属性
  • 元素对象.removeAttribute(‘属性名字’) 能够操作自定义属性

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置元素属性</title>

</head>

<body>
    <a id="mya">链接</a>
</body>
<script>
    let a = document.getElementById('mya');
    //设置属性，只能设置a标签有的属性
    a.href = 'http://www.baidu.com';
    //获取属性
    console.log(a.href);
    //设置自定义属性
    a.setAttribute('active', true);
    console.log(a);
    //获得自定义属性
    console.log(a.getAttribute('active'));
    //也可以获得内置属性
    console.log(a.getAttribute('href'));
    //删除属性
    a.removeAttribute('active')
    console.log(a);
</script>

</html>

3.4 设置元素的样式

设置元素的样式的语法如下：

  • 元素对象.style.css属性 （只能获取行内式样式，操作样式也是通过行内式操作）

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置元素的样式</title>
</head>

<body>
    <div id="adv"></div>
</body>
<script>
    let adv = document.getElementById('adv');
    adv.style.width = '100px';
    adv.style.height = '100px';
    // 注意多个单词用驼峰式书写
    adv.style.backgroundColor = 'red';
</script>

</html>

3.5 JS 事件操作

js事件是指触发某个动作完成一些操作的过程；例如点击按钮弹出一个弹框就用到了点击事件。

js中有很多事件，这里面我们指讲几个常见的事件；常见事件如下：

  • window.onload = function(){} 加载事件，会等浏览器加载完页面再去执行js代码
  • 鼠标事件
    • 点击事件 onclick
    • 移出元素事件 onmousemove
    • 移入元素事件 onmouseout
  • 键盘事件
    • 键盘按下事件
    • 键盘弹起事件

示例1：页面加载事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面加载事件</title>
    <script>
        // 该函数的作用是，页面加载完再去运行js代码，这样即便js写在 div上面也能获取到div元素
        window.onload = function() {
            let adv = document.getElementById('adv');
            console.log(adv);
        }
    </script>
</head>

<body>
    <div id="adv">胖叔讲Java,一路相伴</div>
</body>

</html>

示例2：点击事件与事件的绑定方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击事件与事件的绑定方式</title>
</head>

<body>
    <!-- 第一种方式：在标签上直接引入事件和js代码 -->
    <button onclick="alert('点击1')">点击1</button>
    <!-- 第二种方式：标签和js半分离 -->
    <button onclick="fun2()">点击2</button>
    <script>
        function fun2() {
            alert('点击2')
        }
    </script>
    <!-- 第三种方式：标签和js代码彻底分离 推荐 -->
    <button id="btn">点击3</button>
    <script>
        document.getElementById('btn').onclick = function() {
            alert('点击3')
        }
    </script>
</body>

</html>

示例3：鼠标移入与移出事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标移入移出事件</title>
</head>

<body>
    <div id="adv" style="width:100px;height:100px"></div>
    <script>
        //鼠标移入事件 this在这里表示事件源
        document.getElementById('adv').onmousemove = function() {
            this.style.backgroundColor = 'red';
        }

        //鼠标移出事件 this在这里表示事件源
        document.getElementById('adv').onmouseout = function() {
            this.style.backgroundColor = 'blue';
        }
    </script>
</body>

</html>

示例4：键盘按下与弹起事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘按下与弹起事件</title>
</head>

<body>
    请输入<input id="name" type="text" />
    <script>
        //键盘按下 this代表事件源
        document.getElementById('name').onkeydown = function() {
            this.style.backgroundColor = 'red';
        }

        //键盘弹起
        document.getElementById('name').onkeyup = function() {
            this.style.backgroundColor = 'blue';
        }
    </script>
</body>

</html>

3.6 综合案例(练)

完成表单的多选框的全选/全不选 反选

参考答案：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
    <script>
        window.onload = function() {
            document.getElementById("chooseAll").onclick = function() {
                let arr = document.getElementsByName("hobby")
                for (let i = 0; i < arr.length; i++) {
                    arr[i].checked = this.checked
                }
            }
            document.getElementById("btn").onclick = function() {
                let arr = document.getElementsByName("hobby")
                for (let i = 0; i < arr.length; i++) {
                    arr[i].checked = !arr[i].checked
                }
            }
        }
    </script>
</head>

<body>
    全选/全不选<input type="checkbox" id="chooseAll">
    <button id="btn">反选</button> 爱好: 唱
    <input type="checkbox" name="hobby"> 跳
    <input type="checkbox" name="hobby"> rap
    <input type="checkbox" name="hobby"> 篮球
    <input type="checkbox" name="hobby">

</body>

</html>

3.7 小结

  1. 获取元素
  2. 设置元素的内容、属性、样式
  3. js事件处理

四、BOM

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

4.1 对话框

之前已经学习过了alert(),prompt()弹框，其实还有一个confirm()弹框，这三个弹框都所属window对象；

  • alert 弹框
  • prompt 输入弹框
  • confrim 确认弹框

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹框</title>
    <script>
        // 普通提示弹框 window可以省略
        window.alert('弹框');
        // 提示用户输入弹框
        let num = window.prompt('请输入一个整数');
        console.log(num);
        let tag = window.confirm('你确认删除吗？');
        if (tag) {
            console.log('删除');
        }
    </script>
</head>

<body>

</body>

</html>

4.2 定时器

定时器分为两种一种是循环执行定时器，一种是一次性定时器，如下所示：

  • setInterval() 循环执行定时器
  • setTimeout() 一次性定时器

示例1：动态显示时间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <span id="time"></span>
    <button id="btn">停止</button>
    <script>
        //初始化时间
        let time = document.getElementById('time');
        time.innerHTML = new Date().toLocaleString();
        //编写定时器,每1s更新时间,返回定时器id
        let timeId = window.setInterval(go, 1000);
        //定时调用的方法
        function go() {
            time.innerHTML = new Date().toLocaleString();
        }
        // 通过id停止定时器运行
        document.getElementById('btn').onclick = function() {
            window.clearInterval(timeId);
        }
    </script>
</body>

</html>

示例2：一次性定时器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器2</title>
</head>

<body>
    <h1 id="title">胖叔讲Java</h1>
    <script>
        let h1 = document.getElementById('title');
        window.setTimeout(() => {
            h1.innerHTML = "hello"
        }, 1000)
        window.setTimeout(() => {
            h1.innerHTML = "胖叔讲Java"
        }, 2000)
    </script>
</body>

</html>

4.3 location

location对象是window对象下的一个属性，使用的时候可以省略window对象,location可以获取或者设置浏览器地址栏的URL

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
	<button id="btn">百度</button>
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			//查看访问的ip以及端口号
			console.log(location.host);
			//1.重定向
			//location.href="http://www.baidu.com";
			//2.刷新
			//location.reload();
		}
	</script>
</body>
</html>

4.4 history

history对象封装浏览的浏览记录，可以实现浏览器的返回功能。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history对象</title>
</head>
<body>
	<a href="test.html">跳转</a>
</body>
</html>

test.html如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<button id="btn">回退</button>
	<script type="text/javascript">
		document.getElementById("btn").onclick = function(){
			history.back();
		}
	</script>
</body>
</html>

4.5 小结

  1. 对话框

  2. 定时器

  3. location 对象

  4. history 对象

五、this关键字指向(难点)

this关键在不同场景对应的功能也不同，具体指向如下所示：

调用方式指向
普通函数调用window
构造函数调用实例对象
对象方法调用该方法所属对象
事件绑定方法绑定事件对象
定时器函数window
箭头函数this的值基于函数周围的上下文, 换句话说,this的值和函数外面的this的值是一样的.

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this的指向</title>
   
</head>
<body>
    <button id="btn">点击</button>
    <script>
        //普通函数this指向window
        function fun1(){
            console.log(this);
        }
        fun1();
        function Person(id,name,sex){
            this.id=id;
            this.name=name;
            this.sex=sex;
            this.eat=function(){
                //构造函数this指向当前实例
                console.log(this);
            }
        }
        let xiaoHong = new Person(1,'小红','女');
        xiaoHong.eat();
        // document.getElementById("btn").onclick = function(){
        //     //点击事件指向事件源
        //     console.log(this);
        // }
        // window.setInterval(function(){
        //     //定时器this指向window
        //     console.log(this);
        // },1000);
        document.getElementById("btn").onclick = function(){
            //箭头函数this指向上下文
            window.setInterval(()=>{
                console.log(this);
                console.log('点击');
            },1000);
        }

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

六、总结

  1. es6新特性
  2. 内置对象
  3. DOM
  4. BOM
  5. this关键字指向
龙龙打代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsjavascript基础教程.zip
05-09
javascript基础 javascript游戏开发之贪吃蛇项目 javascript高级 nodejs开发 nosql数据之Mongodb 【javascript基础】 01-javascript的概述.md 02-字面量和变量.md 03-数据类型和typeof操作符.md 04-运算符.md 05-...
JavaScript 基础 02 运算符
qq_48235154的博客
12-29 162
快速学习掌握JavaScript 基础之运算符
JavaScript 基础入门
YUELEI118的博客
04-26 2151
视频 学习笔记 JavaScript JavaScript是一门脚本语言 脚本语言和非脚本语言的区别： 程序的目标文件可以用记事本打开的就是脚本语言，JAVA的目标程序是Class文件，用记事本打不开 包含三大块 DOM编程： DOM是指对HTML中的节点进行操作。例如：div span .class #id 对网页的内容进行增删改的过程 BOM编程 对浏览器的操作，例如：后退，刷新，地址栏等 ECMAScript JavaScript的核心语法 总结：DOM和BOM的关系
Web06--JavaScript基础02
憨憨浩浩的博客
01-23 1024
Web06--JavaScript基础02，包括JavaScript中的流程控制、函数的定义、JavaScript常见内置对象的使用。
Javascript基础思维导图02
m0_64526818的博客
12-06 660
JavaScript基础02【强制类型转换(String Number Boolean) 其它进制数】
upward
07-05 1423
课时11：JS基础_强制类型转换-String 1、强制类型转换概念 2、 将其他的数据类型转换为String 2.1、调用变量的toString()方法 2.2、调用String()函数 课时12：JS基础_强制类型转换-Number 1、转换方式1：使用Number()函数 2、转换方式2：parseInt()、parseFloat() 课时13：JS基础_其他进制的数字 课时14：JS基础_转换为Boolean
JavaScript基础第02天笔记1
08-03
1.1 运算符的分类 1.2 算数运算符 1.3 递增和递减运算符 1.4 比较运算符 1.5 逻辑运算符 1.6 赋值运算符 1.7 运算符优先级 2.1 流
yhyyhy#javascript#02-CSS样式表基础1
07-25
外联式的第二种方式是利用@import：功能多样性不同：link 标签功能更多，可以加载 css、定义 rss、rel 等属性，@import 只能加载 CSS
JavaScript基础第02天作业.md
05-24
JavaScript基础第02天作业.md
TypeScript中的函数类型注解：精确定义行为与意图
逐星的博客
05-11 374
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
使用 js 类封装项目中音频播放功能的工具方法utils
qq_40868156的博客
05-07 218
封装音频播放功能的工具方法，js，es6，前端，工程化
ts函数？
FENGZXCjjjjj的博客
05-11 230
只要参数类型是匹配的，那么就认为它是有效的函数类型，而不在乎参数名是否正确。第二部分是返回值类型。对于返回值，我们在函数和返回值类型之前使用( =>)符号，使之清晰明了。如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。函数的类型只是由参数类型和返回值组成的。函数中使用的捕获变量不会体现在类型里。实际上，这些变量是函数的隐藏状态并不是组成API的一部分。
vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3
最新发布
口袋的天空的博客
05-12 1016
vue3,elementui-plus,pinia
Vue3基础笔记（4）组件
前端与统计学爱好者，盈握之璧，不必采于昆仑之山
05-07 635
主界面名为app.vue，如果想自定义一个组件，需要在components目录下面创建一个名为.vue后缀的组件，如果想在主界面显示，需要遵循如下步骤：（此处组件名为test.vue）上文中提到的即为局部注册方式，只能在当前组件中引用目标组件，接下来分享全局的注册方式。组件最大的优势就是可复用性，我们一般会将Vue组件定义在一个单独的.vue文件中，这被叫做单文件组件，检查SFC。组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的，解决方案是props。
vue3点击复制粘贴
qq_44871531的博客
05-07 252
【代码】vue3点击复制粘贴。
自定义el-select下拉菜单的内容以及数据回显的内容
qq_59625204的博客
05-10 187
但是此时虽然实现了自定义内容但v-model绑定的值也回显了，所以此时我们要对默认的数据回显处理一下，在style标签中设置如下代码。这里我设置了ref为seriesBorderTypeRef,在change事件中通过以下代码就可实现数据回显部分。下拉选项的自定义内容好实现，因为他有默认插槽，所以直接在el-option标签里面写自定义内容就可以实现。.现在完美实现了需求，最后不要忘记清除添加的style样式哦。关键上方选中的数据回显应该怎么做。
TypeScript — 泛型
一只想躺平却不敢躺平的小菜鸟
05-09 149
TypeScript —— 泛型
vue3 element-plus表单form验证规则设置的require:true无效
qq_33225414的博客
05-08 226
【代码】vue3 element-plus表单form验证规则设置的require:true无效。
利用vite.config.js构建vue2项目的问题点
前端，请指教
05-07 485
【代码】利用vite.config.js构建vue2项目的问题点。
JavaScript基础
06-09
以下是JavaScript的基础知识点： 1. 数据类型：JavaScript有七种数据类型，分别是undefined、null、布尔值、数字、字符串、对象和Symbol。 2. 变量和常量：使用var、let、const等关键字声明变量和常量。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值