HTML选择器和JS基础

天学习了HTML的选择器和JavaScript的基础知识。

今日学习内容

1、HTML选择器

层次选择器

<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
12345678910111213141516

后代选择器

/*
   后代选择器
      某个元素的后面  祖爷爷 爷爷 爸爸 你
*/
body p{
     background: red;
 }
1234567

结果图：

子代选择器

/*子代选择器  一代  儿子*/
body > p {
    background: yellow;
}
1234

结果图：

相邻兄弟选择器

.active +p{
    background: palegreen;
}
123

结果图：

通用选择器

/*通用选择器
    当前选择元素向下所有的兄弟元素
*/
.active~p{
    background: slateblue;
}
123456

结果图：

结构伪类选择器：

        /*
        ul的最后一个子元素，不使用我们的class和id选择器
        */
        ul li:last-child{
            background: palegreen;
        }
123456

		/*ul的第一个子元素，不使用我们的class和id选择器*/
        ul li:first-child{
            background: red;
        }
1234

 	  /*
      选中p1:定位父元素，选择当前的p的第一个选择
      选择当前p元素的父级元素,选择父级元素的第一个，并且是当前元素才生效，顺序
 	  */
        p:nth-child(2){
            background: yellowgreen;
        }
1234567

 /*选择父元素下的p元素的第二个类型*/
        p:nth-of-type(2){
            background: red;
        }
1234

/*鼠标悬浮颜色*/
        h1:hover{
            background: yellow;
        }
1234

属性选择器

<p class="demo"> 
<a href="https://www.baidu.com" class="link item first" id="first">1</a> 
<a href="" class="link item active" id="test">2</a> 
<a href="image/123.html" class="link item active">3</a> 
<a href="image/123.png" class="link item">4</a> 
<a href="image/123.jpg" class="link item">5</a> 
<a href="adc" class="link item">6</a> 
<a href="/a.jpg" class="link item">7</a> 
<a href="abc.doc" class="link item">8</a> 
<a href="abcd.doc" class="link item last">9</a> 
</p> 

<style> 
.demo a{ 
float:left; 
display: block; 
height: 50px; 
width: 50px; 
border‐radius: 10px; 
background: yellow; 
text‐align: center; 
color: red; 
text‐decoration: none; 
margin‐right: 5px; 
font:bold 20px/50px Arial; 
} 
</style> 
/*
   属性选择器：属性名=属性值（正则表达式）
  a[]{
  }
*/
a[id]{
    background: red;
}
a[id=first]{
    background: yellowgreen;
}
/*
  class中有link的元素的
   *=:包含等于=：绝对等于
*/
a[class*="link"]{
     background: fuchsia;
 }
/*选中href中的以https开头的元素*/
a[href^=https]{
    background: slateblue;
}
/*选中href中的以png结尾的元素*/
a[href$=png]{
    background: #4158D0;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

因为我是学习JAVA的，所有HTML的学习到这里就告一段落了，之后就靠我们自己从其他渠道获取HTML知识。

JavaScript

一、为啥美化网页：

1.有效的传递页面的信息
2.美化页面，页面的漂亮，才能吸引用户
3.凸显主题
4.提高我们的用户的体验

1、span标签

重点突出的文字，使用span标起来:

结果：

2、字体的样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            text-align:排班，居中
            text-decoration
            overline：上划线
            line_through中划线
            underline下划线
        */

        h1{
            color: red;
            text-align: center;
        }
        .p1{
            text-indent: 1em;
            text-decoration: underline;
        }
        /*
        行高和块高度一样，就可以上下居中
            height:300px
            line-height:300px
        */
        .p2{
            background: red;
            height: 300px;
            line-height: 300px;
        }
    </style>
</head>
<body>
<h1>文章</h1>
<p class="p1">
    层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
    （标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
    CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
</p>
<p class="p2">
    简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一
    个站点中的多个页面使用了同一套 CSS样式表，而某些页面中的某些元素想使用其他样式，就可以
    针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，
    在浏览器中看到的将是最后面设置的样式效果。
</p>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

效果图：

3、悬浮和阴影

<style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮类的颜色*/
        a:hover{
            color: red;
            font-size: 50px;
        }
        /*鼠标按住没有释放的颜色*/
        a:active{
            color: blue;
            font-size: large;
        }
        /*
        参数：
            阴影的颜色
            水平偏移
            垂直偏移
            阴影半径
        */
        #price{
            text-shadow: blue 10px 0px 10px;
        }
    </style>
123456789101112131415161718192021222324252627

二、JS概念

JavaScript介绍：
Js这门语言主要是完成页面的数据验证，一次它运行在客户端，需要运行浏览器来解析执行我们的js代码，原来他的名字LiveScript，为了吸引更多的java程序员去使用，更名为javaScript
Js是弱类型，java是强类型。

特点：
1/交互性(它可以做的就是信息的动态交互)
2/安全性（不能直接访问本地磁盘）
3/跨平台（只要是可以解释js的浏览器都可以执行，和平台没关系）

三、js与我们的html代码结合的方式：

1、引入js的第一种方法

2、引入js的第二种方法：

3、变量

什么是变量？变量就是存方法某些值的内存的命名。

Js的变量类型：
数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function

Js中的特殊的值：
Undefined未定义：所有的js变量未赋予初始值的时候，默认都是Undefined
Null：空值
NaN：全称not a number 非数字非数值

Js中的定义变量的格式：
var 变量名;
var 变量名=值;

4、关系（比较运算）

等号：==等于是简单的做字面值的比较

全等号：===除了比较字面值之外，还会比较两个变量的数据类型

逻辑运算：
且运算：&&
或运算：||
取反运算：！
在js当中，所有的变量都可以作为boolean的变量去使用
0，null，undefined，””（空串）都认为是false

&&且运算:
第一种情况：
当表达式全为真的时候，返回最后一个表达式的值
第二种情况：
在表达式中，有一个为假的时候，返回第一个为假的表达式的值
||或运算：
第一种情况：
当表达式全为假的时候，返回最后一个表达式的值
第二中情况：
只有一个表达式为真，就会返回第一个为真的表达式的值
并且&&和||都是有一个短路效果的，
当这个&&或者||有了结果了，后面的表达式就不再执行。

5、数组

Js中的数组定义：
格式：
Var 数组名=[]; //空数组
Var 数组名=[1,”abc”,true]; //定义数组的同时给它赋值

原文链接：https://blog.csdn.net/lxt118518/article/details/109103351?utm_medium=distribute.pc_category.none-task-blog-hot-1.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-1.nonecase&request_id=

作者：巴黎最后的探戈舞步

载说明：原创不易，未经授权，谢绝任何形式的转载

最近的:has()选择器允许您对父元素和其他祖先应用样式，本文将向您展示如何在Web应用程序开发中使用它。

在CSS的世界中，选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。它们允许开发者根据元素的属性、位置和关系来选择和样式化HTML元素。

一个较新的CSS选择器/伪类被称为 :has ，它允许您选择每个具有与您提供给 :has() 函数的选择器匹配的子元素的元素。它在CSS中是一个重要的解决方案，不仅仅是一个简单的“父级”选择器。

使用 :has() 选择器，您可以将样式应用于父元素或祖先HTML元素。这样我们就可以扩展选择器的范围，包括一个或多个兄弟或子元素。

在本文中，我们将讨论CSS选择器以及它们在代码中的多个使用示例。

何时使用:has选择器

:has() 选择器是一种CSS伪类，允许您选择包含特定子元素的元素。它是一个强大的CSS工具，您可以用于以下目的：

为子元素的父元素设置样式：如果一个 <div> 元素包含一个 <p> 元素，你可以使用 :has() 选择器来为它设置样式。
有条件地添加或删除样式：如果 <div> 元素包含特定数量的子元素，您可以使用 :has() 选择器为其添加边框。
根据内容选择元素：您可以使用 :has() 选择器来选择所有包含具有 "important" 类的子元素的 <div> 元素。

:has() 选择器可以与任何有效的CSS选择器一起使用，包括其他伪类。这使得它成为一个非常多功能的工具，可以以各种方式使用。

这是一个关于如何使用 :has() 选择器的小片段

/* Select all <div> elements that contain a <p> element. */
div:has(p) {
 background-color: blue;
}
  
/* Select all <div> elements that contain a child element with the class "important". */
div:has(.important) {
 border: 1px solid black;
}   
/* Select all <div> elements that contain at least two child elements. */
div:has(> * + *) {
 padding: 10px;
}

上面的代码展示了如何使用 :has 选择器的实际示例。但在我们深入使用 :has 选择器之前，让我们先来看一下为什么选择器很重要。

项目设置

要开始这个项目，你可以从这个GitHub仓库克隆起始代码。完成的仓库也在这个仓库中，但你需要使用起始代码来跟随本教程。

https://github.com/joycefoster642/-has-css-project

上面的图片展示了我们的项目在浏览器上启动时的样子。

注意：该项目只是一个简单的类似博客的演示，用于展示 :has 伪类的一般用法。

正向选择 vs 反向选择

以前，开发者只能选择前进，但是现在有了 :has 选择器，你现在也可以选择后退。

现在，我们要选择一个元素的父级。过去，通常是这样做的：

article + article {
 background-color: pink;
}

正如你所注意到的，第二和第三篇文章的颜色发生了变化。这是因为它们相邻。所以，它选择了前面而不是后面。现在，让我们用 :has 选择器来反向进行操作。

article:has(+ article) {
 background-color: coral;
}

在上面的代码中，我们只是简单地说，如果文章有相邻的文章，选择前两篇文章。

现在，请注意这次选择了第一篇和第二篇文章。

基于子元素的选择

使用 :has ，我们不仅可以选择父元素，还可以选择子元素。

article:has(span) .bold {
 background-color: lightyellow;
}
article:has(span) .italic {
 text-decoration: underline;
}

在 index.html 文件中，我们使用 span 为文章2和3应用了一个加粗和斜体的类。在我们的CSS文件中，我们使用 article:has(span) 语法选择了我们的 span 。以下是结果：

在这里，您可以看到对第二和第三篇文章中的粗体和斜体应用的更改。我们不仅选择了文章，还选择了 span 类别应用的内容。

使用:has与:not选择

在本节中，我们将介绍如何使用 :has 伪类与 :not 。

article:not(:has(span)) {
 background-color: yellowgreen;
}

以下是结果：

只会改变没有 span 类的文章。:has 选择器还支持 0R 逻辑条件。

article:has(p, .button) {
 background-color: royalblue;
}

以下是结果：

在这里，我们可以选择一个带有 OR 的段落的文章，或者选择一个带有 button 类的任意文章。这三篇文章被选择是因为它们都有一个 p 的HTML标签。但是如果我们移除 p 标签，只有最后一个带有“buy now” button 类的文章会保持着颜色。

:has使用案例和示例

在本节中，我们将探讨使用 :has 选择器时的更多实际用例和示例。

导航菜单示例

这将引导我们进入我们项目的下一部分，它看起来是这样的：

在这里，我们将鼠标移到位置上，您可以看到当我们将鼠标悬停在位置上时，我们拥有的不同位置。

当我们不悬停在位置和员工上时，您会注意到根本没有任何下拉菜单的指示。如果我们为此使用修饰类，我们将不得不手动进入HTML文件并编写代码。然而，我们可以通过 :has 伪类来实现这一点。

.nav__item:has(.nav__submenu)::after {
 font-family: "Font Awesome 5 Free";
 font-weight: 400;
 content: "\f150";
 margin-left: 1rem;
}

在上面的代码中，我们说，如果 .nav__item 里面有 .nav__submenu ，则只将设计应用于前两个导航图标。以下是结果：

模态示例

我们可以用JavaScript创建一个模态框，但现在我们也可以使用 :has 选择器来实现。下面的示例将带我们进入项目的下一个部分，效果如下：

当复选框被选中时，没有任何反应。但是我们可以通过 :has 伪类轻松实现某些操作。

.awesome:has(.awesome__terms:checked) {
 display: none;
}

.awesome 类是我们的模态框。然后我们说如果我们有 .awesome__terms: checked ，再次点击复选框时让下一页显示出来。

浅色和深色模式示例

这是另一个快速示例，展示了如果选中了某个选项，我们可以如何应用它。

.three:has(.lightswitch:checked) {
 background-color: var(--COLOR);
 color: var(--BGCOLOR);
}

一旦我们应用上述代码并点击“切换到暗模式”，下面是结果：

现在，您可以无缝切换浅色和深色模式。

输入验证示例

我们的最后一个例子将引导我们进入项目的这一部分，看起来像这样：

上面的图像显示了包含文本“名称”和文本输入的 label 。现在，我们要选择相反的东西。以前，我们只能向前选择，所以 label 必须在文本 input 之后。现在，我们可以根据 input 中的内容更改 label 。

<div>
 <label for="name">Name:</label>
 <br />
 <input
   class="name"
   type="text"
   name="name"
   id="name"
   required
   pattern="^\[A-Z\][A-z]{2,}"
 />
</div>

在我们上面的代码中，我们对 index.html 应用了一个模式。在这里，我们有一个 required pattern ，其中的正则表达式表示文本必须以大写字母开头，并且至少为3个字符。在我们的 style.css 中，我们包含了以下代码

label:has(~ .name:valid)::after {
 content: '??';
 color: limegreen;
 margin-left: 1rem;
 font-size: 3rem;
}

以下是结果：

名字“Joyce”符合首字母大写且最多三个单词的要求，因此出现了绿色的勾号。

既然我们已经到了教程的结尾，希望你对 CSS 选择器/伪类有所了解。

结论

CSS :has 选择器提供了一种创新的方法来解决网页开发中的复杂样式挑战。在本文中，我们探讨了这个强大选择器的功能和潜在用例，它允许我们根据元素的后代来定位目标元素。

通过利用 :has 选择器，网页开发人员可以提高他们的CSS代码的效率和灵活性，简化选择过程，减少不必要的类和嵌套结构的需求。

这个选择器使开发人员能够创建更清晰、更易于维护的代码，同时保持HTML结构的完整性。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

高级前端?进阶

今天给大家带来的主题是 bundlejs，一个基于 esbuild 优秀在线打包器和包大小检查器，希望大家真正用的上，话不多说，直接进入正题。

1.什么是 bundlejs

bundlejs（发音为 bundle js）是一种快速简便的方法来对 typescript、javascript、jsx 和 npm 项目进行 tree shaking、打包、minify 和 compress（在 gzip 或 brotli 中），同时可以查看总包的文件大小。bundlejs 是一个类似于 bundlephobia 的在线工具，不同的是 bundlejs 是在终端浏览器本地完成打包。

bundlejs 的 logo

bundlejs 旨在通过遵循打包器使用的相同方法来生成更准确的包大小估计：

在本地进行所有打包
输出 tree shaking 打包代码，无需安装任何 npm 包和 typescript 支持。
获取生成的包大小

使用 bundlejs 的好处是：

更容易调试错误
可以验证生成的打包代码
配置打包能力，支持 tree shaking 打包代码，同时进行最终 bundle 的可视化分析
可以支持离线打包，只要之前使用过该模块
支持来自不同内容交付网络 (CDN) 的不同类型的模块，例如：CDN 范围从 deno 模块到 npm 模块，再到随机的 github 脚本等等

目前 bundlejs 在 Github 上通过 MIT 协议开源，有超过 600+的 star，是一个值得长期关注的前端开源项目。

2.bundlejs 支持打包 Treeshaking 和代码压缩

bundlejs 内部依赖 esbuild 来实现打包、转换、转译、压缩、tree shaking 和遍历文件的能力。更加具体的来说，bundlejs 使用 esbuild-wasm，它能够访问这些功能的一个子集，关键限制主要包括：

npm 只在 Node.js 运行，所以 bundlejs 没有 package.json 或 npm install（ StackBlitz WebContainers 除外）
浏览器不像 nodejs 那样工作，没有访问文件系统的简单方法和能力，因此存储和访问文件是不切实际的， esbuild 在 Node.js 上运行的方式并不适合 Web 端
由于 esbuild-wasm 在浏览器上运行时的诸多限制（没有 npm 和 nodejs），唯一的选择是模块来自 Web，但 esbuild 本身不支持导入 http(s)://.. . 模块，因此需要不同的解决方案

为了解决这些问题，esbuild 的插件系统发挥了作用。 bundlejs 总共依赖 4 个插件来解决这些限制：

HTTP 插件：获取和缓存模块
CDN 插件：将 npm 包导入（称为裸导入）重定向到内容交付网络 (CDN) url 以获取
EXTERNALS 插件 ：将某些 import/export 模块标记为要从打包中排除的模块
ALIAS 插件 : 将某些导入/导出别名到不同名称的模块

以上插件实现了 esbuild-wasm 创建 javascript 包，而 esbuild-wasm 是一个用于 esbuild 的跨平台 WebAssembly 二进制文件，一个 JavaScript 打包器和压缩器。

3.使用 bundlejs

基础配置

在 v0.2 中，bundlejs 添加了对自定义配置 (configs) 的支持，目前支持大部分 esbuild 的构建选项，以及一些用于更改默认 CDN 和压缩算法的添加选项。

{
  "cdn": "https://unpkg.com",
  "compression": "gzip",
  // 注意：有 3 种可用的压缩算法，brotli、gzip 和 lz4
  "esbuild": {
      "target": [ "esnext"],
      "format": "esm",
      "bundle": true,
      "minify": true,
      "treeShaking": true,
      "platform": "browser"
  }
}

同时，可以借助于 bundlejs 打包平台提供的能力在不同开发者之间分享配置。

CDN

内容交付网络 (CDN) 是一种在全球范围内快速分发代码的方法。在 bundlejs 的上下文中，CDN 代表 bundlejs 可以从中获取的代码在线存储库。

例如，unpkg.com 是一个快速的全球内容交付网络，适用于 npm 上的所有内容。它用于使用如下 URL 快速轻松地从 npm 上的任何包加载任何文件：https://unpkg.com/package-name@version/file.js，其他平台，如： skypack.dev，esm.sh 也提供了类似功能。

默认情况下，bundlejs 允许使用如下的代码：

export * from "@okikio/animate";

bundlejs 会自动从 unpkg 中获取特定的包。

{
    "cdn": "https://cdn.esm.sh",
    // OR
    "cdn": "skypack"
}

压缩算法

bundlejs 提供了使用以下方式进行打包的选项：

brotli ：产生最小的包大小但它是最慢的
gzip ：产生第二小的包大小，但它比 brotli 快（默认）。最终选择将 pako 替换为 denoflate 作为 gzip 的默认压缩算法，它比 pako 更快更小。
lz4 ：产生最大的包大小但它是最快的包算法。bundlejs 使用 deno-lz4，其也通过 WASM 运行，但 deno-lz4 压缩自身的方式与 deno-brotli 略有不同

就 brotli 来说，其是一种压缩算法，可以很好地压缩数据，但是，与其他替代方案相比，它的速度非常慢。 bundlejs 通过 deno-brotli 包含了一个 WASM 版本的 brotli，deno-brotli 主要做了以下两件事情：

将 deno-brotli 所需的巨大 WASM 文件压缩成 lz4 压缩字符串，然后可以通过 lz4 解压缩，从而可以轻松地将 WASM 存储为 js 文件（结果是构建工具支持很好，因为 WASM 只是一个字符串在 JS 文件中，加上它很好地解决了生态系统问题）。
通过将 WASM 作为 js 文件，实际上可以将 WASM 作为 js 模块预加载

关于 bundlejs 的更多用法，比如：压缩质量、Aliases 和 Externals、Esbuild 配置选项、编辑器按钮、JSX支持、共享打包会话、Bundle 分析、安全和性能等高级用法本文不再展开，大家可以参考文末的资料自行学习

4.本文总结

本文主要和大家介绍 bundlejs，即一个基于 esbuild 的优秀在线打包器和包大小检查器。相信通过本文的阅读，大家对 bundlejs 会有一个初步的了解。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://blog.okikio.dev/documenting-an-online-bundler-bundlejs

https://bundlejs.com/

https://github.com/okikio/bundlejs

在线咨询

上一篇：Qt编写控件属性设计器7-串口采集
下一篇：11：SpringBoot整合JavaMail实现邮

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML选择器和JS基础

今日学习内容

1、HTML选择器

层次选择器

结构伪类选择器：

属性选择器

一、为啥美化网页：

1、span标签

2、字体的样式：

3、悬浮和阴影

二、JS概念

三、js与我们的html代码结合的方式：

1、引入js的第一种方法

2、引入js的第二种方法：

3、变量

4、关系（比较运算）

5、数组

何时使用:has选择器

项目设置

正向选择 vs 反向选择

基于子元素的选择

使用:has与:not选择

:has使用案例和示例

模态示例

浅色和深色模式示例

输入验证示例

结论

1.什么是 bundlejs

2.bundlejs 支持打包 Treeshaking 和代码压缩

3.使用 bundlejs

基础配置

CDN

压缩算法

4.本文总结

参考资料

您的项目需求