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，在方法中就不需要获取图片对象了，可以简化
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
