JS复习
1、函数的3种定义方式
函数声明方式一
function test01(a1,a2){
alert("函数执行")
}
函数声明方式二
函数声明三
var test03 = new function(a1,a2){
alert("函数声明三")
}
2、加载事件
单击事件: onclick
双击事件: ondbclick
鼠标悬停: onmouseover
鼠标移动: onmousemove
鼠标移走: onmouseout
聚焦: onfocus
失去焦点:onblur
键盘弹起触发: onkeyup
键盘下压触发: onkeydown
加载事件: onload
值改变事件: onchange
3、常见方法和对象学习
String对象
全部大写:str.toUpperCase()
全部小写:str.toLowerCase()
例:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AkfRsre1-1589869292887)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200418202204294.png)]
Date对象
常用方法:
d.getYear():获取当前年份 - 1900 所得的年数
d.getFullYear():获取当前年份
d.getMonth()+1: 返回月份数 注意:(记得要+1)
d.getDay()+1: 返回星期数 注意:(星期天为0)
d.getDate(): 返回号数
d.getMinutes(): 获取分钟
d.getSeconds(): 获取秒数
eval函数
eval(“var a = ‘123张’;”); 可以执行括号内的代码
isNaN()
isNaN():判断是否是数字
4、window的对象学习(window关键字可以省略)
警告框:window.alert
确认框:window.confirm
提示框:window.prompt
定时操作:window.setTimeout
var id;
function testSetTimeout(){
id = window.setTimeout(function(){
alert("我是定时执行")
},3000)
}
间隔执行:window.setInterval
var id2;
function testSetInterval(){
id2 = window.setInterval(function(){
alert("我是间隔执行")
},3000)
}
停止当前的定时方法:clearTimeout && clearInterval
function testClearTimeout(){
window.clearTimeout(id)
}
function testClearInterval(){
window.clearInterval(id2)
}
子页面方法:window.open
window.open('子页面的资源(“相对路径”),‘打开方式’,‘配置’)
function testOpen(){
window.open("son.html","newwindow","height=400px,width=600px,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes,location=yes,status=yes");
}
地址栏学习:window.location.href
function testLocation(){
window.location.href="http://www.baidu.com";
}
刷新:window.reload
function testLocation2(){
window.location.reload();
}
历史记录:window.history
前进:window.history.forward
function testHsitory1(){
window.history.forward(); //页面资源前进
}
后退:window.history.back
function testHsitory2(){
window.history.back() //页面后退
}
跳转指定历史记录:window.history.go
function testHsitory3(){
window.history.go(0) //跳转到指定的历史记录资源:window.history.go(index)
}
屏幕属性:window.screen
屏幕宽度:window.screen.width
屏幕高度:window.screen.height
浏览器配置属性:window.nacigator.userAgent
document对象:window.document
document获取元素对象:
window.document.getElementById(“id”)
document.getElementsByName(“name”)
document.getElementsByTagName(“标签”)
5、js操作元素内容
操作文本内容:
innerHTML:包括标签内容
innerText:不包括标签内容
6、js操作元素的样式
style
//获取元素对象
var showdiv = document.getElementById("showdiv");
showdiv.style = "background-color:red"; //修改了所有样式(覆盖)
//添加元素样式
showdiv.style.backgroundColor="cadetblue";
//js给元素修改样式
showdiv.style.border="solid 2px red";
//js删除样式
showdiv.style.border=""; //删除的style属性的参数
className
function testOperCss(){
//获取元素对象
var div01 = document.getElementById("div01");
//获取
alert(div01.className);
//添加、修改
div01.className="common2";
//删除
div01.className="";
//获取
alert(div01.className);
}
stOperCss(){
//获取元素对象
var div01 = document.getElementById(“div01”);
//获取
alert(div01.className);
//添加、修改
div01.className=“common2”;
//删除
div01.className="";
//获取
alert(div01.className);
}