使用jQuery刪除HTML中所有的內(nèi)聯(lián)樣式

在不知道寫點啥好了,打算寫一篇糊弄糊弄觀眾.

不要以為我起的標(biāo)題沒有意義啊,即便是糊弄那也是有一定價值滴.

先來討論下,刪除inline樣式有個毛的意義呢?其實意義大了,據(jù)我多年的項目經(jīng)驗,老有那么一小撮人喜歡在HTML中寫樣式(Me Too),導(dǎo)致后期項目調(diào)整的時候需要花部分時間整理樣式.

好的,那么標(biāo)題的作用就來了

$("*[style]").attr("style", "");

最省事的方法就是使用jQuery干掉所有的內(nèi)置樣式,避免了修改html的麻煩從而屏蔽掉沖突的問題進而從容的修改樣式表.哎呀我去,這排比句用的,我看我也蒙.

行了,知道大概針對啥樣的問題就沒毛病,如果你不關(guān)注我,那么老鐵,扎心了啊~

今天，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。

可是與此相對的是，極少大學(xué)的計算機專業(yè)愿意開設(shè)前端課程，大部分前端工程師的知識，也都是在實踐和工作中不斷學(xué)習(xí)的。

最近收到很多同學(xué)的后臺留言，說希望多推出一些前端方向的教程。

今天我們就帶來一門適合前端初學(xué)者的課程，可以帶你從零入門 HTML、CSS、JS、React 等前端核心技能，并創(chuàng)建一個待辦事項的管理應(yīng)用～

項目效果：

課程從最基礎(chǔ)的 HTML/ CSS/JS 講起，還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深，層層遞進，如果你想快速上手 React 框架，這門課會是你非常好的選擇。

訪問“實驗樓”官網(wǎng)，搜索“從 0 到 1 構(gòu)建待辦事項應(yīng)用”就能學(xué)習(xí)全部課程內(nèi)容。

以下是課程第一節(jié)的內(nèi)容 —— 「HTML 簡介」，帶你快速入門HTML，讓我們一起進入前端的大門看看吧：

「HTML 簡介」

實驗介紹

本實驗是對 HTML 進行學(xué)習(xí)，并且較詳細(xì)的說明了 Web 是如何工作的。主要內(nèi)容有：HTML 常見標(biāo)簽、HTML 文檔結(jié)構(gòu)、HTML 表格和表單、HTML 有序列表和無序列表。通過本節(jié)學(xué)習(xí)，可以構(gòu)建簡單的 HTML 網(wǎng)頁。

知識點

什么是 HTML
Web 是如何工作的
文檔結(jié)構(gòu)
常見標(biāo)簽
表格
表單
有序列表和無序列表

什么是 HTML

HTML（超文本標(biāo)記語言）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML 不需要編譯，可以直接由瀏覽器執(zhí)行，它的解析依賴于瀏覽器的內(nèi)核。它不是一種編程語言，而是一種標(biāo)記語言。

Web 是如何工作的

下面我們來演示用戶是如何看到一個網(wǎng)頁顯示的。

具體來講：

當(dāng)用戶通過瀏覽器輸入網(wǎng)址后，瀏覽器先在 DNS 服務(wù)器上找到它，然后對它進行解析。
解析完成后，瀏覽器給服務(wù)器發(fā)送 http 請求。
服務(wù)器同意這個請求，就把 HTML 文件發(fā)送回瀏覽器。
瀏覽器拿到 HTML 文件，對其解析執(zhí)行，顯示在用戶屏幕上。

HTML 文檔結(jié)構(gòu)

首先我們來看一個例子：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

這是一個 HTML 的基本骨架，我們將逐步介紹這些是什么意思。

文檔類型聲明

<!DOCTYPE html> 是我們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。

html 標(biāo)簽

html 標(biāo)簽即根元素，此處表示文檔的開始，該標(biāo)簽包含兩個子標(biāo)簽：head 和 body。

head 元素

head 標(biāo)簽下面所包含的標(biāo)簽由 title、meta、link、style、script 等（后面會講到）。

title 標(biāo)簽

作用：設(shè)置文檔的標(biāo)題或者名稱。瀏覽器通常將該標(biāo)簽的內(nèi)容顯示在窗口頂部或者標(biāo)簽頁上。每個 HTML 文檔只能有一個，必須有一個 title 標(biāo)簽。

meta 標(biāo)簽

<metacharset="UTF-8"> 聲明字符的編碼格式為 utf-8。

body 標(biāo)簽

body 標(biāo)簽定義文檔的主體，也就是我們的主要內(nèi)容（比如文本、超鏈接、圖像、表格和列表等）。

常見標(biāo)簽

1.h 系類標(biāo)簽

h 標(biāo)簽有六種 h1，h2，h3，h4，h5，h6，它代表著我們的標(biāo)題。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一級標(biāo)題</h1>
    <h2>我是二級標(biāo)題</h2>
    <h3>我是三級標(biāo)題</h3>
    <h4>我是四級標(biāo)題</h4>
    <h5>我是五級標(biāo)題</h5>
    <h6>我是六級標(biāo)題</h6>
  </body>
</html>

為了大家能更有效的學(xué)習(xí)，請使用實驗樓的環(huán)境。首先我們新建一個文件，點擊 File，然后 New File，命名為 index.html。

然后輸入上面的代碼。

讓我們來看一下運行效果吧。鼠標(biāo)右鍵 index.html 文件，點擊 Open With，然后點擊 Preview。

最終效果為：

2.p 標(biāo)簽

p 標(biāo)簽是我們的文本標(biāo)簽，p 標(biāo)簽會自動在其兩個標(biāo)簽之間創(chuàng)建一些空白。刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。

<p>我是第一段文字，實驗樓，做實驗，學(xué)編程</p>
<p>我是第二段文字，實驗樓，做實驗，學(xué)編程</p>

3. 圖片標(biāo)簽

HTML 的圖像是通過標(biāo)簽 <img> 來定義的。語法: <imgsrc="圖片地址"/> 刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。

<p>實驗樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 標(biāo)簽

<a> 標(biāo)簽是超鏈接標(biāo)簽，意思就是我們點擊它可以跳轉(zhuǎn)到一個網(wǎng)頁。刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。

<a href="https://www.shiyanlou.com/">實驗樓</a>

點擊文字：

跳轉(zhuǎn)到指定網(wǎng)頁：

篇幅有限，后續(xù)的課程內(nèi)容，請在“實驗樓”邊敲代碼邊學(xué)習(xí)～

訪問“實驗樓”官網(wǎng)，搜索“從 0 到 1 構(gòu)建待辦事項應(yīng)用”，就能找到課程，繼續(xù)學(xué)習(xí)啦！

1）定義n初始值0,

<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            "n": 0
        },
        methods: {},
        computed: {},

    })
</script>

（2）定義自加按鈕，展示n的值，和判斷結(jié)果

<p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
<h2>n == {{n}}</h2>
<h3 v-text="n == 1"></h3>

1、v-show

<h1 style="color: red">使用v-show進行條件渲染</h1>
<h3 v-show="n == 1">使用v-show進行條件渲染</h3>

2、v-if

<h1 style="color: red">使用v-if進行條件渲染</h1>
<h3 v-if="n == 1">使用v-if進行條件渲染</h3>

3、v-if v-else-if v-else

<h1 style="color: red">使用if else-if else進行條件渲染 </h1>
<h3 v-if="n === 1">使用v-if進行條件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if進行條件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if進行條件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if進行條件渲染 if else-if - v-else</h3>

4、template

<h1 style="color: red">使用template v-if進行條件渲染 </h1>
<template v-if="n == 1">
    <h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
</template>

執(zhí)行結(jié)果

筆記分享

<pre v-show="true">
    條件渲染：
    1、v-if
        寫法：
            （1）v-if = "表達式"
            （2）v-else-if = "表達式"
            （3）v-else = "表達式"
        適用于：切換頻率較低的場景
        特點：不展示的DOM元素將被直接刪除
        注意：v-if和v-else-if、v-else一起使用的時候，要求結(jié)構(gòu)不可以被打斷
    2、v-show
        寫法：v-show = "表達式"
        適用于：切換頻率較高的場景
        特點：不展示的DOM元素未被移除，使用樣式進行隱藏
    3、備注
        使用v-if時，元素可能無法獲取到，使用v-show是可獲取到的
    4、使用template v-if
        寫的時候template對內(nèi)容進行了包裹，
        等最終頁面渲染的時候，將把template標(biāo)簽刪掉，
        這也就是說不破壞原來的樣式。
        但是template只能配合v-if進行使用。
</pre>

源碼截圖

在線咨詢

上一篇：springboot(二十四)使用springboot發(fā)送郵件
下一篇：JavaScript的bind方法

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商