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;
}

正如你所注意到的，第二和第三篇文章的顏色發生了變化。這是因為它們相鄰。所以，它選擇了前面而不是后面?，F在，讓我們用 :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 ?，F在，我們要選擇相反的東西。以前，我們只能向前選擇，所以 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.本文總結

參考資料

您的項目需求

1、HTML選擇器

一、為啥美化網頁：

2、字體的樣式：

3、懸浮和陰影

三、js與我們的html代碼結合的方式：

1、引入js的第一種方法

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

3、變量

4、關系（比較運算）

5、數組