javascript

-JavaScript

今日内容

• 使用JS完成图片轮播效果
• 使用JS完成页面定时弹出广告
• 使用JS完成表格的隔行换色
• 使用JS完成复选框的全选效果
• 使用JS完成省市联动效果

学习目标

• 使用JS可以获得指定元素
• 使用JS可以编写定时程序
• 使用JS可以创建元素
• 使用JS可以对元素的属性进行操作
• 使用JS可以对元素的标签体进行操作
• 使用JS可以对指定元素的样式进行操作（获得或修改）

第一章 BOM对象

1.1 js的BOM概述

BOM（Browser Object Mode），浏览器对象模型(将客户端的浏览器抽象成一类对象)，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。

例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。在例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。当然除此之外，BOM对象不仅仅具备这些功能，让我们来学习吧。

1.2 js的BOM对象

1. Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。
2. Window对象（重点），Window 对象表示一个浏览器窗口或一个框架。
3. Navigator对象，包含的属性描述了正在使用的浏览器
4. History对象，其实就是来保存浏览器历史记录信息。
5. Location对象（重点），Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

1.3 Window对象

Window对象此处学习它的三个作用：

1. 弹框的方法
2. 定时器
3. 全局方法

1.3.1 弹框的方法（重点）

1. 提示框：alert(提示信息);

2. 确认框：confirm(提示信息);

3. 输入框：prompt(提示信息);

1.3.2 定时器（重点）

1. 执行多次的定时器：setInterval(函数,毫秒值)

window.setInterval(code, millisec) 按照指定的周期（间隔）来执行函数或代码片段。
参数1： code 必需。执行的函数名或执行的代码字符串。 
参数2：millisec 必须。时间间隔，单位：毫秒。
返回值：一个可以传递给 window.clearInterval() 从而取消对 code 的周期性执行的值。
例如：
* 方式1：函数名 ， 	setInterval(show , 100);
* 方式2：函数字符串，	setInterval("show()" , 100);

• window对象提供都是全局函数，调用函数时window可以省略。

  • window.setInterval() 等效 setInterval()

2. 执行一次的定时器：setTimeout(函数,毫秒值)

3. 清除定时器: clearInterval

• setTimeout() 在指定的毫秒数后调用函数或执行代码片段。

  • setTimeout(code,millisec)
    • code 必需。要调用的函数或要执行的代码字符串。
    • millisec 必需。在执行代码前需等待的毫秒数。

• setInterval() 以指定周期执行函数或代码片段。（上一个案例已经讲解）

• clearInterval() 取消由 setInterval() 设置的 timeout。

• clearTimeout() 取消由 setTimeout() 方法设置的 timeout。（本案例不使用，此处一并讲解）

1.3.3 常用的全局方法（了解）

1. parseInt/parseFloat函数 ---- Integer.paseInt();

2. eval函数—特点：可以将字符串解析成js脚本

1.4 Location对象（重点）

重点记忆location.href可以在js中进行url访问

location.href相当于在浏览器的地址栏中输入地址 并敲回车

1.5 案例 轮播图

1.5.1 案例需求

第一天完成首页中，“轮播图”只提供一张图片进行显示。现需要编写程序，完成自动切换图片功能。

1.5.2 案例分析

1. 编写html页面，为页面设置加载事件onload

2. 编写事件触发函数

3. 获得轮播图图片

4. 开启定时器，2000毫秒重新设置图片的src属性

1.5.3 案例实现

步骤1：为轮播图img标签添加id属性

<div style="width:100%;">
    <img id="imgId" src="../img/1.jpg" width="100%" />
</div>

步骤2：编写js代码，页面加载触发指定函数

<script type="text/javascript">
    var i = 1;
    setInterval(function(){
    
        var imgId=document.getElementById("imgId");
        if(i<=3){
    
            i++;
        }else{
    
            i=1;
        }
        imgId.src="img/"+i+".jpg";	
    },3000);
</script>

1.6 案例 定时弹广告

1.6.1 案例需求

在平日浏览网页时，页面一打开5秒后显示广告，然后5秒后再隐藏广告。

1.6.2 案例分析

知识点分析

JavaScript样式获得或修改

• 获得或设置样式

obj.style.属性		，获得指定“属性”的值。
obj.style.属性=值	，给指定“属性”设置内容。
	如果属性由多个单词使用“-”连接，需要将“-”删除，并将后一个单词首字母大写。
	例如：background-color 需要改成 backgroundColor

1.6.3 案例实现

<div id="adDiv" style="display: none;">
    <img src="img/ad.jpg" />
</div>

<script type="text/javascript">
    setTimeout(function(){
    
        var adDiv = document.getElementById("adDiv");
        adDiv.style.display="block";

        setTimeout(function(){
    
            adDiv.style.display="none";
        },3000);
    },3000);
</script>

第二章 DOM对象

2.1 什么是DOM

• DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。

  • 创建的结构化文档：html、xml 等
  • DOM包括：核心DOM、HTML DOM、XML DOM。通常情况下HTML DOM 和XML DOM是可以相互使用的。

• HTML DOM 将 整个HTML文档呈现成一颗DOM****树，树中有元素、属性、文本等成员。

2.2 document 文档对象

浏览器加载整个HTML文档形成Document 对象，Document 对象可以访问和操作HTML文档中的所有元素。

标签元素的操作

1. 获得元素对象：

   根据id获得一个元素：getElementById(id属性值)

   根据标签名称获得多个元素：getElementsByTagName(标签名称)

   根据class属性获得多个元素：getElementsByClassName(class的属性值)

   根据name属性获得多个元素：getElementsByName(name属性值)

2. 创建一个新元素createElement()

3. 将元素放到某个父元素的内部appendChild()

4. 标签体的获取与设置：innerHTML

属性的操作

获得属性的值：getAtrribute(name)

设置属性的值：setAtrribute(name,value)

删除某个属性：removeAtrribute(name)

DOM练习1

<script type="text/javascript">
    //输出 <input type="text" name="username" value="传智播客10周年_1"  id="tid" >标签value属性的值
    var tidElement = document.getElementById("tid");
    alert(tidElement.value);
    //输出 <input type="text" name="username" value="传智播客10周年_1"  id="tid" >标签type属性的值
    alert(tidElement.type);
</script>

DOM练习2

<script  type="text/javascript">
    //获取所有的input元素,返回值是数组
    var inputs = document.getElementsByTagName("input");
    //测试长度
    alert(inputs.length);
    //遍历value的值
    for(var i=0;i<inputs.length;i++){
    
        alert(inputs[i].value);
    }
    //输出type="text"中 value属性的值 不包含按钮(button)
    for(var i=0;i<inputs.length;i++