1、history属性
<body>
<h1>第一个界面</h1>
<a href="js02history.html">当前页面</a>
<a href="js03history.html">下一个页面</a>
<a href="javascript:history.forward()">forward()前进一个界面</a>
<a href="javascript:history.go(1)">go(1)前进一个界面</a>
</body>
<body>
<h1>第二个界面</h1>
<a href="javascript:history.back()">back()后退一个界面</a>
<a href="javascript:history.go(-1)">go(-1)后退一个界面</a>
</body>
<h1>第一个界面</h1>
<a href="js02history.html">当前页面</a>
<a href="js03history.html">下一个页面</a>
<a href="javascript:history.forward()">forward()前进一个界面</a>
<a href="javascript:history.go(1)">go(1)前进一个界面</a>
</body>
<body>
<h1>第二个界面</h1>
<a href="javascript:history.back()">back()后退一个界面</a>
<a href="javascript:history.go(-1)">go(-1)后退一个界面</a>
</body>
2、location属性
<script type="text/javascript">
document.write("host值为："+location.host+"<br/>")
document.write("hostname值为："+location.hostname+"<br/>")
document.write("href值为："+location.href+"<br/>")
document.write("hash值为："+location.hash+"<br/>")
document.write("search值为："+location.search+"<br/>")
</script>
</head>
<body>
<input type="text">
<input type="button" value="刷新当前页面" onclick="location.reload()">
<input type="button" value="替换当前页面" onclick="location.replace('http://www.bdqn.cn')">
</body>
document.write("host值为："+location.host+"<br/>")
document.write("hostname值为："+location.hostname+"<br/>")
document.write("href值为："+location.href+"<br/>")
document.write("hash值为："+location.hash+"<br/>")
document.write("search值为："+location.search+"<br/>")
</script>
</head>
<body>
<input type="text">
<input type="button" value="刷新当前页面" onclick="location.reload()">
<input type="button" value="替换当前页面" onclick="location.replace('http://www.bdqn.cn')">
</body>
3、document属性
<style type="text/css">
body{font-size:14px;
line-height:30px;
}
input{margin:1px;
90px;
font-size:12px;
padding:0;
}
#node{
100px;
font-size:24px;
font-weight:bold;
float: left;
}
</style>
<script type="text/javascript">
/*改变层内容*/
function changeLink(){
document.getElementById("node").innerHTML="<h1>改变</h1>";
//document.getElementById("node").innerText="<h1>改变</h1>";
}
/*获取所有input标签中所有的value*/
function all_input(){
var allInput= document.getElementsByTagName("input");
/*声明变量 接收所有input标签中所有的value*/
var str="";
for(var i=0;i<allInput.length;i++){
str+=allInput[i].value+"<br/>";
}
/*把str获取的值 给 p标签*/
document.getElementById("s").innerHTML=str;
}
/*获取所有name属性值是season的value*/
function s_input(){
var season= document.getElementsByName("season");
/*声明变量 接收所有input标签中所有的value*/
var str="";
for(var i=0;i<season.length;i++){
str+=season[i].value+"<br/>";
}
/*把str获取的值 给 p标签*/
document.getElementById("s").innerHTML=str;
}
</script>
</head>
<body>
<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br />
<br /><input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" />
<input name="b3" type="button" value="显示season内容" onclick="s_input()" />
<p id="s"></p>
</body>
body{font-size:14px;
line-height:30px;
}
input{margin:1px;
90px;
font-size:12px;
padding:0;
}
#node{
100px;
font-size:24px;
font-weight:bold;
float: left;
}
</style>
<script type="text/javascript">
/*改变层内容*/
function changeLink(){
document.getElementById("node").innerHTML="<h1>改变</h1>";
//document.getElementById("node").innerText="<h1>改变</h1>";
}
/*获取所有input标签中所有的value*/
function all_input(){
var allInput= document.getElementsByTagName("input");
/*声明变量 接收所有input标签中所有的value*/
var str="";
for(var i=0;i<allInput.length;i++){
str+=allInput[i].value+"<br/>";
}
/*把str获取的值 给 p标签*/
document.getElementById("s").innerHTML=str;
}
/*获取所有name属性值是season的value*/
function s_input(){
var season= document.getElementsByName("season");
/*声明变量 接收所有input标签中所有的value*/
var str="";
for(var i=0;i<season.length;i++){
str+=season[i].value+"<br/>";
}
/*把str获取的值 给 p标签*/
document.getElementById("s").innerHTML=str;
}
</script>
</head>
<body>
<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br />
<br /><input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" />
<input name="b3" type="button" value="显示season内容" onclick="s_input()" />
<p id="s"></p>
</body>
4、open
<script type="text/javascript">
function openNew(){
window.open(
"http://www.baidu.com",
"百度页面",
"height=400,width=400"
);
}
</script>
</head>
<body>
<input type="button" value="打开新的窗口" onclick="openNew()">
</body>
function openNew(){
window.open(
"http://www.baidu.com",
"百度页面",
"height=400,width=400"
);
}
</script>
</head>
<body>
<input type="button" value="打开新的窗口" onclick="openNew()">
</body>
5、定时函数
<script type="text/javascript">
var time=0;
function count(){ //计数的方法
document.getElementById("context").innerHTML="时间："+(++time);
var time=0;
function count(){ //计数的方法
document.getElementById("context").innerHTML="时间："+(++time);
}
var interval,timeout;
//定时函数
function setI(){ //setInterval函数 周期执行
interval=setInterval("count()",1000);
}
function setT(){ //setTimeout函数 执行一次
timeout= setTimeout("count()",1000);
}
//清除定时函数
function clearI(){//清除setInterval函数
clearInterval(interval);
}
function clearT(){//清除setTimeout函数
clearTimeout(timeout);
}
var interval,timeout;
//定时函数
function setI(){ //setInterval函数 周期执行
interval=setInterval("count()",1000);
}
function setT(){ //setTimeout函数 执行一次
timeout= setTimeout("count()",1000);
}
//清除定时函数
function clearI(){//清除setInterval函数
clearInterval(interval);
}
function clearT(){//清除setTimeout函数
clearTimeout(timeout);
}
</script>
</head>
<body>
<div id="context"></div>
<input type="button" value="setInterval函数" onclick="setI()">
<input type="button" value="setTimeout函数" onclick="setT()"><br/>
<input type="button" value="清除setInterval函数" onclick="clearI()">
<input type="button" value="清除setTimeout函数" onclick="clearT()">
</body>
</head>
<body>
<div id="context"></div>
<input type="button" value="setInterval函数" onclick="setI()">
<input type="button" value="setTimeout函数" onclick="setT()"><br/>
<input type="button" value="清除setInterval函数" onclick="clearI()">
<input type="button" value="清除setTimeout函数" onclick="clearT()">
</body>
6、访问节点
<script type="text/javascript">
/*
* nodeName:
* 元素节点显示的是标签名称
* 属性节点显示的是属性名称
* 文本节点显示的是 #text
* 文档节点显示的是#document
* nodeValue;
* 文本节点显示的是文本
* 属性节点显示的是属性值
*
* nodeType:
* 1 元素节点
* 2 属性节点
* 3 文本节点
* 8 注释
* 9 文档
* */
window.onload=function(){
var ul= document.getElementsByTagName("ul")[0];
/* alert("节点名称："+ul.nodeName);
alert("节点类型："+ul.nodeType);*/
/*获取ul中的第一个li*/
var li=ul.firstElementChild;
alert("节点名称："+li.nodeName);
alert("节点类型："+li.nodeType);
alert("节点内容："+li.childNodes[0].nodeValue);
/*
* nodeName:
* 元素节点显示的是标签名称
* 属性节点显示的是属性名称
* 文本节点显示的是 #text
* 文档节点显示的是#document
* nodeValue;
* 文本节点显示的是文本
* 属性节点显示的是属性值
*
* nodeType:
* 1 元素节点
* 2 属性节点
* 3 文本节点
* 8 注释
* 9 文档
* */
window.onload=function(){
var ul= document.getElementsByTagName("ul")[0];
/* alert("节点名称："+ul.nodeName);
alert("节点类型："+ul.nodeType);*/
/*获取ul中的第一个li*/
var li=ul.firstElementChild;
alert("节点名称："+li.nodeName);
alert("节点类型："+li.nodeType);
alert("节点内容："+li.childNodes[0].nodeValue);
/*改变小猫咪图片的宽度*/
var image=document.getElementsByName("cat")[0];
image.setAttribute("width","200px");
//获取src的值
alert(image.getAttribute("src"));
}
var image=document.getElementsByName("cat")[0];
image.setAttribute("width","200px");
//获取src的值
alert(image.getAttribute("src"));
}
</script>
</head>
<body>
<ul>
<li>小强1</li>
<li>小强2</li>
<li>小强3</li>
</ul>
</head>
<body>
<ul>
<li>小强1</li>
<li>小强2</li>
<li>小强3</li>
</ul>
<img src="images/cat.jpg" name="cat">
</body>
</body>
7、节点的增删改
<script type="text/javascript">
window.onload=function(){
var ul= document.getElementsByTagName("ul")[0];
/*新增节点*/
var newLi= document.createElement("li");
newLi.innerHTML="小黑";
ul.appendChild(newLi);
/*获取ul第三个li*/
var second= ul.getElementsByTagName("li")[2];
ul.insertBefore(newLi,second);
/*clone*/
var ul2= document.getElementsByTagName("ul")[0].cloneNode(true);
document.getElementById("d").appendChild(ul2);
/*删除节点*/
var reNode= ul.getElementsByTagName("li")[0];
// ul.removeChild(reNode);
/*替换节点*/
ul.replaceChild(newLi,reNode);
}
var ul= document.getElementsByTagName("ul")[0];
/*新增节点*/
var newLi= document.createElement("li");
newLi.innerHTML="小黑";
ul.appendChild(newLi);
/*获取ul第三个li*/
var second= ul.getElementsByTagName("li")[2];
ul.insertBefore(newLi,second);
/*clone*/
var ul2= document.getElementsByTagName("ul")[0].cloneNode(true);
document.getElementById("d").appendChild(ul2);
/*删除节点*/
var reNode= ul.getElementsByTagName("li")[0];
// ul.removeChild(reNode);
/*替换节点*/
ul.replaceChild(newLi,reNode);
}
</script>
</head>
<body>
<ul>
<li>小强1</li>
<li>小强2</li>
<li>小强3</li>
</ul>
<div id="d">
</div>
</body>
</head>
<body>
<ul>
<li>小强1</li>
<li>小强2</li>
<li>小强3</li>
</ul>
<div id="d">
</div>
</body>