一、 JavaScript中常用对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/********[1]日期对象的学习****************/
function demo1(){
var date =new Date();
// 118 1900到现在的时间差
console.log(date.getYear());
// 9 0-11 获得月份
console.log(date.getMonth());
// 星期几 3
console.log(date.getDay());
// 31 获得本月中的第几天
console.log(date.getDate());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
//获得全年 2018
console.log(date.getFullYear());
//获得本地的时间
console.log(date.toLocaleString());
}
/********[2]数学对象的学习*******************/
function demo2(){
//获得随机数 0-1
var ran =Math.random();
//四位随机的整数
console.log(Math.floor(ran*9000+1000) );
//向上取整
console.log(Math.ceil(12.9));
//四舍五入
console.log(Math.round(12.6));
}
/*******[3]字符串对象的学习**********************/
function demo3(){
var st ="星-期-三";
var st2=new String("星期三");
//期-三 从下标为2的开始截取到最后结束
console.log(st.substr(2));
//期-三 2:从下标为2的开始 3:截取的个数
console.log(st.substr(2,3));
//期-三 从下标为2的开始截取
console.log(st.substring(2));
//2:开始下标 3 :结束下标(不包含)
console.log(st.substring(2,3));
//字符串的分割 返回的是数组
console.log(st.split("-"));
}
/****[4]Global对象的学习****************************/
function demo4(){
var a ="var b =123";
//*把字符串转换成可以执行的js代码
eval(a);
console.log(b);
var hh ="123a";
//console.log(Number(hh));// NAN
//检查某个值是否是数字。
console.log(isNaN(hh));
}
demo4();
</script>
</head>
<body>
</body>
</html>
二、 JavaScript中event事件
1.什么是事件
事件是可以被 JavaScript 侦测到的行为
事件也是满足某些条件就可以触发指定的函数
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以 在用户点击某按钮时产生一个 onClick 事件来触发某个函数
事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行
<body onload="getTime()">
<input type="button" value="提交" onclick="calc()"/>
<input type="button" value="暂停" onclick="pauseTime()"/>
<input type="button" value="继续" onclick="continueTime()"/>
生活案例:
电动车、汽车报警器
燃气泄漏探测器、火灾烟雾探测器
2.有哪些事件
3.总结事件的一般使用情况:
onclick、ondblclick、按钮使用 (按钮是绝对不会结合onchange、onblur事件) onchange、onkeydown、onkeyup onblur、onfocus、结合单行文本框和多行文本框
onchange:下拉框,文本框等元素
onload:作用到body 标签上
onmouseover、onmouseout、onmousemove:某些块元素上结合使用
三、JavaScript中BOM对象
1.什么是BOM
BOM是Browser Object Model的简写,即浏览器对象模型。
BOM由一系列对象组成,是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是window对象
2.BOM对象学习A
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*三种弹框方式*/
function demo1(){
//只是含有确认按钮的弹框
window.alert("七夕快乐");
}
function demo2(){
//含有确认和取消按钮的弹框
var flag= window.confirm("是否删除?");
alert(flag);
}
function demo3(){
//含有输入内容的弹框
var v= window.prompt("请输入昵称","例如:李白");
alert(v);
}
function getDate(){
//获得时间对象
var date=new Date();
var time= date.toLocaleString();
//获得span对象
document.getElementById("span_1").innerHTML=time;
}
//定时器 1000毫秒
// 过指定的时间调用方法---只会执行一次
// window.setTimeout("getDate()",1000);
//间隔1s就会调用指定的方法---调用多次
var iny= window.setInterval("getDate()",1000);
function stop1(){
//清除指定的定时器
window.clearInterval(iny);
}
function close1(){
//关闭当前的窗口
// window.close();
//打开指定的页面
window.open("http://www.baidu.com");
}
</script>
</head>
<body onload="getDate()">
<input type="button" name="" id="" value="关闭窗口" onclick="close1()" />
当前的时间是:<span id="span_1"></span>
<input type="button" name="" id="" value="停止计时" onclick="stop1()" />
<input type="button" name="" id="" value="弹框一" onclick="demo1()" />
<input type="button" name="" id="" value="弹框二" onclick="demo2()" />
<input type="button" name="" id="" value="弹框三" onclick="demo3()" />
</body>
</html>
3.BOM对象学习B
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/************Location*****************/
function demo1(){
//获得Location对象
//http://127.0.0.1:8020/2018-08-17JavaScript/03JS学习.html
console.log(window.location.href);
//127.0.0.1:8020 ip+端口号
console.log(window.location.host);
//8020
console.log(window.location.port);
//127.0.0.1
console.log(window.location.hostname);
//修改当前的地址********
window.location.href="http://www.baidu.com";
//重新加载网页
window.location.reload();
}
/********History对象学习*******************/
function demo2(){
//返回浏览器历史列表中的 URL 数量。
var le=window.history.length;
console.log(le);
//后退按钮
window.history.back();
//前进的按钮
window.history.forward();
//-3:后退3个网页 3:前进3个网页 0:刷新
window.history.go(-3);
}
/***********Screen 对象学习(了解)**********************/
function demo3(){
var he =window.screen.height;
var wi=window.screen.width;
//获得屏幕的分辨率
console.log(he+"----"+wi);
}
/*************Navigator 对象的学习(了解)******************/
function demo4(){
//用户代理
var us= window.navigator.userAgent;
//Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
console.log(us);
}
</script>
</head>
<body>
<input type="button" name="" id="" value="Location对象的学习" onclick="demo1()" />
<input type="button" name="" id="" value="History对象的学习" onclick="demo2()" />
<input type="button" name="" id="" value="Screen对象的学习" onclick="demo3()" />
<input type="button" name="" id="" value="Navigator对象的学习" onclick="demo4()" />
</body>
</html>
四、JavaScript中DOM对象
1.什么是DOM
DOM是Document Object Model的简写,即文档对象模型。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示。
DOM由系列对象组成,是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。
DOM的顶层是document对象
2.DOM操作的内容
A、获得元素节点对象
B、操作元素的属性
C、操作元素的内容
D、操作元素的样式css
E、操作元素的节点对象
3.DOM直接获得元素对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function demo1(){
//*通过ID名称获得节点元素对象----单个对象
var span =window.document.getElementById("span_1");
alert(span);
}
function demo2(){
//*通过标签的名称获得元素对象----多个对象
var spans=window.document.getElementsByTagName("span");
//获得具体的某一个
alert(spans[1]);
}
function demo3(){
//*通过class的名称获得元素对象----多个对象
var spans=document.getElementsByClassName("sp");
//不是所有的标签都是具有name属性的 所以这种获得方式不是太多
//通过name属性获得元素对象----多个对象
var inp=document.getElementsByName("inp");
alert(spans);
}
</script>
</head>
<body>
<input type="button" name="inp" id="" value="ID获得元素对象" onclick="demo1()" />
<input type="button" name="inp" id="" value="TagName获得元素对象" onclick="demo2()" />
<input type="button" name="" id="" value="Class获得元素对象" onclick="demo3()" />
<hr/>
<span id="span_1">bjsxt</span>
<span>12345</span>
<span class="sp" >12345</span>
<span class="sp">12345</span>
</body>
</html>
3 DOM间接获得元素对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM间接获得元素对象的方式</title>
<script type="text/javascript">
function demo1(){
//获得div对象
var div=document.getElementById("div1");
//获得div下面的所有子元素--text文本也是一个节点
var ch= div.childNodes;
//alert(ch.length);
//document.getElementsByTagName("span")
//获得div下面的所有的span对象
var sp= div.getElementsByTagName("span");
console.log(sp);
}
function demo2(){
//获得span对象
var span=document.getElementById("sp1");
//获得父节点
var pa= span.parentNode;
//console.log(pa);
alert(pa);
}
function demo3(){
//获得span对象
var sp= document.getElementById("sp1");
//获得span对象的上一个元素
//#text
var pr= sp.previousSibling;
// 上一个span对象
var pr2=sp.previousElementSibling;
//获得下一个元素
// #text
var ne= sp.nextSibling;
//下一个span元素对象
var ne2=sp.nextElementSibling;
console.log(pr2);
}
</script>
</head>
<body>
<input type="button" name="" id="" value="获得子元素" onclick="demo1()" />
<input type="button" name="" id="" value="获得父元素" onclick="demo2()" />
<input type="button" name="" id="" value="获得兄弟元素" onclick="demo3()" />
<hr />
<div id="div1">
<span>bjsxt</span>
<span id="sp1">bjsxt</span>
<span>123456</span>
<span>123456</span>
</div>
<span>123456</span>
</body>
</html>