2018-07-09 第六十四天 JavaScript-阿里云开发者社区

JavaScript

一、JS中event事件

1.什么是事件：

事件是可以被 JavaScript 侦测到的行为

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

2.有哪些事件：

3.事件的触发：

<!DOCTYPE html>

<html>

<head>

function demo1(){

console.log("我的demo1");

}

function demo2(){

console.log("鼠标移动");

}

function demo3(){

console.log("键盘弹起");

}

function demo4(){

console.log("内容改变");

}

function demo5(val){

console.log(val);

}

function demo6(){

console.log("页面加载完成");

}

</script>

<style>

.div1{

width: 200px;

height: 200px;

border: 1px solid red;

}

</style>

</head>

</select>

</body>

</html>

<!--

总结事件的一般使用情况:

onclick、ondblclick、按钮使用（按钮是绝对不会结合onchange、onblur事件）

onchange、onkeydown、onkeyup onblur、onfocus、结合单行文本框和多行文本框

onchange:下拉框

onload：作用body

onmouseover、onmouseout、onmousemove：某些块元素上结合使用

-->

二、JS中BOM对象

1.什么是BOM：

BOM是Browser Object Model的简写，即浏览器对象模型。

BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法

BOM没有统一的标准(每种客户端都可以自定标准)。

BOM的顶层是window对象

2.什么是DOM：

DOM是Document Object Model的简写，即文档对象模型。

DOM用于XHTML、XML文档的应用程序接口(API)。

DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。

DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。

DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。

DOM的顶层是document对象

蓝色框内是归DOM管的，红色框内归BOM管的；也可以说DOM也是归BOM管的

BOM 是为了操作浏览器出现的 API，window 是其根对象。

DOM 是为了操作文档出现的 API，document 是其根对象。

三、BOM

A、

<!DOCTYPE html>

<html>

<head>

function demo1(){

/*弹框一，只是含有确定按钮*/

window.alert("外面还在下暴雨，今天我们两个分开了");

}

function demo2(){

/*弹框二，含有取消的弹框*/

var flag= window.confirm("是否删除");

alert(flag);

}

function demo3(){

/*弹框三，含有输入内容的弹框*/

var pr= window.prompt("请输入昵称","例如：李白");

//返回输入的内容

alert(pr);

}

function getTime(){

var date=new Date();

//获得系统时间

var time =date.toLocaleString();

//获得span对象

var span =document.getElementById("span1");

//获得span中的内容对象

span.innerHTML=time;

}

/*js中的定时器*/

/*1s后执行方法的调用 ---调用一次*/

window.setTimeout("getTime()",1000);

/*每间隔1s就会调用方法 ---调用多次*/

var ti= window.setInterval("getTime()",1000);

var ti1= window.setInterval("getTime1()",1000);

function stop1(){

//清除定时器的操作

window.clearInterval(ti);

}

function close1(){

//关闭当前的窗口

window.close();

//打开指定的窗口

window.open("http://www.baidu.com");

}

</script>

</head>

当前的时间是：<span id="span1"></span>

<hr/>

</body>

</html>

B、

<!DOCTYPE html>

<html>

<head>

/*location对象的学习*/

function demo1(){

//127.0.0.1:8020

var host=window.location.host;

//127.0.0.1

var hostname= window.location.hostname;

var urll=window.location.href;

//8020

var port=window.location.port;

//console.log(host+"--"+hostname+"---"+urll+"---"+port)

/**实现页面的跳转*/

// window.location.href="http://www.baidu.com";

//*重新加载网页

window.location.reload();

}

/*History对象学习*/

function demo2(){

//返回浏览器历史列表中的 URL 数量。

var len= window.history.length;

// console.log(len);

//前进按钮

// window.history.forward();

//后退

// window.history.back();

//正数前进负数：后退 0:刷新

window.history.go(0);

}

/*****Screen对象*******/

function demo3(){

var wi=window.screen.width;

var hi=window.screen.height;

console.log(wi+"---"+hi);

}

/****Navigator对象学习*******/

function demo4(){

//用户代理对象

var us=window.navigator.userAgent;

console.log(us);

}

</script>

</head>

<body>

</body>

</html>

四、DOM

1.什么是DOM

2.DOM节点分类node

元素节点 element node <a href="链接地址">我的链接</a>

属性节点 attribute node href="链接地址"

文本节点 text node 链接地址我的链接

3.DOM节点关系

父子关系（parent-child）：<html> 元素作为父级，<head> 和 <body> 元素作为子级

兄弟关系（Sibling）:<a> 和 <h1> 元素就是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系

4.DOM操作的内容

1.查询元素（进行操作元素、或者元素的属性、文本）

2.操作文本

3.操作属性

4.操作CSS样式（一个特殊的属性style）

5.操作元素

五、直接获得对象的方式

<!DOCTYPE html>

<html>

<head>

/*直接获得*/

function demo1(){

//获得id名称是span1的节点对象--获得单个对象

var span = document.getElementById("span1");

alert(span);

}

function demo2(){

//根据标签的名称获得对象---获得的多个对象

var spans=document.getElementsByTagName("span");

//获得具体的某一个对象

alert(spans[2]);

}

function demo3(){

//通过class获得元素对象---获得的多个对象

var sp=document.getElementsByClassName("sp");

alert(sp.length);

}

function demo4(){

//通过name属性获得元素的对象---获得的多个对象

var inp=document.getElementsByName("inp");

}

</script>

</head>

<body>

<hr />

</body>

</html>

六、间接获得元素对象的方式

<!DOCTYPE html>

<html>

<head>

function demo1(){

//获得div对象

var div=document.getElementById("div1");

//获得子节点--空白的文本也是一个节点

var chi= div.childNodes;

//只是获得span标签

var sp= div.getElementsByTagName("span");

alert(sp.length);

}

function demo2(){

//获得span对象

var span =document.getElementById("span1");

//获得父节点元素

var div= span.parentNode;

alert(div);

}

function demo3(){

//获得指定的span标签

var span=document.getElementById("span1");

//获得上一个节点 --包含空白文档Text

//var sp= span.previousSibling;

//获得上一个节点 --不包含空白文档Text

//var sp=span.previousElementSibling;

//获得下一个节点 --包含空白文档Text

//var sp=span.nextSibling;

//获得下一个节点 --不包含空白文档Text

var sp=span.nextElementSibling;

alert(sp);

}

</script>

</head>

<body>

<hr />

</div>

</body>

</html>

七、DOM对象操作元素样式&属性

<!DOCTYPE html>

<html>

<head>

function demo1(){

//操作元素的节点属性

var inp=document.getElementById("inp");

//获得元素的属性

//alert(inp.type+"---"+inp.name+"---"+inp.value);

//改变元素的属性

inp.type="button";

inp.value="测试一下";

}

function demo2(){

//操作元素的样式

var div=document.getElementById("div1");

//获得样式--只是支持行内样式的书写

var wi= div.style.width;

var he=div.style.height;

//alert(wi+"---"+he);

/*操作css方式一*/

/*div.style.width="300px"

div.style.height="400px";

div.style.backgroundColor="green";*/

/*操作css的方式二 --通过增加calss属性添加样式*/

div.className="di";

}

</script>

<style>

/*#div1{

width: 200px;

height: 200px;

border: 3px solid green;

}*/

.di{

width: 300px;

height: 300px;

background-color: pink;

}

</style>

</head>

<body>

<hr />

</body>

</html>

八、JS操作元素的文本内容

<!DOCTYPE html>

<html>

<head>

function demo1(){

//获得div对象

var div =document.getElementById("div1");

//只是获得节点对象的内容，纯文本的内容

//alert(div.innerText);

//获得节点的文本内容+html标签

// alert(div.innerHTML);

//赋予对象节点的文本内容

// div.innerText="<b>baidu</b>";

//会识别HTML对应的代码

// div.innerHTML="<b>baidu</b>";

//实现内容的累加

div.innerHTML+= "<b>baidu</b>";

}

function demo2(){

//获得input对象

var inp=document.getElementById("inp");

var val= inp.value;

alert(val);

}

function demo3(){

var sel=document.getElementById("sel");

//如果option选项没有value属性，获得的值是对应的文本内容

var val= sel.value;

alert(val);

}

function demo4(){

//获得多行文本框的对象

var tex=document.getElementById("tex");

alert(tex.value);

}

</script>

</head>

<body>

<hr />

<span>

我们都爱笑

</span>

</div>

<hr />

<option value="1">javaSE</option>

<option value="2">javaEE</option>

<option value="3">javaME</option>

</select>

<hr />

</body>

</html>

<!--

总结：

innerHTML,innerText ,value使用的情景

innerHTML,innerText:通常使用到双标签上

例外（select、textarea）获得值的时候也是用的value属性

value:通常是单标签：input

-->

九、JS中DOM对象操作元素的节点

<!DOCTYPE html>

<html>

<head>

function insertNode(){

//创建节点对象

var p = document.createElement("p");

p.innerHTML="照片:";

var inp1=document.createElement("input");

//操作节点对象的属性

inp1.type="file";

var inp2=document.createElement("input");

inp2.type="button";

inp2.value="删除";

inp2.onclick=function(){

//移除子节点的操作

/* p.removeChild(inp1);

p.removeChild(inp2);

document.body.removeChild(p);*/

//移除所有的节点

p.remove();

}

//指定元素的对应关系 appendChild:添加到现有元素对象之后

//document.body.appendChild(p);

//获得添指定元素对象

var p1=document.getElementById("p_1");

//在指定元素之前添加对象

document.body.insertBefore(p,p1);

p.appendChild(inp1);

p.appendChild(inp2);

}

//只会执行一个事件，，执行后者绑定的事件

window.onload=function(){

alert("页面加载完成");

}

window.onload=function(){

alert("页面加载完成2");

}

</script>

</head>

<p>

姓名:<input type="" name="" id="" value="" />

</p>

<p>

照片:<input type="file" name="" id="" value="" />

</p>

</p>

</body>

</html>

<!--

节点操作的方法

document.createElement("标签名");

父节点.appendChild(子节点);

父节点.insertBefore(新节点,指定之前的节点);

父节点.removeChild(子节点)；

父节点.remove();

-->

十、JS中表单操作

<!DOCTYPE html>

<html>

<head>

function checkName(){

//获得输入的值

var val=document.getElementById("zh").value;

//获得span标签对象

var span =document.getElementById("span_name");

if(val==""||val==null){

span.innerHTML="× 用户名不能为空";

span.style.color="red";

return false;

}else{

span.innerHTML="√ 用户名合法";

span.style.color="green";

return true;

}

//判断表单内容是否提交

function sub(){

var flag=checkName();

if(flag){

//进行表单数据的提交

document.fom.submit();

}

</script>

</head>

<body>

账号:<input type="text" name="zh" id="zh" value="" onblur="checkName()" /><span id="span_name"></span> <br />

密码:<input type="password" name="pwd" id="pwd" value=""/><br />

</form>

</body>

</html>

<!--

readonly和disabled

共同点：是文本框不可以更该内容

区别：readonly中对应的数据可以提交到后台

disabled中对应的数据是无法提交到后台

表单提交的形式：

[1]

* <input type="submit" name="" id="" value="提交" />

onsubmit="return checkName()"

[2]<input type="button" name="" id="" value="提交" onclick="sub()" />

document.fom.submit();

-->

十一、JS实现打地鼠操作

<!DOCTYPE html>

<html>

<head>

body{

background-image: url("img/bb.jpg");

background-repeat: no-repeat;

background-size: 1360px 700px;

}

table{

margin-top: 90px;

margin-left: 200px;

}

</style>

var imgs;

//游戏的时间是10s

var time=10;

var showI,stopT,leaT;

var count=0;

//游戏开始

function begin(){

showI=window.setInterval("showImg()",1500);

//开始计时的操作

stopT=window.setInterval("stopTime()",1000);

}

//展示图片

function showImg(){

//获得所有的img对象

imgs=document.getElementsByTagName("img");

//产生随机的下标 0-24

var index=Math.floor(Math.random()*25);

imgs[index].src="img/01.jpg";

//间隔2s后调用地鼠的离开的操作

leaT=window.setTimeout("leaveImg("+index+")",2000);

}

//地鼠回去的操作

function leaveImg(ind){

imgs[ind].src="img/00.jpg";

}

//打击地鼠的操作

function change(ts){

//点击的图片的路径是01.jpg

//http://127.0.0.1:8020/05JS/img/00.jpg

// alert(ts.src);

var imgU= ts.src.substr(ts.src.length-6,6);

if(imgU=="01.jpg"){

ts.src="img/02.jpg";

count++;

}

//停止计时

function stopTime(){

if(time>0){

time--;

document.getElementById("div1").innerHTML=time;

}else {

gameOver();

}

//停止游戏的操作

function gameOver(){

//清除所有的定时器

window.clearInterval(showI);

window.clearInterval(stopT);

window.clearTimeout(leaT);

//图片回归之前的操作

for(var i in imgs){

imgs[i].src="img/00.jpg";

}

//统计结果

alert(count);

}

</script>

</head>

<body>

<div>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

2018-07-09 第六十四天 JavaScript

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

2018-07-09 第六十四天 JavaScript

热门文章

最新文章

相关课程

相关电子书