DHTML

DHTML

• 简介: Dynamic(动态)超文本标记语言,这个不是新得技术,只是把所学得html,css,js结合到一起实现出来得内容
• -DHTML包括：BOM和DOM
• BOM :浏览器对象模型Browser Object Model,包含了一部分和浏览器相关得对象,可以获取浏览器得请求地址,历史记录,浏览器窗口得尺寸,浏览器得版本
• DOM:文档对象模型 Document Object Model ,包含了和页面相关得内容,

BOM

window

• window里面得对象称为全局对象,里面得方法称为全局方法.全局对象和全局方法可以省略window

  alert(); -- window.alert();

  parseFloat()/parseInt()--window.....

• 常用得全局方法:

  alert();--提示框--无返回值

  confirm();--确认框--返回true.false

  prompt();--文本输入框--返回输入内容

  parseFloat()/parseInt();

  isNaN();

• 常用对象

  • location
    1. location.href;用于获取和设置浏览器得请求地址
    2. location.reload();//刷新
  • history 历史
    1. history.length;得到历史请求页面的数量
    2. history.back();返回上一个页面
    3. history.forword();返回下一个页面
    4. history.go(num);//前往某个页面,0--刷新,1--下一个页面;-1--上一个页面,2--下两个页面

  • screen 屏幕

    1. screen.width/screen.height;得到屏幕的宽高(像素)
    2. screen.availWidth/screen.availHeight;得到可用的宽高

  • navigator 导航/帮助

    1. navigator.userAgent 得到浏览器相关的版本信息

和window相关的时间

• window的点击事件

• 点击事件 onclick

• 加载完成 onload
• 获取焦点 onfocus

• 失去焦点 onblur

  //window窗口添加点击事件
  window.onclick = function(){
      alert(ip1.value);
  }
  //如果需要页面加载完做某些事需要把代码写再onload里面
  //窗口添加加载完成事件
  window.onload= function(){
      alert(ip1.value);   
  }
  /*给窗口添加获取焦点事件*/
  window.onfocus = function(){
      //控制台输出
      console.log("这位爷,里面请!");
  }
  
  /*给窗口添加失去焦点事件*/
  window.onblur = function(){
      console.log("欢迎下次光临~!");        
  }
  

eval()函数

• 可以将字符串以JS代码的形式执行

通过JS给元素添加CSS样式

• 通过元素对象.style.属性名 = 值

通过标签名查找

var elements = document.getElementsByTagName("img");

作业：假轮播图

1. 搭建界面
2. 给图片们添加样式 修改大小 并且让所有图片隐藏
3. 在页面加载完的时候(onload) 得到所有图片 从里面取出第一张 设置style让其显示
4. 开启每两秒执行一次的定时器
5. 在定时器里面准备一个递增的整数
6. 对递增的数值进行取余，得到的值为数组下标
7. 变量数组 判断i的值等于上一步的下标时 让当前遍历的图片显示 其它图片隐藏

电子时钟练习

1. 创建demo02.html
2. 在body里面添加一个h1 标签 设置id
3. 在script标签中 开启定时器 每隔一秒执行一次，在执行的方法中获取当前的客户端时间 date 从date中获取时分秒 把得到的时分秒显示到h1标签中 搞定！

定时器

• 开启定时器:var timer = setInterval(函数,时间);
• 停止定时器:clearInterval(timer);
• 指定时间执行一次:setTimeout(timer,时间);

DOM Document Object Model文档对象模型

• 主要学习的就是对页面当中的元素进行增删改查操作

查找元素

1. 通过id查找

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

2. 通过标签名查找

   var divs = document.getElementsByTagName("div");

3. 通过标签的name属性查找

   var arr = document.getElementsByName("name");

4. 通过标签的class属性值查找

   var arr = document.getElementsByClassName("dz");

通过上下级关系获得元素

1. 获取元素的上级元素

   元素对象.parentElement

2. 获取元素的下级元素们

   元素对象.childNodes 得到的是一个数组,里面装着多个元素和文本text

创建元素

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

• 添加到某个元素里面(最后)

  上级元素对象.appendChild(div);

• 添加到某个元素的上面

  上级元素.insertBefore(div,弟弟元素)

删除元素

父级元素.removeChild(被删除元素)

修改元素的内容

innerText()

修改元素的HTML内容

innerHTML()

修改样式

元素对象.style.样式名称 = "样式的值"

事件

• onclick()点击
• onload()加载
• onfocus()得到焦点
• onblur()失去焦点
• onmouseover()鼠标移入
• onmouseout()鼠标移除

• onchange()值改变事件

• 什么是事件?

  代表某些特定的时间点包括值改变事件,鼠标事件,键盘事件

鼠标事件

onclick()鼠标点击 , onmouseover()鼠标移入, onmouseout()鼠标移除, onmousedown()鼠标按下, onmouseup()鼠标抬起, onmousemove()鼠标移动

evetn.clientX,,,,,event.clientY 坐标

键盘事件

onkeydown()键盘按下, onkeyup()键盘抬起

//获取键盘按键对应的十进制数字(字符编码)
event.keyCode
//将十进制编码转换为对应的字符
String.fromCharCode(event.keyCode)

状态改变事件

onload()页面加载完, onchange()值发生改变事件, onblur()失去焦点 , onfocus()获取焦点, onsubmit()表单提交事件,onresize()尺寸改变

document.body.clientWidth document.body.clientHeight document.body.parentElement.clientHeight document.body.parentElement.clientWidth

事件绑定

1. 在元素种添加事件属性==在事件对于的函数种,this代表的是window对象,若想使用事件源对象,则需要在函数种传入this,再接收

   <input onclick="....">
   

2. 通过JS代码的动态绑定事件,JS代码和HTML代码分离,解耦合,便于升级和维护,在事件对于的函数种,this代表的是事件源

   onload = function(){
       mybtn.onclick = function(){
           alert("动态绑定成功");
       }
   }
   

事件取消

通过给事件函数返回false return false;取消事件

event对象

• event对象种保存着和使事件相关的信息
• 通过event可以获得鼠标事件的坐标,event.clientX/event.clientY
• 通过event可以获得键盘事件的字符编码event.keyCode

• 通过event可以获得事件源 event.target event.srcElement

  var obj = event.target || event.srcElement;
  evnet.target.nodeName==>返回对象名称
  

僵尸练习步骤：

1. 创建demo06，通过css给html添加背景图片，在页面加载完成的时候获取窗口的宽高，把宽高设置到背景图片上面
2. 在script标签中添加定时器t1每个100毫秒创建一个img添加到body中，通过img.src="a.jpg"形式给img设置显示图片，通过css样式选取所有的img，设置宽高，绝对定位 left的值为动态获取的屏幕的宽度，top的值为随机值（保证图片显示在屏幕范围内的随即值）
3. 在script标签中添加定时器t2每隔10毫秒执行一次，每次执行时获取页面中所有的img元素 然后for循环遍历每一个让每一个的left的值-=5
4. 在body里面通过html代码在左上角添加h3内容为成功次数：0 右上角添加h3内容为失败次数0，在script标签中声明两个全局的变量表示成功次数和失败次数(var success=0; var fail=0;)
5. 每次移动图片的时候判断图片的的位置是否移出窗口如果移出则删除图片并且让fail++ 显示到页面中
6. 在第二部创建img对象的时候给img动态绑定onmouseover事件，在事件中删除图片并且让seccess++ 显示到页面中 搞定！

事件冒泡

• 如果同一个区域中有多个事件响应,响应的顺序类似气泡,从下往上,也就是从底层元素往上级元素执行,这个过程称为冒泡
• 如果某个元素里面的多个元素需要添加事件,则这个事件可以直接添加给此元素,通过事件源判断到底做什么事
• event.target/event.srcElement