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 字符串用于存储和操作文本，是引号中的零个或多个字符组成。可以用单引号或双引号生成。 转义字符的使用，是为避免字符串中的引号产生歧义从而被切、报错。

其它六个有效转义序列：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 //成功响应函数