JavaScript的個人學習隨手記(二)

来源:http://www.cnblogs.com/fcug/archive/2016/09/28/5918340.html
-Advertisement-
Play Games

JS HTML DOM 改變 HTML 輸出流 JavaScript 能夠創建動態的 HTML 內容: 今天的日期是: Sat Sep 24 2016 15:06:50 GMT+0800 (中國標準時間) 在 JavaScript 中,document.write() 可用於直接向 HTML 輸出流 ...


JS HTML DOM

 

改變 HTML 輸出流

JavaScript 能夠創建動態的 HTML 內容:

今天的日期是: Sat Sep 24 2016 15:06:50 GMT+0800 (中國標準時間)

在 JavaScript 中,document.write() 可用於直接向 HTML 輸出流寫內容

 

document.write(Date());

 

 

改變 HTML 內容

修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。

如需改變 HTML 元素的內容,請使用這個語法:

document.getElementById(id).innerHTML=new HTML

 

如:

document.getElementById("p1").innerHTML="New text!";

 

改變 HTML 屬性

如需改變 HTML 元素的屬性,請使用這個語法:

document.getElementById(id).attribute=new value

 

 

JavaScript HTML DOM - 改變 CSS

改變 HTML 樣式

如需改變 HTML 元素的樣式,請使用這個語法:

document.getElementById(id).style.property=new style

 

例子 1

下麵的例子會改變 <p> 元素的樣式:

<p id="p2">Hello World!</p> 
<script>
document.getElementById("p2").style.color="blue";
</script>


 

 

JavaScript HTML DOM 事件

例子 1

在本例中,當用戶在 <h1> 元素上點擊時,會改變其內容:

<h1 onclick="this.innerHTML='謝謝!'">請點擊該文本</h1>

 

 

使用 HTML DOM 來分配事件

HTML DOM 允許您通過使用 JavaScript 來向 HTML 元素分配事件

 

onload 和 onunload 事件

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。

onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本,並基於這些信息來載入網頁的正確版本。

onload 和 onunload 事件可用於處理 cookie。

 

 

onchange 事件

onchange 事件常結合對輸入欄位的驗證來使用。

 

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 構成了滑鼠點擊事件的所有部分。首先當點擊滑鼠按鈕時,會觸發 onmousedown 事件,當釋放滑鼠按鈕時,會觸發 onmouseup 事件,最後,當完成滑鼠點擊時,會觸發 onclick 事件。

 

JavaScript HTML DOM 元素(節點)

創建新的 HTML 元素

如需向 HTML DOM 添加新元素,您必須首先創建該元素(元素節點),然後向一個已存在的元素追加該元素。

實例

<div id="div1">
<p id="p1">這是一個段落</p>
<p id="p2">這是另一個段落</p></div> 
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node); 
var element=document.getElementById("div1");
element.appendChild(para);
</script>

 

 

從父元素中刪除子元素:

parent.removeChild(child);

 

 

 

 

 

JavaScript Number 對象

JavaScript 只有一種數字類型。

可以使用也可以不使用小數點來書寫數字。

JavaScript 不是類型語言。與許多其他編程語言不同,JavaScript 不定義不同類型的數字,比如整數、短、長、浮點等等。

JavaScript 中的所有數字都存儲為根為 10 的 64 位(8 比特),浮點數。

整數(不使用小數點或指數計數法)最多為 15 位。

小數的最大位數是 17,但是浮點運算並不總是 100% 準確

 

八進位和十六進位

如果首碼為 0,則 JavaScript 會把數值常量解釋為八進位數,如果首碼為 0 和 "x",則解釋為十六進位數。

 

 

 

 

JavaScript 對象

JavaScript RegExp 對象

RegExp 對象用於規定在文本中檢索的內容。

RegExp 是正則表達式的縮寫。

當您檢索某個文本時,可以使用一種模式來描述要檢索的內容。RegExp 就是這種模式。

簡單的模式可以是一個單獨的字元。

更複雜的模式包括了更多的字元,並可用於解析、格式檢查、替換等等。

可以規定字元串中的檢索位置,以及要檢索的字元類型,等等。

 

定義 RegExp

RegExp 對象用於存儲檢索模式。

通過 new 關鍵詞來定義 RegExp 對象。以下代碼定義了名為 patt1 的 RegExp 對象,其模式是 "e":

var patt1=new RegExp("e");

當您使用該 RegExp 對象在一個字元串中檢索時,將尋找的是字元 "e"。

RegExp 對象的方法

RegExp 對象有 3 個方法:test()、exec() 以及 compile()。

 

 

test() 方法檢索字元串中的指定值。返回值是 true 或 false。

exec() 方法檢索字元串中的指定值。返回值是被找到的值。如果沒有發現匹配,則返回 null。

compile() 方法用於改變 RegExp。

 

compile() 既可以改變檢索模式,也可以添加或刪除第二個參數。

例子:

var patt1=new RegExp("e"); 
document.write(patt1.test("The best things in life are free")); 
patt1.compile("d"); 
document.write(patt1.test("The best things in life are free"));

 

由於字元串中存在 "e",而沒有 "d",以上代碼的輸出是:

true false

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 透切理解面向對象三大基本特性是理解面向對象五大基本原則的基礎. 三大特性是:封裝,繼承,多態 所謂封裝: 也就是把客觀事物封裝成抽象的類,並且類可以把自己的數據和方法只讓可信的類或者對象操作,對不可信的進行信息隱藏。封裝是面向對象的特征之一,是對象和類概念的主要特性。 簡單的說,一個類就是一個封裝了 ...
  • 多態:龍生九子,各有不同 同樣都是繼承了同一個父類,但是父類中的方法並不使用任何一個子類,那麼在這就需要子類重新編寫這個方法的主體 1、需要父類同意子類可以重新編寫自己的方法 virtual - 虛方法 2、子類只能重寫父類允許重寫的方法,只能重寫虛方法 override - 重寫覆蓋虛方法 所有的 ...
  • Atitit 延遲綁定架構法attilax總結 配置文件的延遲綁定1 Api屬性與方法的回調延遲綁定1 後期綁定和前期綁定2 延遲調用2 用 Java 語言延遲綁定2 什麼是推遲綁定 C++3 配置文件的延遲綁定 通過把配置文件延遲綁定在啟動bat文件上,可以及時靈活的切換配置文件。 Api屬性與方 ...
  • Atitit java集成內嵌瀏覽器與外嵌瀏覽器attilax總結 HTML5將顛覆原生App世界。這聽起來有點危言聳聽,但若認真分析HTML5的發展史,你會發現,這個世界的發展趨勢確實就是這樣。 熟知歷史才能預知未來,先讓我們來看看HTML5為什麼誕生、這8年是怎麼過來的。 HTML5的誕生 自W ...
  • 摘要: 微服務架構被提出很短的時間內,就被越來越多的開發人員推崇,簡單來說其主要的目的是有效的拆分應用,實現敏捷開發和部署 。本分享即嘗試介紹微服務架構的一些實施細節和要求,探詢微服務架構的由來,並最終提供我們團隊內部的一些實踐總結,希望對大家有幫助。 WHAT - 什麼是微服務 微服務簡介 這次參... ...
  • 摘要: 最近很多阿裡內部的同學和客戶私信來咨詢如何學習 Docker 技術。為此,我們列了一個路線圖供大家學習Docker和阿裡雲容器服務。這個列表包含了一些社區的優秀資料和我們的原創文章。我們會隨著Docker技術的發展持續更新本文,也會在雲棲社區繼續貢獻內容來幫助同學們快速入門或持續提高。 Do... ...
  • 背景 現在的web系統已經越來越多的應用緩存技術,而且緩存技術確實是能實足的增強系統性能的。我在項目中也開始接觸一些緩存的需求。 開始簡單的就用jvm(java托管記憶體)來做緩存,這樣對於單個應用伺服器來說很好。 為了系統的可用性,需要做災備,那麼就要多準備一套系統環境,這時就會有一些共用資源的問題 ...
  • 在JavaScript代碼有很多單鏈表形式的代碼,如if_else,switch等,倘若我們想將其如同Promise一樣扁平化處理呢?下麵我們就一起來看看唄~ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...