js改變input的value值（jsinput增加屬性值）

思維導圖：

1- 思維導圖

1、什么是JavaScript

首先：JavaScript和Java 是完全不同的語言，不論是概念還是設計！??！

其次：JavaScript是屬于HTML和web的編程語言，是對網頁行為進行編程的。

2、JavaScript的使用

2.1 使用JavaScript代碼的兩種方式：

1、 在<script>標簽中：<script>這里是javascript代碼</script>。

2、 把代碼寫在后綴為 .js 的文件中，在<script>標簽屬性src引用 <script src=”代碼文件.js”></script>

2.2 Js顯示方案：

1、 window.alert() 彈窗警告

2、 document.write() 寫入HTML輸出

3、 innerHTML 寫入HTML元素

4、 console.log() 寫入瀏覽器控制臺

2.3 使用瀏覽器執行JavaScript代碼

在電腦上打開瀏覽器，按F12（有些是Fn+F12），出現調試窗口，在Console 選擇項中，可以直接編寫、執行、調試JavaScript代碼。以google瀏覽器為例：

2 – 使用示例

3、語法與變量

在 HTML 中，JavaScript 語句是由 web 瀏覽器“執行”的“指令”。 計算機程序是由計算機“執行”的一系列“指令”。

在編程語言中，這些編程指令被稱為語句。

JavaScript 程序就是一系列的編程語句。

注釋：在 HTML 中，JavaScript 程序由 web 瀏覽器執行。

1、JavaScript的變量和php變量類似，都是弱類型的。

2、使用 var 來聲明變量，以分號；分隔語句。

3、使用 = 號為變量賦值

4、使用 +-*/ 等算數運算符來計算值，（因此js 中不能使用連字符- 來命名變量）

5、//之后 或 /*與*/ 之間的代碼被視為注釋

4、數據類型

JavaScript 是一種弱類型或者說動態語言。不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定?？梢允褂猛粋€變量保存不同類型的數據：字符串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）

4.1 布爾類型

布爾表示一個邏輯實體，可以有兩個值：true 和 false。

4.2 Null類型

Null 類型只有一個值： null。

4.3 Undefined 類型

一個沒有被賦值的變量會有個默認值 undefined?？梢酝ㄟ^將變量的值設置為 null 來清空變量。但是用undefined清空變量則會有意想不到的bug等著你。

4.4 數字

JavaScript 只有一種數字類型：基于 IEEE 754 標準的雙精度 64 位二進制格式的值（-(253 -1) 到 253 -1）。它并沒有為整數給出一種特定的類型。數字可以帶小數點，也可以不帶。

NaN 屬于 JavaScript 保留詞，指示某個數不是合法數。嘗試用一個非數字字符串進行除法會得到 NaN（Not a Number）。

Infinity （或 -Infinity）是 JavaScript 在計算數時超出最大可能數范圍時返回的值。

絕不要用前導零寫數字（比如 07）。

一些 JavaScript 版本會把帶有前導零的數解釋為八進制。

默認地，Javascript 把數顯示為十進制小數。

但是您能夠使用 toString() 方法把數輸出為十六進制、八進制或二進制。例如：varNum.toString(8)

其它數字方法：

toExponential() 返回字符串值，它包含已被四舍五入并使用指數計數法的數字。

toFixed() 返回字符串值，它包含了指定位數小數的數字。常用于處理金錢toFixed(2)

toPrecision() 返回字符串值，它包含了指定長度的數字。

valueOf() 以數值返回數值。

parseFloat() 解析一段字符串并返回數值。允許空格。只返回首個數字。

parseInt() 解析一段字符串并返回數值。允許空格。只返回首個數字。

4.5 字符串

JavaScript 字符串用于存儲和操作文本，是引號中的零個或多個字符組成?？梢杂脝我柣螂p引號生成。 轉義字符的使用，是為避免字符串中的引號產生歧義從而被切、報錯。

其它六個有效轉義序列：b 退格鍵；f 換頁；n 新行；r 回車；t 水平制表符；v 垂直制表符；

內建屬性 length 可返回字符串的長度。

其它常用JavaScript字符串方法：

1、 indexOf() 方法返回字符串中指定文本首次出現的索引（位置），未找到返回-1

2、 lastIndexOf() 方法返回指定文本在字符串中最后一次出現的索引，未找到返回-1

3、 search() 方法搜索特定值的字符串，并返回匹配的位置

4、 slice(start, end) 提取字符串的某個部分并在新字符串中返回被提取的部分

5、 substring() 類似于 slice()。不同之處在于 substring() 無法接受負的索引。

6、 substr(start, length) 提取字符串的某個部分并在新字符串中返回被提取的部分

7、 replace(old, new) 方法用另一個值new替換在字符串中指定的值old

replace() 方法不會改變調用它的字符串。它返回的是新字符串。它只替換首個匹配，且對大小寫敏感。如需執行大小寫不敏感的替換，則使用正則表達式。

8、 toUpperCase() 把字符串轉換為大寫

9、 toLowerCase() 把字符串轉換為小寫

10、 concat() 連接兩個或多個字符串

11、 trim() 方法刪除字符串兩端的空白符

12、 split(“分隔符”) 將字符串轉換為數組

4.6 數組

JavaScript 數組用于在單一變量中存儲多個值。由括號[和反括號]或者 new Array()定義聲明。通過引用索引號（下標號）來引用某個數組元素，例如arr[0]。數組是一種特殊類型的對象。在 JavaScript 中對數組使用 typeof 運算符會返回 “object”。雖說如此，Js數組還是以數組來描述，區分：數組是[]括號，對象是{}花括號。

常用的數組屬性和方法：

1、 length 屬性返回數組的長度（數組元素的數目）

2、 Array.foreach() 函數遍歷數組，一般最安全的方法是使用for循環。

3、 push方法向數組添加新元素，返回新數組的長度

4、 Array.isArray() 函數判斷變量是否是數組（ECMAScript 5，部分老瀏覽器不支持）

5、 toString() 把數組轉換為數組值（逗號分隔）的字符串，join(“分隔符”)也可以達到相同效果

6、 pop() 方法從數組中刪除最后一個元素

7、 shift() 方法會刪除首個數組元素，并把所有其他元素“位移”到更低的索引，返回“位移出”的字符串

8、 unshift() 方法（在開頭）向數組添加新元素，并“反向位移”舊元素，返回新數組的長度

注意：push、unshift、pop、shift 這四個方法一起記憶：數組頭尾添加刪除，添加返回長度，刪除返回元素。

9、 splice(start, length,…) 方法可用于向數組添加新項，返回一個包含已刪除項的數組，一般的用法是刪除元素:splice(start,1)

10、concat() 方法通過合并（連接）現有數組來創建一個新數組, 不會更改現有數組。它總是返回一個新數組, 可以使用任意數量的數組參數。

11、slice(start, end) 方法用數組的某個片段切出新數組。它不會從源數組中刪除任何元素

數組排序：

1、 sort() 方法以字母順序對數組進行排序。如果要對數值進行排序，則需自定義比值函數。例如：arr.sort(function(a, b){return a – b})

2、 reverse() 方法反轉數組中的元素。

3、 Math.max 查找數組中的最高值

4、 Math.min 查找數組中的最低值

4.7 對象

天天面向對象，卻沒個對象。

示例：

var person = {

 // 屬性:屬性值,

 firstName: "Bill",

 lastName : "Lee",

 id      : 627,

 // 方法名：函數定義(參數)

 fullName : function(arg) {

   return arg+this.firstName + " " + this.lastName;

 }

};

對象訪問: 值person.id 方法person.fullname(‘hello！’);

JavaScript this 關鍵詞指的是它所屬的對象

它擁有不同的值，具體取決于它的使用位置：

在方法中，this 指的是所有者對象。

單獨的情況下，this 指的是全局對象。

在函數中，this 指的是全局對象。

在函數中，嚴格模式下，this 是 undefined。

在事件中，this 指的是接收事件的元素。

像 call() 和 apply() 這樣的方法可以將 this 引用到任何對象。

5、運算符

運算符常用

1、算術運算符 +-*/ ；

2、比較和邏輯運算符：

與&& 或|| 非!

大于> 小于< 大于等于>= 小于等于<= 等于== 全等于=== 不等于!=；

3、賦值運算 ++,– ,+=, -= 。

不常用，但是關鍵時刻很好用的“位運算符”：

5-運算符圖

6、條件語句

使用 if 來規定要執行的代碼塊，如果指定條件為 true

使用 else 來規定要執行的代碼塊，如果相同的條件為 false

使用 else if 來規定要測試的新條件，如果第一個條件為 false

使用 switch 來規定多個被執行的備選代碼塊

例1：

if(表達式){
      代碼塊
}else if(表達式){
      代碼塊
}else{
      代碼塊
}
例2：
switch(表達式) {
    case n:
       代碼塊
       break;
    case n:
       代碼塊
       break;
    default:
       默認代碼塊
}

7、循環語句

for – 多次遍歷代碼塊

for/in – 遍歷對象屬性

while – 當指定條件為 true 時循環一段代碼塊

do/while – 當指定條件為 true 時循環一段代碼塊

for (語句1; 語句 2; 語句 3) {

要執行的代碼塊

}

語句 1 在循環（代碼塊）開始之前執行。

語句 2 定義運行循環（代碼塊）的條件。

語句 3 會在循環（代碼塊）每次被執行后執行。

break 語句“跳出”循環。

continue 語句“跳過”循環中的一個迭代。

continue 語句（不論有無標簽引用）只能用于跳過一個迭代。

break 語句，如果沒有標簽引用，只能用于跳出一個循環或一個 switch。

如果有標簽引用，則 break 語句可用于跳出任意代碼塊

8、函數

8.1 函數的表達和定義

JavaScript 函數通過 function 關鍵詞進行定義，其后是函數名和括號 ()。

函數名可包含字母、數字、下劃線和美元符號（規則與變量名相同）。

圓括號可包括由逗號分隔的參數

例如：

function functionName(parameters) {

要執行的代碼

}

JavaScript 函數也可以使用表達式來定義。函數表達式可以在變量中存儲；

例如：var x = function (a, b) {return a * b};這樣的函數是一個匿名函數。

箭頭函數允許使用簡短的語法來編寫函數表達式。您不需要 function 關鍵字、return 關鍵字和花括號。例如：

// ES5

var x = function(x, y) {

return x * y;

}

// ES6 — 早期版本可能不支持

const x = (x, y) => { return x * y };

9、HTML DOM操作

通過 HTML DOM，JavaScript 能夠訪問和改變 HTML 文檔的所有元素。

9.1 什么是HTML DOM

HTML DOM 文檔對象模型。

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被結構化為對象樹：

9_1-對象樹

9.2 HTML事件

HTML 事件是發生在 HTML 元素上的“事情”。

當在 HTML 頁面中使用 JavaScript 時，JavaScript 能夠“應對”這些事件。

常見的HTML事件：

onchange HTML 元素已被改變

onclick 用戶點擊了 HTML 元素

onmouseover 用戶把鼠標移動到 HTML 元素上

onmouseout 用戶把鼠標移開 HTML 元素

onkeydown 用戶按下鍵盤按鍵

onload 瀏覽器已經完成頁面加載

9.3 HTML DOM Document 對象

HTML DOM 文檔對象是您的網頁中所有其他對象的擁有者。

常用的方法和屬性：

1、獲取HTML元素

document.getElementById(id) 通過元素 id 來查找元素

document.getElementsByTagName(name) 通過標簽名來查找元素

document.getElementsByClassName(name) 通過類名來查找元素

注意：如果您需要查找匹配指定 CSS 選擇器（id、類名、類型、屬性、屬性值等等）的所有 HTML 元素，請使用 querySelectorAll() 方法，但是querySelectorAll() 不適用于 Internet Explorer 8 及其更早版本。

2、改變HTML元素

element.innerHTML = new html content 改變元素的 inner HTML

element.attribute = new value 改變 HTML 元素的屬性值

element.setAttribute(attribute, value) 改變 HTML 元素的屬性值

element.style.property = new style 改變 HTML 元素的樣式

3、添加和刪除元素

document.createElement(element) 創建 HTML 元素

document.removeChild(element) 刪除 HTML 元素

document.appendChild(element) 添加 HTML 元素

document.replaceChild(element) 替換 HTML 元素

document.write(text) 寫入 HTML 輸出流

4、添加事件處理

document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件處理程序

document.getElementById(“myBtn”).addEventListener(“click”, function(){code}) 事件監聽器，addEventListener() 方法。

5、查找HTML對象

document.anchors 返回擁有 name 屬性的所有 <a> 元素。

document.applets 返回所有 <applet> 元素（HTML5 不建議使用）

document.baseURI 返回文檔的絕對基準 URI

document.body 返回 <body> 元素

document.cookie 返回文檔的 cookie

document.doctype 返回文檔的 doctype

document.documentElement 返回 <html> 元素

document.documentMode 返回瀏覽器使用的模式

document.documentURI 返回文檔的 URI

document.domain 返回文檔服務器的域名

document.domConfig 廢棄。返回 DOM 配置

document.embeds 返回所有 <embed> 元素

document.forms 返回所有 <form> 元素

document.head 返回 <head> 元素

document.images 返回所有 <img> 元素

document.implementation 返回 DOM 實現

document.inputEncoding 返回文檔的編碼（字符集）

document.lastModified 返回文檔更新的日期和時間

document.links 返回擁有 href 屬性的所有 <area> 和 <a> 元素

document.readyState 返回文檔的（加載）狀態

document.referrer 返回引用的 URI（鏈接文檔）

document.scripts 返回所有 <script> 元素

document.strictErrorChecking 返回是否強制執行錯誤檢查

document.title 返回 <title> 元素

document.URL 返回文檔的完整 URL

9.4 動畫

原理：JavaScript 動畫是通過對元素樣式進行漸進式變化編程完成的。這種變化通過一個計數器來調用。當計數器間隔很小時，動畫看上去就是連貫的。

主要實現步驟：

1、 用document對象獲取到要執行動畫的元素，比如id=“”animation，則先 var item=document. getElementById(“animation”);

2、 設置定時器setInterval(代碼，秒)。setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。

3、 在執行函數中利用document對象操作HTML元素，動態改變HTML元素的樣式，從而達到動畫的效果。

示例代碼：

function myMove() {
   var elem = document.getElementById("animate");  //獲取元素
   var pos = 0;
   var id = setInterval(frame, 5);                   //設置定時器
    function frame() {
       if (pos == 350) {
            clearInterval(id);        //結束定時器
       } else {
            pos++;                     //計時
            elem.style.top = pos + 'px';     //改變元素的高度位置
            elem.style.left = pos + 'px';     //改變元素的距左位置
       }
    }
}
 

10、Browser DOM操作

10.1 什么是Browser DOM

瀏覽器對象模型（Browser Object Model (BOM)）

存在瀏覽器對象模型（BOM）的官方標準。

現代的瀏覽器已經（幾乎）實現了 JavaScript 交互相同的方法和屬性，因此它經常作為 BOM 的方法和屬性被提到。

10.2 常用的屬性和方法

window.document.getElementById(“header”); 等同于document.getElementById(“header”);

瀏覽器窗口尺寸

window.innerHeight – 瀏覽器窗口的內高度（以像素計）

window.innerWidth – 瀏覽器窗口的內寬度（以像素計）

瀏覽器窗口（瀏覽器視口）不包括工具欄和滾動條

document.documentElement.clientHeight

document.documentElement.clientWidth

document.body.clientHeight

document.body.clientWidth

其它窗口方法：

window.open() – 打開新窗口

window.close() – 關閉當前窗口

window.moveTo() -移動當前窗口

window.resizeTo() -重新調整當前窗口

screen.width 屬性返回以像素計的訪問者屏幕寬度。

screen.height 屬性返回以像素計的訪問者屏幕的高度。

screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去諸如窗口工具條之類的界面特征。

screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去諸如窗口工具條之類的界面特征。

screen.colorDepth

screen.pixelDepth

瀏覽器信息和路由：

window.location.href 返回當前頁面的 href (URL)

window.location.hostname 返回 web 主機的域名

window.location.pathname 返回當前頁面的路徑或文件名

window.location.protocol 返回使用的 web 協議（http: 或 https:）

window.location.assign 加載新文檔

history.back() – 等同于在瀏覽器點擊后退按鈕

history.forward() – 等同于在瀏覽器中點擊前進按鈕

navigator: window.navigator 對象包含有關訪問者的信息

10.3 彈出框：警告框、確認框和提示框:

1、 警告窗window.alert()，alert(文字);當警告框彈出時，用戶將需要單擊“確定”來繼續。

2、 確認框window.confirm()，confirm(文字); 當確認框彈出時，用戶將不得不單擊“確定”或“取消”來繼續進行。如果用戶單擊“確定”，該框返回 true。如果用戶單擊“取消”，該框返回 false。

3、 提示框window.prompt()，prompt();當提示框彈出時，用戶將不得不輸入值后單擊“確定”或點擊“取消”來繼續進行。如果用戶單擊“確定”，該框返回輸入值。如果用戶單擊“取消”，該框返回 NULL。

10.4 Timing事件

window 對象允許以指定的時間間隔執行代碼。

這些時間間隔稱為定時事件。

通過 JavaScript 使用的有兩個關鍵的方法：

setTimeout(function, milliseconds) 在等待指定的毫秒數后執行函數。

setInterval(function, milliseconds) 等同于 setTimeout()，但持續重復執行該函數。

setTimeout() 和 setInterval() 都屬于 HTML DOM Window 對象的方法

10.5 cookie和本地存儲

Cookie 是在您的計算機上存儲在小的文本文件中的數據。

11、表單與Ajax

HTML 表單驗證能夠通過 JavaScript 來完成。

如果某個表單字段（fname）是空的，那么該函數會發出一條警告消息，并返回 false，以防止表單被提交出去。表單提交通常有兩種方式，同步提交和異步提交。

1、 同步提交，則是直接通過html的form提交或者在js代碼中觸發submit()提交方法。同步提交，頁面會直接跳轉到請求地址進行重新加載。

2、 異步提交，常用的方式就是ajax

11.1 什么是Ajax

ajax：Asynchronous JavaScript And XML，它并非編程語言。它能做的事情：

不刷新頁面更新網頁

在頁面加載后從服務器請求數據

在頁面加載后從服務器接收數據

在后臺向服務器發送數據

它僅僅是組合了瀏覽器內建的 XMLHttpRequest 對象（從 web 服務器請求數據）；JavaScript 和 HTML DOM（顯示或使用數據）。Ajax 應用程序可能使用 XML 來傳輸數據，但將數據作為純文本或 JSON 文本傳輸也同樣常見。

Ajax 允許通過與場景后面的 Web 服務器交換數據來異步更新網頁。這意味著可以更新網頁的部分，而不需要重新加載整個頁面。

11.2 基本知識

Ajax 的核心是 XMLHttpRequest 對象。所有現代瀏覽器都支持 XMLHttpRequest 對象。XMLHttpRequest 對象用于同幕后服務器交換數據。這意味著可以更新網頁的部分，而不需要重新加載整個頁面。

XMLHttpRequest 對象向服務器發送請求：

1、open(method, url, async) 建立請求

method：請求的類型：GET 還是 POST

url：服務器（文件）位置

async：true（異步）或 false（同步）

2、send() 向服務器發送請求（用于 GET）

3、send(string) 向服務器發送請求（用于 POST）

服務器響應：

1、onreadystatechange 定義了當 readyState 屬性發生改變時所調用的函數。

2、readyState 保存了 XMLHttpRequest 的狀態。

0: 請求未初始化

1: 服務器連接已建立

2: 請求已接收

3: 正在處理請求

4: 請求已完成且響應已就緒

3、status 響應狀態

200: “OK”

403: “Forbidden”

404: “Page not found”

statusText 返回狀態文本（例如 “OK” 或 “Not Found”）

12、JSON

JSON: JavaScript Object Notation（JavaScript 對象標記法）。

JSON 是一種存儲和交換數據的語法。

JSON 是通過 JavaScript 對象標記法書寫的文本。

例如：

{"person":[    //數組
   { "firstName":"Bill", "lastName":"Gates" },
   { "firstName":"Steve", "lastName":"Jobs" },
],  
	“str”:’test’, //字符串
	”num”:1627, // 數字
	”float_num”:1.23,
 “other”:{      //對象
      “key”:”values”,
      “bool”:false,         //布爾值
      “none”:Null          //空值
 }
}

1、JSON 的常規用途是同 web 服務器進行數據傳輸。在從 web 服務器接收數據時，數據永遠是字符串。通過 JSON.parse() 解析數據，這些數據會成為 JavaScript 對象。

2、JSON 的常規用途是同 web 服務器進行數據交換。在向 web 服務器發送數據時，數據必須是字符串。通過 JSON.stringify() 把 JavaScript 對象轉換為字符串。

13、Jquery

jQuery 是JavaScript的一個庫，旨在處理瀏覽器不兼容性并簡化 HTML DOM 操作、事件處理、動畫和 Ajax。

JQuery常用操作：

$(“div”).click(function(){}); //點擊

$(“#a”).width(“300”); //寬度設置

$(“.a”).height(“300”); //高度設置

$(“input[name=’a’]”).css(“display”,”none”); //樣式設置

$(“.a”).css({ color: “red”, background: “blue” });//以名值對的形式設定樣式

$(“#a”).addClass(“select”); //為元素增加名稱為select的class

$(“#a”).removeClass(“select”); //刪除元素名稱為select的class

$(“#a”).toggleClass(“select”); //如果存在（不存在）就刪除（添加）名稱為select的class

$(“#a”).attr(“data-id”); //屬性值獲取

//表單操作

$(“input”).val(); //返回表單輸入框的value值

$(“input”).val(“test”); //將表單輸入框的value值設為test

$(“input”).val(“”); //將表單輸入框的value清空

$(“#formId”). serialize() 方法通過序列化表單值，創建 URL 編碼文本字符串

$(“#formId”). serializeArray() 通過序列化表單值來創建對象數組（名稱和值

$.ajax({ //ajax請求

dataType: “json”,

url: url,

method:”GET” //get post

data: data, //json數據傳參

success: success //成功響應函數