JavaScript_09
来源：互联网 发布：c语言 final 编辑：程序博客网 时间：2024/06/16 05:30
1.窗口的宽和高
<title>窗口宽和高</title><script type="text/javascript"> //浏览器的内容显示区的宽和高，不包括滚动条//window.innerWidth window.innerHeight ff//.documentElement.clientWidth .documentElement.clientHeight ie var w = window.innerWidth || document.documentElement.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight; alert("宽："+w+"\n"+"高： "+h); </script></head><body>浏览器的内容显示区的宽和高，不包括滚动条
2.定位属性
<title>窗口的定位属性</title> <script type="text/javascript"> //定位属性:窗口相对于屏幕的位置 //类似于静态变量，通常不会设置值，只会获取使用 var left = window.screenX || window.screenLeft; var top = window.screenY || window.screenTop; alert("left: "+left+"\n"+"top: "+top); </script>定位属性:窗口相对于屏幕的位置
类似于静态变量，通常不会设置值，只会获取使用
3.事件对象
<title>事件对象</title><style type="text/css"> #d2{ width: 250px; height:250px; background-color: gray; }</style><script type="text/javascript"> //事件对象：在事件发生时候的才会存在 window.document.onmousemove = function(e){ //e 事件参数 e 在ff里面没问题 window.event 用于ie8以及ie8以上 var ev = e || window.event;// e事件对象 var sx = ev.screenX; var sy = ev.screenY; var cx = ev.clientX; var cy = ev.clientY; /* document.write(); */ var str ="cx: "+cx+"<br>"+"cy:"+cy+"<br>"+"sx:"+sx+"<br>"+"sy:"+sy; document.getElementById("d1").innerHTML = str; /* 事件对象 事件源 */ } function f(e){ var ev = e || window.event; //alert(ev.keyCode);//事件码，每一种事件都有对应的事件码 ff没有 ie可有 //alert(ev.type);//事件类型 ff以及都有 //获取事件源 ev.srcElement ie的 ev.target ff的 var a =ev.srcElement || ev.target; alert("是"+a.tagName+"触发on"+ev.type+"事件"); } </script></head><body> <div id = "d1"></div> <input type="button" value="点击" onclick="f(event)"/> <div id ="d2" onmouseover="f(event)"></div></body></html>//事件对象：在事件发生时候的才会存在
//e 事件参数 e 在ff里面没问题 window.event 用于ie8以及ie8以上
4.事件冒泡
<title>事件冒泡</title><style type="text/css"> div{ width: 250px; height: 250px; background-color: gray; }</style><script type="text/javascript"> function f1(){ alert("body..."); } function f2(){ alert("div..."); } function f3(){ alert("input..."); } //事件冒泡：当父子元素都具有相同（相似）事件，子元素的事件执行完毕向上向父元素执行 //运用事件的方式阻止事件冒泡 window.onload = function(){ var obj = document.getElementsByTagName("input")[0]; var obj2 = document.getElementsByTagName("div")[0]; obj.addEventListener("click",function(e){var ev=e||window.event;ev.stopPropagation();},false);//添加事件监听 false阻止事件冒泡 obj2.addEventListener("click",function(e){var ev=e||window.event;ev.stopPropagation();},false);//添加事件监听 false阻止事件冒泡 //阻止默认事件 a的默认事件就是跳转 var a = document.getElementsByTagName("a")[0]; a.addEventListener("click",function(e){var ev=e||window.event;ev.preventDefault();},false); //e.preventDefault()阻止默认事件 a.addEventListener("click",function(e){var ev=e||window.event;ev.stopPropagation();},false);//添加事件监听 false阻止事件冒泡 }//js里面的数据类型？/* 基本类型:number string boolean null undefined 复杂：object *//* Bom: window history location navigator screen event dom: document *///表单提交方式/* 1.button 结合 submit() 方法 2.submit按钮 结合 onclick事件 3.submit按钮 结合onsubmit()事件 */</script></head><body onclick="f1()"> <div onclick="f2()"> <input type="button" value="点击我啊" onclick="f3()"/> </div> <a href="https://www.baidu.com" onclick="javascript:return false;">百度</a></body></html>//事件冒泡：当父子元素都具有相同（相似）事件，子元素的事件执行完毕向上向父元素执行
5.history对象
<title>history对象</title></head><body> <h1>我是第一页的页面</h1> <a href="next.html">链接到第二页</a> <a href="javascript:void(0);" onclick="javascript:window.history.forward()">跳到第二个页面</a> <a href="javascript:void(0);" onclick="javascript:window.history.go(2)">跳到第三个页面</a></body></html>6.location对象
<title>location对象</title><script type="text/javascript">//遍历对象 for ( var index in location) { document.write(index+"==:"+location[index]+"<br>");} /* 常用的属性： href：运行文件的完整地址，重定向使用 protocol：运行文件的协议名字 host：主机 hostname:主机的名字 port：端口号 常用的方法： reload 刷新 assign 引进（加载）新的页面 replace 用新的页面替换掉当前页面 */ window.onload = function(){ setTimeout(function(){ location.href="form.html"; },5000); } </script></head><body> <input type="button" value="刷新当前页面" onclick="javascript:location.reload()"/> <input type="button" value="加载新页面" onclick="javascript:location.assign('history.html')"/> <input type="button" value="替换当前页面" onclick="javascript:location.replace('history.html')"/></body></html>7.浏览器对象
<title>浏览器对象</title><script type="text/javascript"> for ( var index in navigator) { document.write(index+"==:"+navigator[index]+"<br>");} /* appName 浏览器名称 常用于判断浏览器的类型 appCodeName==:Mozilla appName==:Netscape appVersion==:5.0 (Windows) platform==:Win32 userAgent==:Mozilla/5.0 (Windows NT 6.1; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0 product==:Gecko language==:zh-CN languages==:zh-CN,zh,en-US,en */ //根据浏览器类型 输出窗口的宽和高 var w,h; if(navigator.appName =="Netscape"){//ff w = window.innerWidth; h = window.innerHeight; }else{//非ff w = document.documentElement.clientWidth; h = document.documentElement.clientHeight; } alert(w+"\n"+h);</script></head><body>8.screen
<title>screen</title> <script type="text/javascript"> var str = "有效宽度"+screen.availWidth; str+="<br>有效的高度"+screen.availHeight; str+="<br>总宽度"+screen.width; str+="<br>总高度"+screen.height; document.write(str); </script>
