《前端基礎核心知識筆記:HTML、CSS、JavaScript 及 BOM/DOM》

html

前端三劍客的介紹:

????HTML:頁面內容的載體
??? Css:用來美化和指定頁面的顯示效果
??? JavaScript:頁面顯示的過程中,可以動態改變頁面的內容

重點屬性
type="text"文本輸入
type="password"密碼輸入
<a href="servletC"> SerlvertC</a>超鏈接
type="radio" value="值" 單選框
type="checkbox" value="值" 多選框
<meta charset="UTF-8"> 在<head>  作用設置編碼格式
</head> ? action是跳轉的界面 method:表示請求方式
<form  action = "提交地址" method = "post"> <input type="submit">
</form>
BOM
BOM的概念介紹
1.BOM面向對象的思維
2.將真實的瀏覽器轉成JS的內存對象window對象
3.調用window對象,相當于調用瀏覽器的功能
4,因為BOM的存在,我們就可以在js代碼和瀏覽器進行對話
window對象的常見屬性
1.  localtion   瀏覽器輸入地址框的抽象,使用他可以進行地址的獲取或指定地址的加載
2.  document 將整個頁面抽象的對象
3.  localStorage 瀏覽器的持久化存儲方式,不刪一直有數據
4.  sessionStorage 瀏覽器的非持久存儲方式頁面關閉就消失
window的三個提示框
window.alert("普通的提示框")
window.confirm("確定提示框")--返回true/false
window.prompt("輸入提示框")--返回字符串

DOM(重點)

dom的概念
1. DOM就是將文檔頁面抽象成document
2. 通過document對象的方法,完成對文檔的
dom的元素節點操作
1. 查找元素節點對象1.1直接查找,根據元素節點的標識來查找var 單個對象 = document.getElementById("id值");var對象數組=document.getElementsByClassName("class值");var 對象數組 = document.getElementsByTagName("元素名");1.2間接查找:根據元素節點之間的父子關系查找1.2.1父找子var 子元素數組=父元素節點.children;1.2.2子找父var 父標簽=子標簽節點.parentElement;
2.刪除元素節點對象元素節點.remove();
3.添加元素節點對象創建元素節點var 新元素節點 = document.createElement("標簽名")元素節點內添加其他元素節點父元素節點.appendChild(新元素節點)
4.替換元素節點對象 【了解】父元素節點.repalce(舊節點 被替換,新節點 替換后);  
DOM的文本節點操作
innerText  不會解析標簽(元素節點.innerText)
innerHTML: 會解析標簽
查詢-----document
1.可以根據id查詢----document.getElementById
2.可以根據標簽名查詢---document.getElementsByTagName
3.根據類名查詢--document.getElementsByClassName
4.孩子節點---- ? .children
5.父節點------- ? .parentElement
6.弟節點------- ? .nextElementSibling;
7.兄節點------- ? .previousElementSibling

JavaScript事件驅動

鼠標事件: HTML DOM 事件對象 | 菜鳥教程

鍵盤事件: HTML DOM 事件對象 | 菜鳥教程

表單事件: HTML DOM 事件對象 | 菜鳥教程

事件記憶
鼠標: onclick ondblclick
鍵盤: onkeydown onkeyup
表單: onchange onsubmit
正則表達式(了解,ai自動生成需要的)
元字符
[]表達式---包含
^n---以n開頭
[^]-----取反(或不存在)
\d 數字
\w 數字字母下劃線
量詞
n{x}---重復x次
n{x,y}--重復x到y次
+:一次或多次

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/89462.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/89462.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/89462.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

基于vue.js的客戶關系管理系統(crm)的設計與實現(源碼+論文)

相關技術 SSM框架介紹 開發環境&#xff1a; 技術&#xff1a;SSM框架&#xff08;Spring Spring MVC MyBatis&#xff09; 描述&#xff1a; SSM框架是Java Web開發中廣泛使用的流行框架之一。Spring&#xff1a;提供全面的基礎設施支持&#xff0c;管理應用對象&#…

AWS權限異常實時告警系統完整實現指南

概述 本文將詳細介紹如何構建一個基于CloudTrail → S3 → Lambda → SNS → Webhook/Email架構的AWS權限異常實時告警系統。該系統能夠實時監控AWS環境中的權限異常事件,并通過多種方式發送告警通知,幫助企業及時發現和響應安全威脅。 系統架構 ┌───────────…

NIO網絡通信基礎

文章目錄概述一、Socket二、NIO三大組件與事件三、Reactor模式四、NIO通信案例4.1、服務端4.2、客戶端本文為個人學習筆記整理&#xff0c;僅供交流參考&#xff0c;非專業教學資料&#xff0c;內容請自行甄別 概述 前篇中提到&#xff0c;BIO是阻塞的IO&#xff0c;阻塞體現在…

Redis4緩存穿透:布隆過濾器與空對象方案

緩存穿透緩存穿透是指客戶端請求的數據在緩存中和數據庫中都不存在&#xff0c;這樣緩存永遠不會生效&#xff0c;這些請求都會達到數據庫。1)方案1&#xff1a;緩存空對象在緩存中存儲一個空值每次讀取這個空優點&#xff1a;實現簡單&#xff0c;維護方便缺點&#xff1a;造成…

域名WHOIS信息查詢免費API使用指南

本文介紹由接口盒子提供的免費域名WHOIS查詢API服務&#xff0c;幫助開發者快速獲取域名的注冊信息、到期時間、DNS服務器等關鍵數據。 一、接口基本信息 ?功能說明?&#xff1a;查詢頂級域名的WHOIS信息&#xff08;不支持國別域名/中文域名&#xff09;?請求地址?&#…

【18位數據次方提高數據輸出速度】2022-3-9

實在是無法忍受W10輸出數據那么慢W7需要2分鐘輸出數據W10則需要10分鐘完成W7需要3分鐘W10則需要15分鐘完成輸出數據&#xff0c;雖然W10運算速度比W7快很多但是加上輸出速度總體完成時間居然差不多&#xff01;隨著使用數組超過百萬W7數據輸出時間也變長&#xff0c;隨著數組數…

云原生技術與應用-Kubernetes架構原理與集群環境部署

目錄 一.為什么需要kubernetes 1.對于開發人員 2.對于運維人員 二.kubernetes帶來的挑戰 三.kubernetes架構解析 1.master節點的組件 2.node節點包含的組件 3.kubernetes網絡插件 四.kubernetes快速安裝kubernetes集群 1.部署docker環境 2.部署kubernetes集群 五.Metrics-…

百度權重提升技巧分析:從底層邏輯到實戰策略

在搜索引擎優化&#xff08;SEO&#xff09;領域&#xff0c;百度權重始終是網站運營者關注的核心指標之一。它不僅反映了網站在百度搜索中的綜合表現&#xff0c;更直接影響著流量獲取能力與商業價值。然而&#xff0c;百度權重并非百度官方直接公布的數據&#xff0c;而是第三…

模擬數據生成---使用NGS數據模擬軟件VarBen

目錄 1.在BAM文件中根據指定的變異等位基因分數的指定位置或區域隨機選擇read。 2.篩選變異等位基因分數的reads: 3.裝BWA和samtools軟件包(samtools在linux系統中下載過,前文有講過) 4.寫py腳本 5.下載pysam庫模塊 6.下載參考基因組hg38 7.解壓gz 8.建立samtools索引…

Redis-典型應用-分布式鎖

目錄 1.什么是分布式鎖? 2.分布式鎖的實現 3.引入過期時間 4.引入校驗ID 5.引入lua腳本: 6.引入看門狗(watch dog) 7.引入redislock算法: 1.什么是分布式鎖? 在 分布式系統中,會出現多個節點同時訪問同一個公共資源, 此時就需要通過鎖來作互斥控制,避免出現類似于多線程…

Dinky (Mac) 本地開發環境搭建指南

目錄 一、前置條件 二、代碼準備 三、前端環境搭建 1. 安裝Node環境 2. 安裝PNPM 3. 構建前端 四、后端環境搭建 1. 本地編譯依賴 2. 添加必要依賴 3. 啟動后端服務 五、訪問系統 附錄&#xff1a;官方參考 一、前置條件 確保已安裝以下軟件&#xff1a; 軟件要求…

Java Set 集合詳解:從基礎語法到實戰應用,徹底掌握去重與唯一性集合

作為一名 Java 開發工程師&#xff0c;你一定在實際開發中遇到過需要去重、唯一性校驗、快速查找等場景。這時候&#xff0c;Set 集合 就成為你不可或缺的工具。本文將帶你全面掌握&#xff1a;Set 接口的定義與核心方法常見實現類&#xff08;如 HashSet、TreeSet、LinkedHash…

在分布式系統中,如何保證緩存與數據庫的數據一致性?

口訣&#xff1a; 讀多寫少用旁路&#xff0c;先更庫再刪緩存&#xff1b; 強一致選寫透&#xff0c;緩存代理更庫走&#xff1b; 性能優先用寫回&#xff0c;異步批量有風險&#xff1b; 高并發加雙刪&#xff0c;延遲兜底防舊殘&#xff1b; 強一致用鎖串&#xff0c;并發雖低…

【洛谷P1417】烹調方案 題解

題目大意 一共有 nnn 件食材&#xff0c;每件食材有三個屬性&#xff0c;aia_iai?&#xff0c;bib_ibi? 和 cic_ici?&#xff0c;如果在 ttt 時刻完成第 iii 樣食材則得到 ai?tbia_i-t\times b_iai??tbi? 的美味指數&#xff0c;用第 iii 件食材做飯要花去 cic_ici? 的…

vue svg實現一個環形進度條組件

svg實現一個環形進度條設計初衷&#xff1a;本來想直接使用element的進度條組件的&#xff0c;但是好多屬性都沒有辦法控制。 UI設計的圖如下&#xff0c;需要控制未完成和已完成的顏色&#xff0c;端點的形狀改為普通的butt 所以使用svg實現了一個環形進度條組件element組件設…

02 51單片機之LED閃爍

文章目錄1、單片機1-1、簡介1-2、應用場景2、51單片機2-1、背景2-2、主要品牌及其產品2-3、基本組成2-4、命名規則3、單片機內部結構3-1、單片機內部結構圖3-2、單片機內部結構3-3、單片機內部管腳圖3-4、單片機最小系統3-5、開發板介紹4、點亮LED4-1、新建工程4-1-1、創建工程…

Typecho博客集成算術驗證碼防御垃圾評論實戰指南

文章目錄 Typecho實現算術驗證碼防御機器人垃圾評論的完整方案 背景與問題分析 技術方案設計 系統架構 技術選型 核心實現步驟 1. 創建驗證碼生成函數 2. 修改評論表單模板 3. 添加AJAX刷新功能 4. 創建驗證碼刷新接口 5. 添加評論提交驗證 安全增強措施 1. 防止暴力破解 2. 增…

clonezilla 導出自動化恢復iso

clonezilla 下載及U盤工具下載 clonezilla rufus U盤寫入工具ventoy U盤工具downloaddownloaddownload clonezilla 備份&#xff0c;連貫上一篇文章參考 Choose Clonezilla live (VGA 800x600) Wait for it to complete Language selection Keyboard Settings Select Mode …

深度學習模型開發部署全流程:以YOLOv11目標檢測任務為例

深度學習模型開發部署全流程&#xff1a;以YOLOv11目標檢測任務為例 深度學習模型從開發到部署的完整流程包含需求分析、數據準備、模型訓練、模型優化、模型測試和部署運行六大核心環節。YOLOv11作為新一代目標檢測模型&#xff0c;不僅延續了YOLO系列的高效實時性能&#xff…

單片機(STM32-串口通信)

一、串口通信基礎概念串口通信&#xff08;Serial Communication&#xff09;是一種在計算機和外部設備之間進行數據傳輸的通信方式。它通過串行方式逐位傳輸數據&#xff0c;是最基本和常用的通信接口之一。主要特點1. 串行傳輸(1)數據按位順序傳輸&#xff0c;一次只能傳輸一…