本文深入探讨JavaScript中的BOM对象，重点介绍了Window对象的弹框方法、定时器以及Location对象。同时，文章讲解了DOM对象，包括document对象的操作、案例实践如表格隔行换色和复选框全选/全不选。此外，还涉及了JavaScript内置对象如String、Date、Array等，并提供省市联动案例。
-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对象
- Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。
- Window对象（重点），Window 对象表示一个浏览器窗口或一个框架。
- Navigator对象，包含的属性描述了正在使用的浏览器
- History对象，其实就是来保存浏览器历史记录信息。
- Location对象（重点），Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
1.3 Window对象
Window对象此处学习它的三个作用：
- 弹框的方法
- 定时器
- 全局方法
1.3.1 弹框的方法（重点）
-
提示框：alert(提示信息);
-
确认框：confirm(提示信息);
-
输入框：prompt(提示信息);
1.3.2 定时器（重点）
- 执行多次的定时器：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()
-
执行一次的定时器：setTimeout(函数,毫秒值)
-
清除定时器: clearInterval
-
setTimeout() 在指定的毫秒数后调用函数或执行代码片段。
- setTimeout(code,millisec)
- code 必需。要调用的函数或要执行的代码字符串。
- millisec 必需。在执行代码前需等待的毫秒数。
- setTimeout(code,millisec)
-
setInterval() 以指定周期执行函数或代码片段。（上一个案例已经讲解）
-
clearInterval() 取消由 setInterval() 设置的 timeout。
-
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。（本案例不使用，此处一并讲解）
1.3.3 常用的全局方法（了解）
-
parseInt/parseFloat函数 ---- Integer.paseInt();
-
eval函数—特点：可以将字符串解析成js脚本
1.4 Location对象（重点）
重点记忆location.href可以在js中进行url访问
location.href相当于在浏览器的地址栏中输入地址 并敲回车
1.5 案例 轮播图
1.5.1 案例需求
第一天完成首页中，“轮播图”只提供一张图片进行显示。现需要编写程序，完成自动切换图片功能。
1.5.2 案例分析
-
编写html页面，为页面设置加载事件onload
-
编写事件触发函数
-
获得轮播图图片
-
开启定时器，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文档中的所有元素。
标签元素的操作
-
获得元素对象：
根据id获得一个元素：getElementById(id属性值)
根据标签名称获得多个元素：getElementsByTagName(标签名称)
根据class属性获得多个元素：getElementsByClassName(class的属性值)
根据name属性获得多个元素：getElementsByName(name属性值)
-
创建一个新元素createElement()
-
将元素放到某个父元素的内部appendChild()
-
标签体的获取与设置：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++){
if(inputs[i].type=="text")
alert(inputs[i].value);
}
//输出所有下拉选 id="edu"中option标签中 value属性的值
var eduElement = document.getElementById("edu");
var eduOptions = eduElement.getElementsByTagName("option");
for(var i=0;i<eduOptions.length;i++){
alert(eduOptions[i].value);
}
function showSelect(){
//输出所有下拉选select的option标签中value的值
//输出选中的值
var options = document.getElementsByTagName("option");
for(var i=0; i< options.length;i++){
if(options[i].selected)
alert(options[i].value);
}
}
</script>
DOM练习3
<script type="text/javascript">
//通过元素的name属性获取所有元素的引用 name="tname"
//测试该数据的长度
//遍历元素,输出所有value属性的值
var inputs = document.getElementsByName("tname");
/*for(var i=0;i<inputs.length;i++){
alert(inputs[i].value);
}*/
//为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值
for(var i=0; i<inputs.length;i++){
inputs[i].onchange=function(){
alert(this.value);
}
}
</script>
DOM练习4
<script type="text/javascript">
//<li id="xj" value="xingji">星际争霸</li>节点的value属性的值
var xjElement = document.getElementById("xj");
alert(xjElement.getAttribute("value"));
</script>
DOM练习5
<script type="text/javascript">
//给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
var xjElement = document.getElementById("xj");
xjElement.setAttribute("name","xingjizhengba");
//测试
alert(xjElement.getAttribute("name"));
</script>
DOM练习6
<script type="text/javascript">
window.onload=function(){
//在div层中插入 <h1>海马</h1>
var cityElement = document.getElementById("city");
cityElement.innerHTML="<h1>海马</h1>";
//在div层中插入“海马” 文本
//cityElement.innerHTML="海马";
//读取div的标签体内容
alert(cityElement.innerHTML);
//读取div的标签体文本内容
alert(cityElement.innerText);
}
</script>
DOM练习7
<script type="text/javascript">
//查看id="edu"的节点是否含有子节点
var eduElement = document.getElementById("edu");
var flag = eduElement.hasChildNodes();
alert(flag);
//查看id="tid_1"的节点是否含有子节点
var tid_1Element = document.getElementById("tid_1");
flag = tid_1Element.hasChildNodes();
alert(flag);
</script>
DOM练习8
<script type="text/javascript">
//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
var cityElement = document.getElementById("city");
var bjElement = document.getElementById("bj");
//cityElement.removeChild(bjElement);
//获取北京的父节点
var parent = bjElement.parentNode;
alert(parent.id);
</script>
DOM练习9
<script type="text/javascript">
//点击北京节点， 将被反恐节点替换
var bjElement = document.getElementById("bj");
bjElement.onclick = function(){
var cityElement = document.getElementById("city");
var fkElement = document.getElementById("fk");
cityElement.replaceChild(fkElement,bjElement);
}
</script>
DOM练习10
<script type="text/javascript">
//增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下
var cityElement = document.getElementById("city");
var tjElement = document.createElement("li");
tjElement.innerHTML="天津";
tjElement.setAttribute("id","tj");
tjElement.setAttribute("value","tianjin");
cityElement.appendChild(tjElement);
</script>
DOM练习11
<script type="text/javascript">
// 在重庆前面插入新的节点 <li id="tj" name="tianjin">天津</li>
var cityElement = document.getElementById("city");
var tjElement = document.createElement("li");
tjElement.innerHTML="天津";
tjElement.setAttribute("id","tj");
tjElement.setAttribute("value","tianjin");
var cityElement = document.getElementById("city");
var cqElement = document.getElementById("cq");
cityElement.insertBefore(tjElement,cqElement);
</script>
2.3 案例 表格隔行换色
2.3.1 案例介绍
开发中，需要使用表格陈列数据，数据过多不易查看，通常使用隔行换色进行表示。
2.3.2 案例相关js函数介绍
相关js事件
- onload() 页面加载成功触发
方式1：使用onload属性确定需要执行的函数
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//js代码在<body>之前，不能获得<body>标签体中的内容，还没有加载到
var e01 = document.getElementById("e01");
alert(e01); //打印：null
function init () {
//页面加载成功之后执行
var e02 = document.getElementById("e01");
alert(e02.value); //打印：传智播客
}
</script>
</head>
<body onload="init()">
<input type="text" name="" id="e01" value="传智播客" />
</body>
方式2： 通过window.onload 设置匿名函数
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
//页面加载成功之后执行
var e02 = document.getElementById("e01");
alert(e02.value); //打印：传智播客
}
</script>
</head>
<body>
<input type="text" name="" id="e01" value="传智播客" />
</body>
this关键字
- 在函数内部this表示：当前操作的元素。
2.3.3 案例实现
在提供html页面的基础上，编写js代码
<script type="text/javascript">
//页面加载完成事件
window.onload = function(){
//获取所有的tr标签
var trs = document.getElementsByTagName("tr");
//从2开始遍历数组
for(var i=2;i<trs.length;i++){
//索引的奇偶数判断
if(i%2==0){
trs[i].style.backgroundColor="#FFFAE8";
}else{
trs[i].style.backgroundColor="#9B70A9";
}
//定义变量,保存变化后的颜色
var color="";
//每行注册鼠标的移入事件
trs[i].onmouseover = function(){
//记录修改后的颜色
color=this.style.backgroundColor;
this.style.backgroundColor="#ccc";
}
//每行注册鼠标移出事件
trs[i].onmouseout = function(){
this.style.backgroundColor=color;
}
}
}
</script>
2.4 案例 复选框全选 / 全不选
2.4.1 案例介绍
开发中，经常需要对表格数据进行“批量处理”，就需要快速的对列表项进行操作，本案例我们来完成“全选和全不选”
2.4.2 案例相关js属性介绍
单选选中 / 复选选中
ele.checked 表示元素是否选中，true表示选中，false表示没有选中
例如：ele.checked = true; //设置元素被选中。
2.4.3 案例实现
步骤1：给复选框添加onclick事件
<input type="checkbox" onclick="selectAll(this)" >
步骤2：编写selectAll(this)处理列表项的复选框是否勾选
<script type="text/javascript">
function selectAll(check){
var checkboxs = document.getElementsByClassName("itemSelect");
var checked = check.checked;
for(var i=0;i<checkboxs.length;i++){
checkboxs[i].checked=checked;
}
}
</script>
第三章 JavaScript内置对象
3.1 String对象
JS的对象也分为内置对象和定义对象,Java中Object,String,System属于内置对象,自定义的Person,Student属于自定义的对象.
JS的自定义对象是函数实现的
<script type="text/javascript">
/*
String对象
*/
var str = "abc"// typeof 输出string
var str2 = new String(str); //typeof 输出 object
//以上定义方式,都可以使用String对象的方法
var s = "a-b-c-de-FG";
//字符串的长度
//alert(s.length);
//指定索引找字符
//alert(s.charAt(1));
//字符第一次出现的索引
//alert(s.indexOf("c"));
//字符最后一次出现的索引
//alert(s.lastIndexOf("c"));
//切割字符串
/*
var strArr = s.split("-");
for(var i = 0 ; i < strArr.length;i++){
alert(strArr[i]);
}
*/
//获取索引之间的字符
//alert(s.substring(1,3));
//获取索引开始到长度的字符
//alert(s.substr(1,3));
</script>
3.2 Date对象
JS中的日期对象
<script type="text/javascript">
/*
* Data对象
* 创建方式直接new
*/
var date = new Date();
//拼接年月日
alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日");
//获取毫秒值
alert(date.getTime());
</script>
3.3 Math对象
Math是数学计算的对象,此对象无需创建,直接Math.调用
<script type="text/javascript">
/*
Math对象:直接调用
*/
//向上取整
alert(Math.ceil(3.14));
//向下取整
alert(Math.floor(3.14));
//四舍五入取整
alert(Math.round(3.14));
</script>
3.4 Array数组对象
<script type="text/javascript">
/*
数组对象定义方式
new Array();
new Array(size);
new Array(element0, element0, ..., elementn);
*/
//定义数组对象
var arr1 = new Array();
//赋值元素
arr1[0] = 1;
arr1[1] = "a";
arr1[2] = 2.2;
alert(arr1);
//定义数组对象
var arr2 = new Array(3);
//打印数组长度
alert(arr2.length);
//定义数组对象
var arr3 = new Array(3,4,5,"a",true);
alert(arr3);
//开发中最常用方式
var arr4 = [1,2,3,4,"a","b","c"];
for(var i = 0 ; i< arr4.length;i++){
alert(arr4[i]);
}
//定义二位数组
var arr5 = [
[1,2,3],["a",4,"b"],[true,5,false]
];
//打印3
alert(arr5[0][2]);
//打印a
alert(arr5[1][0]);
//打印false
alert(arr5[2][2]);
</script>
3.5 案例 省市二级联动
3.5.1 案例介绍
在日常应用中，我们需要完善个人信息，“所在地”要求选择省市，当选择省时，该省对应的市将自动的更新。
3.5.2 案例实现
步骤1：给注册页面添加select标签
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">吉林省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
步骤2：js实现
<script type="text/javascript">
// 定义二维数组:存储省市信息
var pros = [
["朝阳","海淀","昌平"],["长春市","锦州市","吉林市"],["南京市","苏州市","徐州市"]
];
function selectCity(province){
//获取选中省份的市数组
var cityArr = pros[province];
//获取城市的select标签对象
var cityEle = document.getElementById("cityId");
//添加之前先清空option子标签
cityEle.innerHTML="";
//创建请选择的option子标签
var optionEle = document.createElement("option");
optionEle.innerHTML="----请-选-择-市----";
cityEle.appendChild(optionEle);
//遍历数组,几个元素就创建几个子option标签
for(var i = 0;i < cityArr.length;i++){
//创建子标签
var optionEle = document.createElement("option");
//设置子标签的标签体内容
optionEle.innerHTML=cityArr[i];
//添加子标签
cityEle.appendChild(optionEle);
}
}
</script>
3.6 RegExp正则表达式对象
JS中的正则表达式和Java中的正则表达式相似
定义方式: 直接定义和创建对象方式
<script type="text/javascript">
/*
正则表达式定义
1. new RegExp对象
2. 正则被定义在俩个//内
[0-9][a-z][A-Z]{5}
^匹配开头
$匹配结尾
*/
var reg = new RegExp("^[0-9]{5}$");
//正则对象方法test,测试与字符串是否匹配
var flag = reg.test("a2345");
alert(flag);
var reg1 = /^[0-9]{5}$/;
flag = reg1.test("6789 ");
alert(flag);
</script>
扫一扫
3261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
