js改变input的value值(jsinput增加属性值)


思维导图:

web客户端编程基础 – JavaScript

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浏览器为例:

web客户端编程基础 – JavaScript

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、赋值运算 ++,– ,+=, -= 。

不常用,但是关键时刻很好用的“位运算符”:

web客户端编程基础 – JavaScript

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 模型被结构化为对象树:

web客户端编程基础 – JavaScript

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 //成功响应函数

二维码

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 394062665@qq.com 举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论
客服