13章 Web浏览器中的JavaScript
Window对象,引用自身的属性window, 指代Location对象的属性location,
//设置location属性,跳转到新的页面
window.location = "http://www.baidu.com";
Window对象最重要的属性document,它引用Document对象,表示显示在窗口的文档。
//查找id为timestamp的元素
var timestamp = document.getElementById("timestamp");
getElementById返回的 Element对象,每个Element对象都有style和className属性,
Window,Document,Element另一个重要的属性就是事件处理相关属性。
timestamp.onclick = function(){ this.innerHTML = new Date().toString(); }
小试牛刀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_JavaScriupt子集和扩展</title>
<style>
#clock {
font: bold 24pt sans;
background: #ddf;
padding: 10px;
border: solid black 2px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Digital Clock</h1>
<span id="clock"></span>
<script>
function displayTime(){
var clock = document.getElementById("clock");
clock.innerHTML = new Date().toLocaleTimeString();
setTimeout(displayTime, 1000); //这里不能用displayTime() 使用displayTime
}
window.onload = function () {
displayTime(); //这里是调用函数,所以得加括号才行
} //这里可以写成 window.onload = displayTime; 不加括号
</script>
</body>
</html>
javascript:url
//会擦除当前文档并显示新文档
<a href="javascript:new Date().toLocalTimeString()">链接</a>
//在后面跟个 void, 就不会擦除当前文档,使用window.open('about:blank')打开新空白页
<a href="javascript:void window.open('about:blank')"></a>
prompt("弹出输入框"); eval("1+2"); //等于3(计算)
不要把 HTML代码和JavaScript代码混淆在一起
IE:
<!--[if IE]> <![endif]-->
<!--[if !IE]> <![endif]-->
<!--[if !IE]> <![endif]-->
同源策略 估计讲的“跨域”问题吧,太多文字看的很累。。
第14章 Window对象
//setInterval每隔多长时间执行一次,返回值index,使用clearInterval(index)结束调用
var index = setInterval(function () {
console.log("每隔一秒执行");
},1000);
setTimeout(function () {
console.log("5秒之后停止");
clearInterval(index);
},5000);
//setTimeout 指定毫秒数后执行,只执行一次,可以使用 clearTimeout(index)提前结束调
window.location 和 document.location 引用的都是 Location对象,所以 window.location == document.location 返回true
location.search 得到的是 问号之后的URL
//假如当前URL是 http://localhost:8181/13?username=why_su&age=24#top
location.href http://localhost:8181/13?username=why_su&age=24#top
location.protocol http:
location.host http://localhost:8181
location.hostname http://localhost
location.port 8181
location.pathname /13
location.hash #top
location.search ?username=why_su&age=24
//location.hash 得到的是 URL中的"片段标识符", # 后面跟的
//location.search 得到的是 ? 后的URL, 貌似这里不包含 # 后的内容
location = "#top" 如果文档中没有元素的ID是top,则跳转到文档的顶部
window.history 引用的是 History对象,history.forward() 前进,history.back()后退,history.go(-2) 后退两个历史记录
如果文档中包含一个 <button id="okay"/>元素,可以用 全局变量 okay 来引用此元素,但如果id是history,location这类已被占用的,就不能这样用。
var ui = ["a","history","b"]; //这三个 id都有对应的组件
ui.foreach(function(t){
console.log(t); //得到的是 a, history, b;
ui[t] = document.getElementById(t);
});
//此时可以用 a 表示 ui.a, b 表示 ui.b,【不建议这样使用】
console.log(a+":"+b);
//但是不能用 history 表示 ui.history
console.log(ui.history);
var $ = function(id){ return document.getElementById(id);}
$("id"); //但没有诸如jquey的 $("#id").text() .val()等方法
//浏览器会阻止弹出式窗口
window.open("http://www.baidu.com");
//对于点击事件,不会阻拦
$("#button").on("click",function(){
window.open("http://www.baidu.com");
});