JavaScript

最新推荐文章于 2023-04-03 17:38:31 发布

萝卜的程序媛日记

最新推荐文章于 2023-04-03 17:38:31 发布

阅读量183

点赞数

分类专栏： JavaWeb 文章标签： java 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/wohehel/article/details/128930724

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不
具备开发操作系统的能力，而是只用来编写控制其他大型应用程序
的“脚本”。
JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心
语法不算很多

标识符是由：字母、美元符号($)、下划线(_)和数字组成，其中数字

不能开头

JavaScript有一些保留字，不能用作标识符：arguments、
break、case、catch、class、const、continue、debugger、
default、delete、do、else、enum、eval、export、
extends、false、finally、for、function、if、implements、
import、in、instanceof、interface、let、new、null、
package、private、protected、public、return、static、
super、switch、this、throw、true、try、typeof、var、
void、while、with、yield。

console.log(num) 打印数据

JavaScript引入到文件

嵌入到HTML文件中

<body>
 <script>
 var age = 20
 </script>
</body>

引入本地独立JS文件

<body>
    <script src="./hello.js">
    </script>
</body>

引入网络来源文件

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

输出方式

console.log(age);//输出到控制台
alert("我是弹出框");
document.write("我是输出到页面");

数据类型

原始类型(基础类型)：数值、字符串、布尔值

合成类型(复合类型)：对象，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器

特殊值：undefined、null

typeof判断基本数据类型

比较运算符

取反运算符

字符串方法

length返回字符串长度

charAt()返回指定位置字符

concat()连接两个字符串

substring()取出子字符串

它的第一个参数表示子字符串的开始位置，第二个位置表示结

束位置（返回结果不含该位置），

如果第一个参数大于第二个参数， substring 方法会自动更换两个参数

的位置

如果参数是负数， substring 方法会自动将负数转为0

substr()取出子字符串

substr 方法的第一个参数是子字符串的开始位置（从0开始计算），

第二个参数是子字符串的长度

如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参

数是负数，将被自动转为0，因此会返回空字符串

indexOf()取出子字符串

trim()去除字符串两端的空格

split()分割字符串

数组方法

for...in遍历数组

Array.isArray()判断数组类型

push()/pop()数组尾端加减元素

shift()/unshift()数组前端加减元素

join()以指定参数作为分隔符，将所有数组成员连接为一个字符串返回

reverse()颠倒排列数组元素

Math对象

Math是 JavaScript 的原生对象，提供各种数学功能。

Math.abs()返回参数值的绝对值

Math.max()，Math.min()回参数之中最大/小的那个值

Math.floor()返回小于参数值的最大整数

Math.ceil()返回大于参数值的最小整数

Math.random() 返回0到1之间的一个伪随机数，可能等于0，但是一定小于1

Data对象

Date 对象是 JavaScript 原生的时间库。它以1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫秒）

Date.now 方法返回当前时间距离时间零点（1970年1月1日 00:00:00 UTC）的毫秒数，相当于 Unix 时间戳乘以1000

Date 对象提供了一系列 get* 方法，用来获取实例对象某个方面的值

实例方法get类

getTime()：返回实例距离1970年1月1日00:00:00的毫秒数

getDate()：返回实例对象对应每个月的几号（从1开始）

getDay()：返回星期几，星期日为0，星期一为1，以此类推

getYear()：返回距离1900的年数

getFullYear()：返回四位的年份

getMonth()：返回月份（0表示1月，11表示12月）

getHours()：返回小时（0-23）

getMilliseconds()：返回毫秒（0-999）

getMinutes()：返回分钟（0-59）

getSeconds()：返回秒（0-59）

DOM

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删内容）
浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言

节点的类型有七种

Document：整个文档树的顶层节点

DocumentType：doctype标签

Element：网页的各种HTML标签

Attribute：网页元素的属性（比如class="right"）

Text：标签之间或标签包含的文本

Comment：注释

DocumentFragment：文档的片段

document对象

document.getElementsByTagName()

document.getElementsByClassName()

document.getElementsByName()

document.getElementById()

document.querySelector()

document.querySelectorAll()

<body>
    <div class="nav">Hello1</div>
    <div class="nav">nav</div>
    <div id="root">嘿嘿嘿</div>
    <p class="text">Hello</p>
    <form name="login"></form>
    <script src="./hello.js"></script>
</body>

var div1 = document.getElementsByTagName("div")[0];
div1.innerHTML = "Hello World";
// console.log(divs);
var text = document.getElementsByClassName("text")[0];
console.log(text);
var login = document.getElementsByName("login")[0];
console.log(login);
var root = document.getElementById("root");
console.log(root);
var nav = document.querySelector(".nav");
console.log(nav);
var navs = document.querySelectorAll(".nav");
console.log(navs);

document.createElement()

document.createTextNode()

document.createAttribute()

<div id="container"></div>
    <script src="./hello.js"></script>

var text = document.createElement("P");
var content = document.createTextNode("我是文本");
var id = document.createAttribute("id");
id.value="root";
text.appendChild(content);
text.setAttributeNode(id);

var container = document.getElementById("container");
container.appendChild(text);

console.log(text);
console.log(content);
console.log(container);

Element对象

Element.id

Element.className

Element.classList

add() ：增加一个 class。

remove() ：移除一个 class。

contains() ：检查当前元素是否包含某个 class。

toggle() ：将某个 class 移入或移出当前元素。

Element.innerHTML

Element.innerText

innerText 和 innerHTML 类似，不同的是 innerText 无法识别元素，会直接渲

染成字符串

    <div class="box" id="root">Hello</div>
    <script src="./hello.js"></script>

var root = document.getElementById("root");
root.id="root2";
root.className="box2";
root.classList.add("mybox");
root.classList.remove("box2");
root.classList.toggle("box2");
var flog = root.classList.contains("mybox");
root.innerHTML="大家好";
console.log(root);
console.log(flog);

var box = document.getElementById("box");
console.log(box.clientWidth);
console.log(box.clientHeight);
//获取屏幕高度
console.log(document.documentElement.clientHeight);
//获取页面的高度
console.log(document.body.clientHeight);

CSS设置操作

var box = document.getElementById("box");
//第一种方式
box.setAttribute("style","width: 200px;height: 200px;border:5px solid red;padding: 10px;margin: 20px;background-color: green;")
//第二种方式
box.style.width="300px";
//第三种方式
box.style.cssText = "width: 200px;height: 200px;border:5px solid red;padding: 10px;margin: 20px;background-color: green;";

事件

事件处理程序

    <button onclick="clickHandle()">按钮</button>
    
    <button id="btn1">按钮1</button>
    
    <button id="btn2">按钮2</button>

    <script src="./hello.js"></script>

//HTML事件，缺点：HTML与JS没有分开
function clickHandle(){
    console.log("点击了按钮");
}

//DOM0事件，优点：HTML与JS分开，缺点：无法同时添加多个事件
var btn1=document.getElementById("btn1");
btn1.onclick = function(){
    console.log("点击了按钮1");
}

//DOM2事件，优点：HTML与JS分开，可以同时添加多个事件
var btn2=document.getElementById("btn2");
btn2.addEventListener("click",function(){
    console.log("点击了按钮2");
})

鼠标事件

这些方法在使用的时候，除了DOM2级事件，都需要添加前缀on

Event事件对象

Event.target属性返回事件当前所在的节点。

Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读。

Event.preventDefault()方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了。

Event.stopPropagation()方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。

键盘事件

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件

var username=document.getElementById("username");
username.onkeyup = function(event){
    console.log("按键盘了");
    console.log(event.target.value);
}

表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件

var resetbtn=document.getElementById("resetbtn");
resetbtn.onclick = function(event){
    myForm.reset();//清空表单
}
var submitbtn=document.getElementById("submitbtn");
submitbtn.onclick = function(event){
    myForm.submit();//提交表单
}

事件代理

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）

var ul = document.querySelector('ul');
ul.addEventListener('click', function (event)
{
  if (event.target.tagName.toLowerCase() ==='li') {
    // some code
 }
});

定时器

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要
由 setTimeout() 和 setInterval() 这两个函数来完成。它们向任务队列添加定
时任务

setTimeout 函数

用来指定某个函数或某段代码，在多少毫秒之后执行。

它返回一个整数，表示定时器的编号，以后可以用来取消这个定时

器。

var timerId = setTimeout(func|code, delay);
var timeID = setTimeout(function(){
    console.log("3秒之后打印");
},3000)
clearTimeout(timeID);//取消定时器

setTimeout 函数接受两个参数，第一个参数 func|code 是将要推迟执行的函数名或者一段代码，第二个参数 delay 是推迟执行的毫秒数

还有一个需要注意的地方，如果回调函数是对象的方法，那么setTimeout 使得方法内部的 this 关键字指向全局环境，而不是定义时所在的那个对象

setInterval 函数

用法与 setTimeout 完全一致，区别仅仅在于 setInterval 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

防抖

对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次

function debounce(fn,delay){
    var timer = null;
    return function(){
        if(timer){
            clearTimeout(timer)
        }
        timer=setTimeout(fn,delay)
    }
}

window.onscroll = debounce(scrollHandle,200);

function scrollHandle(){
    console.log("页面滚动了");
    var scrollTop = document.documentElement.scrollTop;
    console.log(scrollTop);
}
//实现鼠标滚动结束后，0.2秒再显示数据

节流

window.onscroll = throttle(scrollHandle,2000);

function scrollHandle(){
    console.log("页面滚动了");
    var scrollTop = document.documentElement.scrollTop;
    console.log(scrollTop);
}

function throttle(fn,delay){
    var valid = true;
    return function(){
        if(!valid){
            return false;
        }
        valid=false;
        setTimeout(function(){
            fn();
            valid=true;
        },delay)
    }
}
//实现一直滚动时，每两秒输出一次