JavaScript

roydonGuo

发布于 2022-11-02 15:14:00

1.2K0

发布于 2022-11-02 15:14:00

文章被收录于专栏：posts

JavaScript

基础认识

弹出提示对话框：alert(“弹出对话框”)

解释型语言，一行一行解释。

<script>
    alert("弹出对话框")
</script>

认识js

发明人：布兰登·艾奇(Brendan Eich，1961年~)

1995年利用十天完成JS设计网景公司最初命名为LiveScript，后来与Sun合作改名JavaScript

运行在客户端浏览器上。

js的作用：

js的组成：

注释：

js的输入输出：

prompt取值是字符型的

变量

var age;//声明一个名称为age的变量，赋值var age=18;

只声明不赋值值为undefined

数据类型

数据类型可变

简单（基本）数据类型

判断变量是否为数字型的方法:

获取字符串String长度

str.length

转义符

undefined和null

判断变量类型typeof 变量名

<script>
    var str = 'roydon';
    alert(typeof str) //string
</script>

这里的null类型为object，现在不考虑，后面会讲。

数据类型转换

1.转换成string

2.转换成数字型number

隐式转换

NaN：not a number不是一个数字

3.转换成布尔型boolean

Boolean函数。例如：Boolean(‘true’);

数组

var arr = new Array(2，3，4);//==>arr[2,3,4]，若参数为一个，表示数组长度，元素为空

或者，利用字面量创建数组

var arr = ['小明','小红','小强'];

数组遍历：length拿数组长度

数组排序：

上图数组排序得到的结果： 1.arr [ ‘blue’, ‘red’, ‘pink’ ] ; 2.arr1 [1,4, 7, 13 ,77]; ==sort()函数默认只对一位数的数字排序生效，若要排序多位数数字，需要添加function方法。== 解析链接：Array.prototype.sort() 默认sort()排序结果：（位数大于一的数字出现结果不正确)

检测是否为数组：instanceof和Array.isArray()

数组操作：添加或删除

1.添加

push();

2.删除

数组索引方法：

函数

声明和调用：function

第一行function getSum后面括号中的num1和num2是形参。最后两行调用传入的两个参数叫实参。

两种声明方式：

return：

arguments

内置对象，存储传递来的所有实参，保存的形式是数组（伪数组）

作用域：

全局和局部

就近

对象

对象的创建3法

<script>
       //创建对象的3种方法
       //var person={} //创建了一个空对象
       //方法1=============
       var person = {
           pname: 'roydon',
           age: 18,
           gender: 'man',
           getAge: function () {//方法
               console.log(this.age);
           }
       }
       //获取属性的两种方法
       //1.
       console.log(person.pname);
       //2.
       console.log(person['age']);
       person.getAge();//既然是方法，就要带()
       //方法2=============
       var person1 = new Object();
       person1.pname = 'yicheng';
       person1.age = 19;
       person1.gender = 'man';
       person1.getAge = function () {
           console.log(this.age);
       }
       //获取属性两种方法同上
       console.log(person1);
       person1.getAge();
       //方法3==============构造函数法,首字母大写
       function Person3(pname, age) {
           this.pname = pname;
           this.age = age;
           this.getAge = function () {
               console.log(this.age);
           }
       }
       var person3 = new Person3('jack',20);
       person3.getAge();
   </script>

遍历forin：

//遍历
for (const key in person3) {
	if (Object.hasOwnProperty.call(person3, key)) {
		const name = key;//属性名
        console.log(name);
        const element = person3[key];//值
        console.log(element);
     }
}

日期Date对象：

获取时间戳：

为啥时是从1970年开始，自行百度。

时间戳转换成时分秒：

倒计时案例：

<script>
       // 定义一个函数参数为倒计时结束时间
       function countDown(time) {
           var nowTime = +new Date();//当前时间戳（毫秒数
           var inputTime = +new Date(time);//输入时间的时间戳
           var times = (inputTime - nowTime) / 1000;
           var d = parseInt(times / 60 / 60 / 24);//天
           d = d < 10 ? '0' + d : d;//个位数转成01，02，03形式
           var h = parseInt(times / 60 / 60 % 24);//时
           h = h < 10 ? '0' + h : h;
           var m = parseInt(times / 60 % 60);//分
           m = m < 10 ? '0' + m : m;
           var s = parseInt(times % 60);//秒
           s = s < 10 ? '0' + s : s;
           return d + '天' + h + '时' + m + '分' + s + '秒';
       }
       console.log(countDown('2022-7-8 20:00:00'));
       var date = new Date();
       console.log(date);
   </script>

下面是模拟：

字符串

字符串基本操作

Web API

应用程序编程接口

DOM

dom树：

每一个元素可以看作一个对象

获取页面元素

根据ID获取（返回的是一个匹配到ID的DOM Element对象）

document.getElementById();

可以使用console.dir();查看

通过标签名获取（返回的是一个指定标签的集合）

element.getElementByTagName();

通过类名获取

事件基础

例如，点击一个按钮，弹出对话框

<button id="btn">
    点我
</button>

事件分为三部分：事件源、事件类型、事件处理程序。也叫事件三要素

//1.事件源=事件被触发的对象（按钮）
var btn = document.getElementById('btn');
//2.事件类型=如何触发，例如：点击，鼠标悬停，按键按下
//3.事件处理程序=函数赋值
btn.onclick=function(){
	alert('点了我');
}

操作元素

改变元素内容

同时，亦可获取标签，innerText获取内容（去空格和换行），

innerHtml获取元素加内容，（保留空格和换行）

案例：密码框显示，隐藏密码

html

css

DOM核心重点

获取过来的DOM元素是一个对象所以称为文档对象模型

DOM操作： >

创建

document.write
innerHTML
createElement

appendChild
insertBefore

removeChild

改(主要修改DOM元素的属性、内容、表单的值等)

修改元素属性：src、href、title等
修改普通元素内容：innerHTML、innerText
修改元素样式：style、className
修改表单元素：value、type、disabled等

查(获取DOM元素)

DOM提供的API方法：querySelector()、querySelectorAll()。(H5新方法，推荐)
利用节点操作获取元素：父(parentNode)、子(children)、兄弟(previousElementSibling、nextElementSibling)。

属性操作(可自定义属性)

setAttribute()：设置DOM的属性值
getAttribute()：得到DOM的属性值
removeAttribute()移除属性

事件操作

事件高级

1.注册事件（绑定事件）

注册事件两种方法：传统方式、方法监听注册方式

addEventListener()事件监听方式

2.删除事件（解绑事件）

传统解绑方法：

var divs = document.querySelectorAll('div');
    divs[0].onclick = function() {
        alert(11);
        // 1. 传统方式删除事件
        divs[0].onclick = null;
     }

方法监听注册解绑方式：

// 2. removeEventListener 删除事件
    divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
    function fn() {
        alert(22);
        divs[1].removeEventListener('click', fn);
    }

3.DOM事件流

4.事件对象event

// 事件对象
var div = document.querySelector('div');
div.onclick = function(e) {
     console.log(e);
    }
     // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
     // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
     // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
     // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e

常见属性和方法： ie以si，下列方法结合实际记忆

5.阻止事件冒泡

e.stopPropagation(); // stop 停止 Propagation 传播下列代码为例，当点击父盒子中的son盒子时，不阻止事件冒泡，会发生弹出三个提示框(son、father和document)，阻止事件冒泡后，父亲元素不在冒泡弹出框。只弹出son提示框。

<script>
  // 常见事件对象的属性和方法
  // 阻止冒泡  dom 推荐的标准 stopPropagation() 
  var son = document.querySelector('.son');
  son.addEventListener('click', function(e) {
     alert('son');
     e.stopPropagation(); // stop 停止  Propagation 传播
  }, false);
  var father = document.querySelector('.father');
  father.addEventListener('click', function() {
      alert('father');
  }, false);
  document.addEventListener('click', function() {
      alert('document');
  })
</script>

6.事件委托

7.鼠标事件

常用：

e.preventDefault();阻止默认事件；阻止默认右键显示菜单操作；

<script>
    // 1. contextmenu 禁用右键菜单
    document.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    })
    // 2. 禁止选中文字 selectstart
    document.addEventListener('selectstart', function(e) {
        e.preventDefault();
     })
 </script>

鼠标事件对象： MouseEvent —> clientX、pageX、screenX

<script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');
            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');
            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>

8.键盘事件

例如，网站的搜索框一般会设置一个快捷键，当我们点击s键时，利用ASCII码判断按下的键是否为s若是则给搜索框一个焦点。

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            display: block;
            margin: 100px auto;
            width: 300px;
            height: 25px;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <input type="text">
    <script>
        // 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
        // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
        // 搜索框获得焦点： 使用 js 里面的 focus() 方法
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            if (e.keyCode === 83) {
                search.focus();
            }
        })
    </script>
</body>
</html>

BOM

window对象常见事件

1.窗口加载事件

// load 等页面内容全部加载完毕，包含页面dom元素图片 flash css 等等

// DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行加载速度比 load更快一些

2.调整窗口大小事件

定时器

1.`setTimeout()`定时器

<script>
    // 1. setTimeout 
    // 语法规范：  window.setTimeout(调用函数, 延时时间);
    // 1. 这个window在调用的时候可以省略
    // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
    // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
    // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
    // setTimeout(function() {
    //     console.log('时间到了');

    // }, 2000);
    function callback() {
        console.log('爆炸了');
    }
    var timer1 = setTimeout(callback, 3000);
    var timer2 = setTimeout(callback, 5000);
    // setTimeout('callback()', 3000); // 我们不提倡这个写法
</script>

停止setTimeout()定时器

<button>点击停止定时器</button>
<script>
    var btn = document.querySelector('button');
    //先给定时器一个名称，根据名称指定停止
    var timer = setTimeout(function() {
        console.log('爆炸了');
    }, 5000);
    btn.addEventListener('click', function() {
        clearTimeout(timer);
    })
</script>

2.`setInterval()`定时器

<script>
    // 1. setInterval 
    // 语法规范：  window.setInterval(调用函数, 延时时间);
    setInterval(function() {
        console.log('继续输出');
    }, 1000);
    // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
    // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
</script>