整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天學(xué)習(xí)了HTML的選擇器和JavaScript的基礎(chǔ)知識(shí)。
<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后代選擇器
/*
后代選擇器
某個(gè)元素的后面 祖爺爺 爺爺 爸爸 你
*/
body p{
background: red;
}
1234567結(jié)果圖：
子代選擇器
/*子代選擇器 一代 兒子*/
body > p {
background: yellow;
}
1234結(jié)果圖：
相鄰兄弟選擇器
.active +p{
background: palegreen;
}
123結(jié)果圖：
通用選擇器
/*通用選擇器
當(dāng)前選擇元素向下所有的兄弟元素
*/
.active~p{
background: slateblue;
}
123456結(jié)果圖：
/*
ul的最后一個(gè)子元素，不使用我們的class和id選擇器
*/
ul li:last-child{
background: palegreen;
}
123456 /*ul的第一個(gè)子元素，不使用我們的class和id選擇器*/
ul li:first-child{
background: red;
}
1234 /*
選中p1:定位父元素，選擇當(dāng)前的p的第一個(gè)選擇
選擇當(dāng)前p元素的父級(jí)元素,選擇父級(jí)元素的第一個(gè)，并且是當(dāng)前元素才生效，順序
*/
p:nth-child(2){
background: yellowgreen;
}
1234567 /*選擇父元素下的p元素的第二個(gè)類型*/
p:nth-of-type(2){
background: red;
}
1234/*鼠標(biāo)懸浮顏色*/
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>
/*
屬性選擇器：屬性名=屬性值（正則表達(dá)式）
a[]{
}
*/
a[id]{
background: red;
}
a[id=first]{
background: yellowgreen;
}
/*
class中有l(wèi)ink的元素的
*=:包含等于=：絕對(duì)等于
*/
a[class*="link"]{
background: fuchsia;
}
/*選中href中的以https開頭的元素*/
a[href^=https]{
background: slateblue;
}
/*選中href中的以png結(jié)尾的元素*/
a[href$=png]{
background: #4158D0;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354因?yàn)槲沂菍W(xué)習(xí)JAVA的，所有HTML的學(xué)習(xí)到這里就告一段落了，之后就靠我們自己從其他渠道獲取HTML知識(shí)。
JavaScript
1.有效的傳遞頁面的信息
2.美化頁面，頁面的漂亮，才能吸引用戶
3.凸顯主題
4.提高我們的用戶的體驗(yàn)
重點(diǎn)突出的文字，使用span標(biāo)起來:
結(jié)果：
<!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)是一種用來表現(xiàn)HTML
（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。
CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。 [1]
</p>
<p class="p2">
簡單的說，層疊就是對(duì)一個(gè)元素多次設(shè)置同一個(gè)樣式，這將使用最后一次設(shè)置的屬性值。例如對(duì)一
個(gè)站點(diǎn)中的多個(gè)頁面使用了同一套 CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以
針對(duì)這些樣式單獨(dú)定義一個(gè)樣式表應(yīng)用到頁面中。這些后來定義的樣式將對(duì)前面的樣式設(shè)置進(jìn)行重寫，
在瀏覽器中看到的將是最后面設(shè)置的樣式效果。
</p>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849效果圖：
<style>
/*默認(rèn)的顏色*/
a{
text-decoration: none;
color: black;
}
/*鼠標(biāo)懸浮類的顏色*/
a:hover{
color: red;
font-size: 50px;
}
/*鼠標(biāo)按住沒有釋放的顏色*/
a:active{
color: blue;
font-size: large;
}
/*
參數(shù)：
陰影的顏色
水平偏移
垂直偏移
陰影半徑
*/
#price{
text-shadow: blue 10px 0px 10px;
}
</style>
123456789101112131415161718192021222324252627JavaScript介紹：
Js這門語言主要是完成頁面的數(shù)據(jù)驗(yàn)證，一次它運(yùn)行在客戶端，需要運(yùn)行瀏覽器來解析執(zhí)行我們的js代碼，原來他的名字LiveScript，為了吸引更多的java程序員去使用，更名為javaScript
Js是弱類型，java是強(qiáng)類型。
特點(diǎn)：
1/交互性(它可以做的就是信息的動(dòng)態(tài)交互)
2/安全性（不能直接訪問本地磁盤）
3/跨平臺(tái)（只要是可以解釋js的瀏覽器都可以執(zhí)行，和平臺(tái)沒關(guān)系）
什么是變量？變量就是存方法某些值的內(nèi)存的命名。
Js的變量類型：
數(shù)值類型：number
字符串類型：string
對(duì)象類型：object
布爾類型：boolean
函數(shù)類型：function
Js中的特殊的值：
Undefined未定義：所有的js變量未賦予初始值的時(shí)候，默認(rèn)都是Undefined
Null：空值
NaN：全稱not a number 非數(shù)字 非數(shù)值
Js中的定義變量的格式：
var 變量名;
var 變量名=值;
等號(hào)：==等于是簡單的做字面值的比較
全等號(hào)：===除了比較字面值之外，還會(huì)比較兩個(gè)變量的數(shù)據(jù)類型
邏輯運(yùn)算：
且運(yùn)算：&&
或運(yùn)算：||
取反運(yùn)算：！
在js當(dāng)中，所有的變量都可以作為boolean的變量去使用
0，null，undefined，””（空串）都認(rèn)為是false
&&且運(yùn)算:
第一種情況：
當(dāng)表達(dá)式全為真的時(shí)候，返回最后一個(gè)表達(dá)式的值
第二種情況：
在表達(dá)式中，有一個(gè)為假的時(shí)候，返回第一個(gè)為假的表達(dá)式的值
||或運(yùn)算：
第一種情況：
當(dāng)表達(dá)式全為假的時(shí)候，返回最后一個(gè)表達(dá)式的值
第二中情況：
只有一個(gè)表達(dá)式為真，就會(huì)返回第一個(gè)為真的表達(dá)式的值
并且&&和||都是有一個(gè)短路效果的，
當(dāng)這個(gè)&&或者||有了結(jié)果了，后面的表達(dá)式就不再執(zhí)行。
Js中的數(shù)組定義：
格式：
Var 數(shù)組名=[]; //空數(shù)組
Var 數(shù)組名=[1,”abc”,true]; //定義數(shù)組的同時(shí)給它賦值
原文鏈接：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=
作者：巴黎最后的探戈舞步
載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載
最近的:has()選擇器允許您對(duì)父元素和其他祖先應(yīng)用樣式，本文將向您展示如何在Web應(yīng)用程序開發(fā)中使用它。
在CSS的世界中，選擇器是驅(qū)動(dòng)我們?cè)诰W(wǎng)頁上看到的美麗且響應(yīng)式設(shè)計(jì)的工作的馬。它們?cè)试S開發(fā)者根據(jù)元素的屬性、位置和關(guān)系來選擇和樣式化HTML元素。
一個(gè)較新的CSS選擇器/偽類被稱為 :has ，它允許您選擇每個(gè)具有與您提供給 :has() 函數(shù)的選擇器匹配的子元素的元素。它在CSS中是一個(gè)重要的解決方案，不僅僅是一個(gè)簡單的“父級(jí)”選擇器。
使用 :has() 選擇器，您可以將樣式應(yīng)用于父元素或祖先HTML元素。這樣我們就可以擴(kuò)展選擇器的范圍，包括一個(gè)或多個(gè)兄弟或子元素。
在本文中，我們將討論CSS選擇器以及它們?cè)诖a中的多個(gè)使用示例。
:has() 選擇器是一種CSS偽類，允許您選擇包含特定子元素的元素。它是一個(gè)強(qiáng)大的CSS工具，您可以用于以下目的：
:has() 選擇器可以與任何有效的CSS選擇器一起使用，包括其他偽類。這使得它成為一個(gè)非常多功能的工具，可以以各種方式使用。
這是一個(gè)關(guān)于如何使用 :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 選擇器的實(shí)際示例。但在我們深入使用 :has 選擇器之前，讓我們先來看一下為什么選擇器很重要。
要開始這個(gè)項(xiàng)目，你可以從這個(gè)GitHub倉庫克隆起始代碼。完成的倉庫也在這個(gè)倉庫中，但你需要使用起始代碼來跟隨本教程。
https://github.com/joycefoster642/-has-css-project
上面的圖片展示了我們的項(xiàng)目在瀏覽器上啟動(dòng)時(shí)的樣子。
注意：該項(xiàng)目只是一個(gè)簡單的類似博客的演示，用于展示 :has 偽類的一般用法。
以前，開發(fā)者只能選擇前進(jìn)，但是現(xiàn)在有了 :has 選擇器，你現(xiàn)在也可以選擇后退。
現(xiàn)在，我們要選擇一個(gè)元素的父級(jí)。過去，通常是這樣做的：
article + article {
background-color: pink;
}正如你所注意到的，第二和第三篇文章的顏色發(fā)生了變化。這是因?yàn)樗鼈兿噜彙Ｋ裕x擇了前面而不是后面。現(xiàn)在，讓我們用 :has 選擇器來反向進(jìn)行操作。
article:has(+ article) {
background-color: coral;
}在上面的代碼中，我們只是簡單地說，如果文章有相鄰的文章，選擇前兩篇文章。
現(xiàn)在，請(qǐng)注意這次選擇了第一篇和第二篇文章。
使用 :has ，我們不僅可以選擇父元素，還可以選擇子元素。
article:has(span) .bold {
background-color: lightyellow;
}
article:has(span) .italic {
text-decoration: underline;
}在 index.html 文件中，我們使用 span 為文章2和3應(yīng)用了一個(gè)加粗和斜體的類。在我們的CSS文件中，我們使用 article:has(span) 語法選擇了我們的 span 。以下是結(jié)果：
在這里，您可以看到對(duì)第二和第三篇文章中的粗體和斜體應(yīng)用的更改。我們不僅選擇了文章，還選擇了 span 類別應(yīng)用的內(nèi)容。
在本節(jié)中，我們將介紹如何使用 :has 偽類與 :not 。
article:not(:has(span)) {
background-color: yellowgreen;
}以下是結(jié)果：
只會(huì)改變沒有 span 類的文章。:has 選擇器還支持 0R 邏輯條件。
article:has(p, .button) {
background-color: royalblue;
}以下是結(jié)果：
在這里，我們可以選擇一個(gè)帶有 OR 的段落的文章，或者選擇一個(gè)帶有 button 類的任意文章。這三篇文章被選擇是因?yàn)樗鼈兌加幸粋€(gè) p 的HTML標(biāo)簽。但是如果我們移除 p 標(biāo)簽，只有最后一個(gè)帶有“buy now” button 類的文章會(huì)保持著顏色。
在本節(jié)中，我們將探討使用 :has 選擇器時(shí)的更多實(shí)際用例和示例。
導(dǎo)航菜單示例
這將引導(dǎo)我們進(jìn)入我們項(xiàng)目的下一部分，它看起來是這樣的：
在這里，我們將鼠標(biāo)移到位置上，您可以看到當(dāng)我們將鼠標(biāo)懸停在位置上時(shí)，我們擁有的不同位置。
當(dāng)我們不懸停在位置和員工上時(shí)，您會(huì)注意到根本沒有任何下拉菜單的指示。如果我們?yōu)榇耸褂眯揎楊悾覀儗⒉坏貌皇謩?dòng)進(jìn)入HTML文件并編寫代碼。然而，我們可以通過 :has 偽類來實(shí)現(xiàn)這一點(diǎn)。
.nav__item:has(.nav__submenu)::after {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f150";
margin-left: 1rem;
}在上面的代碼中，我們說，如果 .nav__item 里面有 .nav__submenu ，則只將設(shè)計(jì)應(yīng)用于前兩個(gè)導(dǎo)航圖標(biāo)。以下是結(jié)果：
我們可以用JavaScript創(chuàng)建一個(gè)模態(tài)框，但現(xiàn)在我們也可以使用 :has 選擇器來實(shí)現(xiàn)。下面的示例將帶我們進(jìn)入項(xiàng)目的下一個(gè)部分，效果如下：
當(dāng)復(fù)選框被選中時(shí)，沒有任何反應(yīng)。但是我們可以通過 :has 偽類輕松實(shí)現(xiàn)某些操作。
.awesome:has(.awesome__terms:checked) {
display: none;
}.awesome 類是我們的模態(tài)框。然后我們說如果我們有 .awesome__terms: checked ，再次點(diǎn)擊復(fù)選框時(shí)讓下一頁顯示出來。
這是另一個(gè)快速示例，展示了如果選中了某個(gè)選項(xiàng)，我們可以如何應(yīng)用它。
.three:has(.lightswitch:checked) {
background-color: var(--COLOR);
color: var(--BGCOLOR);
}一旦我們應(yīng)用上述代碼并點(diǎn)擊“切換到暗模式”，下面是結(jié)果：
現(xiàn)在，您可以無縫切換淺色和深色模式。
我們的最后一個(gè)例子將引導(dǎo)我們進(jìn)入項(xiàng)目的這一部分，看起來像這樣：
上面的圖像顯示了包含文本“名稱”和文本輸入的 label 。現(xiàn)在，我們要選擇相反的東西。以前，我們只能向前選擇，所以 label 必須在文本 input 之后。現(xiàn)在，我們可以根據(jù) input 中的內(nèi)容更改 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>
在我們上面的代碼中，我們對(duì) index.html 應(yīng)用了一個(gè)模式。在這里，我們有一個(gè) required pattern ，其中的正則表達(dá)式表示文本必須以大寫字母開頭，并且至少為3個(gè)字符。在我們的 style.css 中，我們包含了以下代碼
label:has(~ .name:valid)::after {
content: '??';
color: limegreen;
margin-left: 1rem;
font-size: 3rem;
}以下是結(jié)果：
名字“Joyce”符合首字母大寫且最多三個(gè)單詞的要求，因此出現(xiàn)了綠色的勾號(hào)。
既然我們已經(jīng)到了教程的結(jié)尾，希望你對(duì) CSS 選擇器/偽類有所了解。
CSS :has 選擇器提供了一種創(chuàng)新的方法來解決網(wǎng)頁開發(fā)中的復(fù)雜樣式挑戰(zhàn)。在本文中，我們探討了這個(gè)強(qiáng)大選擇器的功能和潛在用例，它允許我們根據(jù)元素的后代來定位目標(biāo)元素。
通過利用 :has 選擇器，網(wǎng)頁開發(fā)人員可以提高他們的CSS代碼的效率和靈活性，簡化選擇過程，減少不必要的類和嵌套結(jié)構(gòu)的需求。
這個(gè)選擇器使開發(fā)人員能夠創(chuàng)建更清晰、更易于維護(hù)的代碼，同時(shí)保持HTML結(jié)構(gòu)的完整性。
由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。
家好，很高興又見面了，我是"高級(jí)前端?進(jìn)階?"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)！
高級(jí)前端?進(jìn)階
今天給大家?guī)淼闹黝}是 bundlejs，一個(gè)基于 esbuild 優(yōu)秀在線打包器和包大小檢查器，希望大家真正用的上，話不多說，直接進(jìn)入正題。
bundlejs（發(fā)音為 bundle js）是一種快速簡便的方法來對(duì) typescript、javascript、jsx 和 npm 項(xiàng)目進(jìn)行 tree shaking、打包、minify 和 compress（在 gzip 或 brotli 中），同時(shí)可以查看總包的文件大小。bundlejs 是一個(gè)類似于 bundlephobia 的在線工具，不同的是 bundlejs 是在終端瀏覽器本地完成打包。
bundlejs 的 logo
bundlejs 旨在通過遵循打包器使用的相同方法來生成更準(zhǔn)確的包大小估計(jì)：
使用 bundlejs 的好處是：
目前 bundlejs 在 Github 上通過 MIT 協(xié)議開源，有超過 600+的 star，是一個(gè)值得長期關(guān)注的前端開源項(xiàng)目。
bundlejs 內(nèi)部依賴 esbuild 來實(shí)現(xiàn)打包、轉(zhuǎn)換、轉(zhuǎn)譯、壓縮、tree shaking 和遍歷文件的能力。 更加具體的來說，bundlejs 使用 esbuild-wasm，它能夠訪問這些功能的一個(gè)子集，關(guān)鍵限制主要包括：
為了解決這些問題，esbuild 的插件系統(tǒng)發(fā)揮了作用。 bundlejs 總共依賴 4 個(gè)插件來解決這些限制：
以上插件實(shí)現(xiàn)了 esbuild-wasm 創(chuàng)建 javascript 包，而 esbuild-wasm 是一個(gè)用于 esbuild 的跨平臺(tái) WebAssembly 二進(jìn)制文件，一個(gè) JavaScript 打包器和壓縮器。
在 v0.2 中，bundlejs 添加了對(duì)自定義配置 (configs) 的支持，目前支持大部分 esbuild 的構(gòu)建選項(xiàng)，以及一些用于更改默認(rèn) CDN 和壓縮算法的添加選項(xiàng)。
{
"cdn": "https://unpkg.com",
"compression": "gzip",
// 注意：有 3 種可用的壓縮算法，brotli、gzip 和 lz4
"esbuild": {
"target": [ "esnext"],
"format": "esm",
"bundle": true,
"minify": true,
"treeShaking": true,
"platform": "browser"
}
}同時(shí)，可以借助于 bundlejs 打包平臺(tái)提供的能力在不同開發(fā)者之間分享配置。
內(nèi)容交付網(wǎng)絡(luò) (CDN) 是一種在全球范圍內(nèi)快速分發(fā)代碼的方法。 在 bundlejs 的上下文中，CDN 代表 bundlejs 可以從中獲取的代碼在線存儲(chǔ)庫。
例如，unpkg.com 是一個(gè)快速的全球內(nèi)容交付網(wǎng)絡(luò)，適用于 npm 上的所有內(nèi)容。 它用于使用如下 URL 快速輕松地從 npm 上的任何包加載任何文件：https://unpkg.com/package-name@version/file.js，其他平臺(tái)，如： skypack.dev，esm.sh 也提供了類似功能。
默認(rèn)情況下，bundlejs 允許使用如下的代碼：
export * from "@okikio/animate";bundlejs 會(huì)自動(dòng)從 unpkg 中獲取特定的包。
{
"cdn": "https://cdn.esm.sh",
// OR
"cdn": "skypack"
}bundlejs 提供了使用以下方式進(jìn)行打包的選項(xiàng)：
就 brotli 來說，其是一種壓縮算法，可以很好地壓縮數(shù)據(jù)，但是，與其他替代方案相比，它的速度非常慢。 bundlejs 通過 deno-brotli 包含了一個(gè) WASM 版本的 brotli，deno-brotli 主要做了以下兩件事情：
關(guān)于 bundlejs 的更多用法，比如：壓縮質(zhì)量、Aliases 和 Externals、Esbuild 配置選項(xiàng)、編輯器按鈕、JSX支持、共享打包會(huì)話、Bundle 分析、安全和性能等高級(jí)用法本文不再展開，大家可以參考文末的資料自行學(xué)習(xí)
本文主要和大家介紹 bundlejs，即一個(gè)基于 esbuild 的優(yōu)秀在線打包器和包大小檢查器 。相信通過本文的閱讀，大家對(duì) bundlejs 會(huì)有一個(gè)初步的了解。
因?yàn)槠邢蓿恼虏]有過多展開，如果有興趣，可以在我的主頁繼續(xù)閱讀，同時(shí)文末的參考資料提供了大量優(yōu)秀文檔以供學(xué)習(xí)。最后，歡迎大家點(diǎn)贊、評(píng)論、轉(zhuǎn)發(fā)、收藏！
https://blog.okikio.dev/documenting-an-online-bundler-bundlejs
https://bundlejs.com/
https://github.com/okikio/bundlejs
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
