JS基础

NENEIIII Nov 24, 2022

基础部分

写在哪

行内

<input type="button" value="点我点我" onclick="alert('千古壹号 Hello 方式1')" />

内联

<script type="text/javascript">
            // 在这里写 js 代码
            alert('千古壹号 hello 方式2');
            console.log('qianguyihao hello 方式2');
        </script>

.js文件中

<body>
        <!-- 外链式：引入外部的 js 文件：这个 utils.js 文件与当前的 html 文件，处于同一级目录 -->
        <script src="utils.js"></script>
    </body>

区分大小写

输出

弹窗

<script>
            alert('加载网页时显示');
            var a = prompt("供用户输入用，多用于测试");
            var res = confirm("用户需要点击确认或取消"); //返回true或false
        </script>

输出至网页里

document.write("HTML");

输出至控制台

console.log();

变量

var 变量名;

let 变量名;

常量

const 常量名 = 取值;

代码块{}只用来分组在外部仍可访问内部变量

流程控制语句有if 有switch 有for 有while

面向对象

==首先明确JS中的类型都可以看作是对象==【除基本数据类型（值类型）：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义】

var person = {};

person.name = '王二';
person.age = 35;
person.sex = '男';
person.height = '180';

创建对象

 var obj = new Object();
    obj.sayName = function () {
        console.log('smyhvae');
    };

 //创建对象 obj1
    var obj1 = new Object();
    obj1.test = undefined;

    //创建对象 obj2
    var obj2 = new Object();
    obj2.name = "smyhvae";

    //将整个 obj2 对象，设置为 obj1 的属性
    obj1.test = obj2;

内置对象

除上面创建的自定义对象，还有内置对象和浏览器对象

内置对象	对象说明
Arguments	函数参数集合
Array	数组
Boolean	布尔对象
Math	数学对象
Date	日期时间
Error	异常对象
Function	函数构造器
Number	数值对象
Object	基础对象
RegExp	正则表达式对象
String	字符串对象

常用方法

==注意对字符串的修改都不是原地修改会返回修改值==

indexOf()/lastIndexOf()：获取字符串中指定内容的索引

search()：获取字符串中指定内容的索引

includes()：字符串中是否包含指定的内容

startsWith()：字符串是否以指定的内容开头

endsWith()：字符串是否以指定的内容结尾

这里的 str.charAt(index)和str[index]的效果是一样的

新字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。

新字符串 = str.substring(开始索引, 结束索引);

字符串 = str.substr(开始索引, 截取的长度);

trim()：去除字符串前后的空白。

字符串的方法估计不同语言有通用的反正用到再查

html 方法-用到查

anchor() 创建 a 链接
big()
sub()
sup()
link()
bold()

Date对象

不传参返回当前时间对象

var date1 = new Date();
console.log(date1);
//Fri Nov 25 2022 14:11:11 GMT+0800 (中国标准时间)

传参的情况

举例1：（参数是字符串）

const date11 = new Date('2020/02/17 21:00:00');
console.log(date11); // Mon Feb 17 2020 21:00:00 GMT+0800 (中国标准时间)

const date12 = new Date('2020/04/19'); // 返回的就是四月
console.log(date12); // Sun Apr 19 2020 00:00:00 GMT+0800 (中国标准时间)

const date13 = new Date('2020-05-20');
console.log(date13); // Wed May 20 2020 08:00:00 GMT+0800 (中国标准时间)

const date14 = new Date('Wed Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)');
console.log(date14); // Fri Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)

举例2：（参数是多个数字）

const date21 = new Date(2020, 2, 18); // 注意，第二个参数返回的是三月，不是二月
console.log(date21); // Wed Mar 18 2020 00:00:00 GMT+0800 (中国标准时间)

const date22 = new Date(2020, 3, 18, 22, 59, 58);
console.log(date22); // Sat Apr 18 2020 22:59:58 GMT+0800 (中国标准时间)

const params = [2020, 06, 12, 16, 20, 59];
const date23 = new Date(...params);
console.log(date23); // Sun Jul 12 2020 16:20:59 GMT+0800 (中国标准时间)

举例3：（参数是时间戳）

const date31 = new Date(1591950413388);
console.log(date31); // Fri Jun 12 2020 16:26:53 GMT+0800 (中国标准时间)

// 先把时间对象转换成时间戳，然后把时间戳转换成时间对象
const timestamp = new Date().getTime();
const date32 = new Date(timestamp);
console.log(date32); // Fri Jun 12 2020 16:28:21 GMT+0800 (中国标准时间)

日期格式化（用到自己查）

format():将时间对象转换为指定格式。

参考链接

获取时间戳

// 方式一：获取 Date 对象的时间戳（最常用的写法）
const timestamp1 = +new Date();
console.log(timestamp1); // 打印结果举例：1589448165370

// 方式二：获取 Date 对象的时间戳（较常用的写法）
const timestamp2 = new Date().getTime();
console.log(timestamp2); // 打印结果举例：1589448165370

// 方式三：获取 Date 对象的时间戳
const timestamp3 = new Date().valueOf();
console.log(timestamp3); // 打印结果举例：1589448165370

// 方式4：获取 Date 对象的时间戳
const timestamp4 = new Date() * 1;
console.log(timestamp4); // 打印结果举例：1589448165370

// 方式5：获取 Date 对象的时间戳
const timestamp5 = Number(new Date());
console.log(timestamp5); // 打印结果举例：1589448165370

上面这五种写法都可以获取任意 Date 对象的时间戳，最常见的写法是方式一，其次是方式二。

根据前面所讲的关于「时间戳」的概念，上方代码获取到的时间戳指的是：从 1970年1月1日，0时0分0秒 到现在所花费的总毫秒数。

倒计时写法

<style>
    .countdown{
            width: 1210px;
                margin: 200px auto;
                color: red;
                text-align: center;
                font: 600 30px/30px 'simsun';
        }
</style>    
<div id="cd" class="countdown"></div>
            <!-- 设置倒计时 -->
            <!-- 设置一个定时器，每间隔1毫秒就自动刷新一次div的内容 -->
            <!-- 核心算法：输入的时间戳减去当前的时间戳，就是剩余时间（即倒计时），然后转换成时分秒 -->
            <script>
                var div = document.getElementById("cd");

                var timer = setInterval(() => {
                    countDown('2022/11/25 21:00:00');
                }, 1);

                function countDown(myTime) {
                    var nowTime = new Date();
                    var future = new Date(myTime);
                    var timeSum = future.getTime() - nowTime.getTime(); //获取时间差：发布会时间减去此刻的毫秒值

                    var day = parseInt(timeSum / 1000 / 60 / 60 / 24); // 天
                    var hour = parseInt((timeSum / 1000 / 60 / 60) % 24); // 时
                    var minu = parseInt((timeSum / 1000 / 60) % 60); // 分
                    var sec = parseInt((timeSum / 1000) % 60); // 秒
                    var millsec = parseInt(timeSum % 1000); // 毫秒

                    //细节处理：所有的时间小于10的时候，在前面自动补0，毫秒值要补双0（比如如，把 8 秒改成 08 秒）
                    day = day < 10 ? '0' + day : day; //day小于10吗？如果小于，就补0；如果不小于，就是day本身
                    hour = hour < 10 ? '0' + hour : hour;
                    minu = minu < 10 ? '0' + minu : minu;
                    sec = sec < 10 ? '0' + sec : sec;
                    if (millsec < 10) {
                        millsec = '00' + millsec;
                    } else if (millsec < 100) {
                        millsec = '0' + millsec;
                    }

                    // 兜底处理
                    if (timeSum < 0) {
                        div.innerHTML = '距离下班还有00天00小时00分00秒000毫秒';
                        clearInterval(timer);
                        return;
                    }

                    // 前端要显示的文案
                    div.innerHTML = '距离下班还有' + day + '天' + hour + '小时' + minu + '分' + sec + '秒' + millsec + '毫秒';
                }
            </script>

Moment.js

Moment.js 是一个轻量级的JavaScript时间库，我们可以利用它很方便地进行时间操作，提升开发效率。

函数

定义

function 函数名([形参1,形参2...形参N]){  // 备注：语法中的中括号，表示“可选”
    // 函数体语句
}

const 变量名  = function([形参1,形参2...形参N]){
    语句....
}

调用

// 写法1（最常用）
函数名();

// 写法2
函数名.call();

var obj = {
    a: 'qianguyihao',
    fn2: function() {
        console.log('小奶包包，穿越自由!');
    },
};

obj.fn2(); // 调用函数

立即执行

(function() {
    console.log('我是立即执行函数');
})();

fn() 和 fn 的区别【重要】

fn()：调用函数。调用之后，还获取了函数的返回值。
fn：函数对象。相当于直接获取了整个函数对象。

拷贝

// 语法1
obj2 = Object.assgin(obj2, obj1);

// 语法2
Object.assign(目标对象, 源对象1, 源对象2...);

将 obj1 的值追加到 obj2 中。如果对象里的属性名相同，会被覆盖。

正则表达式

//判断是否为手机号
var phoneStr = "13067890123";

    var phoneReg = /^1[3-9][0-9]{9}$/;

    console.log(phoneReg.test(phoneStr));

    str = str.replace(/^\s*/, ""); //去除开头的空格

    str = str.replace(/\s*$/, ""); //去除结尾的空格

// 是否为电子邮件
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

    var email = "abchello@163.com";

    console.log(emailReg.test(email));

DOM操作

获取元素

document.getElementById("box1");//用这个
document.getElementsByTagName("div")[0];
document.getElementsByClassName("hehe")[0];

操作元素

新增

var para = document.createElement("p");
var node = document.createTextNode("这是新段落");
para.appendChild(node);
var ele = document.getElementById("div1");
ele.appendChild(para);

删除

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

改变HTML

document.write(Date());//直接向HYML输出流写内容 不好用，不能定位到元素里面

document.getElementById(id).innerHTML = "<h1>一段新的html</h1>";

document.getElementById(id).attribute = "新值";

改变CSS

<button type="button" onclick="document.getElementById(id).style.color = 'red'">
    单机这里
</button>

绑定事件

常见的事件如下：

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>

var div1 = document.getElementById("box1");
    //绑定事件的第二种方式
    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
        alert("我是弹出的内容");
    }

<div id="box1" onclick="fn()"></div>

onload&unonload

当页面加载（文本和图片）完毕的时候，触发onload事件。

有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。

定时器

setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）
setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）

jQuery

JS的一个库(框架)，利用==CSS选择器==访问DOM对象，简化DOM操作

引包

<head>
    <script src="jquery.js"></script> <!--本地下载放到相同目录下-->
    <!--利用CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

microsoft提供的CDN

插件

注意引包时要在jq的下面

<script src="jquery-1.11.1.js"></script>
    <!--懒加载的使用。第一步：导包(必须在jquery库的下方）-->
    <script src="jquery.lazyload.js"></script>

语法

$(选择器).action()

$(this).hide() //隐藏当前元素
$("p").hide() //隐藏所有段落
$(".test").hide() //隐藏所有class="test"的元素
$("#test").hide() //隐藏所有id="test"的元素

jQuery选择器

去看之前的CSS选择器章节

常见事件

click(handler) 单击事件。
blur(handler) 失去焦点事件。
mouseenter(handler) 鼠标进入事件。
mouseleave(handler) 鼠标离开事件。
dbclick(handler) 双击事件。
change(handler) 改变事件，如：文本框值改变，下拉列表值改变等。
focus(handler) 获得焦点事件。
keydown(handler) 键盘按下事件

获取|获取内容

text(); 设置或返回所选元素的文本内容

html(); 设置或返回所选元素的内容（包含html标记）

val(); 设置或返回表单元素的值

$("#btn1").click(function(){
    alert("Text:" + $("#text1").text());
});

$("#btn1").click(function(){
    alert("Text:" + $("#text1").html("<b>Hello world!</b>"));
});

遍历

~~自己查~~

常见模板

鼠标悬停弹出下拉菜单

鼠标悬停变色

突出显示

手风琴效果

ES6新增

箭头函数

(参数1, 参数2 ...) => { 函数体 }

写法 1、定义和调用函数：（传统写法）

function fn1(a, b) {
    console.log('haha');
    return a + b;
}

console.log(fn1(1, 2)); //输出结果：3

写法 2、定义和调用函数：（ES6 中的写法）

const fn2 = (a, b) => {
    console.log('haha');
    return a + b;
};

console.log(fn2(1, 2)); //输出结果：3