JavaScript
概述
-
简称JS，由网景公司和Sun公司联合推出的一门编写前端脚本动作的编程语言；本质上与Java没有关系，是一门独立的编程语言
-
JS是一门前端的编程语言，主要用于给网页添加动作，如表单的验证、动态的请求服务器等
-
JS通常是书写在HTML页面中的指定位置，当使用浏览器运行HTML时浏览器会解析HTML中的JS代码并执行；属于解释型编译语言，JS的执行依赖于浏览器提供的JS解释器
-
开发JS
- 第一种编写位置：在html页面的head部分书写
<head> <script type="text/javascript"> 书写JS代码的位置，单引号双引号都行，执行顺序从上到下 //向浏览器的控制台输出内容 console.log("HelloWorld");//调试JS常用的输出语句 //浏览器弹窗 //window.alert("来嘛～"); //向浏览器页面输出内容 document.write("成年人的世界可以用两个字概括：算了<br/>"); document.write("不太想活，又不敢去死"); document.write("<a href='wallhaven-q29z2l.jpg'>图片</a>") </script> </head>- 第二种编写位置：在一个 .js结尾的脚本文件中编写，然后在需要使用的HTML
//外部文件：jq.js <head> <!-- 引入外部的JS文件，且标签必须成对出现 --> <script type="text/javascript" src="jq.js"></script> </head>
JS基础语法
-
变量
-
声明：JS是一门弱类型的编程语言，变量没有具体的类型，所有的变量的声明都可以使用var；JS会将所有var声明的变量提到最前面，称为声明前置
-
JS对语句末的分号不是特别敏感，会自动检测与下一条语句匹配
-
赋值：赋值不提前，还在原来位置
<script type="text/javascript"> { //局部变量声明，用let声明；var声明但变量都是全局变量 let a = 10; } //书写JS代码 //声明 var a; var a=100,b,c,d; //赋值 b = 20; //一个变量声明但没有赋值，输出为undefined console.log(a,b,c,d); //声明并赋值 var s=d=f=200; console.log(s,d,f); //JS解构变量赋值方式，按照数组的语法进行位置的匹配赋值 var [aa,bb,dd] = ["hang","yuan","kun"]; console.log(aa,bb,dd); </script>
-
-
数据类型：JS的变量不区分类型，但是变量存的值有数据类型
-
数值类型：整形，小数
-
字符串类型：JS中可以用单引号或双引号代表字符串
-
布尔类型：JS中有真值和假值的区分
真值 假值 true false 非空的变量 0 非空的内容 null(手动赋值为null或者一个对象没有值)、
undefined(一个变量声明但为赋值) -
特殊数据类型：
- undefined
- Infinity(把零作为除数时，无穷大)
- NaN(not a number不是一个数，非法的算数运算)
- 一个函数：isNaN(变量 / 值)，是不是 不是一个数
console.log(1/0);//Infinity console.log(isNaN('hang'));//true
-
-
运算符
-
算数运算符：+ - * / % ++ –
-
赋值运算符：= += -= *= /= %=
-
关系运算符：> >= < <= == === != !==
-
逻辑运算符：&& || ！
-
三元运算符（三目运算符）：布尔表达式？值1:值2
<script type="text/javascript"> var str1 = '123'; var m = 123; //两个等号比较的是变量里实际的值 console.log(str1==m); //三个等号比较变量的值以及数据类型 console.log(str1===m); //不等号 多一个等号会兼顾数据类型 console.log(str1!=m); //false console.log(str1!==str2); //false </script>
-
-
分支语句
-
循环语句
//分支语句： if(){ //实现 }else if(){ //实现 }else{ //实现 } //循环语句：for循环、while循环、do ... while循环 var sum = 0; for(var i = 0; i <= 100; i++){ sum += i; } -
数据类型转换
//隐式转换：指JS在执行过程中觉得有必要，则自动完成转换 //当遇到 - * / 时都会把字符串类型转换成数字类型 //任何一个值与字符串做 + 运算，得到的还是一个字符串 //手动转换： //Number()：只能转换纯数值的字符串，包含字符的会返回NaN(not a number) //parseInt()：可以转换包含字符的字符串，规则是取第一个数值作为返回的结果，如果字符串的第一个字符不是数组，则返回NaN //函数isNaN()：用于判断给定的值或变量，是不是一个数，数值返回false，字符串返回false //表达式：由运算符连接的变量，最终会产生一个结果
函数
-
函数是由多个语句组成的，完成特定功能的代码块。可以提高代码的复用性
-
函数的定义：
- JS中的函数没有强制的返回值类型约束
- 参数的定义不用书写类型，直接书写变量名
function 函数名(参数列表){ //函数体 //函数的返回值，没有类型约束，返回什么类型的值都可以 return 返回值; //可以结束函数的执行 } -
函数的调用
-
函数名(参数列表)
-
参数传递的个数与参数列表可以不匹配
-
JS中每一个函数内都有一个隐含的对象arguments数组，里面封装保存了传递的所有参数
//函数的基本使用 <script type="text/javascript"> //声明一个无参，无返回值的函数 function fun1(){ console.log('无参函数'); } //定义一个有参有返回值的函数 function sum(a,b){ console.log('计算两个数的和'); return a+b; } //调用函数 fun1(); var s = sum(1,2); console.log('和是：',s); </script> function funSum(a,b){ //JS函数中有一个隐含的封装了参数值的对象：arguments，是一个数组 //可以从arguments中获取调用函数传递的所有参数 console.log('funSum:',arguments); for(var i = 0; i < arguments.length; i++){ console.log('funSum:',arguments[i]); } return a+b; } //调用函数 //var sum = funSum(); 相当于两个undefind相加 var sum = funSum(1,8,200); console.log(sum);
-
-
JS函数的特殊用法
-
匿名函数
var fun2 = function(a,b){ console.log('匿名函数',a,b); } //调用 fun2('呵呵',9); -
定义只能使用一次的函数
//定义完函数原地调用，没有函数名，只能调用一次 ( function(){ console.log('调用一次性函数') } )(); -
将函数作为参数传递
//将函数作为变量进行传递 function fun3(){ console.log('函数作为变量') } //一共调用了两次fun3() var fun4 = fun3; console.log(fun4); fun4(); //定义一个函数 function fun5(m){ m(); } fun5(fun4); //把fun4当作参数传递 -
函数作为函数的返回值
//函数可以作为返回值 function fun6(){ console.log('fun6被调用') return function (){ console.log('fun6的返回值') } } fun6()();
-
-
全局作用域：全局作用域内定义的变量，在全局范围内任何位置都可以使用
-
局部作用域：定义在函数内部的变量，作用范围仅限当前函数内部，但是如果函数内的一个变量没有用var声明，会自动晋升为全局变量
- 当全局变量和局部变量命名冲突，局部优先
- 函数在定义的过程中一定避免与变量名命名冲突
<script type="text/javascript"> //此时m的范围是全局的 var m = 10; function fun1(){ //n的使用范围仅限当前代码块中 var n = 20; //没有用var声明，则自动提升为全局 x = 100; console.log('fun1:',m,n,x); } function fun2(){ console.log('fun2:',m,x) } fun1(); fun2(); console.log('**************'); function fun3(){ var a = b = c = 20; //此时var的作用仅对a有效 } fun3(); console.log(b); </script>
数组
-
声明
-
JS中数组的类型没有限制
-
定义数组
//第一种创建数组方式，声明一个空的数组，与var arr2=[];是等效的 var arr1 = new Array(); arr1[0] = 'hehe'; arr1[1] = 100; console.log(arr1); //第二种创建数组方式 var arr2 = []; console.log(arr2); var arr3 = [1,2,'erha']; console.log(arr3[2]); -
遍历数组：for…in针对于稀疏数组时只输出有值的元素
//声明一个数组 var arr1 = [1,3,2,5,6]; arr1[10] = 100;//现在数组下标为10的位置有了值，但是标4-9的位置是没有值的 //遍历数组 console.log('=========for循环遍历======='); for(var i=0;i<arr1.length;i++){//遍历所有的元素，包括undefined console.log(arr1[i]); } //for...in //idx代表数组的下标，可变；且在遍历稀疏数组时只输出有值的元素 for(idx in arr1){//只遍历有效的元素 console.log(idx,arr1[idx]); } -
针对数组的一些函数
var arr1 = [1,23,4,5,9]; //向数组末尾添加元素 arr1.push(100); //向数组头部添加元素 arr1.unshift(200); //删除数组最后一个元素 arr1.pop(); //删除数组第一个元素 arr1.shift(); //将数组的元素使用指定字符进行拼接，返回一个字符串 var str = arr1.join(':') //从指定下标位置，删除n个元素 arr1.splice(0,1); var arr2 = [10,20,30]; var arr3 = [40,50,60]; //concat函数，会返回两个数组合并后的大数组 var arrs = arr2.concat(arr3); var arr4 = [1,23,2,5,19]; //数组排序，默认按照从第一个位置从小到大排序，需要自定义规则 arr4.sort(function(a,b){ return a-b; //升序排列 //return b-a; 降序排列 });
-
对象
-
对象的创建和对象中属性定义的操作
-
通过new Object（）创建
<script type="text/javascript"> //创建一个对象 var obj1 = new Object(); //给对象中设置属性 obj1.name = 'hang'; obj1.age = 18; //设置对应属性的get/set方法 obj1.setName = function(name){ //this指当前对象 this.name = name; } obj1.getName = function(){ return this.name; } //调用对象中的方法 obj1.setName('yuan'); //访问属性 console.log(obj1.name,obj1.age);//输出结果yuan 18 console.log(obj1.getName());//输出结果yuan </script> -
通过JSON字符串格式定义JS对象
- JSON字符串本质就是个字符串，但JSON字符串的格式是固定的一种国际标准：{“name”:“value” , “name2”:“value2” , …}，是键值对的方式，对应的值可以为数组
<script type="text/javascript"> //创建一个对象 var obj = { //"name":"hang", name:"yuan",//在定义JS对象中的属性key时，可以省略双引号 "age":18, setName:function(name){ this.name = name; }, getName:function(){ return this.name; }, setAge:function(age){ this.age = age; }, getAge:function(){ return age; } }; //访问属性 console.log(obj); console.log('直接过去属性值',obj.name); console.log('通过方法获取属性值',obj.getName()); </script>
-
-
日期对象
<script type="text/javascript"> //创建日期对象 //var date = new Date();//当前系统时间 var date = new Date('2022-10-22'); //日期对象常用方法 document.write(date+'<br>'); document.write('年：'+date.getFullYear()+'<br>'); document.write('月：'+date.getMonth()+1+'<br>'); //月必须加1 document.write('日：'+date.getDate()+'<br>'); document.write('时：'+date.getHours()+'<br>'); document.write('分：'+date.getMinutes()+'<br>'); document.write('秒：'+date.getSeconds()+'<br>'); document.write('星期：'+date.getDay()+'<br>'); </script> -
常用的其他函数
//字符串相关 //str.length 返回字符串str长度 //str.indexOf(字符) 返回指定的字符串在str中出现的第一次的下标，没有返回-1 //str.lastIndexOf(字符) 返回指定的字符串在str中最后一次出现的下标，没有返回-1 //运算相关 //Math.random() 返回0到1之间的一个随机数 //Math.pow(m,n) 返回m的n次幂 //Math.round(); 返回四舍五入 -
复杂数组小练习
<script type="text/javascript"> //书写JS代码 function fun1(option){ console.log(option); //option传入一个对象，在函数的内部使用option对象的属性值 console.log(option.name); console.log(option.age); } var o = { name:'hang', age:18 } fun1({ name:'yuan', age:18 }); //复杂数组 var arr = [ { id:1, name:'北京' }, { id:2, name:'天津' }, { id:3, name:'上海' } ]; document.write('<select>'); for(var i=0;i<arr.length;i++){ console.log(arr[i]); console.log(arr[i].id); console.log(arr[i].name); document.write('<option value="">'+arr[i].name+'</option>') } document.write('</select>'); </script>
事件开发
-
指JS通过捕捉用户在网页上的一系列操作（如单击鼠标等），进行相关的处理
-
事件开发的三要素：
- 事件源：指HTML标签元素
- 事件属性：用于捕捉事件的特殊的属性。如：捕捉单击事件的属性 onclick
- 事件监听器：针对捕捉到的事件，进行的后续处理，一般是通过函数实现
-
完成事件开发的流程
-
书写HTML标签
-
在HTML标签上定义事件属性
-
开发事件监听函数
-
调用事件监听函数
<!-- οnclick="" 捕捉单击事件的属性 --> <head> <script type="text/javascript"> //编写事件监听函数 function funClick(){ alert('你点我啊'); } </script> </head> <body> <h2>事件开发</h2> <input type="button" value="单击鼠标事件" onclick="funClick()"> </body>
-
-
调用事件回调函数，在事件属性值上传参，获取标签的属性值
- 事件属性调用函数的时候，传的this是当前的标签对象
<script type="text/javascript"> //编写时间监听函数 function fn1(){ //alert('你点啥'); //console.log('呵呵呵'); document.write('<select>'); document.write('<option>北京</option>'); document.write('<option>上海</option>'); document.write('</select>'); } function fn2(arg){ //输出 <input type="button" value="触发事件的时候传参" οnclick="fn2(this)"/> console.log(arg); //输出 value属性值：触发事件的时候传参 console.log('value属性值：'+arg.value); //输出 value属性值：button console.log('value属性值：'+arg.type); } </script> <body> <input type="button" value="普通按钮" onclick="fn1()"/> <!-- 事件属性调用函数的时候，传的this是当前的标签对象 --> <input type="button" value="触发事件的时候传参" onclick="fn2(this)"/> </body> -
操作标签
-
var obj = document.getElementById(标签的ID属性值);
-
获取标签的属性值：obj.属性名
-
设置新的属性值：obj.属性名 = 要修改的内容
<script type="text/javascript"> function funLight(){ //根据标签的id属性获取标签对象 var imgObj = document.getElementById('bulb'); console.log(imgObj); console.log(imgObj.title); if(imgObj.title=="off"){ //给src属性赋新值 imgObj.src = "img/bulb_on.png"; imgObj.title="on"; }else{ //给src属性赋新值 imgObj.src = "img/bulb_off.png"; imgObj.title="off"; } } </script> <body> <img src="img/bulb_off.png" title="off" id="bulb"/><br> <input type="button" value="开关" onclick="funLight()"> </body>
-
-
常用的事件属性
属性名 触发时机 onclick 单击鼠标触发 ondblclick 双击鼠标触发 onblur 失去焦点触发 onfocus 获得焦点触发 onmouseover 鼠标覆盖触发 onmouseout 鼠标移出触发 onmousemove 鼠标移动触发 onkeyup 抬起按键触发 onkeydown 按下按键触发 onload 加载完页面触发，用于body标签 onchange 改变下拉列表选项触发 onsubmit 提交表单的事件 -
操作标签
<script type="text/javascript"> function funLight(){ //根据标签的id属性获取标签对象 var imgObj = document.getElementById('bulb'); console.log(imgObj); console.log(imgObj.title); if(imgObj.title=="off"){ imgObj.src = "img/bulb_on.png"; imgObj.title="on"; }else{ imgObj.src = "img/bulb_off.png"; imgObj.title="off"; } } </script> <body> <img src="img/bulb_off.png" title="off" id="bulb"/><br> <input type="button" value="开关" onclick="funLight()"> </body> -
阻止表单提交
<!-- onsubmit --> <script type="text/javascript"> //表单验证的监听函数 function funSubmit(){ //书写表单验证的代码 return false; //此时会阻止表单提交 } </script> <form action="http://www.baidu.com" method="post" onsubmit="return funSubmit()"> Username:<input type="text" id="username" /><br> Password:<input type="password" id="password" /><br> <input type="submit" value="提交"> </form> -
阻止超链接的默认事件
<!-- 第一种 --> <a href="#" >超链接</a> <!-- 第二种 --> <a href="javascript:void(0)" >超链接</a> -
事件冒泡：当父元素和子元素定义了相同的事件时，触发子元素的事件同时会扩散触发父元素的相同事件
function funSup(){ alert('触发了父div'); } function funSub(){ alert('触发了子div'); } <div id="supDiv" onclick="funSup()"> <div id="subDiv" onclick="funSub()"> </div> </div> -
阻止事件冒泡
function funSub(){ alert('触发了子div'); //阻止事件冒泡 //第一种方式，针对非IE浏览器兼容性好 event.stopPropagation(); //第二种方式，针对IE浏览器兼容性好 event.cancelBubble = true; }
-
DOM编程
-
Document Object Model，文档对象模型
-
所有的HTML文档中的元素都封装成了一个document对象，我们可以操作和获取这些对象
-
DOM树特点
- 我们把每一个HTML元素称为DOM树上的一个节点（node），每一个节点可以有多个子节点，只能有一个直接父节点
- 每一个HTML元素都在这个DOM树上
-
DOM编程主要作用
- 使用DOM编程可以修改HTML文档的样式属性
- 使用DOM编程可以动态的添加和删除HTML元素
- 使用DOM编程可以完成表单的验证
-
获取标签对象
- 根据标签ID属性值获取标签对象：document.getElementById(ID 属性值)；返回一个对象
- 根据标签的name属性值获取标签对象：document.getElementsByName(name 属性值) ；返回一组对象
- 根据标签的class属性值获取标签对象：document.getElementsByClassName(class 属性值) ；返回一组对象
- 根据标签名获取标签对象：document.getElementsByTagName(标签名) ；返回一组对象
<script type="text/javascript"> function getObj(){ //根据id获取 var username = document.getElementById('username'); console.log('根据id获取：',username); //根据name获取 var sexs = document.getElementsByName('sex'); console.log('根据name获取：',sexs); //根据class获取 var form_inps = document.getElementsByClassName('form_inp'); console.log('根据class获取：',form_inps); //根据标签获取 var inputs = document.getElementsByTagName('input'); console.log('根据标签名获取：',inputs); } </script> <form action="" method="POST" > Username:<input type="text" id="username" name="username" class="form_inp"/><br> Password:<input type="password" id="password" name="password" class="form_inp"/><br> Sex: <input type="radio" id="male" name="sex"/>男 <input type="radio" id="female" name="sex"/>女 <br> Hobby: <input type="checkbox" id="eat" value="eat" name="hobby"/>吃饭 <input type="checkbox" id="sleep" value="sleep" name="hobby"/>睡觉 <input type="checkbox" id="hetBee" value="hetBee" name="hobby"/>打豆豆 <br> <input type="submit" value="提交" /><br> </form> <input type="button" value="测试" onclick="getObj()"> -
操作标签的属性
-
获取属性值：obj.属性名 或调用方法 obj.getAttribute(属性名)；
-
设置属性值：obj.属性名=新值 或调用方法 obj.setAttribute(属性名，属性值);
function tagAttr(){ //根据id获得标签对象 var obj = document.getElementById('username'); //console.log(obj.value); //获取class属性值 //console.log(obj.getAttribute('class')); //设置标签属性值 //obj.value='Hello'; obj.setAttribute('value','world'); } -
操作标签体内容
-
获取标签体内容：
- obj.innerText：只获取纯文本内容
- obj.innerHTML：获取标签体所有内容，包含子标签
-
设置标签体内容：
- obj.innerText = ‘新内容’，新内容会覆盖旧内容
- obj.InnerHTML = ‘新内容’，如果新内容包含html标签，则会解析标签功能
//操作标签体内容 //获取 function getTagInfo(){ var dv = document.getElementById('dv'); //console.log(dv.innerText); 只能操作纯文本内容 console.log(dv.innerHTML); var dvd = document.getElementById('dvd'); //console.log(dvd.innerText); console.log(dvd.innerHTML); //可以获取到标签体内的子标签 } //设置 function setTagInfo(){ var dv = document.getElementById('dv'); //dv.innerText='鲲之大，一锅炖不下'; 只能操作纯文本内容 dv.innerHTML='<h3>鲲之大，一锅炖不下</h3>'; //可以解析html标签功能 var dvd = document.getElementById('dvd'); //dvd.innerText='鲲之大，一锅炖不下'; dvd.innerHTML='<h3>鲲之大，一锅炖不下</h3>'; } -
-
-
操作单选按钮和多选框
-
选中：obj.checked = true；
-
取消选中：obj.checked = false；
-
返回当前状态：obj.checked 返回当前状态，false：未选，反之
<script type="text/javascript"> function funTest1(){ var man = document.getElementById('man'); //选中 man.checked = true; } function funTest2(){ var man = document.getElementById('man'); //取消 man.checked = false; } function funSelAll(){ //根据name获得所有的checkbox var hobby = document.getElementsByName('hobby'); for(var i=0;i<hobby.length;i++){ hobby[i].checked = true; } } function fun1(){ //获取所有单选按钮 var sexs = document.getElementsByName("sex"); console.log(sexs); //选中第一个单选按钮 //sexs[0].checked = true; //取消选中状态 sexs[0].checked = false; console.log('单选按钮当前状态：',sexs[0].checked); var likes = document.getElementsByName("likes"); for(idx in likes){ likes[idx].checked = true; } } </script>
-
-
操作下拉列表
//下拉列表操作 function fun2(sel){ //获取当前option选项的value属性值 //console.log(sel.value); //获取当前option选项的下标 //console.log(sel.selectedIndex); //获取所有的option选项 console.log(sel.options); } -
获取当前对象的关系对象，即关系节点的对象，所有属性支持链式调用，注意中间的空文本test节点标签
-
获取父节点对象：obj.parentNode 返回值是一个对象
-
获取所有孩子节点对象：obj.childNodes 返回一个数组
-
获取上一个哥哥对象：obj.previousSibling 返回一个对象
-
获取下一个弟弟对象：obj.nextSibling 返回一个对象
<script type="text/javascript"> function funGetObj(){ var sp = document.getElementById('dv2_inner_span1'); //获取父节点对象 console.log(sp.parentNode); //获取父节点的父节点，支持链式调用 console.log(sp.parentNode.parentNode); //获取所有的子节点对象 //var chileNodes = sp.childNodes; var dv2 = document.getElementById('dv2'); //获取上一个哥哥节点 console.log(dv2.previousSibling.previousSibling); //获取下一个弟弟节点 console.log(dv2.nextSibling.nextSibling); } </script>
-
-
通过DOM编程动态操作HTML页面的元素创建和删除
-
添加节点
-
var obj = document.createElement(标签名); //创建标签对象
-
parentObj.appendChild(obj); //放到指定的父节点下
function funAddNode(){ console.log('add node'); //创建一个span节点 var span = document.createElement('span'); //给节点加内容 span.innerHTML = '新来的'; //获取未来指定的父节点 var dv3 = document.getElementById('dv3'); //给dv3添加子节点 dv3.appendChild(span); }
-
-
删除节点
-
parentObj.removeChild(obj); //删除指定的子节点
function funDelNode(){ var dv3 = document.getElementById('dv3'); //获取dv3的子节点sp1 var sp1 = document.getElementById('sp1'); //删除子节点 dv3.removeChild(sp1); }
-
-
BOM编程
-
Browser Object Model，浏览器对象模型
-
可以控制浏览器的相关动作
-
window对象：控制浏览器的窗口相关动作
-
弹窗提示：window.alert(内容)
-
确认提示窗口：window.confirm(提示信息) 返回值为true或false
-
弹窗接受用户信息：window.prompt(提示信息，文本框默认值) 返回用户输入的信息
function fun1(){ //弹窗 //window.alert('Hello'); //确认提示窗口 //var boo = window.confirm("是否确认"); //console.log(boo); //参数一：提示信息 //参数二：文本框默认值，可以不要第二个参数 //返回值：用户输入的信息 var txt = window.prompt('请输入年龄','年龄是'); console.log(txt); } -
只执行一次的定时器：var id = window.setTimeout(回调函数，定时延迟/毫秒);
- 清除定时器：window.clearTimeout(id);
-
周期性定时器：var id = window.setInterval(回调函数，定时延迟/毫秒);
- 清除i定时器：window.clearInterval(id);
//一次执行定时器 //返回值，返回当前定时器的一个标识 //参数一：回调函数 //参数二：回调函数的延迟时间，单位毫秒 /* var timeId1 = window.setTimeout(function(){ alert('一次性定时器'); },3000); */ //周期执行定时器 //返回值，返回当前定时器的一个标识 //参数一：回调函数 //参数二：回调函数的延迟时间，单位毫秒 var timeId2 = window.setInterval(function(){ alert('周期性定时器') },2000); //清除定时器 function clearTime(){ //清除指定定时器 window.clearTimeout(timeId1); window.clearInterval(timeId2); }
-
-
location对象：控制浏览器地址栏
-
location.href=‘路径’ 跳转页面，也可以向action发送请求
function funBaidu(){ //跳转到百度 location.href='http://www.baidu.com'; } <input type="button" value="百度一下" onclick="funBaidu()" />
-
-
编程方式提交表单：formObj.submit();
//提交表单的函数 function funSubmit(){ //手动提交表单 var fom = document.getElementById('fom'); fom.submit(); } <form action="http://www.baidu.com" method="post" id="fom"> Username:<input type="text" /><br> Password:<input type="password" ><br> <input type="button" value="提交" onclick="funSubmit()"> </form> -
点击更换验证码，浏览器会把加载过的资源缓存一个验证码图片，会记录下，所以需要加后缀让浏览器不去使用缓存，让浏览器重新发送请求
function changeCaptcha(){ //根据id获取验证码图片对象 var captchaImg = document.getElementById('captchaImg'); captchaImg.src = '${path }/p1/captcha?'+Math.random(); //让浏览器每次都重新加载验证码图片 //两种方法效果一样 //captchaImg.src = '${path }/p1/captcha?'+new Date(); } <img src="${path }/p1/captcha" id="captchaImg"> <a href="javascript:void(0)" onclick="changeCaptcha()">看不清，换一张 //可以传this，在方法中就不需要获取图片对象了，可以简化
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
