1.1 今日目标
- 能够用代码写出JS函数的定义形式和调用形式
- 能够说出函数的形参和实参的区别
- 能够理解匿名函数立即调用的定义形式和调用形式
- 能够理解错误对script段的影响
- 能够理解变量作用域的概念
- 能够说出局部变量和全局变量的区别
1.2 JS中三类对象
1.2.1 浏览器对象
1、window对象
常用属性和方法：
window.alert('操作成功');
window.confirm('确定要删除吗');
window.setTimeout(函数,时间); //定时器
window.cleartimeout(); //清除定时器
window.setInterval(函数,时间) //时钟周期 时间以毫秒为单位
window.clearInterval(); //清除时钟周期
window.open()：打开新窗口
注意：由于window是最顶层对象，所以可以省略。
例题：定时器
setTimeout(function(){
alert('锄禾日当午');
}, 10000); //10秒以后弹出
例题：时钟周期
window.setInterval(function(){
console.log('锄禾日当午');
}, 1000); //每隔1秒调用函数
2、document对象
常用的属性和方法
document.bgColor 背景色
document.fgColor 前景色
document.write() 页面输出
例题
window.document.bgColor='#ccc'; //背景色
window.document.fgColor='#F00'; //前景色
document.write('锄禾日当午'); //页面输出
3、history对象
常用的属性和方法:
history.back() ：后退一级，等价于：history.go(-1)
history.forward() ：前进一级，等价于:history.go(1)
history.go(n) ：前进或后退n级
例题
<input type="button" value="回退一级" onclick='history.back()'><br>
<input type="button" value="回退一级" onclick='history.go(-1)'><br>
<input type="button" value="前进一级" onclick='history.forward()'><br>
<input type="button" value="前进一级" onclick='history.go(1)'><br>
4、location对象
常用的属性和方法
location.href='url地址'
location.assign(url地址)
location.reload() ：用来做刷新页面
location.replace(url地址) ：替换页面，页面替换完毕后不能回退
例题
<script>
function jump1(){
location.href='2-demo1.html'; //利用属性跳转
}
function jump2(){
location.assign('2-demo1.html'); //利用方法跳转
}
function jump3(){
location.reload(); //刷新
}
function jump4(){
location.replace('2-demo1.html'); //页面替换完毕后不能回退
}
</script>
<input type="button" value="href跳转" onclick='jump1()'><br>
<input type="button" value="assign跳转" onclick='jump2()'><br>
<input type="button" value="刷新" onclick='jump3()'><br>
<input type="button" value="replace替换" onclick='jump4()'><br>
多学一招：屏幕对象screen
常用的方法
screen.width：屏幕宽度
screen.height:屏幕高度
screen.availWidth：屏幕可用宽度
screen.availHeight:屏幕可用高度
例题：
var width=screen.width;
var height=screen.height;
document.write("屏幕的宽度："+width+",屏幕的高度："+height+"<br>");
width=screen.availWidth; //可用宽度
height=screen.availHeight; //可用高度
document.write("可用宽度："+width+",可用高度："+height+"<br>");
1.2.2 脚本对象
1、String字符串对象
声明字符串
var str1='锄禾日当午'; //方法一：直接赋值
var str2=new String('汗滴禾下土'); //方法二：new
多学一招：基本类型中的字符串会生成一个临时对象，通过临时对象去调用对象的方法和属性
常用属性和方法
var str1='锄禾,日,当午';
console.log(str1.length); //字符串长度
console.log(str1.indexOf('锄禾')); //返回子字符串位置，找不到返回-1
console.log(str1.substr(0,2)); //锄禾 截取子字符串
console.log(str1.split(',')); //分割字符串
console.log('aaa'.toUpperCase()); //转成大写
console.log('AAA'.toLowerCase()); //转成小写
2、Math对象
常用的属性和方法
console.log(Math.PI); //pi的值
console.log(Math.abs(-15)); //绝对值
console.log(Math.random()); //返回0-1的随机数,可以到0，但不能到1
console.log(Math.round(9.5)); //四舍五入
console.log(Math.ceil(9.1)); //向上取整
console.log(Math.floor(9.7)); //向下取整
例题：每秒随机显示一张图片
<body>
<img src="images/1.bmp" id='img'><br>
<input type="button" value="停止" id='btn_stop'>
<script>
window.onload=function(){
//创建时钟
var id=setInterval(function(){
var num=Math.floor(Math.random()*100)+1; //生产1-100的随机数
document.getElementById('img').src='images/'+num+'.bmp';
}, 100);
//停止时钟
document.getElementById('btn_stop').onclick=function(){
clearInterval(id); //关闭时钟
}
}
</script>
</body>
运行结果
3、Date对象
语法
var date=new Date(年、月、日、小时、分钟、秒)：表示date是对应时间的对象
var date=new Date()： 表示当前时间
常用方法
<script>
var date=new Date();
console.log('年：'+date.getFullYear());
console.log('月:'+(date.getMonth()+1));
console.log('日：'+date.getDate());
console.log('星期：'+date.getDay());
console.log('小时：'+date.getHours());
console.log('分钟：'+date.getMinutes());
console.log('秒：'+date.getSeconds());
console.log('本地日期：'+date.toLocaleDateString());
console.log('本地时间：'+date.toLocaleTimeString());
console.log('本地日期时间：'+date.toLocaleString());
</script>
例题：显示当前时间
<body>
<div id='time1'></div>
<div id='time2'></div>
<script>
//方法一：通过时钟周期实现
function getTime1(){
date=new Date();
document.getElementById('time1').innerHTML=date.toLocaleString();
}
setInterval(getTime1, 1000);
//方法二：通过定时器实现
function getTime2(){
var date=new Date();
document.getElementById('time2').innerHTML=date.toLocaleString();
setTimeout(getTime2, 1000);
}
setTimeout(getTime2, 1000);
</script>
</body>
1.2.3 HTML 对象
HTML对象就是HTML元素。
1.3 操作对象语句
1.3.1 this语句
this表示当前对象。
<img src="images/1.bmp" onmouseover='this.src="images/2.bmp"' onmouseout='this.src="images/1.bmp"'>
//省略this
<img src="images/1.bmp" onmouseover='src="images/2.bmp"' onmouseout='src="images/1.bmp"'>
运行结果：
多学一招：在HTML标签中,this是可以省略的。
1.3.2 with语句
with中的属性和方法都来自于with指定的对象
例题：
with(document){
bgColor='#ccc';
fgColor='#f00';
write('锄禾日当午');
write('汗滴禾下土');
write('谁知盘中餐');
write('粒粒皆辛苦');
}
注意：with不支持严格模式。
1.3.3 eval语句
作用：运行字符串表达式
alert(eval('10+20+30'));
例题：
<input type="text" id="express">
<script>
window.onload=function(){
var oTxt=document.getElementById('express');
oTxt.onblur=function(){
alert(eval(this.value))
}
}
</script>
运行结果
**练习题：**将数组字符串转成数组类型
<script>
var stu="['tom','berry','ketty']";
eval("var info="+stu);
console.log(info instanceof Array); //true
console.log(info); //(3) ["tom", "berry", "ketty"]
</script>
1.4 BOM
Browser Object Model：浏览器对象模型。浏览器对象的树型结构
例题：输入的字符串在新窗口中显示
<script>
window.onload=function(){
document.getElementById('str').onblur=function(){
var win=window.open(); //win表示打开的窗口
win.document.write(this.value);
}
}
</script>
<input type="text" id="str">
例题：在新窗口中引用父窗口
父窗体
<script>
window.onload=function(){
document.getElementById('btn_open').onclick=function(){
window.open('12-demo2.html'); //打开新窗口
}
}
</script>
<div id='result'></div>
<input type="button" id='btn_open' value="打开新窗口">
</body>
子窗体
<body>
<input type="text" name="" id="str">
<script>
window.onload=function(){
document.getElementById('str').onblur=function(){
opener.document.getElementById('result').innerHTML=eval(this.value);
}
}
</script>
</body>
小结：opener表示父级窗口
1.5 DOM
1.5.1 DOM介绍
DOM(Document Object Model)文档对象模型，也就是文档的树型结构
DOM 分为：核心DOM、XMLDOM、HTMLDOM
我们主要讲解HTMLDOM，就是HTML文档在内存中的树型结果
1.5.2 节点类型
1、元素节点，就是html标签
2、属性节点，就是HTML的属性
3、值节点，标签的内容
4、文档节点，就是document
5、注释节点，HTML注释
1.5.3 获取元素节点
1、通过document对象的方法获取节点
<div id='first' name='stu' class='php'>李白</div>
<div id='secod' name='stu' class='php'>杜甫</div>
<script type="text/javascript">
node=document.getElementById('first'); //通过id获取节点
node=document.getElementsByName('stu'); //通过name获取节点
node=document.getElementsByTagName('div'); //通过标签获取节点
node=document.getElementsByClassName('php'); //通过class获取节点
node=document.querySelectorAll('div'); //通过选择器获取节点 ES6
node=document.querySelectorAll('#first');
node=document.querySelectorAll('.php');
console.log(node);
</script>
2、通过BOM结构获取节点
<form action="" name='frm' id='frm'>
姓名: <input type="text" name="username" id="username" value='tom'>
</form>
<script type="text/javascript">
console.log(window.document.frm.username.value);
console.log(window.document.forms[0]['username'].value);
console.log(window.document.forms['frm'].username.value);
</script>
1.5.4 获取子节点
<ul id='ul'><li>中国</li><li>美国</li><li>日本</li></ul>
<script>
window.onload=function(){
var oUl=document.getElementById('ul');
console.log(oUl.firstChild); //第一个子元素
console.log(oUl.lastChild); //最后一个子元素
console.log(oUl.childNodes.length); //所有的儿子节点(计算空白字符)
console.log(oUl.children.length); //所有的儿子节点(不计算空白字符)
console.log(oUl.childNodes.item(1)); //通过索引获取子节点
console.log(oUl.children.item(1)); //通过索引获取子节点
}
</script>
1.5.5 获取兄弟节点
nextSibling:下一个兄弟节点
previousSibling:上一个兄弟节点
例题：
<ul>
<li>中国</li>
<li>美国</li>
<li>日本</li>
</ul>
<script>
window.onload=function(){
var oUl=document.getElementsByTagName('ul').item(0); //第0个ul
var oLi=oUl.children.item(1);
var node=oLi.nextSibling.nextSibling; //下一个兄弟节点
var node=oLi.previousSibling.previousSibling; //上一个兄弟节点
console.log(node);
}
</script>
1.5.6 获取父节点
<div>
<span id='span'></span>
</div>
<script>
var node=document.getElementById('span');
console.log(span.parentNode); //div
console.log(span.parentNode.parentNode); //body
console.log(span.parentNode.parentNode.parentNode); //html
console.log(span.parentNode.parentNode.parentNode.parentNode); //document
console.log(span.parentNode.parentNode.parentNode.parentNode.parentNode); //null
</script>
1.5.7 获取文本节点
<div id='test'>锄禾日当午</div>
<script>
var oDiv=document.getElementById('test');
var oTxt=oDiv.firstChild; //获取文本节点
console.log(oTxt.nodeValue); //获取节点的值
console.log(oTxt.wholeText); //获取节点的值
</script>
小结：
1、通过元素节点的firstChild或lastChild获取文本节点
2、通过nodeValue或wholeText获取节点的值
1.5.8 属性节点
1、获取属性节点
方法一：node.节点名 只能操作w3c定义的属性
方法二：node.getAttribute() 可以操作w3c和自定义属性
<div id='article' name='title'></div>
<script>
var oDiv=document.getElementById('article');
console.log(oDiv.id)
console.log(oDiv.getAttribute('id'));
console.log(oDiv.getAttribute('name'))
</script>
2、设置属性节点
方法一：node.节点名=值 //只能操作w3c定义的属性
方法二：node.setAttribute(属性名，值) //可以操作w3c和自定义属性
例题：将文本框变成复选框。
<input type="text" name="username" id="username">
<input type="button" id="btn" value="点击">
<script>
window.onload=function(){
document.getElementById('btn').onclick=function(){
var oTxt=document.getElementById('username');
oTxt.setAttribute('type','checkbox'); //设置属性
}
}
</script>
3、获取所有的属性
<div id='article' name='title'></div>
<script>
var oDiv=document.getElementById('article');
console.log(oDiv.attributes); //获取所有属性
console.log(oDiv.attributes.id.nodeValue); //获取id属性的值
console.log(oDiv.attributes['name'].nodeValue); //获取name数组的值
</script>
1.5.9 判断节点的类型
| 节点类型 | nodeType | nodeName |
|---|---|---|
| 元素节点 | 1 | 标签名 |
| 属性节点 | 2 | 属性名本身 |
| 值节点（文本节点） | 3 | #text |
| 注释节点 | 8 | #comment |
| 文档节点 | 9 | #document |
1.5.10 创建节点
<script>
window.onload=function(){
document.getElementById('btn').onclick=function(){
var stu=['李白','杜甫','白居易'];
//创建ul,将ul添加到body下
var oUl=document.createElement('ul'); //创建元素节点
//document.getElementsByTagName('body').item(0).appendChild(oUl);
//简化成：
document.body.appendChild(oUl);
//创建li,将li添加到ul下
for(var s in stu){
var oLi=document.createElement('li'); //创建元素节点
oLi.innerHTML=stu[s]; //将stu[s]的值放到li元素下
oUl.appendChild(oLi); //将oLi添加到oUl后面
}
}
}
</script>
<input type="button" id='btn' value="点击">
运行结果
1.5.11 插入节点、替换节点、删除节点
<ul id="ul">
<li>李白</li>
<li>杜甫</li>
</ul>
<input type="button" value="插入" id='btn1'><br>
<input type="button" value="替换" id='btn2'><br>
<input type="button" value="删除" id='btn3'><br>
<script>
window.onload=function(){
//添加元素
document.getElementById('btn1').onclick=function(){
var li=document.createElement('li');
li.innerHTML='白居易';
//添加到元素的最后位置
//document.getElementById('ul').appendChild(li);
//在元素前面添加
var oldli=document.getElementsByTagName('li').item(1); //<li>杜甫</li>
oldli.parentNode.insertBefore(li, oldli);
}
//替换节点
document.getElementById('btn2').onclick=function(){
var li=document.createElement('li');
li.innerHTML='白居易';
var oldli=document.getElementsByTagName('li').item(1);
document.getElementById('ul').replaceChild(li, oldli); //替换节点
}
//删除节点
document.getElementById('btn3').onclick=function(){
var oldli=document.getElementsByTagName('li').item(1);
oldli.parentNode.removeChild(oldli); //删除节点
}
}
</script>
小结：
1、appendChild()：在元素的最后添加
2、insertBefore()：在指定元素前面插入
3、replaceChild()：替换节点
4、removeChild()：删除节点
1.5.12 复制节点
<div id='test'>锄禾日当午</div>
<script type="text/javascript">
var oDiv=document.getElementById('test');
var node1=oDiv.cloneNode(); //浅层复制
var node2=oDiv.cloneNode(true); //深度复制
console.log(node1);
console.log(node2);
</script>
小结：
cloneNode()：浅层复制，只复制结构，不复制内容
cloneNode(true)：深度复制，复制结构和内容
1.5.13 DOM操作CSS样式
1、获取直接CSS样式
语法
node.style.样式名称 注意：这种方式只能获取行内样式
2、设置直接CSS样式
语法
node.style.样式名称=样式 这种样式设置的是行内样式
注意：设置样式的长度单位必须要加上’px’。
3、获取计算后的样式
<style>
#test{
color:red;
height: 100px;
}
div{
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
<div id="test">锄禾日当午</div>
<script>
var oDiv=document.getElementById('test');
oDiv.style.width='300px'; //设置行内样式
//获取计算后的样式
oStyle=window.getComputedStyle(oDiv); //获取计算后的样式对象
console.log('宽度：'+oStyle.width); //宽度：300px
console.log('高度：'+oStyle.height); //高度：100px
console.log('背景色:'+oStyle.backgroundColor); //背景色:rgb(204, 204, 204)
</script>
1.6 作业
1、打字机效果
2、自选彩票
3、本月第一天是星期几
4、倒计时
5、年月日
扫一扫
949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
