JavaScript进阶

DOM简单学习

1. Dom编程的作用

   目的： 为了控制html的元素。

2. 如何找到一个标签对象？

     1. 给html元素添加一个id的属性值
     2. 使用document.getElementById(“id值”)
   

3. 找到标签后我们的操作有哪些？

• 修改标签对象的属性。
• ==如何知道该标签对象有哪些属性呢？ 查api文档。==
• 修改标签体的内容。
• 任何一个标签只有有开始标签与结束标签那么都有标签体，凡是操作标签体都是使用innerHTml属性。

---

事件简单学习

1. 什么是事件？

   当发生了指定的事情之后，会触发某段代码。

2. 事件的注册方式

• 方式一： 直接在html元素上添加onclick属性。

• 方式二： 先通过js代码找到js对象，然后给js的对象设置onclick的属性值为一个方法。 （推荐）

  
  function fun(){
      alert("哎呀，被点了..")
  }
  //给按钮的注册时间
  button.onclick = fun;
  
  

• 方式三： 使用匿名函数的方式注册

  //很喜欢使用匿名函数注册。
  button.onclick = function(){
      alert("aaa");
  }
  
  

---

04_案例1_电灯开关

步骤

1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
    * 规则：
        * 如果灯是开的 on,切换图片为 off
        * 如果灯是关的 off,切换图片为 on
    * 使用标记flag来完成

代码

---

BOM_概述

清楚什么是BOM编程

BOM:浏览器对象模型。 js把浏览器各部分都使用了对象进行描述。 当你拿到这些对象的时候，那么这些对象则代表了浏览器各部分，那么就可以对浏览器进行操作。

BOM编程的对象有哪些？

• Window：窗口对象
• Navigator：浏览器对象
• Screen：显示器屏幕对象
• History：历史记录对象
• Location：地址栏对象

---

Window对象

windows对象常用的方法

 1. 与弹出框有关的方法：
        alert() 显示带有一段消息和一个确认按钮的警告框。
        confirm()   显示带有一段消息以及确认按钮和取消按钮的对话框。
            * 如果用户点击确定按钮，则方法返回true
            * 如果用户点击取消按钮，则方法返回false
        prompt()    显示可提示用户输入的对话框。
            * 返回值：获取用户输入的值
 2. 与打开关闭有关的方法：
        close() 关闭浏览器窗口。
            * 谁调用我 ，我关谁
        open()  打开一个新的浏览器窗口
            * 返回新的Window对象
3. 与定时器有关的方式
        setTimeout()    在指定的毫秒数后调用函数或计算表达式。//一次性
            * 参数：
                1. js代码或者方法对象
                2. 毫秒值
            * 返回值：唯一标识，用于取消定时器
        clearTimeout()  取消由 setTimeout() 方法设置的 timeout。
//      循环
        setInterval()   按照指定的周期（以毫秒计）来调用函数或计算表达式。
        clearInterval() 取消由 setInterval() 设置的 timeout。

window对象常用的属性

 1. 属性：
        1. 获取其他BOM对象：
            history
            location
            Navigator
            Screen:
        2. 获取DOM对象
            document
  2. 特点
        * Window对象不需要创建可以直接使用 window使用。 window.方法名();
        * window引用可以省略。  方法名();

代码

小结：

1. window是什么？

   代表的是当前浏览器打开的窗口。

   特点：

   • window对象不需要创建，可以直接去使用。
   • 使用window对象的方法或者是访问对象的属性，都可以省略window不写。 例如： alert() window.alter

2. window常用的方法:

• 弹出框的方法

• alert() 弹出框

• confirm() 确认框

• prompt() 输入框

• 关闭与打开的方法

  • open(url) 指定url打开一个新的窗口并且加载对应的url网页， 然后返回新打开的窗口对象。

  • close() 如果没有带上window对象去调用，默认是关闭当前的窗口。

• 定时方法

  • var timerId = setTimeOut(函数， 毫秒值) 相隔指定的毫秒值后执行执行的代码,返回该定时任务的id（执行一次）
  • clearTimeOut(timerId) 根据指定的定时任务的id取消对应的定时任务
  • setInterVal(函数，毫秒值) 相隔指定的毫秒值后执行执行的代码,返回该定时任务的id（重复执行多次）
  • clearInterVal(timeId) 根据指定的定时任务的id取消对应的定时任务

3. window常用的属性:

   • 获取其他的BOM对象。
     • history
     • location
     • Navigator
     • Screen
   • 获取DoM对象
     • document对象

   ==注意:由于以上的属性都是属于window对象，而访问window对象的属性是可以省略widnow不写的。==

轮播图

目标

利用window对象的setInterval定时器方法实现轮播图

步骤

1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。

代码实现

BOM_Location

目标

location对象代表什么？ location对象常用的方法？ location对象常用的属性？

代码

小结

1. location对象代表什么？

   代表的是地址栏对象。

2. location对象常用的方法？

   reload() 重新加载(刷新)

3. location对象常用的属性？

​ href : 获取以及设置地址栏的网址的。

自动跳转首页

目标

完成自动跳转主页案例

步骤

1.显示页面效果  

2.倒计时读秒效果实现
    2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
    2.2 定义一个定时器，1秒执行一次该方法
3.在方法中判断时间如果<= 0 ，则跳转到首页

代码

    
    
    




    

        5秒之后，自动跳转到首页...
    


    

---

==innerHTML?==

==获取|修改标签体的内容==

---

目标

history对象代表了什么， history对象常用的方法?

代码

    
    



    
    09页面
    

小结

1. history对象代表了什么

   代表的是当前窗口历史浏览记录。

2. history对象常用的方法?

• forward() 前进到上一个历史浏览记录

• back() 返回上一个历史浏览记录。

• go(1) 相当于forward一样， go（-1）相当于back一样。

DOM_概述

目标

什么是DOM编程，DOM的作用是什么

小结

1. 什么是DOM编程

​ DOM编程就是指我们要获取到html元素对应的标签对象，改变标签对象的属性，从而达到修改浏览器显示效果。

​ W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型 （核心dom的技术可以用于访问html与xml）
• XML DOM - 针对 XML 文档的标准模型（在核心dom的基础上进行了拓展，几乎xmldom没有怎么修改过核心dom的技术）
• HTML DOM - 针对 HTML 文档的标准模型(在核心dom的基础上进行了拓展.,但是htmldom修改的幅度非常大)

DOM_Document对象_获取Element方法

目标

学习如何根据标签的属性找节点

常用的方法

   1. getElementById()  ： 根据id属性值获取元素对象。id属性值一般唯一
   2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
   3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
   4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

代码

    
    
    




    
div1
    
div2

    
div3

    
div4
    
div5

    

小结

根据标签属性找元素的方法：

• getElementById("id属性值") 根据id属性值找标签对象 返回的是一个标签对象。
• getElmentsByTagName(标签名) 根据标签名找标签对象，返回的是一个数组对象。
• getElmentsByName(name属性值) 根据标签name属性值找标签对象，返回的是一个数组对象。
• getElmentsByClassName(class属性值) 根据标签class属性值找标签对象，返回的是一个数组对象。

DOM_Document对象_创建DOM对象(了解)

目标

了解创建Document对象

常用的方法

createAttribute(name)   创建一个属性对象
createComment()         创建一个注释对象
createElement()         创建一个标签对象
createTextNode()        创建一个文本对象

DOM_Element对象

目标

清楚Element对象常见的操作已经对应的方法

常用方法

setAttribute(key,value)  设置属性
removeAttribute(key)  删除属性

代码

    
    


    点我试一试
    
    

小结

Element对象常见的操作已经对应的方法

• setAtrribute(key,value); 给标签对象设置属性
• removeAttribute(key) 删除标签对象的属性

DOM_Node对象

目标

清楚Node的基本概念， Node常用的方法与属性

代码

    
    
    



    

        
div2
        div1
    
    删除子节点
    添加子节点
    

小结

1. 清楚Node的基本概念

   Node是Element\ Attribute\Comment\Text节点的父节点， 所有的对象都可以使用node的方法与属性。

2. Node常用的方法与属性

• appedChild() 添加一个子节点
• removeChild() 删除子节点
• parentNode 找到当前节点的父节点。

_动态表格

目标

实现动态表格

代码

    
    

    





    
    
    
    





    
学生信息表
    

        
编号
        
姓名
        
性别
        
操作
    

    

        
1
        
令狐冲
        
男
        
删除
    

    

        
2
        
任我行
        
男
        
删除
    

    

        
3
        
岳不群
        
?
        
删除
    

HTMLDOM_innerHTML

目标

如何控制标签体的内容

代码

    
    


    

        div
    


    

小结

如何通过innerHTML设置标签体内容

拓展

清楚innerHTML与value属性的区别

HTMLDOM_样式控制

目标

操作html标签css样式的方式

代码

    
    


    



    

        div1
    

    

        div2
    

小结

1. 操作html标签css样式的方式
   • 方式一： 对象.style.样式名字 = 样式的值.
   • 方式二： 对象.className = 类选择器的名字。 推荐使用..