2018-07-09 第六十四天 JavaScript

JavaScriptjavascript

1、JS中event事件css

1.什么是事件：html

事件是能够被 JavaScript 侦测到的行为java

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

事件一般与函数配合使用，这样就能够经过发生的事件来驱动函数执行。浏览器

<body onload="getTime()">app

<input type="button" value="提交" onclick="calc()"/>dom

<input type="button" value="暂停" onclick="pauseTime()"/>函数

<input type="button" value="继续" onclick="continueTime()"/>学习

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：某些块元素上结合使用

-->

2、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 是其根对象。

3、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>

4、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.操做元素

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>

6、间接得到元素对象的方式

<!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>

7、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>

8、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

-->

9、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();

-->

10、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();

-->

11、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>