2018-07-09 第六十四天 JavaScript

简介:

JavaScript

一、JSevent事件

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.事件的触发:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript">

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>

<!--页面加载完成执行的事件-->

<body onload="demo6()">

<!--单击事件-->

<input type="button" name="" id="" value="测试一" onclick="demo1();demo2();demo3()/>

<!--双击事件-->

<input type="button" name="" id="" value="测试二" ondblclick="demo1()/>

     

    <!--onmouseover:鼠标放上事件  onmouseout:鼠标移开事件--> 

     <div class="div1" onmousemove="demo2()onmouseout="demo1()"></div>

     

     <!--键盘事件  onkeydown:键盘按下  onkeyup:键盘弹起-->

     

     <input type="text" onkeyup="demo3()/> <br />

     

     <!--onblur:失去焦点  onfocus:获得焦点  onchange:内容改变触发事件 -->

     

     <input type="text" onchange="demo4()/> <br />

     

     <!--传递this  this代表本身的对象-->

     <select onchange="demo5(this.value)">

       <option value="1">中国1</option>

       <option value="2">中国2</option>

       <option value="3">中国3</option>

     </select>

</body>

</html>

<!--

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

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

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

onchange:下拉框

onload:作用body

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

-->

 

二、JSBOM对象

 

 

 

 


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>

<meta charset="utf-8">

<title></title>

<script type="text/javascript">

   function  demo1(){

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

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

}

   function demo2(){

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

var flagwindow.confirm("是否删除");

alert(flag);

}

 

   function  demo3(){

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

  var  prwindow.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 tiwindow.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>

<body onload="getTime()">

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

  

  <input type="button" value="停止计时" onclick="stop1()/> <br />

  

  <input type="button" name="" id="" value="关闭窗口" onclick="close1()/>

  <hr/>

  

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

 

B

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

   <script type="text/javascript">

   

   /*location对象的学习*/

    function  demo1(){

    //127.0.0.1:8020

     var host=window.location.host;

    //127.0.0.1

     var hostnamewindow.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 lenwindow.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>

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

 

四、DOM

1.什么是DOM

 

 

2.DOM节点分类node

元素节点 element node  <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>

<meta charset="utf-8">

<title></title>

<script type="text/javascript">

/*直接获得*/

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>

   <input type="button" value="id获得节点对象" onclick="demo1()/>

   

   <input type="button" value="ByTagName获得节点对象" onclick="demo2()"  name="inp"/>

   

   <input type="button" value="class获得节点对象" onclick="demo3()"  name="inp"/>

   

   <input type="button" value="Name获得节点对象" onclick="demo4()"  name="inp"/>

<hr />

<span id="span1" ></span>

<span class="sp"></span>

<span class="sp"></span>

<span></span>

</body>

</html>

 

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript">

function demo1(){

//获得div对象

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

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

var chi=  div.childNodes;

//只是获得span标签

var spdiv.getElementsByTagName("span");

alert(sp.length);

}

function  demo2(){

//获得span对象

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

//获得父节点元素

var divspan.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>

<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>北京百度</span>

<span>北京百度</span>

<span id="span1">北京百度</span>

<span>北京百度</span>

</div>

</body>

</html>

 

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript">

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 widiv.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>

<input type="button" name="" id="" value="属性操作" onclick="demo1()/>

<input type="button" name="" id="" value="样式操作" onclick="demo2()/>

<hr />

<input type="text" name="inp" id="inp" value="123" />

<div id="div1"   style="width: 200pxheight: 200px;border: 3px solid red;"></div>

</body>

</html>

 

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript">

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 valinp.value;

alert(val);

}

function demo3(){

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

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

 var  valsel.value;

 alert(val);

}

function  demo4(){

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

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

alert(tex.value);

}

</script>

</head>

<body>

<input type="button" onclick="demo1()value="测试节点的内容" />

<input type="button" name="" id="" value="获得节点的值" onclick="demo2()/>

<input type="button" name="" id="" value="获得多行文本的值" onclick="demo4()/>

<hr />

<div id="div1">

<span>

我们都爱笑

</span>

</div>

<input type="text" id="inp" />

<hr />

<select onchange="demo3()id="sel">

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

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

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

</select>

<hr />

<textarea rows="20" cols="30" id="tex">123</textarea>

</body>

</html>

<!--

总结:

 innerHTML,innerText ,value使用的情景

 

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

      

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

 

 value:通常是单标签 :input

-->

 

九、JSDOM对象操作元素的节点

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript">

function insertNode(){

//创建节点对象

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

<body onload="demo1();demo2()">

<p>

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

</p>

<p>

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

<input type="button" name="" id="" value="添加" onclick="insertNode()/>

</p>

<id="p_1">

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

<input type="button" name="" id="" value="清空" />

</p>

</body>

</html>

<!--

节点操作的方法

    document.createElement("标签名");

父节点.appendChild(子节点);

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

父节点.removeChild(子节点);

 

    父节点.remove();

-->

 

十、JS中表单操作

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript">

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>

<form action="01JS中的事件学习.html" method="get" name="fom">

账号:<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 />

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

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

<meta charset="utf-8">

<title></title>

<style type="text/css">

body{

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

background-repeat: no-repeat;

background-size: 1360px 700px;

}

table{

margin-top: 90px;

margin-left: 200px;

}

</style>

<script type="text/javascript">

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 imgUts.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 id="div1"></div>

<div>

<input type="button" name="" id="" value="开始" onclick="begin()"/>

<!--table>tr*5>td*5>img[src='' onclick='']-->

<table border="1px">

<tr>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

</tr>

<tr>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)" /></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

</tr>

<tr>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

</tr>

<tr>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

</tr>

<tr>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

<td><img src="img/00.jpg" alt="" onclick="change(this)/></td>

</tr>

</table>

</div>

</body>

</html>

 

目录
相关文章
|
10月前
|
JavaScript 前端开发 API
70.【JavaScript 6.0】(七)
70.【JavaScript 6.0】
38 1
|
1月前
|
移动开发 JavaScript 前端开发
快速认识JavaScript
快速认识JavaScript
|
2月前
|
JavaScript 前端开发
JavaScript是什么,其特点又是什么?
JavaScript是什么,其特点又是什么?
28 0
|
12月前
|
移动开发 JavaScript 前端开发
|
JavaScript 前端开发
JavaScript 中的 mailto
JavaScript 中的 mailto
|
JavaScript 前端开发
初识JavaScript
初识JavaScript
89 0
|
设计模式 前端开发 JavaScript
怎么学JavaScript?
怎么学JavaScript?
105 0
怎么学JavaScript?
|
JSON JavaScript 前端开发
你不知道的JavaScript丛书总结(二)
你不知道的JavaScript丛书总结(二)
|
JavaScript 前端开发
【译】9个强大的JavaScript技巧
我喜欢优化!但是,如果站点无法在用户的Internet Explorer 11浏览器中运行,他们不会在乎我的优化代码。我使用Endtest来创建自动测试,并在跨浏览器的云上执行它们。
【译】9个强大的JavaScript技巧