js基础运用 day 7

其他 2018-07-28 20:10:00 阅读次数: 0

BOM--用定时器做个小玩意

<!DOCTYPE html>
<html>
    <head>
        <title>BOM--用定时器做个小玩意</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <style type="text/css">
            div {
                background-color: #ff0080;
                width: 300px;
                height: 50px;
                position: absolute;
            }
            
        </style>
    </head>
    <body>
    	
		 <script type="text/javascript">
		 	var t,i=0;
			var str= "湖南城市学院";
			function demo(){
				t=setInterval("aa()",500);
			}
			
			function aa(){
				status=str.substring(0,i+1);
				i=(i+1)%(str.length+1);
			}
			
			function demo2(){
				t = setInterval("bb();",50);
			}
			
			function bb(){
				var varobj=document.getElementById("d1");
				varobj.style.posTop+=5;
				varobj.style.posLeft+=3;
			}
		 </script>
		
        <input type="button" value="动画演示1" onclick="demo();">
        <br/>
        <input type="button" value="动画演示2" onclick="demo2();">
        <br/>
        <div id="d1">
            今天凉快了....
        </div>
    </body>
</html>

BOM--事件

<!DOCTYPE html>
<html>
  <head>
    <title>BOM--事件</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
			div{
				width:200px;
				height:80px;
				background-color:#0ff;
			}	
	</style>
	
	<script type="text/javascript">
			onload=function(){
				alert("页面加载完毕");
			};
			onunload=function(){
				alert("页面马上关闭，赶紧进行数据存储。。。");
				open("bom_4.html");
			}
		</script>
  </head>
  
  <body>
  	 <script type="text/javascript">
	 	function aa(obj){
				alert(obj.value);
			}
	    	function bb(){
				alert("11111");
			}
			
	    	function cc(obj){
				alert(obj.value.length+1);
				var objSpan = document.getElementById("sNum");
				objSpan.innerText=obj.value.length+1+"";
				//alert("2222");
			}
			
			function dd(obj){
				//var objDiv = obj;
				obj.innerText=window.event.screenX+","+event.screenY;
			}
	 
	 </script>
  	邮箱:<input type="text" name="email" onblur="aa(this);" onchange="bb();"> <br/>
		
	邮箱2:<input type="text" name="email" onkeydown="cc(this);">  <span id="sNum"></span><br/>
		
	
    <div onmousemove="dd(this);">
						
		</div>
		
		<input type="button" value="动画演示2" onclick="demo2();"><br/>
  </body>
</html>

DOM--获取文档中的元素

两个名词:
        1)元素(Element): 指的是页面中的标签(对象) ---容器

        2)节点(Node): 指的是页面中的标签、文本内容、属性 ----dom树上所有的节点都逃不出“标签、文本内容、属性”的范围

        获取文档中的元素1,该方式只能获取元素对象

        直接通过document有三种获取方式:

       1) getElementById(): 通过元素的id属性值

       2) getElementsByName(): 通过元素的name属性值

       3) getElementsByTagName(): 通过元素的标签名

         ※通过一个元素对象调用上面的3个函数可以在该元素的dom子树中进行元素获取。

一个节点(node)通常都有三个属性: 

  1)节点名称(nodeName):标签为标签名, 属性为属性名, 文本内容为:#text

  2)节点类型(nodeType):标签为1, 属性为2, 文本内容为3

  3)节点值(nodeValue): 标签为null, 属性为属性值,  文本内容就是本身的这些文字

<!DOCTYPE html>
<html>
    <head>
        <title>DOM--获取文档中的元素</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    </head>
    <body>
        <!--
        两个名词:
        1)元素(Element): 指的是页面中的标签(对象) ---容器
        2)节点(Node): 指的是页面中的标签、文本内容、属性 ----dom树上所有的节点都逃不出“标签、文本内容、属性”的范围
        ◇◇获取文档中的元素1,该方式只能获取元素对象◇◇
        直接通过document有三种获取方式:
        1) getElementById(): 通过元素的id属性值
        2) getElementsByName(): 通过元素的name属性值
        3) getElementsByTagName(): 通过元素的标签名
        ※通过一个元素对象调用上面的3个函数可以在该元素的dom子树中进行元素获取。
        -->
        <div id="div1">
            这是div2中的文本
        </div>
        <input type="button" value="获取文档中的元素1" onclick="demo1();">
        <br/>
        <script type="text/javascript">
            function demo1(){
                var objDiv = document.getElementById("div1");
                objDiv.innerText = "湖南城市学院";
                objDiv.style.backgroundColor = "blue";
                objDiv.style.height = "50px";
                objDiv.style.width = "200px";
            }
        </script>
		
        <div id="div2" name="div2">
            这是div2中的文本
        </div>
        <input type="button" value="获取文档中的元素2" onclick="demo2();">
        <br/>
        <script type="text/javascript">
            function demo2(){
                var objDiv = document.getElementsByName("div2")[0];//注意通过name属性获取到的是元素数组
                objDiv.innerText = "湖南益阳";
                objDiv.style.backgroundColor = "red";
                objDiv.style.height = "50px";
                objDiv.style.width = "100px";
            }
        </script>
		
		<div id="div3" name="nm2">这是div3中的文本</div>
		<input type="button" value="获取文档中的元素3" onclick="demo3();"><br/>

		<script type="text/javascript">
			function demo3(){
				var objDiv = document.getElementsByTagName("div")[2];//注意通过标签名获取到的也是元素数组
				objDiv.innerText="中国北京";
				objDiv.style.backgroundColor="green";
				objDiv.style.height="50px";
				objDiv.style.width="100px";
			}
		</script>
		
		<hr/>
		
		<!--一个节点(node)通常都有三个属性: 
		  1)节点名称(nodeName):标签为标签名, 属性为属性名, 文本内容为:#text
		  2)节点类型(nodeType):标签为1, 属性为2, 文本内容为3
		  3)节点值(nodeValue): 标签为null, 属性为属性值,  文本内容就是本身的这些文字
		-->
		
		<div id="div4" value="abc">这是div4中的文本  </div>
		<input type="button" value="获取节点的3个通用属性" onclick="demo4();"><br/>
		<script type="text/javascript">
			function demo4(){
				
				//元素(标签)
				var objDiv = document.getElementById("div4");
				//objDiv.innerText=objDiv.nodeName+","+objDiv.nodeType+","+objDiv.nodeValue;
				
				//属性
				//获取"属性对象"用getAttributeNode()， 直接获取"属性值"用getAttribute(), attributes集合能获取当前元素的所有成员属性对象
				var attrDivValue = objDiv.getAttributeNode("value");
				alert(attrDivValue);
				alert(attrDivValue.nodeName+","+attrDivValue.nodeType+","+attrDivValue.nodeValue);
				
				//文本内容
				var innerTextNode = objDiv.childNodes[0];
				alert(innerTextNode.nodeName+","+innerTextNode.nodeType+","+innerTextNode.nodeValue);			
			}
		</script>
		
    </body>
</html>

DOM--一个小例子

<!DOCTYPE html>
<html>
  <head>
    <title>DOM--一个小例子</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
					
	</style>
	
	<script type="text/javascript">
			onload=function( ){
			   var objdiv=document.getElementById("div1");
			   var objAs=document.getElementsByTagName("a");
			   for(var i=0;i<objAs.length;i++){
			   	 objAs[i].target="_blank";
			   }	
			};
	</script>
  </head>
  
  <body>
     <a href="http://www.hncu.net">城院首页</a> <br/>
        <a href="http://www.sina.com">新浪首页</a> <br/>
		<hr/>
		<div id="div1">
			<a href="goods/1.html">商品1</a> <br/>
			<a href="goods/2.html">商品2</a> <br/>
			<a href="goods/3.html">商品3</a> <br/>
			<a href="goods/4.html">商品4</a> <br/>
			akalalka
		</div>
  </body>
</html>

DOM--获取文档中的元素

获取文档中的元素2,该方式不但可以获取元素节点，还可获取文本内容节点

 可以通过元素在dom树中的层次关系获取其它元素。

这些层次关系包括: 父亲、儿子、兄弟

儿子:firstChild, lastChild,  childNodes集合,children集合 

兄弟:nextSibling(下一个兄弟节点), previousSibling(上一个兄弟节点)

父亲: parentElement, parentNode

<!DOCTYPE html>
<html>
    <head>
        <title>DOM--获取文档中的元素</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
     <!--

  ◇◇获取文档中的元素2,该方式不但可以获取元素节点，还可获取文本内容节点◇◇
  可以通过元素在dom树中的层次关系获取其它元素。
  这些层次关系包括: 父亲、儿子、兄弟
  儿子:firstChild, lastChild,  childNodes集合,children集合 
  兄弟:nextSibling(下一个兄弟节点), previousSibling(上一个兄弟节点)
  父亲: parentElement, parentNode
  
-->
<div id="div1" >这是div2中的文本</div>
		<table id="tab1">
		    <tr>
				<td>单元格一</td>
				<td>单元格二</td>
			</tr>
			<tr>
				<td>单元格2一</td>
				<td>单元格2二</td>
			</tr>
		</table>
		<dl>
			<dt>上层项目</dt>
			<dd>下层项目1</dd>
			<dd>下层项目2</dd>
			<dd>下层项目3</dd>
		</dl>
		
		<input type="button" value="获取文档中的节点" onclick="demo1();"><br/>
		<script type="text/javascript">
			function demo1(){
			   var objTable=document.getElementById("tab1");
			   var node=objTable.parentNode;
			   //alert(node.nodeName);//body
			   
			   //第一个儿子
			   var node2 = objTable.firstChild;
			   //alert(node2.nodeName);//#text ---文本内容，本例是空白符
			   
			   //利用循环去找第一个儿子
			   var i=0;
			   var node22=objTable.childNodes[i];
			   while(node22.nodeName!="TBODY"){
			   	  i++;
				  node22=objTable.childNodes[i];
			   }
			   alert("2: "+node22.nodeName);
			   
			   var objTr = node22.childNodes[0];
				if(objTr=="#text"){
					objTr = node22.childNodes[1]; //OK
					//objTr = objTr.nextSibling;
				}
				alert(objTr.nodeName);
			}
			
		</script>
        <br>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/lx678111/article/details/81238238
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022