javascript学习笔记4：tab浏览，获取对象的方法，location(页面定时跳转)、history、screen、navigator对象(弹出浏览器名称)

1.tab浏览

标签式浏览：oumouseover事件，

页面的代码

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#d1{border:1px solid red;width:500px;height:300px; }
 ul li{list-style:none;   float:left;  width:98px;  height:50px;  border:1px solid red;  text-align:center;
 line-height:50px; }   
ul{ height:50px;}
 #div1, #div2, #div3, #div4{display:none;}
 #div1{display:block;}
</style>
<script type="text/javascript">

function showDiv(n,lobj){
    for(var i=1;i<=4;i++){
    var obj1=document.getElementById("div"+i);
	var obj2=document.getElementById("li"+i);
    obj1.style.display="none";
    obj2.style.border="1px solid red";
}
  var obj=document.getElementById("div"+n);
  obj.style.display="block";
  lobj.style.borderBottom="white";

}
</script>
</head>
<body >
<div id ="d1">
  <ul>
  <li id="li1"onmouseover="showDiv(1,this)">国际新闻</li>
  <li id="li2"onmouseover="showDiv(2,this)">国内新闻</li>
  <li id="li3"onmouseover="showDiv(3,this)">体育新闻</li>
  <li id="li4"onmouseover="showDiv(4,this)">娱乐新闻</li>
  <li ></li>
  </ul>
  <div id="div1">国际新闻国际</br>新闻国际新闻</br>国际新闻国际</br>新闻国际新</br></br>闻国际新闻</div >
  <div id="div2">国内新闻</br>国内新闻</br>国内新闻</br>国内新闻</br>国内新闻</br>国内新闻</br></div >
  <div id="div3">体育新闻</br>体育新闻</br>体育新闻</br>体育新闻</br>体育新闻</br>体育新闻</br></div >
  <div id="div4">娱乐新闻</br>娱乐新闻</br>娱乐新闻</br>娱乐新闻</br>娱乐新闻</br>娱乐新闻</br></div > 
</div>
</body>
</html>

显示效果：

2.找对象的方法总结

根据id：document.getElementById("id名");

根据标签名：document.getElementsByTagName("标签名"); 返回值是一个标签对象数组

扩展：对象.getElementsByTagName("标签名")；

根据name： document.getElementsByName("name名"); 一般用在form标签上。返回值也是数组

根据className：document.getElementsByClassName("class名");返回值是数组【firefox】

document.images;获取image对象的数组

document.links;获取链接对象的数组

document.forms;获取表单对象的数组

document.body;获取body标签对象

document.documentElement;获取html标签对象

event：事件信息对象

this：当前对象

3.location对象

1. location.href；作用是设置或返回完整的 URL。可获取url信息，也可以赋值，实现页面跳转

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
</style>
<script type="text/javascript">
function fn(){
   // var n=location.href;
   //alert(n);
    location.href="http://www.baidu.com";
}
</script>
</head>
<body >
<input type="button" value="点击" onclick="fn()"/>
</body>
</html>

2. location.assign();加载新的文档（跳转页面），会产生历史记录

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">

</style>
<script type="text/javascript">

function fn(){
   // var n=location.href;
	//alert(n);
	//location.href="http://www.baidu.com";
	location.assign("http://www.ifeng.com");
}
</script>
</head>
<body >
<input type="button" value="点击" onclick="fn()"/>
</body>
</html>

3. location.reload();重新加载当前的文档，相当于刷新页面【F5】或者【CTRL】+【F5】，【crtl】+【shift】+【delete】

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
</style>
<script type="text/javascript">
function fn(){
   // var n=location.href;
	//alert(n);
	//location.href="http://www.baidu.com";
	//location.assign("http://www.ifeng.com");
	location.reload();
}
</script>
</head>
<body >
<input type="button" value="点击" onclick="fn()"/>
</body>
</html>

4. location.replace();用新的文档替换当前文档，相当于页面跳转。不会产生历史记录

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
</style>
<script type="text/javascript">

function fn(){
   // var n=location.href;
	//alert(n);
	//location.href="http://www.baidu.com";
	//location.assign("http://www.ifeng.com");
	//location.reload();
	location.replace("http://www.baidu.com");
}
</script>
</head>
<body >
<input type="button" value="点击" onclick="fn()"/>
</body>
</html>

5.案例

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
#d1{
  font-size:60px;
  color:blue;
}
</style>
<script type="text/javascript">
window.onload=init;
function init(){
    window.setTimeout("location.assign('http://www.baidu.com')",5000);
    window.setInterval("changeNumber()",1000);
}
function changeNumber(){
   var obj=document.getElementById("d1");
   var n=obj.innerHTML;
   obj.innerHTML=n-1;
}
</script>
</head>
<body >
登录成功，会在<span id="d1">5</span >秒后自动跳转到首页
</body>
</html>

4.history对象

1. history.length;返回浏览过的url对象

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
</style>
<script type="text/javascript">
function fn(){
   var n=history.length;
    alert(n);
}
</script>
</head>
<body >
<input type="button" value="点击" onclick="fn()"/>
</body>
</html>

2. history.back();返回历史记录的前一个页面

history.forward();加载历史记录中的下一个页面

history.go(n);跳转到历史记录中指定的页面，n可以是-1，-2，2.......

5.screen对象

screen.height;获取屏幕的高度，screen.availheight;获取除去任务栏的高度

screen.width;获取屏幕的宽度，screen.availwidth;获取除去任务栏的宽度

得到屏幕分辨率

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
</style>
<script type="text/javascript">
function fn(){
   var h=screen.height;
   var w=screen.width;
    alert(h+"::"+w);
}
</script>
</head>
<body >
<input type="button" value="点击" onclick="fn()"/>
</body>
</html>

6. navigator对象

appName；浏览器名 Netscape

appCodeName;浏览器代码名称 Mozilla

appVersion; 版本号和平台信息

userAgent；浏览器信息

练习：弹出用户所用的浏览器是什么

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
</style>
<script type="text/javascript">
//打开页面之后，弹出用户所用的浏览器
window.onload=init;
function init(){
   var h=navigator.userAgent;
   if(h.indexOf("Firefox")!=-1){
   alert("火狐浏览器");
   }    
	else if(h.indexOf("Chrome")!=-1){
	alert("谷歌浏览器");
	}
	else{
	alert("其他浏览器");
	}
}
</script>
</head>
<body >
</body>
</html>