淘先锋技术网

首页 1 2 3 4 5 6 7

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