C C++最全前端 --- JavaScript WebAPI_javascript 和 webapi，2024年最新优秀C C++程序员必知必会的网络基础

于 2024-05-15 00:49:06 发布
阅读量300 收藏 8
点赞数 5
分类专栏： 程序员 文章标签： c语言 c++ 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84976655/article/details/138877215
版权

img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

</script>


![在这里插入图片描述](https://img-blog.csdnimg.cn/29e5d18243384fcf8c1e36569ccd8e91.png)


#### 代码示例3: 全选/取消全选按钮




<h3>选择你喜欢玩的游戏</h3>
<input type="checkbox" class="game">王者荣耀<br/>
<input type="checkbox" class="game">和平精英<br/>
<input type="checkbox" class="game">开心消消乐<br/>
<input type="checkbox" class="game">我的世界<br/>
<input type="checkbox" class="all">全选
<script>
    let games = document.querySelectorAll('.game');
    let all = document.querySelector('.all');
    all.onclick = function(){
        for (let i = 0; i < games.length; i++) {
            games[i].checked = all.checked;
        }
    }
    for (let i = 0; i < games.length; i++) {
        games[i].onclick = function() {
            all.checked = allChecked();
        }
    }

    function allChecked() {
        for (let i = 0; i < games.length; i++) {
            if(!games[i].checked){
                return false;
            }
        }
        return true;
    }
</script>


**运行截图**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8908c2d648b4431db1f0d3dfea4ca452.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd3d6enp6enp6eno=,size_12,color_FFFFFF,t_70,g_se,x_16)


### 3.4 获取/修改样式属性


CSS 中指定给元素的属性, 都可以通过 JS 来修改



> 
> style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的.  
>  例如: `font-size => fontSize`, `background-color => backgroundColor` 等
> 
> 
> 


#### 1. 行内样式操作

element.style.[属性名] = [属性值];
element.style.cssText = [属性名+属性值];


##### 代码示例: 字体变大




<div style="font-size: 20px;color:red">你好</div>
<script>
    let div = document.querySelector('div');
    div.onclick = function() {
        let fontSize = parseInt(div.style.fontSize);
        fontSize += 10;
        div.style.fontSize = fontSize + "px";//注意有单位的要带上单位
    }
</script>


**运行截图:**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/827a318181a54ee8b76bb8d9d1eeb3fd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd3d6enp6enp6eno=,size_20,color_FFFFFF,t_70,g_se,x_16)


#### 2. 类名样式操作

element.className = [CSS 类名];


##### 代码示例: 背景颜色变化




<style>
    html,body{
        height: 100%;
        width: 100%;
    }
    div {
        height: 100%;
        width: 100%;
    }
    .black{
        background-color:black;
        color: gray;
    }
    .gray {
        background-color: gray;
        color: black;
    }
</style>
<div class='black'>
    你好!
</div>
<script>
    let div = document.querySelector('div');
    div.onclick = function() {
        if(div.className.indexOf("black") != -1){
            div.className = 'gray';
        }else{
            div.className = 'black';
        }
    }
</script>


**运行截图:**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/10b956d84a834b4cb222cb028abe930b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd3d6enp6enp6eno=,size_20,color_FFFFFF,t_70,g_se,x_16)


## 4. 操作节点


### 4.1 新增节点


**分为两个步骤:**


1. 创建元素节点  
 ① `createElement` 创建元素节点.  
 ② `createTextNode` 创建文本节点  
 ③ `createComment` 创建注释节点  
 ④ `createAttribute` 创建属性节点
2. 插入节点到 dom 树中  
 ① 使用 `appendChild` 将节点插入到指定节点的最后一个孩子之后  
 ②使用`insertBefore`将节点插入到指定节点之前


#### 代码示例:




<div class="test">

</div>
<script>
    let div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'one';
    div.innerHTML = 'hehe';

    let test = document.querySelector('.test');
    test.appendChild(div);
</script>


**运行截图:**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ee23a9b574eb49bab9e4740b4522befd.png)


#### 代码示例: 当一个节点插入两次,相当于移动.




<div class="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

<script>
    let child = document.createElement('div');
    child.innerHTML = '100';

    let parent = document.querySelector('.parent');
    // 本来有四个元素,0号元素没有,就插入一个元素
    parent.insertBefore(child,parent.children[0]);
    // 插入到2号元素前,1号元素是1不是child,2号元素是2.
    parent.insertBefore(child,parent.children[2]);
</script>


**运行结果:**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/cd00714b3382456e807347c7d0e97e8c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd3d6enp6enp6eno=,size_14,color_FFFFFF,t_70,g_se,x_16)


### 4.2 删除节点


使用 `removeChild` 删除子节点

oldChild = element.removeChild(child);


注: 如果 child 不是 element 的子节点,会抛异常


#### 代码示例:




<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>
<script>
    let parent = document.querySelector('.parent');
    let childs = document.querySelectorAll('.child');
    parent.removeChild(childs[1]);
</script>


**运行结果:**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6bf415695bd54612b52fc688c8324d18.png)


## 5. 实现几个案例


### 5.1 猜数字
猜数字
请输入要猜的数字:
已经猜的次数: 0
结果: 

**运行截图:**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ade1a7362f0d4ecc83056af5ee8a593c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd3d6enp6enp6eno=,size_20,color_FFFFFF,t_70,g_se,x_16)


### 5.2 表白墙
表白墙
表白墙
输入后点击提交,会将信息显示在表格中
谁:
对谁:
说什么: 
<style>
    /\* 去除浏览器默认样式 \*/
    \* {
        margin: 0;
        padding: 0;
    }
    /\* 设置总宽度 \*/
    .parent {
        width: 400px;
        margin: 0 auto;
    }
    /\* 涉资表白墙样式 \*/
    #wall {
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        margin: 5px;
    }
    /\* 设置提示信息样式 \*/
    #remind{
        font-size:13px;
        text-align: center;
        color:gray;
        margin: 5px;
    }
    /\* 设置弹性布局 \*/
    .one {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
    }
    /\* 设置文字内容 \*/
    .two {
        width: 100px;
        line-height: 40px;
    }
    /\* 设置输入框 \*/
    .one .text{
        width: 200px;
        height: 20px;
    }
    /\* 提交按钮的设置 \*/
    .one .press{
        width: 304px;
        height: 40px;
        color:white;
        background-color: orange;
        border-radius: 5px;
        border: none;
    } 
    /\* 设置鼠标点击的时候改变颜色 \*/
    .one .press:active{
        background-color: red;
    }
    /\* 提交之和内容的设置 \*/
    .elem {
        text-align: center;
        
    }
</style>
<script>
    // 获取到输入框元素
    let texts = document.querySelectorAll('.text');
    // 获取到提交按钮元素
    let press = document.querySelector('.press');
    // 设置单击事件
    press.onclick = function() {
        let user1 = texts[0].value;
        let user2 = texts[1].value;
        let message = texts[2].value;
        // 如果有一个为空,就提交不成功
        if(user1=='' || user2=='' || message==''){
            return;
        }   
        // 这里都不为空,创建新的节点 
        let elem = document.createElement('div');
        elem.className = 'elem';
        elem.innerHTML = user1 + '对' + user2 + '说: ' +message;
        // 插入新的节点
        let parent = document.querySelector('.parent');
        parent.appendChild(elem);
        // 提交之后,将输入框置空.
        for(let i = 0; i < 3; i++){
            texts[i].value='';
        }
    }
</script>


**运行截图:**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f3c7d65f5c2f41208e2424db0fdc12e9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd3d6enp6enp6eno=,size_20,color_FFFFFF,t_70,g_se,x_16)


### 5.3 待办事项
待办事项

未完成

        <div class="right">
            <h3>已完成</h3>
        </div>
    </div>
</div>
<style>
    /\* 去除浏览器默认样式 \*/
    \* {
        margin: 0;
        padding: 0;
    }
    /\* 设置宽度 \*/
    .parent {
        width: 840px;
        margin: 0 auto;
    }
    /\* 设置输入框和新建的样式 \*/
    .one {
        height: 50px;
        padding: 20px;
    }
    /\* 设置输入框样式 \*/
    .one .text{
        height: 50px;
        width: 600px;
    }
    /\* 设置提交框样式 \*/
    .one .submit {
        background-color: orange;
        color: white;
        height: 50px;
        width: 196px;
        border: none;
    }
    /\* 设置点击时的背景 \*/
    .one .submit:active{
        background-color: red;
    }
    /\* 设置已完成和未完成的样式 \*/
    .two{
        width: 800px;
        height: 800px;
        display: flex;
        margin: 0 auto;
    }
    /\* 设置未完成和已完成字体样式 \*/
    .two h3 {
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: black;
        color: white;
    }
    /\* 设置未完成左边的样式 \*/
    .left {
        width: 50%;
        height: 100%;
    }
    /\* 设置已完成右边的样式 \*/
    .right {
        width: 50%;
        height: 100%;
    }
    /\* 新建任务的样式 \*/
    .row {
        height: 50px;
        display: flex;
        align-items: center;
    }
    /\* 新建任务字体的样式 \*/
    .row span {
        width: 340px;
    }
    /\* 新建任务的删除按钮样式 \*/
    .row button{
        width: 40px;
        height: 40px;
    }

img
img

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

 align-items: center;
    }
    /\* 新建任务字体的样式 \*/
    .row span {
        width: 340px;
    }
    /\* 新建任务的删除按钮样式 \*/
    .row button{
        width: 40px;
        height: 40px;
    }

[外链图片转存中…(img-DwbYRutb-1715705323801)]
[外链图片转存中…(img-h9SyMab9-1715705323801)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84976655
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenCV实例（一）人脸检测
小幽余生不加糖
04-09 4266
计算机视觉使很多任务成为现实，其中两项任务就是人脸检测（在图像中定位人脸）和人脸识别（将人脸识别为特定的人）。OpenCV实现了一些人脸检测和识别的算法。从安全到娱乐，这些技术在现实环境中都有应用。介绍OpenCV的一些人脸检测和识别功能，并定义特定类型的可跟踪物体的数据文件。具体来说，将研究Haar级联分类器，通过分析相邻图像区域之间的对比度，确定给定图像或子图像是否与已知类型匹配。
:file_cabinet_selector:C和c++的单头json解析器
01-27
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，被广泛用于Web服务和应用程序之间的数据传输。在C和C++编程中，由于这两种语言原生并不支持JSON，因此需要依赖第三方库或自定义解析器来处理JSON...
MySQL8超详细安装教程
rbx508780的博客
10-05 4万+
MySQL8在下载，安装的时候遇到问题进来看看叭~ 超详细的MySQL下载，安装，卸载过程
pycharm 安装和使用常见问题
m0_37737957的博客
10-14 1943
一、pycharm的安装 二、运行python 程序 报错 No module named 'pytest' 三、pycharm 导入模块时红色波浪线，无法导航到引入模块，但是程序可以正常运行
3.在Windows下安装PyCharm的详细步骤
WJiaJiaBest的博客
07-08 3353
在 Windows下安装PyCharm的详细步骤（包括安装Python的步骤）
【已解决】MacOS13.4 arm64 python3.8 pycharm anaconda无法安装wordcloud问题
Encore47的博客
06-02 1269
噢原来要新装一个干净的conda环境！现在的base环境已经有很多包了，而wordcloud好像是python11就不适用了，所以可能和python10也会有点乱七八糟冲突。所以咱们还是老老实实装个python 3.8的环境好了~我是在Anaconda里建的，好像也可以用代码建哈~得知用Anaconda来安装更好。操作系统：MacOS 13.4。也不行，报错还是和上面的相似。python版本：3.8。编辑器：PyCharm。
socket--API.rar_Socket API_Socket QQ_vc socket api_webclient soc
09-24
- Socket API 是操作系统提供的编程接口，它允许程序员创建和管理网络连接，进行数据传输。在Windows系统中，通常使用Winsock库来实现Socket API。 - Socket API 提供了两种主要类型的套接字：流式套接字（SOCK_...
beijing-hell-master.zip_JavaScript_
08-10
在编程世界中，JavaScript作为一种广泛应用于Web开发的脚本语言，以其灵活性和跨平台特性备受开发者喜爱。本次我们将深入探讨一个名为"beijing-hell-master"的项目，该项目用JavaScript重新实现了经典的C++程序...
jWrite-C语言中一个非常简单的JSON编写器
04-08
在编程世界中，JSON（JavaScript Object Notation）已经成为数据交换格式的标准之一，尤其在Web服务和跨平台应用之间。然而，对于C语言开发者来说，直接处理JSON可能会显得有些复杂，因为C语言本身并不内置对JSON的...
excel2json-master_C++excel转json_
10-03
Excel是一种广泛使用的电子表格工具，而JSON（JavaScript Object Notation）则是一种轻量级的数据交换格式，常用于Web服务和应用程序之间的数据传输。本项目“excel2json-master”是一个C++实现的工具，它利用第三方...
安装Qt选择组件
最新发布
q5222890的博客
08-11 1万+
最近在做Qt相关的开发，首先搭建开发环境，刚开始对组件这块不是很熟悉，需要了解这方面的知识，写下来主要是方便记住关于选择组件的说明，Qt版本是最新的长期维护版本，版本号：6.5.2。
STM32F407串口之间通过DMA的方式进行数据_Recv_Send
zaichen321的博客
07-15 1108
STM32串口通过DMA的方式进行数据帧的先接收后发送
Beyond Compared 4需要秘钥怎么办
专注嵌入式软硬件开发。
05-17 6507
本文主要解决Beyond Compare4需要秘钥的问题。
基于OpenCv的人脸识别（Python完整代码）
热门推荐
Cheney ' blog
06-21 15万+
目前人脸识别有很多较为成熟的方法，这里调用OpenCv库，而OpenCV又提供了三种人脸识别方法，分别是LBPH方法、EigenFishfaces方法、Fisherfaces方法。本文采用的是LBPH（Local Binary Patterns Histogram，局部二值模式直方图）方法。opencv是一个开源的的跨平台计算机视觉库，内部实现了图像处理和计算机视觉方面的很多通用算法，对于python而言，在引用opencv库的时候需要写为import cv2。其中，cv2是opencv的C++命名空间名称
基于opencv的人脸识别和物体检测
keep_7的博客
07-24 4224
本程序利用python编程，基于opencv的人脸识别和物体检测，附加了信息传输。
ASCII表
静下心来...
03-09 3169
ASCII值 控制字符 ASCII值 控制字符 ASCII值 控制字符 ASCII值 控制字符
opencv实现人脸识别(c++实现)
new9232的博客
10-14 1万+
本文章基于opencv + VS2015实现人脸识别。可对人脸，眼睛，嘴部进行识别。
windows10 64位系统，不能下载pycharm ARM64 的安装程序
ewwerpm的专栏
05-18 3033
下载红框中上面一个，不知道这个arm64是什么意思？
Cocos2d-JS跨平台HTML5游戏开发实战教程
Cocos2d-x本身是用C++编写的，但Cocos2d-JS提供了一个更便捷的JavaScript接口，使得游戏开发变得更为高效，特别是对于熟悉Web开发的程序员来说。 本教程由Emanuele Feronato撰写，他是一位经验丰富的游戏开发者，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值