当前位置: 首页 > news >正文

【Javascript Day13、14、15、16】

html的DOM操作


// JS 是为了让页面实现动态网页效果
        //    动态和静态区分取决于JS的和页面标签的数据交互
        //      动态网页:有数据交互
        //      静态网页:无数据交互

        // JS 和 元素的关联操作对象 DOM
        //      整个HTML页面的整体代码叫做 DOM文档
        //      每个标签阶段叫做DOM对象|DOM元素|DOM节点

        // JS 查询、修改、删除、更新 DOM元素的方式实现页面数据交互效果
        document.write("<h1>DOM元素添加操作</h1>")
        //      document : DOM文档 => 整个页面代码
        console.log(document);
        
        // 元素查询,必须先保证元素存在 => dom查询必须晚于DOM的渲染
        console.log( window.onload );
        window.onload = function(){
            console.log("HTML页面渲染完成");
            
            // 1. 基于标签ID查询元素 => 从上向下查询第一个符合规则的DOM元素
            var h1Dom = document.getElementById("a");
            console.log(h1Dom);
            // DOM对象.innerHTML 通过js = 赋值运算符,完成标签内容的填充
            h1Dom.innerHTML = new Date().toLocaleString();
        }


html的DOM查询方法

    window.onload = function(){
        // 1. 基于标签ID查询元素 => 从上向下查询第一个符合规则的DOM元素
        var h1Dom = document.getElementById("a");
    
        // 2. 基于标签名称查询元素集合 
        //          => 返回的是一个类似数组结构但不能使用数组方法的类数组数据
        var liList = document.getElementsByTagName("li");
        console.log(liList);

        // 3. 基于class样式查询元素集合
        var tipList = document.getElementsByClassName("tip");
        console.log( tipList );
        
        // 基于el查询元素
        //     el|selecter:element select css选择器
        // 4. document.querySelector => 从上而下查询第一个符合选择器规则元素,返回一个元素
        // 5. document.querySelectorAll => 查询所有符合规则的元素,返回一个集合
        var aDom = document.querySelector("#a");
        console.log(aDom);
        var tipDom = document.querySelector(".tip");
        console.log(tipDom);
        var tipDoms = document.querySelectorAll(".tip");
        console.log(tipDoms);
        
        var ulTipDoms = document.querySelectorAll("ul .tip");
        console.log(ulTipDoms);
        
        var ulDom = document.querySelector("#b");
        console.log(ulDom);
        // 从ulDom元素内部 查找class=tip的所有元素
        var ulTipDoms2 = ulDom.querySelectorAll(".tip")
        console.log(ulTipDoms2);
        
        console.log( document ); // 文档类型标识,html-DOM对象
        // 6. 快速获取HTML
        console.log( document.documentElement ); // html-DOM对象
        // 7. 快速获取body
        console.log( document.body ); // body-DOM对象
        // 8. 快速获取head
        console.log( document.head ); // head-DOM对象
    }

元素事件


 function showTip(){
            alert("111")
        }

        window.onload = function(){
            // 步骤1:获取DOM对象
            var btnDom1 = document.querySelector("#btn1");
            // 步骤2:通过对象属性 onclick 取值方法完成事件绑定
            btnDom1.onclick = function(){
                alert("2222")
            }
            // console.log(btnDom1);
            console.dir(btnDom1); // 输出对象格式

            var liDoms = document.querySelectorAll("li");
            for (var i = 0; i < liDoms.length; i++) {
                // console.log( liDoms[i] );
                liDoms[i].onclick = function(){
                    alert("li提示")
                }
            }
        }


        // 完整事件文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Element#%E4%BA%8B%E4%BB%B6


元素的内容控制

<script>
        // innerText 属性用于获取或覆盖标签内容
        //      区别
        //          取值:去除换行,首尾空格,去除标签和标签属性,只保留文本,文本之间的空格只保留一个
        //          赋值:如果字符串符合标签格式,覆盖时不会进行标签解析
        //               会将\n转换为<br>标签
        function editTextContent(){
            var textDom = document.querySelector("#text1")
            var oldText1 = textDom.innerText;
            console.log(oldText1);
            
            // textDom.innerText = '<h3 style="color:red;">标签规则定义的字符串</h3>';
            textDom.innerText = 'aaaa\nbbbb\nccccc';
        }
    </script>

    <hr>
    <div id="content">
        html3的       原始内容
        <span style="color: red;">标签</span>
    </div>
    <input type="button" value="textContent操作" οnclick="editContent()">
    <script>
        // textContent 属性用于获取或覆盖标签内容
        //     特性等同于 innerText 的
        //     和innerText区别
        //          取值:不会删除换行,和空格
        //          赋值:不会将\n转换为<br>
        function editContent(){
            var contentDom = document.querySelector("#content");
            console.log( contentDom.textContent );
            
            contentDom.textContent = 'aaaa\nbbbb\nccccc';
        }
    </script>

元素的属性操作

// 标签的自定义属性,被存放在 DOM对象的 attributes 属性对象上
        //      attributes 存储的自定义属性 以属性名作为对象key,value取值是一个对象提供value记录属性值

        // attributes 属性在DOM对象上存在两个专用方法
        //      DOM对象.getAttribute("自定义属性名") => 获取自定义属性对应的值
        //      DOM对象.setAttribute("自定义属性名","属性值")

        function getDomAttr(){
            var pDom = document.querySelector("#pDom");
            console.dir(pDom)
            // console.log( pDom.username );
            // console.log( pDom.attributes.username.value );
            var v = pDom.getAttribute("username");
            console.log(v);
            
            
        }
        function setDomAttr(){
            var pDom = document.querySelector("#pDom");
            console.log(1111);
            // pDom.username = "李四";
            // pDom.attributes.username.value = "李四"
            pDom.setAttribute("username","李四")
        }


元素样式操作


function setStyle(){
            var pDom = document.querySelector("#pDom");

            // JS获取的DOM对象,存在一个行内样式的记录属性 style
            //      dom对象.style.样式名   => 取样式
            //      dom对象.style.样式名="样式有效值"   => 设置样式
            
            console.log(pDom.style);
            
            console.log( pDom.style.color );
            // pDom.style.color = "blue";
            // pDom.style.color = "rgb(0,255,0)";
            // pDom.style.color = "rgba()";
            // pDom.style.color = "#00FF00";
            pDom.style.color = "#FF000099";

            console.log( pDom.style.border );
            // pDom.style.border = "2px solid red";
            // pDom.style.border-color = "red"; // 报错
            // pDom.style.borderColor = "red"; // 正确
            pDom.style["border-color"] = "red"; // 正确

            // 修改后的样式依然需要遵受样式优先级
        }


// class 是所有代码系统的关键字 => 类
        // class 在JS中是关键字

        function editDomClass(){
            var pDom = document.querySelector("#pDom");
            // 因为class是关键字,所有 元素的类样式,没有使用class作为属性名
            console.log( pDom.class );
            // 标签的类样式,使用 className 作为DOM属性名
            console.log( pDom.className ); // 取值
            
            // className 赋值是和 标签定义class属性的规则一致
            //      类样式名只有在样式代码中定义,才会存在样式
            //      多个类样式直接以 空格 隔开
            // pDom.className = "border"; // 完全覆盖

            // 方法1 :以字符分割数组操作
            // var str = pDom.className;
            // var arr = str.split(" ");
            // console.log(arr);
            // arr.push("border");
            // pDom.className = arr.join(" ");

            // 方式2 : 字符串操作
            // pDom.className = pDom.className + " border";

            // 方法3 : h5辅助属性 classList
            console.log( pDom.classist );

            // pDom.classList.add("border"); // 添加新样式
            // pDom.classList.remove("fc"); // 删除已有样式
            pDom.classList.toggle("fc"); // 样式切换,当操作的样式存在则删除,不存在则添加
        }


标签的dataset数据


<!-- 
        DOM dataset 数据 :提供一种简单的自定义属性的赋值和取值操作
            1. 在标签上以 data-自定义属性名 = "属性值" 的方式记录数据
            2. 通过DOM对象的 dataset 直接调用 自定义属性名即可
    -->
    <p data-chw="张三" id="p1">dataset数据</p>
    <input type="button" value="获取数据" οnclick="getDataSet1()">
    <script>
        function getDataSet1(){
            var pDom1 = document.querySelector("#p1");
            console.log( pDom1.attributes['data-chw'].value );
            console.log( pDom1.getAttribute("data-chw") );

            console.dir( pDom1 );
            console.log( pDom1.dataset );

            console.log( pDom1.dataset.chw );

            
        }

    </script>

页面组成

 <!-- body 定义在 html 内部,所以 body是html子节点,html是body的父节点 -->
    <!-- head body 兄弟节点 -->


    <div class="ad">
        <div class="content">
            <img src="./img/831e0481607ea2a3.png" alt="" srcset="">
            <input type="button" value="关闭" id="closeBtn">
        </div>
    </div>

    <script>
        var closeBtn = document.querySelector("#closeBtn");
        closeBtn.onclick = function(){
            console.log( this.parentNode );
            console.log( this.parentNode.parentNode );
            this.parentNode.parentNode.style.display = "none";
        }

    </script>

    <hr>
    <ul id="abc">
        <li>元素1</li>
        <li>元素2</li>
        <li>元素3</li>
        <li>元素4</li>
        <li>元素5</li>
    </ul>
    <input type="button" value="获取子节点" οnclick="printChildEle()">
    <script>
        function printChildEle(){
            var lis = document.querySelectorAll("#abc li");
            var ulDom = document.querySelector("#abc");
            console.log( ulDom.childNodes );
            console.log( ulDom.children );
        }
    </script>


节点的创建和添加


<input type="button" value="创建DIV" οnclick="createDom()">
    
    <div id="box">
        
    </div>

    <script>
        // document.createElement(标签名称) 基于标签名称创建DOM节点
        // 任意的DOM元素.appendChild(DOM对象) 向指定的元素内部添加子DOM节点(追加)
        function createDom(){
            var divDom1 = document.createElement("div");
            console.log(divDom1);
            divDom1.innerHTML = "内容:" + Math.random();
            divDom1.classList.add("fs");
            divDom1.style.color = "red";
            console.log(divDom1);

            var boxDom = document.querySelector("#box");
            // innerHTML需要字符串作为值,但DOM是对象,会被转换为 [object HTML标签名Element]
            // boxDom.innerHTML = divDom1;
            boxDom.appendChild( divDom1 )
        }
    </script>

    <hr>

    <div class="singBox">
        <p>asdasdasdads</p>
        <!-- <div class="sing">
            <img src="https://imgessl.kugou.com/custom/150/20201207/20201207134716994336.jpg" alt="" srcset="">
            <div class="info">
                <p>乡村之旅:安静惬意·与自然同在</p>
                <p>介绍</p>
                <p>作者</p>
            </div>
        </div> -->
    </div>

    <script src="./js/singData.js"></script>
    <script>
        console.log(list);
        function initSingDom(){
            var box = document.querySelector(".singBox");
            box.innerHTML = ""; // 清空旧数据

            for (var i = 0; i < list.length; i++) {
                // console.log(list[i]);
                var imgDom = document.createElement("img");
                imgDom.src = list[i].pic;
                // console.log(imgDom);
                
                var titleP = document.createElement("p");
                titleP.innerHTML = list[i].title;
                // console.log(titleP);
                
                var infoP = document.createElement("p");
                infoP.innerHTML = list[i].info;
                // console.log(infoP);
                
                var peP = document.createElement("p");
                peP.innerHTML = list[i].pe;
                // console.log(peP);
                
                var divInfoBox = document.createElement("div");
                divInfoBox.classList.add("info");
                divInfoBox.appendChild(titleP);
                divInfoBox.appendChild(infoP);
                divInfoBox.appendChild(peP);
                // console.log(divInfoBox);
                
                var singBox = document.createElement("div");
                singBox.classList.add("sing");
                singBox.appendChild(imgDom);
                singBox.appendChild(divInfoBox);
                // console.log(singBox);
                
                box.appendChild(singBox);
            }
        }
        initSingDom()
    </script>


节点的操作方法

<input type="button" value="添加元素" οnclick="appendChildDom()">
    <input type="button" value="插入元素" οnclick="insertChildDom()">
    <input type="button" value="删除元素" οnclick="removeChildDom()">


    <div class="box" id="box">
        <h5>默认第一个元素</h5>
        <h5 id="a">默认第二个元素</h5>
    </div>

    <script>
        var boxDom = document.querySelector("#box");

        function appendChildDom(){
            // 元素创建
            var h5Dom = document.createElement("h5");
            h5Dom.innerHTML = "appendChild标签内容";
            // 在父元素的末尾追加新元素
            boxDom.appendChild(h5Dom);
        }

        function insertChildDom(){
            var h5Dom = document.createElement("h5");
            h5Dom.innerHTML = "insertBefore标签内容" + Math.random() ;
            // 元素DOM.insertBefore() 在父元素内部,指定已存在的子元素前面进行新元素的插入
            // boxDom.insertBefore(h5Dom, boxDom.children[1] )
            boxDom.insertBefore(h5Dom, boxDom.children[0] );
        }

        function removeChildDom(){
            // boxDom.removeChild( boxDom.children[1] )
            var h5Dom = document.querySelector("#a");
            boxDom.removeChild( h5Dom )
        }
    </script>
    
    <hr>
    <!-- https://element.eleme.cn/#/zh-CN/component/transfer
        穿梭框 
    -->
    <div class="tr">
        <div class="box" id="box1">
            <p>元素1</p>
            <p>元素2</p>
            <p>元素3</p>
        </div>
        <div>
            <input type="button" value=">" οnclick="moveChild()">
        </div>
        <div class="box" id="box2"></div>
    </div>
    <script>
        var box1 = document.querySelector("#box1");
        var box2 = document.querySelector("#box2")

        function moveChild(){
            // 元素的唯一性
            box2.appendChild( box1.children[1] )
        }
    </script>


元素事件注册

<input type="button" value="按钮1" οnclick="showTip1()" οnclick="showTip2()">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
    <script>
        // 传统事件注册 => DOM对象的 事件属性的赋值操作
        //          + 同类型事件只能注册一次,HTML标签的后续注册不生效,JS的后续的注册属于覆盖操作
        function showTip1(){
            alert(1)
        }
        function showTip2(){
            alert(11)
        }

        var btn2 = document.querySelector("#btn2");
        // console.dir(btn2)
        btn2.onclick = function(){
            alert(2)
        }
        btn2.onclick = function(){
            alert(22)
        }


        // 事件监听 => 独立于DOM属性之外的事件控制
        //            事件监听的注册不是DOM对象的事件属性赋值
        //            事件监听在同事件类型上,可以完成多方法的绑定 => 方法按照绑定先后触发
        var btn3 = document.querySelector("#btn3");
        // dom对象.addEventListener("事件名",执行方法)
        //      事件名 是不包含on
        btn3.addEventListener( "click", function(){
            alert(3)
        } );
        btn3.addEventListener( "click", function(){
            alert(33)
        } );
        btn3.addEventListener( "click", function(){
            alert(333)
        } );

        // 浏览器在元素选项卡中,提供两个页面 事件监听 属性
        //      事件监听:包含当前元素的所有事件
        //      属性:包含当前元素的所有属性
        // console.log(btn3);
        

    </script>

相关文章:

【Javascript Day13、14、15、16】

html的DOM操作 // JS 是为了让页面实现动态网页效果 // 动态和静态区分取决于JS的和页面标签的数据交互 // 动态网页&#xff1a;有数据交互 // 静态网页&#xff1a;无数据交互 // JS 和 元素的关联操作对象 DOM // 整个HT…...

linux 板子的wifi模块连上路由器后,用udhcpc给板子wifi分配ip,udhcpc获取到ip,但没有写入wlan0网卡上

linux 板子的wifi模块连上路由器后&#xff0c;用udhcpc给板子wifi分配ip&#xff0c;udhcpc获取到ip,但没有写入wlan0网卡上 这里的问题是 /usr/share/udhcpc/default.script脚本有问题 用下面正确脚本&#xff0c;即可写进去 #!/bin/sh# udhcpc script for busybox # Copyr…...

openGauss 3.0 数据库在线实训课程13: 学习逻辑结构:表管理1

前提 我正在参加21天养成好习惯| 第二届openGauss每日一练活动 课程详见&#xff1a;openGauss 3.0.0数据库在线实训课程 学习目标 学习openGauss表的创建、搜索路径和访问方法等 课程作业 1.创建一个表&#xff08;默认&#xff0c;不指定模式&#xff09;&#xff0c;查…...

网络编程-

文章目录 网络编程套接字UDP/TCP的api使用 网络编程套接字 socket&#xff0c;是操作系统给应用程序&#xff08;传输层给应用层&#xff09;提供的api&#xff0c;Java也对这个api进行了封装。 socket提供了两组不同的api&#xff0c;UDP有一套&#xff0c;TCP有一套&#x…...

基于单片机的常规肺活量SVC简单计算

常规肺活量 SVC&#xff08;Slow Vital Capacity&#xff09;是指尽力吸气后缓慢而又完全呼出的最大气量。 成年男性的肺活量通常在 3500-4000ml 之间&#xff0c;成年女性的肺活量通常在 2500-3000ml 之间。 单片机一般通过外接流量传感器&#xff0c;使用ADC高速采集的方式…...

【PostgreSQL】PG在windows下的安装

一、准备 通过官网下载安装文件&#xff0c;官方下载路径如下&#xff1a; https://www.postgresql.org/download/windows/ 二、安装 双击postgresql-17.3-1-windows-x64.exe文件&#xff0c;启动安装&#xff0c;进入安装步骤&#xff0c;点击Next 选择PG安装路径&#xff…...

电动汽车电池监测平台系统设计(论文+源码+图纸)

1总体设计 本次基于单片机的电池监测平台系统设计&#xff0c;其整个系统架构如图2.1所示&#xff0c;其采用STC89C52单片机作为控制器&#xff0c;结合ACS712电流传感器、TLC1543模数转换器、LCD液晶、DS18B20温度传感器构成整个系统&#xff0c;在功能上可以实现电压、电流、…...

基于和声搜索(Harmony Search, HS)的多中心点选址优化算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于和声搜索(Harmony Search, HS)的多中心点选址优化算法matlab仿真。可以设置多个不同的中心点。 2.测试软件版本以及运行结果展示 matlab2022a/matlab2024b版…...

单链表的概念,结构和优缺点

1. 概念 链表是一种物理存储结构上非连续&#xff0c;非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 2. 单链表的结构 单链表是由一系列节点组成的线性结构&#xff0c;每个结点包含两个域。&#xff1a;数据域和指针域。 数据域用来…...

SpringBoot+数据可视化的奶茶点单购物平台(程序+论文+讲解+安装+调试+售后)

感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;我会一一回复&#xff0c;希望帮助更多的人。 系统介绍 本奶茶点单购物平台搭建在 Spring Boot 框架之上&#xff0c;充分利用其强大的依赖管理机…...

深入理解 Vue3 中 ref 与 reactive 的区别及应用

深入理解 Vue3 中 ref 与 reactive 的区别及应用 在 Vue3 的开发世界里&#xff0c;响应式编程是其核心特性之一&#xff0c;而ref与reactive作为实现响应式的关键 API&#xff0c;理解它们的区别和适用场景对于开发者来说至关重要。本文将带你深入剖析这两个 API&#xff0c;…...

TDengine 客户端连接工具 taos-Cli

简介工具获取运行命令行参数 基础参数高级参数 数据导出/导入 数据导出数据导入 执行 SQL 脚本使用小技巧 TAB 键自动补全设置字符列显示宽度其它 错误代码表 简介 TDengine 命令行工具&#xff08;以下简称 TDengine CLI&#xff09;是用户操作 TDengine 实例并与之交互最简…...

Linux(ubuntu)下载ollama速度慢解决办法

国内安装Ollama都很慢&#xff0c;因为一直卡在下载中&#xff0c;直接通过官网的链接地址下载方法&#xff1a; curl -fsSL https://ollama.com/install.sh | sh速度大概是10min下载1%&#xff0c;完全不能接受啊&#xff01; 其中很好的一个加速方式是通过使用github文件加速…...

Mac安装JD-GUI

Mac安装反编译工具步骤如下&#xff1a; 打开官网https://java-decompiler.github.io/ 选择下载mac的安装包解压下载好的压缩包&#xff0c;点击JD-GUI安装 有可能会遇到如下错误。请先检查是否安装JDK&#xff0c;通过java -version命令查看是否是1.8版本的jdk如果jdk没问题&…...

Jenkins 配置 Git Parameter 四

Jenkins 配置 Git Parameter 四 一、开启 项目参数设置 勾选 This project is parameterised 二、添加 Git Parameter 如果此处不显示 Git Parameter 说明 Jenkins 还没有安装 Git Parameter plugin 插件&#xff0c;请先安装插件 Jenkins 安装插件 三、设置基本参数 点击…...

【AI】Docker中快速部署Ollama并安装DeepSeek-R1模型: 一步步指南

【AI】Docker中快速部署Ollama并安装DeepSeek-R1模型: 一步步指南 一、前言 为了确保在 Docker 环境中顺利安装并高效运行 Ollama 以及 DeepSeek 离线模型&#xff0c;本文将详细介绍整个过程&#xff0c;涵盖从基础安装到优化配置等各个方面。通过对关键参数和配置的深入理解…...

Python 自然语言处理(NLP)和文本挖掘的常规操作过程

Python 自然语言处理&#xff08;NLP&#xff09;和文本挖掘 自然语言处理&#xff08;NLP&#xff09;和文本挖掘是数据科学中的重要领域&#xff0c;涉及对文本数据的分析和处理。Python 提供了丰富的库和工具&#xff0c;用于执行各种 NLP 和文本挖掘任务。以下是一些常见的…...

传统数组 vs vector和list

传统的数组&#xff1a; int arr[10]&#xff1b; 传统的数组有以下的缺点&#xff1a; 1&#xff09;长度不可修改 2)内存分配 局部数组:把数组定在函数内&#xff0c; 数组便是局部变量&#xff0c;故会被分配在栈上 但栈的大小是有限制的 &#xff0c;故其在内存中不能超…...

CRMEB 多商户版v3.0.1源码全开源+PC端+Uniapp前端+搭建教程

一.介绍 crmeb多商户是一套B2B2C商家入驻模式的平台多商户商城系统&#xff0c;系统支持平台自营、联营、招商等多种运营模式&#xff0c;可满足企业新零售、批发、分销、预售、O2O、多店、商铺入驻等各种业务需求。 后端全开源、uniapp多端可编译&#xff01; 二、搭建教程…...

【ESP32】ESP-IDF开发 | WiFi开发 | HTTPS服务器 + 搭建例程

1. 简介 1.1 HTTPS HTTPS&#xff08;HyperText Transfer Protocol over Secure Socket Layer&#xff09;&#xff0c;全称安全套接字层超文本传输协议&#xff0c;一般理解为HTTPSSL/TLS&#xff0c;通过SSL证书来验证服务器的身份&#xff0c;并为浏览器和服务器之间的通信…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...