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 //成功响应函数
上一篇: 全球最呆萌动物排行榜 大熊猫只能排第三,第一名为动漫角色
下一篇: 微信小程序云开发之新手环境配置
推荐阅读
-
js改变input的value值(jsinput增加属性值)
-
js改变input的value值(jsinput增加属性值)
-
原生js和jQuery随意改变div属性style的名称和值
-
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
-
js通过value找到key;js通过对象的属性值找到属性名(代码分析)
-
jquery 监听input的value值改变
-
JQ实时监听input的value值,原生JS实时监听input的内容变化
-
请问js动态增加表格的每个字段为input,但是不能提交值
-
请教js动态增加表格的每个字段为input,但是不能提交值
-
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)_javascript技巧