JavaScript_08

最新推荐文章于 2024-04-20 12:08:31 发布

星锅

最新推荐文章于 2024-04-20 12:08:31 发布

阅读量242

点赞数

分类专栏： web

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

版权

web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

JavaScript_08

一.节点操作补充

1.添加附带属性的节点

 //添加附带属性的节点
    function f2(){
    	var obj  = document.getElementById("d1");
    	
    	//创建节点
    	
    	var   img =document.createElement("img");
    	
    	img.src = "./img/one.jpg";
    	
    	img.setAttribute("style","width:200px;height:200px");

2.创建属性

//创建属性
    	
    	var attr = document.createAttribute("good");//创建一个新的属性
    	
    	 attr.value = "我是新创建的属性";
    	
    	//将属性添加到节点上面
    	//img.appendAttributeNode(attr);
    	 //img.setAttribute(Aattr.toString(),"我是新创建的属性");
    	//将节点添加到父节点里面
    	obj.appendChild(img);
    	
   }

3.在子节点之前插入节点

  //在子节点之前插入节点
     function f3(){
    	 var obj  = document.getElementById("d1"); 
    	//创建节点
     	var   img =document.createElement("img");
     	
     	img.src = "./img/one.jpg";
     	
     	img.setAttribute("style","width:200px;height:200px");
     	obj.parentNode.insertBefore(img,obj);
    }

4.自定义一个方法实现在节点后面插入节点

 //自定义一个方法实现在节点后面插入节点
     function insertAfter(newElement,oldElement){
    	   var parent = oldElement.parentNode;//获取父节点
    	   
    	   if(parent.lastElementChild == oldElement){//刚好是最后一个节点
    		   parent.appendChild(newElement);
    	   }else{//不是最后一个节点  在下一个兄弟节点前面插入即可
    		   parent.insertBefore(newElement,oldElement.nextElementSibling);  
    	   }
     }

5.替换节点

//替换节点
    function f5(){
    	var  obj = document.getElementById("p1");
    	
    	//创建节点
      	var   img =document.createElement("img");
      	
      	img.src = "./img/one.jpg";
      	
      	img.setAttribute("style","width:200px;height:200px");
      	
      	obj.parentNode.replaceChild(img,obj);//替换节点	
    }

6.删除节点

//删除节点
    function f6(){
    	var  obj = document.getElementById("p2");
    	
    	obj.parentNode.removeChild(obj);
    }

二.窗口

<title>常用的几种窗口</title>
<script type="text/javascript">

     /* window.alert("我是一个消息弹窗口！");
     
     
     //返回布尔值
     if(window.confirm("are you sure? really or not?")){
    	  alert("选择了确定！");
     }else{
    	  alert("选择了取消！");
     }   
    
     
     //输入框
     var str = window.prompt("这是提示的内容","");
     alert(str);
      */
     
    //窗体控制
     function f1(){
    	  window.moveBy(100,100);//相对于原来位置移动
      }
     function f2(){
    	  window.moveTo(100,100);
      }
     
     //大小
     function f3(){
    	  window.resizeBy(100,100);
      }
     function f4(){
    	  window.resizeTo(100,100);
      }
     
     
     
</script>
</head>
<body>
      <input type="button" value="相对于原来位置移动" οnclick="f1()"/>
      <input type="button" value="相对于屏幕" οnclick="f2()"/>
      <input type="button" value="相对于原来大小延伸" οnclick="f3()"/>
      <input type="button" value="相对于屏幕" οnclick="f4()"/>
</body>
</html>

三.Windowd对象

<title>window对象</title>
<script type="text/javascript">
   /*
           是bom里面最高的对象
           
        1.特性：window对象的方法（同常情况下）可以省略window对象而调用
   */
    /*  window.alert("ok");
   
    window.setTimeout(alert("hello"),1000); */
    
    var obj;//全局变量
    function f1(){
    	 obj = window.open("child.html","son","width=400px,height=300ox,top=30px,left=60px");
    	//obj代表子窗口对象
    	 //子窗口和父窗口之间的简易通信
    	 
    	 obj.onload = function(){
    		
    	 obj.document.bgColor ="red";
    	
    	 //操作子窗口里面的节点
    	 var sonNode = obj.document.getElementById("p1");
    	 
    	  sonNode.innerHTML = "我是在父窗口设置的内容！";
    	 }
    	
    }
    
    function f2(){
         if(!obj.closed){//判断是否子窗口关闭
        	 obj.close();
         }  	
    }
    
   //当父窗口关闭的时候同时将子窗口也关闭
   /* function  f3(){
	   
   } */
   
</script>
</head>
<body οnunlοad="f2()">s
    <p id="p2"></p>
   <input type="button" value="打开新窗口" οnclick="f1()"/>
   <p><a href="form.html" target="son">在子窗口打开网页</a></p>
   <p><a href="#" οnclick="f2()">关闭子窗口</a></p>
</body>
</html>

1.特性：window对象的方法（同常情况下）可以省略window对象而调用

4.定时函数

<title>定时函数</title>
<script type="text/javascript">

//简易的计时器

 var   timer ;
 var   i = 0;
     function  f1(){
    	 //var  obj = window.setTimeout(function(){alert("hello");},1000);//间隔1s执行。只执行一次
    	 /* timer = window.setInterval(function(){alert("hello");},1000);//间隔1s执行。执行n多次 */
    	 var obj  = document.getElementById("in1");
    	 
    	 i++;//计时
    	 
    	 var str = "目前计时为："+i;
          
    	 obj.value = str;
    } 
     
     function f2(){
    	 timer = window.setInterval("f1()",1000);
     }
     //结束计时
    function f3(){
    	 if(timer!=null){
    		 clearInterval(timer);
    	 }
    }
    
</script>
</head>
<body>
  <input type="button" value="开始时间为：0 秒" id ="in1"/>
  <input type="button" value="开始计时" οnclick="f2()"/>
  <input type="button" value="结束计时" οnclick="f3()"/>
</body>
</html>