JavaEE笔记——前端基础之JS事件，内置对象与BOM和DOM操作
目录
mouse鼠标移入移出事件——onmouseover和onmouseout
JavaScript对象
对象的创建和使用
JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//1.使用原始的方式创建对象
var obj = new Object();
obj.name='zhangsan';
obj.age = 20;
obj.say = function () {
console.log(this.name,":",this.age);
}
//测试
console.log(obj.name);
console.log(obj.age);
obj.say();
//2.使用工厂模式创建对象
function createObject(name,age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.say = function () {
console.log(this.name, ":", this.age);
}
return obj;
}
//测试
var ob1 = createObject('lisi',20);
console.log(ob1.name);
ob1.say();
var ob2 = createObject('wangwu',25);
console.log(ob2.name);
ob1.say();
console.log("===============");
//3.使用自定义构造函数创建对象
function Stu(name,age) {
this.name = name;
this.age = age;
this.say = function () {
console.log(this.name,":",this.age);
}
}
//测试
var s1 = new Stu("zhaoliu",28);
var s2 = new Stu("xiaoli",21)
s1.say();
s2.say();
console.log("===============");
//4.直接创建自定义对象
var ob = {name:'qq',age:25}
console.log(ob.name);
console.log(obj.age);
var obj={};
obj.name="小白";
obj.say=function () {
console.log("我叫: "+this.name);
};
obj.say();
var obj2={
name:"小明",
age:20,
say:function () {
console.log("我叫: "+this.name+"; 年龄: "+this.age);
},
};
obj2.say();
var a = [10,20,30];
console.log(typeof a); //结果为object类型
console.log(a.constructor == Array); // 使用constructor方法判断具体的数值类型
console.log(s1 instanceof Stu);//判断s1是否为STU类的实例
</script>
<body>
<h1>JavaScript语言实例--对象的定义和使用</h1>
</body>
</html>
JavaScript内置对象
Array(数组)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//内置对象--Array数组
var a1 = new Array(); //定义一个空数组
var a2 = new Array(10);//定义一个长度为10（值：undefined）
var a3 = new Array(10,20,30);//定义一个指定数值的数组
console.log(a1.length);
console.log(a2.length);
console.log(a3.length);
var a4 = [10,20,30,40,50] // 快捷定义数组
//数组的遍历
for(var i=0;i<a4.length;i++){
console.log(i,"=>",a4[i]);
}
//以for...in的方式遍历
for(var i in a4){
console.log(i,"=>",a4[i]);
}
//以foreach的方式进行遍历
a4.forEach(function (v) {
console.log(v);
})
//数组的方法：
console.log(a4.toString());//数组转字符串
console.log(a4.join(":"))//以：为分割符来合并字符串
//数组合并
var a = [1,2,3];
console.log(a.concat(4,5));
var b = [10,50,30,20,70,40];
console.log(b.join(":"));
console.log(b.sort().join(":")); //数组排序
console.log(b.reverse().join(":")); //数组反序
var aa = new Array(10,20,30);
console.log(aa.join(":"));
aa.push(50);//往数组内加值
aa.push(40);
console.log(aa.join(":"));
aa.pop(); //从数组的尾部删除一个值
console.log(aa.join(":"));
//清空
console.log(b.join("："));
b.length=3
console.log(b.join("："));
b = [];
console.log(b.join("："));
</script>
</head>
<body>
<h1>数组对象</h1>
</body>
</html>
Date日期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>JavaScript语言实例--内置对象</h1>
</body>
<script>
//内置对象--Date日期对象
function formatDate (d) {
if (!d instanceof Date){
return;
}
var y = d.getFullYear(),
m = d.getMonth()+1,
day = d.getDate(),
hh = d.getHours(),
mm = d.getMinutes(),
ss = d.getSeconds();
//判断单位数字前补零操作
m = m<10?'0'+m:m;
day = day<10?'0'+day:day;
hh = hh<10?'0'+hh:hh;
mm = mm<10?'0'+mm:mm;
ss = ss<10?'0'+ss:ss;
return y+"-"+m+"-"+day+" "+hh+":"+mm+":"+ss;
}
var dd = new Date();
//从1970年1月1日零时零分0秒至今的毫秒数
document.write("时间戳："+dd.valueOf());
document.write("<h2>"+formatDate(dd)+"</h2>");
</script>
</html>
String字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>JavaScript语言实例--内置对象</h1>
</body>
<script>
//内置对象--String字符串对象
var s1 ="ZhangSanFeng";
document.write(s1+"<br/>");
document.write(s1[5]+"<br/>");
document.write(s1.charAt(5)+"<br/>");//查找指定位置上的字符
document.write(s1.substr(5,3)+"<br/>");//substr(5,3):从第5个字符开始，截取3个字符
document.write(s1.substring(5,8)+"<br/>");//substring(5,8):截取第5-7个字符。(5,8):左闭右开
document.write("小写："+s1.toLowerCase()+"<br/>");
document.write("大写："+s1.toUpperCase()+"<br/>");
//字符串查找
document.write(s1.indexOf("an")+"<br/>");//从首字母开始查找，查找an的位置
document.write(s1.lastIndexOf("an")+"<br/>");//从最后的字母开始查找，查找an的位置
//替换
document.write(s1.replace("SanFeng","WuJi")+"<br/>");
//全部替换
document.write("10,20,30,40".replace(/,/g,":"));// replace(/,/g,":")：把所有的,替换成：
var str = "10:23:45:67:87:65";
console.log(str);
console.log(str.split(":"));
var s2 = " zhangsan "
console.log("#"+s2+"#");
console.log("#"+s2.trim()+"#"); //trim():删除字符串的头尾空格。
</script>
</html>
Math
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>JavaScript语言实例--内置对象</h1> </body> <script> //内置对象--Math对象 console.log(Math.abs(-20)); console.log(Math.ceil(10.00000001));//进一取整 console.log(Math.floor(10.9999999));//舍去求整 console.log(Math.round(10.5));//四舍五入取整 console.log(Math.max(10,20));//最大值 console.log(Math.min(10,20))//最小 console.log(Math.random());//0~1的随机数 console.log(Math.ceil(Math.random()*1000000)%10+1);//1~10的随机数 </script> </html>
JavaScript事件
单击事件与元素操作
<h1 id="hid">JavaScript语言实例--单击事件</h1>
<!--按钮称为事件源,单击称为事件,双引号里的内容称为事件处理程序-->
<button οnclick="fun()">点击我</button>
<ul id="uid">
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
<ol>
<li>1111111</li>
<li>2222222</li>
</ol>
</body>
<script>
function fun() {
console.log('hello js');
//获取id属性为hid的元素标签
var hid = document.getElementById("hid");
//输出元素标签之间的文本内容
console.log(hid.innerHTML);
hid.innerHTML = "JavaScript语言实例--元素操作事件";
//改变HTML 元素的样式
hid.style.color = "red";
//在js的命名规范中，是不允许有-出现的，但是css样式里很多样式都含有-，
// 我们需要把-去掉，然后第二个单词的首字母大写，这样就可以在JS内使用CSS样式
hid.style.backgroundColor="#ddd";
}
//获取当前网页中的所有li元素标签
/*var mlist = document.getElementsByTagName("li");*/
var mlist = document.getElementById("uid").getElementsByTagName("li");
//遍历输出
for (var i in mlist){
if (!isNaN(i))
console.log(mlist[i].innerHTML);
mlist[i].style.color="red";
}
</script>
Timing定时事件
<h1 >JavaScript语言实例--定时器</h1>
<h2 id="hid">计数器：0</h2>
<button οnclick="doStop()">停止</button>
</body>
<script>
var m=0,mytime=null;
function doRun() {
m++;
document.getElementById("hid").innerHTML="计数器："+m;
mytime = setTimeout(doRun,1000); //以递归的方式调用一次性定时函数从而实现周期性定时
}
doRun();
function doStop() {
clearTimeout(mytime);
}
/* m=0;
var mytime = setInterval(function () {
m++;
document.getElementById('hid').innerHTML = "计数器："+m;
},1000)
function doStop() {
clearInterval(mytime);
}*/
/*//一次性定时3秒后执行参数中的函数
setTimeout(function () {
console.log("Hello JS!")
},3000);
//周期性定时，每隔1秒执行参数回调函数一次
var m = 0;
setInterval(function () {
m++
console.log("Hello"+m);
},1000)*/
</script>
简单计算器的实例
<script>
//事件处理函数
function doFun(num) {
var m1 = parseInt(document.myform.num1.value);
var m2 = parseInt(document.myform.num2.value);
switch (num) {
case 1:
var res = m1+"+"+m2+"="+(m1+m2);
break;
case 2:
var res = m1+"-"+m2+"="+(m1-m2);
break;
case 3:
var res = m1+"*"+m2+"="+(m1*m2);
break;
case 4:
var res = m1+"/"+m2+"="+(m1/m2);
break;
}
//将结果放置在第三个输入框中
document.myform.res.value = res;
}
</script>
简单操作元素标签
<body>
<h1>JavaScript语言实例--js操作元素标签属性(放大和缩小)</h1>
<button οnclick="dofun(1)">放大</button>
<button οnclick="dofun(2)">缩小</button>
<button οnclick="dofun(3)">隐藏</button>
<br><br/>
<div style="width: 200px;height: 200px;background-color: #ddd;" id="did"></div>
</body>
<script>
var width = 200,height = 200;
var did = document.getElementById("did");
function dofun(num) {
switch (num) {
case 1:
width+=10;
height+=10;
did.style.width = width+"px";
did.style.height = height+"px";
break;
case 2:
width-=10;
height-=10;
did.style.width = width+"px";
did.style.height = height+"px";
break;
case 3:
did.style.display = "none";
break;
}
}
</script>
事件绑定方式
事件源：网页可见的标签
事件：如onclick就是一个单击事件
事件处理程序:写在Js内的事件的响应程序
<body>
<h1>JavaScript语言实例--事件处理（事件绑定方式）</h1>
<button οnclick="fun()">按钮1</button><!--主动绑定-->
<button id="bid">按钮2</button> <!--被动绑定，通过id来绑定-->
</body>
<script>
function fun() {
console.log("按钮1被点击了");
}
document.getElementById("bid").onclick = function () {
console.log("按钮2被点击了");
}
</script>
获取事件源对象
<body>
<h1>JavaScript语言实例--获取事件源对象</h1>
<h2 οnclick="fun(this)">2级标题1</h2>
<h2 id="hid">2级标题2</h2>
</body>
<script>
function fun(ob) {
console.log("aaaaaaa");
ob.style.color="green";
}
document.getElementById("hid").onclick = function () {
console.log("bbbbbbbb");
//此种事件绑定方式，this就表示当前事件源对象
this.style.color="red";
}
</script>
dbclick双击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul,li{margin: 0px;padding: 0px;}
ul{list-style:none;}
ul li{height: 30px;margin-top: 4px;background-color: #ddd;}
ul li:hover{background-color: #fc0;}
</style>
</head>
<body>
<h1>JavaScript语言实例--dblcilck双击事件</h1>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
//获取上面所有的li元素节点
var mlist = document.getElementsByTagName("li");
//遍历绑定事件
for (var i=0;i<mlist.length;i++){
mlist[i].ondblclick = function () {
//设置背景颜色
this.style.backgroundColor = "#f0c";
};
}
</script>
</html>
context鼠标右击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript语言实例</title>
</head>
<style>
ul,li{margin: 0px;padding: 0px;}
ul{list-style:none;width: 100px;text-align: center;position: absolute;display: none}
ul li{height: 30px;line-height:30px;margin-top: 4px;background-color: #ddd;}
ul li:hover{background-color: #fc0;}
</style>
<body>
<h1>JavaScript语言实例--contextmenu右击事件</h1>
<ul id="uid">
<li>剪切</li>
<li>复制</li>
<li>粘贴</li>
</ul>
</body>
<script>
document.oncontextmenu = function (ent) {
//获取兼容的事件对象
var event = ent || window.Event;//window.Event:兼容低版本的浏览器
//获取鼠标在网页中的点击位置
var x = event.clientX;
var y = event.clientY;
console.log(x,y);
var uid = document.getElementById("uid");
uid.style.top = y+"px";
uid.style.left = x+"px";
uid.style.display = "block";
return false;//拦截平时鼠标右击能够显示的菜单
}
</script>
</html>
mouse鼠标移入移出事件——onmouseover和onmouseout
优酷首页图片轮播实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript语言实例</title>
</head>
<style>
div,img,ul,li{margin: 0px;padding: 0px;}
#did{width: 384px;height: 240px;}
#did img{display: none}
#did img:first-child{display:block} /*显示第一张*/
</style>
<body>
<h1>JavaScript语言实例--mouse鼠标移入和移出事件</h1>
<div id="did" οnmοuseοver="doStop()" οnmοuseοut="doStart()">
<img src="./images/11.jpg" width="384"/>
<img src="./images/22.jpg" width="384"/>
<img src="./images/33.jpg" width="384"/>
<img src="./images/44.jpg" width="384"/>
</div>
</body>
<script>
var m=1;
var mytime = null;
//定义函数展示对应的图片
function show(x) {
var mlist = document.getElementById("did").getElementsByTagName("img");
for (var i=0;i<mlist.length;i++){
if (x==i+1){
mlist[i].style.display = "block";
}else {
mlist[i].style.display = "none";
}
}
}
//开启定时轮播图片
function doStart() {
if (mytime == null) {
mytime = setInterval(function () {
m++;
show(m);
if (m >= 4) {
m = 0;
}
}, 2000)
}
}
//停止轮播图片
function doStop() {
if (mytime != null)
clearTimeout(mytime);
mytime=null;
}
doStart();
</script>
</html>
图片切换
淘宝京东某商品详情页的图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript语言实例</title>
<style>
div,img,ul,li{margin: 0px;padding: 0px;}
#did{width: 384px;height: 240px;}
#list img{width: 85px;border: 2px solid #fff;margin-right: 2px;}
#list img:hover{border:2px solid red}
</style>
</head>
<body>
<h1>JavaScript语言实例--onmouseovaer鼠标移入事件</h1>
<div id="did">
<img id="mid" src="./images/11.jpg" width="384"/>
</div>
<div id="list">
<img src="./images/11.jpg" width="384"/>
<img src="./images/22.jpg" width="384"/>
<img src="./images/33.jpg" width="384"/>
<img src="./images/44.jpg" width="384"/>
</div>
</body>
<script>
//获取所有小图列表
var mlist = document.getElementById("list").getElementsByTagName("img");
//遍历这些图片
for (var i=0;i<mlist.length;i++){
mlist[i].onmouseover = function () {
document.getElementById("mid").src =this.src;
}
}
</script>
</html>
放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript语言实例</title>
<style>
div,img,ul,li{margin: 0px;padding: 0px;}
#did{width: 300px;height: 300px;overflow: hidden;display: none;position: absolute;}
</style>
</head>
<body>
<h1>JavaScript语言实例--图片的放大镜效果</h1>
<br/><br/><br/>
<img id="mid" src="./images/33.jpg" width="384" height="240"/>
<div id="did">
<img src="./images/33.jpg"/>
</div>
</body>
<script>
//获取被放大图片和放大镜图片对象
var mid = document.getElementById("mid"); //被放大图片
var did = document.getElementById("did"); //放大镜图片
//为图片添加鼠标移入和移出事件
mid.onmouseover = function () {
//对放大镜进行定位
did.style.top = this.offsetTop+"px"; //offsetTop:获取当前对象距离上面多大的尺寸 //相当于上对齐
did.style.left = this.offsetLeft+this.offsetWidth+10+"px"; //offsetWidth:本身宽度
did.style.display="block";
}
mid.onmouseout = function () {
did.style.display="none";
}
//添加鼠标移动事件
mid.onmousemove = function (ent) {
//先获取兼容的鼠标事件对象
var event = ent || window.Event;
//获取鼠标在图片上的位置
var x = event.clientX - this.offsetLeft;
var y = event.clientY - this.offsetTop;
//定位放大镜位置
did.scrollTop = y*5 -150;
did.scrollLeft = x*5 -150;
}
</script>
</html>
拖动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript语言实例</title>
<style>
div{margin: 0px;padding: 0px;}
#did{width: 200px;height: 200px;background-color: #ddd;cursor: move;position: absolute}
</style>
</head>
<body>
<h1>JavaScript语言实例--拖动效果</h1>
<div id="did"></div>
</body>
<script>
//获取div层对象
var did = document.getElementById("did");
//绑定鼠标按下事件
did.onmousedown = function (ent) {
//获取兼容的事件对象
var event = ent || window.Event;
//获取鼠标在div层上的位置
var x = event.clientX - this.offsetLeft;
var y = event.clientY - this.offsetTop;
this.style.backgroundColor = "blue";
//绑定鼠标移动事件
/*如果用did来绑定鼠标事件的话,当鼠标速度过快时移动的图片会丢失*/
document.onmousemove = function (e) {
var myevent = e || window.Event;
//定位
did.style.top = myevent.clientY-y +"px";
did.style.left = myevent.clientX-x +"px";
}
}
//绑定鼠标松开事件
did.onmouseup = function () {
this.style.backgroundColor = "#ddd";
//取消移动事件
document.onmousemove = null;
}
</script>
</html>
keydown键盘事件
<script>
document.onkeydown = function (ent) {
//获取兼容的事件对象
var event = ent||window.Event;
//输出键盘值
console.log(event.keyCode);
}
</script>
load事件
作用:当页面加载完了才执行JS程序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript语言实例</title>
<script>
//当页面加载完成后才自动执行的程序
window.onload = function () {
var hid = document.getElementById("hid");
hid.style.color = "red";
}
</script>
</head>
<body>
<h1 id="hid">JavaScript语言实例--onload事件</h1>
</body>
</html>
表单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--表单事件</h1>
<!--οnsubmit="return false"表示不跳转页面-->
<form action="mouse.html" name="myform" method="post" οnsubmit="return doSubmit()">
<!--οnblur="checkUname()":当鼠标离开名字输入框时就验证输入是否正确-->
帐号:<input type="text" name="uname" οnblur="checkUname()"/><br/><br/>
密码:<input type="password" name="upass" οnblur="checkUpass()"/><br/><br/>
邮箱:<input type="text" name="email"/><br/><br/>
<input type="submit" name="提交"/>
</form>
</body>
<script>
//表单提交事件处理程序
function doSubmit() {
return checkUname()&&checkUpass();
}
//验证帐号
function checkUname() {
var name = document.myform.uname.value;
if (name.length<=0){
alert("帐号不可以为空")
return false
}
return true;
}
//验证密码
function checkUpass() {
var password = document.myform.upass.value;
if (password.length<6){
alert("密码必须大于等于6位")
return false
}
return true;
}
</script>
</html>
change事件
功能：下拉框操作
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--change事件</h1>
<select name="sid" id="sid">
<option value="">-请选择-</option>
<option value="1">-北京-</option>
<option value="2">-河北-</option>
<option value="3">-天津-</option>
<option value="4">-河南-</option>
<option value="5">-山西-</option>
</select>
<select id="cid"></select>
</body>
<script>
var data = new Array();
data[1] = ["海淀区","朝阳区","丰台区","昌平区"];
data[2] = ["石家庄","保定","邯郸","邢台"];
data[3] = ["河东区","河西区","河北区","南开区"];
data[4] = ["郑州区","洛阳区","开封","驻马店"];
data[5] = ["太原","大同","吕梁","运城"];
//获取两个下拉框元素对象
var sid = document.getElementById("sid");
var cid = document.getElementById("cid");
//绑定change事件
sid.onchange = function () {
//获取下拉框中的值
var v = this.value;
cid.length = 0; //删除cid的下拉项
//判断并循环对应城市信息
if (v != ""){
for (var i=0;i<data[v].length;i++){
//创建一个下拉项并添加到cid下拉框中
cid.add(new Option(data[v][i],i));
}
}
}
</script>
</html>
scroll事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--滚动条事件</h1>
<div id="aid" style="height: 500px;width: 700px;background-color: #ddd"></div>
<div id="bid" style="height: 500px;width: 700px;background-color: #eee"></div>
</body>
<script>
window.onscroll = function () {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop){
scrollTop = document.documentElement.scrollTop;
}else if (document.body){
scrollTop = document.body.scrollTop;
}
document.getElementById("bid").innerHTML = scrollTop;
}
</script>
</html>
JavaScript BOM操作
BOM（浏览器对象模型Browser Object Model(BOM)）
作用：允许JS与浏览器对话，比如一些前进后退的操作。
BOM的window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript语言实例</title>
</head>
<body>
<h1>JavaScript中的BOM--window</h1>
<iframe src="../Event/mouse.html" width="500" height="500"></iframe>
<button οnclick="window.open('../Event/mouse.html','aa',width=200,height=200);">打开一个新窗口</button>
</body>
<script>
document.write(window.frames.length);
window.alert("ok");
b = window.confirm("确定要删除吗?")
if(b){
alert("yes");
}else {
alert("no");
}
var mstr = window.prompt("请输入你的邮箱？") //prompt:代表输入框
alert(mstr);
</script>
</html>
BOM的navigator
<script>
with(document){
write("你的浏览器信息：<ul>");
write("<li>代码："+navigator.appCodeName+"</li>");
write("<li>名称："+navigator.appName+"</li>");
write("<li>版本："+navigator.appVersion+"</li>");
write("<li>语言："+navigator.language+"</li>");
write("<li>编译平台："+navigator.platform+"</li>");
write("<li>用户表头："+navigator.userAgent+"</li>");
}
</script>
BOM的Screen
<script>
document.write("屏幕宽度："+screen.width+"px<br>");
document.write("屏幕高度："+screen.width+"px<br>");
document.write("屏幕可用宽度："+screen.availWidth+"px<br>");
document.write("屏幕可以高度："+screen.availHeight+"px<br>");
document.write("宽度："+window.innerWidth+"px<br>");
document.write("高度："+window.innerHeight+"px<br>");
</script>
BOM的history
<h1>JavaScript中的BOM--history对象</h1> <button οnclick="window.history.back();">后退一步</button> <button οnclick="window.history.go(-1);">后退一步</button> <button οnclick="window.history.go(-2);">后退二步</button><br> <button οnclick="window.history.forward();">前进一步</button> <button οnclick="window.history.go(1);">前进一步</button> <button οnclick="window.history.go(2);">前进尾部</button><br> <a href="http://www.baidu.com">百度</a><br>
BOM的location
<body>
<h1>JavaScript中的BOM--location对象</h1>
<button οnclick="window.location.href='http://baidu.com'">点击跳转到百度</button>
<button οnclick="window.location.reload()">刷新</button>
<script>
document.write("<br>当前地址："+window.location.href);
</script>
JavaScript DOM操作
当页面被加载时，浏览器会创建页面的文档对象模型DOM(Document Object Model)
通过HYML DOM，JS能够访问和改变HTML文档的所有元素
HTML DOM模型被结构化为对象数：
对象的HTML DOM树
什么是HTML DOM
DOM 节点
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
-
整个文档是一个文档节点
-
每个 HTML 元素是元素节点
-
HTML 元素内的文本是文本节点
-
每个 HTML 属性是属性节点
-
注释是注释节点
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
-
在节点树中，顶端节点被称为根（root）
-
每个节点都有父节点、除了根（它没有父节点）
-
一个节点可拥有任意数量的子
-
同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
节点类型
获取节点实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript中的DOM</title>
</head>
<body>
<h1>JavaScript语言中HTML DOM</h1>
<h3>我们重点学习HTML DOM的什么操作</h3>
<ul>
<li class="cc">JS 能改变页面中的所有 HTML 元素</li>
<li>JS 能改变页面中的所有 HTML 属性</li>
<li>JS 能改变页面中的所有 CSS 样式</li>
<li class="cc">JS 能删除已有的 HTML 元素和属性</li>
<li>JS 能添加新的 HTML 元素和属性</li>
<li>JS 能对页面中所有已有的 HTML 事件作出反应</li>
<li>JS 能在页面中创建新的 HTML 事件</li>
</ul>
<h3>我们重点学习HTML DOM的什么操作:</h3>
<ul>
<li>如何改变 HTML 元素的内容</li>
<li>如何改变 HTML 元素的样式(CSS)</li>
<li>如何对 HTML DOM 事件作出反应</li>
<li>如何添加和删除 HTML 元素</li>
</ul>
<h3>W3C DOM 标准被分为3个不同的部分</h3>
<ol id="oid">
<li>Core DOM - 所有文档类型的标准模型</li>
<li>XML DOM - XML文档类型的标准模型</li>
<li>HTML DOM - HTML文档类型的标准模型</li>
</ol>
<a id="aid" href="http://www.baidu.com" title="百度链接"></a>
</body>
<script>
var aa = document.getElementById("aid");
console.log(aa);
console.log(aa.href);
console.log(aa.title);
aa.title = "百度22";//修改属性
var h1 = document.getElementsByTagName("h1");
console.log(h1[0]);
h1[0].style.color = "red";
var clist = document.getElementsByClassName("cc");
for (var i=0;i<clist.length; i++){
console.log(clist[i]);
}
var ol = document.getElementById("oid");
var olist = ol.childNodes;
console.log(olist.length);
for (var i=0;i<olist.length;i++){
console.log(olist[i]);
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript中的DOM</title>
</head>
<body>
<h1>JavaScript语言中HTML DOM</h1>
<h3 id="hid">我们重点学习HTML DOM的什么操作</h3>
<ul id="uid">
<li>如何改变 HTML 元素的内容</li>
<li>如何改变 HTML 元素的样式(CSS)</li>
<li>如何对 HTML DOM 事件作出反应</li>
<li>如何添加和删除 HTML 元素</li>
</ul>
</body>
<script>
//获取h3元素节点对象
var hid = document.getElementById("hid");
//输出当前节点的名字，值和类型
console.log(hid.nodeName); //H3
console.log(hid.nodeValue); //null
console.log(hid.nodeType); //1
//获取当前节点对象的第一个子节点的值和类型
console.log(hid.childNodes[0].nodeValue); //就是内容
console.log(hid.childNodes[0].nodeType); //3
</script>
</html>
DOM之a链操作
<body>
<h1>JavaScript语言中 DOM 操作</h1>
<ul>
<li><a href="https://www.baidu.com">百度</a> </li>
<li><a href="https://www.163.com">网易</a> </li>
<li><a href="https://www.sina.com">新浪</a> </li>
<li><a href="https://www.qq.com">腾讯</a> </li>
</ul>
</body>
<script>
//获取当前页面中的所有链接
//var alist = document.getElementsByTagName("a");
var alist = document.links;
for (var i=0;i<alist.length;i++) {
console.log(alist[i].href,alist[i].innerHTML);
alist[i].title = alist[i].innerHTML+"的链接";
}
</script>
DOM之img图片操作
<body>
<h1>JavaScript语言中HTML DOM 操作--图片延迟加载</h1>
<img src="./images/HLL-11_xuandong.gif" res="./images/11.jpg"/>
<img src="./images/HLL-11_xuandong.gif" res="./images/22.jpg"/>
<img src="./images/HLL-11_xuandong.gif" res="./images/33.jpg"/>
<img src="./images/HLL-11_xuandong.gif" res="./images/44.jpg"/>
</body>
<script>
setTimeout(function () {
//获取网页中所有的图片
var mlist = document.images;
//遍历
for(var i=0;i<mlist.length;i++){
//res不是img本身固有的属性，而是我们自己创造的属性名字,只能通过getAttribute()的方式进行获取
mlist[i].src = mlist[i].getAttribute("res");
mlist[i].width=100;
}
},3000);
</script>
DOM之form表单操作
<body>
<h1>JavaScript语言中HTML DOM 操作</h1>
<form></form>
<form action="img.html" method="post" name="myform">
账号：<input type="text" name="uname" value="wangwu7"/><br/>
</form>
<button οnclick="doSubmit()">点击提交</button>
</body>
<script>
console.log(document.forms.length);
//获取上面form表单中账号信息
console.log(document.forms[1].uname.value);
console.log(document.forms.item(1).uname.value);
console.log(document.myform.uname.value);
console.log(document['myform'].uname.value);
console.log(document.forms.myform.uname.value);
console.log(document.forms['myform'].uname.value);
function doSubmit() {
document.myform.action = "introduction.html";
document.myform.method = "get"; //get：使输入的参数在网页地址栏可见
document.myform.submit(); //获取form表单并执行提交
}
</script>
DOM之input多选框操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript中的DOM</title>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作</h1>
<ul>
<li><input type="checkbox" name="likes[]" value="篮球">篮球</li>
<li><input type="checkbox" name="likes[]" value="足球">足球</li>
<li><input type="checkbox" name="likes[]" value="羽毛球">羽毛球</li>
<li><input type="checkbox" name="likes[]" value="乒乓球">乒乓球</li>
<li><input type="checkbox" name="likes[]" value="棒球">棒球</li>
</ul>
<button οnclick="dofun()">获取</button>
</body>
<script>
function dofun() {
//获取网页中所有input标签
var list = document.getElementsByTagName("input");
var res = new Array();
//遍历
for (var i=0;i<list.length;i++){
//判断是否是多选框并且已选中
if(list[i].type == "checkbox" && list[i].checked){
res.push(list[i].value);
}
}
alert(res);
}
</script>
</html>
DOM之select多选下拉框操作
功能：下拉框选项的移入移出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript中的DOM</title>
<style>
select{width: 100px;height: 200px;border: 1px solid #ddd;float: left;}
div{width: 100px;height: 200px;float: left;text-align: center;padding-top: 50px;}
</style>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作</h1>
<select id="sid1" size="10" multiple>
<option value="0">邓丽君</option>
<option value="1">张国荣</option>
<option value="2">梅艳芳</option>
<option value="3">黄家驹</option>
<option value="4">迈克尔.杰克逊</option>
<option value="5">姚贝娜</option>
<option value="6">张雨生</option>
</select>
<div>
<button οnclick="doMove('sid1','sid2')">>></button>
<br><br><br><br>
<button οnclick="doMove('sid2','sid1')"><<</button>
</div>
<select id="sid2" size="10" multiple></select>
</body>
<script>
function doMove(d1,d2) {
//分别获取两个下拉框的元素节点对象
var select1 = document.getElementById(d1);
var select2 = document.getElementById(d2);
//获取第一个下拉框中所有的下拉项
var olist = select1.options;
//遍历
for (var i=0;i<olist.length;i++){
//console.log(olist[i].value);
//判断当前新是否被选中
if (olist[i].selected){
olist[i].selected = false;//取消选中
var ob = olist[i];
select1.remove(i);//从选项框中移除第i个下拉项内容
select2.add(ob);//往选项框中添加下拉项内容
i--;
}
}
}
</script>
</html>
DOM之table表格操作
功能：表格的增删
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
<style>
select,option,div,button{margin:0px;padding:0px;}
#lid,#rid,div{
width:80px;
height:260px;
float:left;
}
div{
text-align:center;
padding-top:60px;
}
</style>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作-table对象</h1>
<table id="tid" width="500" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td><button οnclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>女</td>
<td>21</td>
<td><button οnclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>男</td>
<td>22</td>
<td><button οnclick="dodel(this)">删除</button></td>
</tr>
</tbody>
</table>
<br/><br/><br/>
<h2>添加学生信息</h2>
<form action="#" name="myform" οnsubmit="return doAdd()">
学号：<input type="text" name="sno"/><br/><br/>
姓名：<input type="text" name="name"/><br/><br/>
性别：<input type="text" name="sex"/><br/><br/>
年龄：<input type="text" name="age"/><br/><br/>
<input type="submit" value="添加"/>
</form>
</body>
<script>
//执行数据删除操作
function dodel(bt) {
//获取当前表格元素节点对象
var tab = document.getElementById("tid");
tab.deleteRow(bt.parentNode.parentNode.rowIndex);
}
function doAdd() {
//获取输入框的内容
var sno = document.myform.sno.value;
var name = document.myform.name.value;
var sex = document.myform.sex.value;
var age = document.myform.age.value;
//获取当前表格对象并申请添加一行
var row = document.getElementById("tid").insertRow();
//为当前行添加一个个字段信息
row.insertCell(0).innerHTML = sno;
row.insertCell(1).innerHTML = name;
row.insertCell(2).innerHTML = sex;
row.insertCell(3).innerHTML = age;
row.insertCell(4).innerHTML = '<button οnclick="dodel(this)">删除</button>';
//情况form表单
document.myform.reset();
return false;//不让表单跳转
}
</script>
</html>
XML DOM
什么是XML DOM
XML DOM 定义了访问和处理 XML 文档的标准方法。
XML DOM 是 XML Document Object Model 的缩写，即 XML 文档对象模型。
XML DOM 是：
-
用于 XML 的标准对象模型
-
用于 XML 的标准编程接口
-
中立于平台和语言
-
W3C 的标准
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。
nodeName 属性
nodeName 属性规定节点的名称。
-
nodeName 是只读的
-
元素节点的 nodeName 与标签名相同
-
属性节点的 nodeName 是属性的名称
-
文本节点的 nodeName 永远是 #text
-
文档节点的 nodeName 永远是 #document
nodeValue 属性
nodeValue 属性规定节点的值。
-
元素节点的 nodeValue 是 undefined
-
文本节点的 nodeValue 是文本自身
-
属性节点的 nodeValue 是属性的值
XML DOM节点的遍历
<body>
<h1>XML DOM:节点的遍历</h1>
<ul id="uid">
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
</ul>
</body>
<script>
//获取ul中的所以li节点
var list = document.getElementById("uid").getElementsByTagName("li");
console.log("节点数量:",list.length);
//通过子节点获取
var list2 = document.getElementById("uid").childNodes;
console.log("节点数量：",list2.length);
//节点的遍历
for(var i=0;i<list2.length;i++){
//判断是否为元素节点
if (list2[i].nodeType == 1) {
//console.log(list2[i].innerHTML);//HTML DOM获取内容
console.log(list2[i].firstChild.nodeValue);//XML DOM获取内容
}
}
</script>
XML DOM节点的删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
ul{list-style:none;}
ul li{line-height:30px;background-color:#ddd;margin-top:2px;}
ul li:hover{background-color:#fc0;}
ul li.cc{background-color:#f0c;}
</style>
</head>
<body>
<h1>XML-DOM：节点的删除</h1>
<ul id="uid">
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
</ul>
<button οnclick="doDel()">删除</button>
</body>
<script>
//获取所有ul中的li节点并绑定点击事件
var list = document.getElementsByTagName("li");
for (var i=0;i<list.length;i++){
list[i].onclick = function () {
this.setAttribute("class","cc") //鼠标点击了之后就会更改属性
}
}
//执行节点删除函数
function doDel() {
var list2 = document.getElementsByTagName("li");
//遍历
for (var i=0;i<list2.length;i++){
//判断当前li是否有class属性值为cc的
if(list2[i].getAttribute("class")=="cc"){
//执行删除
list2[i].parentNode.removeChild(list2[i]);
i--;
}
}
}
</script>
</html>
XML DOM节点属性操作
<body>
<h1>XML-DOM:改变节点的属性 </h1>
<a id="aid" href="http://www.baidu.com">百度</a>
</body>
<script>
//获取上面超链接a元素节点
var a = document.getElementById("aid");
//通过已知的HTML DOM操作a节点属性
console.log(a.href);
a.title = "百度网址";
// a.aa="bb";//添加aa属性值为bb 无效的操作
//使用XML DOM操作节点a的属性
console.log(a.getAttribute("href"));
a.setAttribute("aa","bb"); //通过XML DOM可以添加任何属性和值
</script>
XML DOM节点的创建
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
ul{list-style:none;}
ul li{line-height:30px;background-color:#ddd;margin-top:2px;width:100px;}
</style>
</head>
<body>
<h1>XML-DOM：节点的创建</h1>
<ul id="uid">
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
</ul>
名称：<input id="nid" type="text" size="10" name="name"/>
<button οnclick="doAdd()">添加</button>
</body>
<script>
function doAdd() {
//获取输入框中的信息
var name = document.getElementById("nid").value;
//获取ul元素节点对象
var ul = document.getElementById("uid");
//创建一个文本节点
var tt = document.createTextNode(name);
//创建一个元素节点
var li = document.createElement("li"); //相当于创建了一个<li><li>
//将文本节点添加到li元素节点中
li.appendChild(tt);
//将li节点添加到ul中
//ul.appendChild(li); //后追加
ul.insertBefore(li,ul.firstChild);//前插入
}
</script>
</html>
XML DOM节点的克隆
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
#did{width:400px;height:300px;border:1px solid blue;}
img{width:80px;border:2px solid #fff;margin:2px;}
img:hover{border:2px solid red;}
</style>
</head>
<body>
<h1>XML-DOM：节点的克隆</h1>
<div id="did"></div>
<div id="mid">
<img src="./images/11.jpg"/>
<img src="./images/22.jpg"/>
<img src="./images/33.jpg"/>
<img src="./images/44.jpg"/>
</div>
<h4>双击图片可实现图片的添加</h4>
</body>
<script>
//获取mid中的所有图片节点
var list = document.getElementById("mid").getElementsByTagName("img");
//遍历添加鼠标双击事件
for (var i =0;i<list.length;i++){
list[i].ondblclick = function () {
//获取did节点
var did = document.getElementById("did");
//将当前图片节点克隆一份添加到did元素节点中
did.appendChild(this.cloneNode());
}
}
</script>
</html>
XML DOM节点的替换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
#did{width:400px;border:1px solid blue;}
#did img{width:400px;}
#mid img{width:80px;border:2px solid #fff;margin:2px;}
#mid img:hover{border:2px solid red;}
</style>
</head>
<body>
<h1>XML-DOM：节点的替换</h1>
<div id="did"><img src="./images/11.jpg"/></div>
<div id="mid">
<img src="./images/11.jpg"/>
<img src="./images/22.jpg"/>
<img src="./images/33.jpg"/>
<img src="./images/44.jpg"/>
</div>
<h4>双击图片可实现图片的替换</h4>
</body>
<script>
//获取id属性值为did的节点对象
var did = document.getElementById("did");
//获取id属性值为mid节点中的所有图片img元素节点
var list = document.getElementById("mid").getElementsByTagName("img");
//遍历图片节点，并绑定鼠标双击事件
for (var i=0;i<list.length;i++){
list[i].ondblclick = function () {
did.replaceChild(this.cloneNode(),did.firstChild); //子节点替换
}
}
</script>
</html>
XML DOM操作select选项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
select{width:100px;height:200px;border:1px solid #ddd;float:left;}
div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
</style>
</head>
<body>
<h1>XML DOM 操作-select对象</h1>
<select id="sid1" size="10" multiple>
<option value="0">邓丽君</option>
<option value="1">张国荣</option>
<option value="2">梅艳芳</option>
<option value="3">黄家驹</option>
<option value="4">迈克尔.杰克逊</option>
<option value="5">姚贝娜</option>
<option value="6">张雨生</option>
</select>
<div>
<button οnclick="doMove('sid1','sid2')">>></button>
<br/><br/><br/><br/>
<button οnclick="doMove('sid2','sid1')"><<</button>
</div>
<select id="sid2" size="10" multiple></select>
</body>
<script>
function doMove(d1,d2) {
//获取对应的下拉框节点对象
var selece1 = document.getElementById(d1);
var selece2 = document.getElementById(d2);
//获取第一个下拉框中的所有option下拉项节点对象
var list = selece1.getElementsByTagName("option");
//遍历并判断是否选中
for (var i=0;i<list.length;i++){
if (list[i].selected){
list[i].selected = false;
selece2.appendChild(list[i]);//使用XML DOM移动下拉项
i--;
}
}
}
</script>
</html>