JavaScript_09

最新推荐文章于 2023-08-17 15:37:16 发布

星锅

最新推荐文章于 2023-08-17 15:37:16 发布

阅读量308

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/yjx568135132/article/details/77091917

版权

web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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="点击" οnclick="f(event)"/>
   <div id ="d2" οnmοuseοver="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 οnclick="f1()">
   <div οnclick="f2()">
      <input  type="button" value="点击我啊" οnclick="f3()"/>
   </div>
   <a href="https://www.baidu.com" οnclick="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);" οnclick="javascript:window.history.forward()">跳到第二个页面</a>
   <a href="javascript:void(0);" οnclick="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="刷新当前页面" οnclick="javascript:location.reload()"/>
    <input type="button" value="加载新页面" οnclick="javascript:location.assign('history.html')"/>
    <input type="button" value="替换当前页面" οnclick="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>

星锅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_09

1.窗口的宽和高窗口宽和高 //浏览器的内容显示区的宽和高，不包括滚动条//window.innerWidth window.innerHeight ff//.documentElement.clientWidth .documentElement.clientHeight ie var w = window.innerWidth |
复制链接

扫一扫