Js复习

JS复习

1、函数的3种定义方式

函数声明方式一

function test01(a1,a2){
    alert("函数执行")
}

函数声明方式二

var test02 = new function("a1","a2","alert('函数声明二')")

函数声明三

var test03 = new function(a1,a2){
    alert("函数声明三")
}

2、加载事件

单击事件： onclick

双击事件： ondbclick

鼠标悬停: onmouseover

鼠标移动: onmousemove

鼠标移走: onmouseout

聚焦: onfocus

失去焦点：onblur

键盘弹起触发： onkeyup

键盘下压触发: onkeydown

加载事件: onload

值改变事件: onchange

3、常见方法和对象学习

String对象

var str = "abcdefg";

全部大写：str.toUpperCase()

全部小写：str.toLowerCase()

例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AkfRsre1-1589869292887)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200418202204294.png)]

Date对象

var d = new 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.alert("alert提示")

确认框：window.confirm

window.confirm(“您确认删除吗”)

提示框：window.prompt

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);
}