【前端面试3+1】08 css选择器、在前端页面展示后端传来的图片数组、请求方法的常见类型、【搜索插入位置】

一、css选择器有哪些?

1.元素选择器:

        通过元素名称选择元素。 示例:p 选择所有段落元素。

2.类选择器:

        通过类名选择元素。 示例:.btn 选择所有类名为 btn 的元素。

3.ID选择器:

        通过id属性选择元素。 示例:#header 选择id为 header 的元素。

4.后代选择器:

        选择嵌套在另一个元素内部的元素。 示例:div p 选择所有在 div 元素内的段落元素。

5.子元素选择器:

        选择指定元素的直接子元素。 示例:ul > li 选择所有直接在 ul 元素内的 li 元素。

6.通配符选择器:

        选择所有元素。 示例:* 选择所有元素。

7.属性选择器:

        根据元素的属性值选择元素。 示例:[type="text"] 选择所有 type 属性值为 text 的元素。

  • 属性存在选择器:[attr]
  • 属性值选择器:[attr=value]
  • 子串匹配选择器:[attr~=value]
  • 开头匹配选择器:[attr^=value]
  • 结尾匹配选择器:[attr$=value]
  • 包含选择器:[attr*=value]

8.伪类选择器:

        根据元素的状态选择元素。 示例::hover 选择鼠标悬停在元素上的状态。

  • 链接伪类选择器::link:visited:hover:active:focus
  • 元素状态伪类选择器::first-child:last-child:nth-child(n)

9.伪元素选择器:

        选择元素的特定部分。 示例:::before 在元素内容前插入内容。

  • ::before::after::first-line::first-letter

10.相邻兄弟选择器:

        选择与指定元素相邻的兄弟元素。 示例:h2 + p 选择紧跟在 h2 元素后的 p 元素。

二、如何在前端页面展示后端传来的图片数组?

方一:使用v-for指令来循环渲染多张图片

        在下面的示例中,使用Vue.js框架,通过v-for指令循环遍历imageUrls数组中的图片URL,为每个URL创建一个<img>标签来展示图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展示多张图片</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="(imageUrl, index) in imageUrls" :key="index">
            <img :src="imageUrl" alt="后端传过来的图片">
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                imageUrls: ['image1.jpg', 'image2.jpg', 'image3.jpg']
            }
        });
    </script>
</body>
</html>

方二:使用JavaScript遍历

        在下面的示例中,我们首先模拟了一个后端传来的图片数组imageUrlsFromBackend,然后使用JavaScript遍历这个数组,为每个图片URL创建一个<img>标签,并将其添加到页面中的imageContainer中,从而展示后端传来的图片数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展示后端传来的图片数组</title>
</head>
<body>
    <div id="imageContainer"></div>

    <script>
        const imageContainer = document.getElementById('imageContainer');

        // 模拟后端传来的图片数组
        const imageUrlsFromBackend = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

        // 遍历图片数组,为每张图片创建一个<img>标签并添加到页面中
        imageUrlsFromBackend.forEach(url => {
            const imgElement = document.createElement('img');
            imgElement.src = url;
            imgElement.alt = '后端传过来的图片';
            imageContainer.appendChild(imgElement);
        });
    </script>
</body>
</html>


三、 请求方法的常见类型有哪些?

1.GET请求

        用于从服务器获取数据,参数附加在URL的末尾,通常用于请求数据而不是发送数据。例如请求页面内容、获取列表数据等。由于GET请求参数会附加在URL上,可以被缓存和收藏,因此在需要获取数据而不涉及敏感信息传输的情况下使用较多。

2.POST请求

        用于向服务器提交数据,数据放在请求体中,通常用于发送数据给服务器进行处理。例如提交表单数据、上传文件等。由于POST请求将数据放在请求体中,不会暴露在URL中,适合传输敏感信息或大量数据。

3.PUT请求

        用于更新服务器上的资源,通常用于更新已存在的资源

4.DELETE请求

        用于删除服务器上的资源,通常用于删除特定资源

5.PATCH请求

        用于对资源进行局部更新,只更新部分字段而不是整个资源。

6.OPTIONS请求

        用于获取服务器支持的HTTP请求方法、跨域请求时的预检请求等。

7.HEAD请求

        类似于GET请求,但只返回响应头信息而不返回实际数据,用于获取资源的元数据信息。

四、【算法】 搜索插入位置

1.题目:       

         给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。

2.解题:

(1)方一:二分查找
int searchInsert(int* nums, int numsSize, int target) {
    int left = 0;
    int right = numsSize - 1;
    
    while (left <= right) {
        int mid = left + (right - left) / 2;
        
        if (nums[mid] == target) {
            return mid;
        } else if (nums[mid] < target) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }
    }
    
    return left;
}
(2)方二:线性扫描
int searchInsert(int* nums, int numsSize, int target) {
    for (int i = 0; i < numsSize; i++) {
        if (nums[i] >= target) {
            return i;
        }
    }
    
    return numsSize;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/507790.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CCIE-02-PPPoE

目录 实验条件网络拓朴实验目标 开始配置R1验证效果 实验条件 网络拓朴 实验目标 R2为PPPoE Server&#xff0c;已预配了相关信息&#xff1b;R1作为PPPoE Client&#xff0c;进行PPPoE拨号 用户名为R1&#xff0c;密码为cisco &#xff0c; 采用CHAP的认证方式&#xff0c;I…

Python入门(八)

引入 引入函数 为了减少代码的冗余&#xff0c;减轻我们的工作量&#xff0c;我们常常将代码分块编写&#xff0c;在Python中更是如此&#xff0c;那么我们怎么在一个新的程序文件中调用我们已经编写好程序文件的函数&#xff0c;我们使用import。我们先写一个first.py为例语…

【MySQL】一文带你搞定 外键约束&其【更新/删除行为】(可cv代码&案例演示)

前言 大家好吖&#xff0c;欢迎来到 YY 滴MySQL系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C Linux的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…

新生报到系统的设计与实现(论文+源码)_kaic

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对新生报到信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差…

突发: xz-utils 被注入后门 (CVE-2024-3094)

Andres Freund 在 2024 年 3 月 29 日发现了一个在 xz-utils 注入的后门&#xff1b;使用了 xz/lzma 5.6.0 / 5.6.1 的项目皆受影响。 杀伤力: 当前还未完全清楚&#xff1b;但 openssh 的 sshd 首当其冲&#xff1b;注入的代码会 Hook OpenSSH 的 RSA_public_decrypt 函数&a…

第四百三十六回

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"不同平台上换行的问题"相关的内容&#xff0c;本章回中将介绍如何在页面上显示蒙板层.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我…

[中级]软考_软件设计_计算机组成与体系结构_04_寻址地址

寻址地址 概念指令的概念 寻址方式立即寻址方式直接寻址方式间接寻址方式寄存器寻址方式寄存器间接寻址方式往年真题 概念 指令的概念 一条指令就是机器语言的一个语句&#xff0c;它是一组有意义的二进制代码&#xff0c;指令的基本格式如下&#xff1a; 操作码字段地址码字…

SAP 未清销售订单的取值

每个公司都会有自己的销售报表&#xff0c; 一般来说VA05的都满足不了客户的定制化需求。 所以都要进行自定义报表的开发&#xff0c; 在开发的过程中&#xff0c;也会有未清销售订单和已清销售订单的区分 一开始我的想法是&#xff0c;根据销售订单去找交货单累计已交货的…

面向对象程序之多态

1.多态的概念 简单来说&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;不同的对象去完成会有不同的形态。 举个例子&#xff1a;对于动物&#xff0c;他们吃的都是食物&#xff0c;但狗吃的是狗粮&#xff0c;猫吃的是猫粮&#xff0c;去完成吃这个…

lua脚本在redis集群中哈希槽分片问题

上文说到&#xff0c;通过用redis lua脚本实现时间窗分布式限流 可以操作redis lua脚本来实现时间窗限流&#xff0c;在执行lua脚本的时候&#xff0c;参数中有个keys列表&#xff0c;当lua脚本中如果有操作多个key的情况&#xff0c;就可以传个key列表了。通常情况下&#xff…

Java封装最佳实践:打造高内聚、低耦合的优雅代码~

​ 个人主页&#xff1a;秋风起&#xff0c;再归来~ 文章专栏&#xff1a;javaSE的修炼之路 个人格言&#xff1a;悟已往之不谏&#xff0c;知来者犹可追 克心守己&#xff0c;律己则安&#xff01; 1、封装 1.1 封装的概念 面向对象程序三大…

python练习二

# Demo85def pai_xu(ls_test):#创建一个列表排序函数命名为pai_xu# 对创建的函数进行注释"""这是一个关于列表正序/倒序排列的函数:param ls_test: 需要排序的列表:return:"""ls1 [int(ls_test[i]) for i in range(len(ls_test))]#对input输入的…

surfer绘制等值线图

surfer介绍 Surfer软件&#xff0c;是美国Golden Software公司编制的一款以画三维图的软件。该软件具有强大的插值功能和绘制图件能力&#xff0c;可用来处理XYZ数据&#xff0c;是地质工作者常用的专业成图软件&#xff08;来源于百度百科&#xff09;。 surfer可以用来绘制…

计算机网络—TCP协议详解:特性、应用(1)

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;マリンブルーの庭園—ずっと真夜中でいいのに。 0:34━━━━━━️&#x1f49f;──────── 3:34 &#x1f504; ◀️…

Java中常见的锁策略

目录 乐观锁 vs 悲观锁 悲观锁: 乐观锁&#xff1a; 重量级锁 vs 轻量级锁 ⾃旋锁&#xff08;Spin Lock&#xff09; 公平锁 vs 非公平锁 可重⼊锁 vs 不可重入锁 读写锁 乐观锁 vs 悲观锁 悲观锁: 总是假设最坏的情况&#xff0c;每次去拿数据的时候都认为别…

3d整体模型怎么拆图---模大狮模型网

3D整体模型怎么拆图 一、模型准备 在进行3D整体模型的拆图之前&#xff0c;首先需要确保模型的构造清晰明了&#xff0c;各个部件之间的连接关系明确&#xff0c;并且模型的层级结构已经建立完成。 二、确定拆图方式 拆解方向&#xff1a;根据模型的结构和设计需求&#xff…

教你用Fiddler捕获HTTPS请求

安装Fiddler 这里不特别说明了&#xff0c;网上搜索一大把&#xff0c;根据安装引导一步步安装即可。&#xff08;这里采用的是fiddler v4.6&#xff09; 配置Fiddler 1、打开fiddler配置Tools –>Telerik Fiddler Options。 2、打开HTTPS配置项&#xff0c;勾选“Captur…

Leetcode-2580-统计将重叠区间合并成组的方案数-c++

题目详见https://leetcode.cn/problems/count-ways-to-group-overlapping-ranges/ 题目要求将最后的ranges分为两个组。也就是说当你的ranges已经满足题目要求的时候&#xff0c;这两个组怎么分是随意的&#xff0c;这里也就引出了 2 k 2^k 2k 的由来&#xff0c;其实就是每组…

Leetcode-2810-故障键盘-c++

题目详见https://leetcode.cn/problems/faulty-keyboard/ 题解 这道题的关键是如何合理地使用STL&#xff0c;毕竟是一道简单题。 之前常用到的Vector容器是单向开口的连续内存空间 deque则是一种双向开口的连续线性空间&#xff0c;又称双端动态数组。所谓的双向开口&#x…

Windows Server 2022 使用ApacheDS用户远程桌面登录服务器

Windows Server 2022 使用ApacheDS用户远程桌面登录服务器 1、接上篇 Windows Server 2022 使用ApacheDS用户认证 使用Administrator用户远程登录192.168.1.100windows server&#xff0c;打开pGina软件 2、输入刚刚在ApacheDS中的新添加的用户测试一下&#xff0c;会自动添加…