webAPI

1.WebAPI

2.什么是API

3.DOM（操作修改节点属性）

3.获取元素(如何在文档树中定位节点)

1.WebAPI

使用js完成一些有实际意义的工作

操作文档（document）:页面上看到的 DOM

操作浏览器 BOM

2.什么是API

Application Interface 应用接口

3.DOM（操作修改节点属性）

让我们可以操作网页内容、页面结构、页面样式

js 眼中每一个标签是一个对象

3.获取元素(如何在文档树中定位节点)

document.querySelector()

document.quer

可以把用户的输入读出来

例子如下

上面是个匿名函数，效果一样。

背景可以一次切换一个效果

4.变更树的结构（操作DOM树结构）

通过html修改某个结点的子孙 element.innerHTML=""

完全按照结点的方式处理：

1.新建一个元素（结点）文档树之外的结点

5.事件驱动（event-driven）

当某事发生时，谁们应该做什么事

发生地震时，我应该去安全的地方

事件源：地

事件：发生地震

处理对象（处理函数）：主要用于图行化界面的编程（网页/App/PC软件）

示例：

按钮（处理对象）事件（点击）事件源（用户）

事件处理函数：把页面背景从白色改成红色

事件驱动的绑定
//1.找到事件处理的对象
var a =document.querySelector('button');
 
//2.定义处理函数
function 处理背景色(){
    //给body 添加css样式：background:red;
    var body =document.querySelector('body');
    body.style='background-color:pink';
 
}
 
function 添加一个Helloworld (){
 
}
//3.将 事件、事件处理对象、事件处理函数  绑定(bind)
//修改 btn 元素的一个属性
//on ：当
//click :点击
//当点击时，调用这个函数
//如果绑定多个处理函数怎么办？
btn.onclick =处理背景色;
//btn.onclick =添加一个Helloworld();  不可以这样写，写了结果只会执行这个，上面的不会执行
 
//下面的就俩个都会执行
btn.addEventListener('click',处理背景色)
btn.addEventListener('click',添加一个Helloworld())
事件驱动的冒泡

从俯视图看

如何阻止时间冒泡

e.stopPropagation();

题外话：

HTML中关联外部CSS

link:css 按tab键

与鼠标回车键绑定，不用点击，按回车就可以

小案例：猜数字游戏


//1.生成一个随机数字
var 随机数 = parseInt(Math.random()*100)
 
//2.为按钮绑定随机事件
//3.给input绑定一个键盘被按下的事件
var 按钮 =document.querySelector('#按钮')
var 结果区 =document.querySelector('#结果区')
var 输入 =document.querySelector('#输入');
function 结果判断(){
    //1.读取用户输入
 
    var 用户输入的数字 =parseInt(输入.value);
    if(isNaN(用户输入的数字)){
        结果区.innerHTML +='请输入数字';
        return;
    }
    输入.value='';
 
    if(用户输入的数字<随机数){
        结果区.innerHTML +='小了
';
 
    }else if(用户输入的数字 >随机数){
        结果区.innerHTML +='大了
';
    }else{
        结果区.innerHTML +='正确
';
    }
}
//然后把他们绑定在一块
输入.onkeypress =function (e){
    if(e.key=='Enter'){
        结果判断();
    }
}
按钮.onclick =结果判断;


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字title>
head>
<body>
    <input type="text" id =输入>
    <button id ="按钮">猜button>
    <div id="结果区">
 
    div>
 
    <script src="script.js">script>
body>
html>

冒泡排序（一秒钟执行一步）


var div = document.querySelector('div');
function 打印数组(array) {
    div.innerHTML = '';
    for (var i in array) {
        var span = document.createElement('span');
        span.style.display = 'inline-block';
        span.style.backgroundColor = 'blue';
        span.style.marginRight = '5px';
        span.style.width = '30px';
        span.style.height = `${30 + array[i] * 30}px`;
        span.textContent = array[i];
        span.style.textAlign = 'center';
        span.style.color = 'white';
        span.style.lineHeight = span.style.height;
        div.appendChild(span);
    }
    //div.innerHTML += `[${array.join(', ')}]
`;
}
 
var array = [9, 5, 2, 7, 3, 6, 8, 4, 1];
 
var i = 0;
var j = 0;
setInterval(function () {
    // 冒泡排序的其中一步（两两比较 + 可能的交换）
    if (j >= array.length - i - 1) {
        j = 0;
        i++;
        if (i >= array.length - 1) {
            return;
        }
    }
    if (array[j] > array[j + 1]) {
        var t = array[j];
        array[j] = array[j + 1];
        array[j + 1] = t;
    }
    j++;
 
    打印数组(array);
}, 1000);  //时间设置为1秒


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡排序title>
head>
<body>
    <div>div>
    <script src="script.js">script>
body>
html>

相关阅读:
C语言 —— 指针
VoLTE端到端业务详解 | 会话管理类
网络优化（二）——梯度下降
dos2unix命令
Linux修改远程登陆端口
谷粒商城高级篇 (十五) --------- 登录与注册
线性回归模型（OLS）1
Spring -Spring之依赖注入源码解析（下）--实践（流程图）
SpringBoot 自动配置@EnableAutoConfiguration
Flask框架【before_first_request和before_request详解、钩子函数、Flask_信号机制】(七)

原文地址：https://blog.csdn.net/wxx200008/article/details/126002475