首頁 >web前端 >js教程 >第3篇快速入門—js基礎實戰應用程式碼分享

第3篇快速入門—js基礎實戰應用程式碼分享

php是最好的语言原創: 2018-07-28 10:41:131467瀏覽

DOM--節點的增刪改查CRUD，DOM--範例:設定新聞字體，DOM的一個小例子---製作一個下拉式選單

DOM--節點的增刪改查CRUD

<!DOCTYPE html>
<html>
    <head>
        <title>DOM--节点的增删改查CRUD</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">
            p {
                border: #00ccff solid 1px;
                width: 200px;
                height: 30px;
            }
        </style>
        <script type="text/javascript">
            //创建纯"文本节点"
            function createAndAdd1(){
                var objp = document.getElementById("p1");
                var oTextNode = document.createTextNode("this is a text");
                objp.appendChild(oTextNode);
            }
            
            //创建"标签元素"  
            function createAndAdd2(){
            
                //创建一个标签节点:<input type="button" value="OK"/>
                var oInputNode = document.createElement("input");
                oInputNode.type = "button";
                oInputNode.value = "OK";
                
                //把所创建标签元素 添加到 p1 中
                var objp2 = document.getElementById("p1");
                objp2.appendChild(oInputNode);
            }
            
            //一种通用的节点创建方式
            //创建"标签元素" ---通过标签元素的innerText或innerHTML来实现 
            function createAndAdd3(){
                var objp3 = document.getElementById("p1");
                //objp3.innerText = "湖南";
                //objp3.innerText +="湖南";
                //objp3.innerHTML = "<input type=&#39;button&#39; value=&#39;OK&#39;/>";
                //objp3.innerHTML += "<input type=&#39;button&#39; value=&#39;OK&#39;/>";
                objp3.innerHTML += "<a href=&#39;http://www.baidu.com&#39;>百度</a>";
            }
            
            
            //////2删//////
            function delNode(){
				var objp = document.getElementById("p2");
				//objp.removeNode(true);
				//objp.removeNode(true);//连子树一起删除
				//objp.removeNode(false);//只删除当前标签节点，子树不删除
				
				//高版本建议采用removeChild()，删除更干净
				objp.parentNode.removeChild(objp); //自己找父节点删除
            }
			
			//////3改//////
			//移动替换
			function updateNode(){
				
				var objp2 = document.getElementById("p2");
				var objp3 = document.getElementById("p3");
				//高版本建议采用replaceChild()，替换更干净
				objp2.parentNode.replaceChild(objp3,objp2); //用p3替换p2
			}
			
			//拷贝替换
			function updateNode2(){
				var objp2 = document.getElementById("p2");
				var objp3 = document.getElementById("p3");
				//克隆节点
				//var objp3_2 = objp3.cloneNode();//空参即是false,不克隆属性及子节点--子树
				var objp3_2 = objp3.cloneNode(true);//参数为true,克隆属性及子节点--子树
				
				objp2.parentNode.replaceChild(objp3_2,objp2); //用p3替换p2
			}
			
			/////4查////前面早讲了
        </script>
    </head>
    <body>
        <p id="p1">
            111
        </p>
        <p id="p2">
            222
        </p>
        <p id="p3">
            3333
        </p>
        <input type="button" value="创建并添加节点1" onclick="createAndAdd1();">
        <br/>
        <input type="button" value="创建并添加节点2" onclick="createAndAdd2();">
        <br/>
        <input type="button" value="创建并添加节点3" onclick="createAndAdd3();">
        <br/>
        <br/>
        <br/>
        <input type="button" value="删除节点" onclick="delNode();">
        <br/>
        <input type="button" value="移动替换节点" onclick="updateNode();">
        <br/>
        <input type="button" value="拷贝替换节点" onclick="updateNode2();">
        <br/>
        <br>
    </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">
    
    	<style type="text/css">
			p{
				border:#00ccff solid 1px;
				width:500px;
				height:300px;
			}		
		</style>
		
		<script  type="text/jscript">
			function changeFont(){
				var oNewsText = document.getElementById("newstext");
				oNewsText.style.fontSize="20pt";	
			}		
			function changeFont2(){
				var oNewsText = document.getElementById("newstext");
				oNewsText.style.fontSize="16pt";	
			}		
			function changeFont3(){
				var oNewsText = document.getElementById("newstext");
				oNewsText.style.fontSize="12pt";	
			}		
		</script>

  </head>
  
  <body>
   <a href="#" onclick="changeFont();">大字体</a>
		<a href="javascript:changeFont2();">中字体</a>
		<a href="javascript:void(0);" onclick="changeFont3();"> 小字体</a>
		<hr/>
		
		<!-- 用HTML的方式手动测试字体设置
		<p id="newstext" style="font-size:18pt;">
		-->
		<p id="newstext">
		根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
		</p>
  </body>
</html>

<!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">
            p {
                border: #00ccff solid 1px;
                width: 500px;
                height: 300px;
            }
        </style>
		
		<script type="text/javascript">
			function changeFont(size,color){
				var objText=document.getElementById("newstext");
				objText.style.fontSize=size+"pt";
				objText.style.color=color;
			}
		</script>
    </head>
    <body>
    	<a href="javascript:changeFont(20,&#39;red&#39;);">大字体</a>
		<a href="javascript:changeFont(18,&#39;yellow&#39;);">中字体</a>
		<a href="javascript:changeFont(16,&#39;blue&#39;);">小字体</a>
		<hr/>
        <p id="newstext">
            根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
        </p>
    </body>
</html>

<!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">
            p {
                border: #00ccff solid 1px;
                width: 500px;
                height: 300px;
            }
			.norm{
				color:#000000;
				font-size:16px;
				background-color:#cdd8d0;
			}
			.min{
				color:#ff0000;
				font-size:12px;
				background-color:#f9fac2;
				font-family:黑体;
			}
			.max{
				color:#808080;
				font-size:20px;
				background-color:#9ce9b4;
			}
        </style>
		
		<script type="text/javascript">
			function changeFont(selectorName){
				var objText=document.getElementById("newstext");
				objText.className=selectorName;
			}
		</script>
    </head>
    <body>
    	<a href="javascript:changeFont(&#39;max&#39;);">大字体</a>
		<a href="javascript:changeFont(&#39;norm&#39;);">中字体</a>
		<a href="javascript:changeFont(&#39;min&#39;);"> 小字体</a>
		<hr/>
		
		<!--先用HTML的方式测试一下
		<p id="newstext" class="max">
		-->
        <p id="newstext">
            根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
        </p>
    </body>
</html>

<!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="css/2.css" id="link1"/>
        <style type="text/css">
           a:link,a:visited{
           	 color:#ff0000;
			 text-decoration:none;
           }
		   a:hover{
		   	 color:#0000ff;
		   }
		   span:hover{
		   	color:#0000ff;
				background-color:#80ffff;
				cursor:pointer;
		   }
        </style>
		
		<script type="text/javascript">
			function changeFont(selectorName){
				var objText=document.getElementById("newstext");
				objText.className=selectorName;
			}
			function changeSuit(sNum)
			{
				 var objLink=document.getElementById("link1");
				 objLink.href="css/"+sNum+".css";
				
			}
		</script>
    </head>
    <body>
    	<span onclick="changeSuit(&#39;1&#39;)">风格1</span>
		<span onclick="changeSuit(&#39;2&#39;)">风格2</span>
    	<a href="javascript:changeFont(&#39;max&#39;);">大字体</a>
		<a href="javascript:changeFont(&#39;norm&#39;);">中字体</a>
		<a href="javascript:changeFont(&#39;min&#39;);"> 小字体</a>
		<hr/>
		
		<!--先用HTML的方式测试一下
		<p id="newstext" class="max">
		-->
        <p id="newstext">
            根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
        </p>
    </body>
</html>

DOM的小範例---製作下拉選單

<!DOCTYPE html>
<html>
    <head>
        <title>3listMenu.html</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">
	#newsid ul{
		list-style:none;
	}
	#newslist li{
		float:left;
		width:180px;
	}
	#newslist li ul{
		margin:0px;
		padding:0px;
	}
	#newslist li ul li{
		line-height:25px;
	}
	#newslist li a{
		display:block;
		color:#ffffff;
		background-color:#0066cc;
		text-decoration:none;
		line-height:25px;
		text-align:center;
	}
	#newslist li a:hover{
		color:#0066cc;
		background-color:#999999;
	}
	#newslist li ul a{
		color:#000000;
		background-color:#0099ff;
	}
	#newslist li ul li a:hover{
		color:#0066ff;
		background-color:#999999;
	}
	#newslist li ul{
		display:none;
	}
</style>
	<script type="text/jscript">
		function list(liNode){
		   	var ulNode=document.getElementsByTagName("ul")[0];
			with(ulNode.style){
				display= display=="block"?"none":"block" ;
			}
		}		
	</script>
	
	
	</head>
    <body background="bg-img.jpg">
        <!--  制作一个下拉菜单：1)封装数据 2)定义基本样式    -->
        <p id="newsid">
            <ul id="newslist">
                <li onmouseover="list(this)";  onmouseout="list(this)">
                    <a href="javascript:void(0)">城院新闻</a>
                    <ul style="display:none;">
                        <li>
                            <a href="http://www.hncu.net/">校园新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">校园新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">校园新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">校园新闻内容摘要</a>
                        </li>
                    </ul>
                </li>
                <li onmouseover="list(this)";  onmouseout="list(this)">
                    <a href="javascript:void(0)">大学新闻</a>
                    <ul style="display:none;">
                        <li>
                            <a href="http://www.hncu.net/">大学新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">大学新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">大学新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">大学新闻内容摘要</a>
                        </li>
                    </ul>
                </li>
                <li onmouseover="list(this)";  onmouseout="list(this)">
                    <a href="javascript:void(0)">社会新闻</a>
                    <ul style="display:none;">
                        <li>
                            <a href="http://www.hncu.net/">社会新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">社会新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">社会新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">社会新闻内容摘要</a>
                        </li>
                    </ul>
                </li>
                <li onmouseover="list(this)";  onmouseout="list(this)">
                    <a href="javascript:void(0)">就业新闻</a>
                    <ul style="display:none;">
                        <li>
                            <a href="http://www.hncu.net/">就业新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">就业新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">就业新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.hncu.net/">就业新闻内容摘要</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </p>
    </body>
</html>

用表格清單封裝選單

<!DOCTYPE html>
<html>
  <head>
    <title>用表格+列表封装菜单</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">
			table ul{
				list-style:none;
				/*background-color:#ff0000;*/
				padding:0px;
				margin:0px;
				display:none; 
				/*display:block; */
			}
			table{
				border: #8080ff;
				width:100px;
			}
			table td{
				border: #8080ff 1px solid;
			}
			table td a:link, table td a:visited{
				text-decoration:none;
			}
			table td a:hover{
				color:#df4011;
			}
			
			/*预定义两种菜单显示的类样式*/
			.open{
				display:block;
			}
			.close{
				display:none;
			}		
  </style>
  <script type="text/javascript">
  	function list(objANode){
		var oTdNode=objANode.parentNode;	
		//当前用户点击的菜单块对象：oulNode
		var oulNode=oTdNode.getElementsByTagName("ul")[0];
		
		//遍历所有"菜单ul"，如果是当前菜单块且处于"非open"状态则设样式为"open",否则全部设成"close"样式
		var oTableNode=document.getElementById("tabFriends");
		var collUlNodes=oTableNode.getElementsByTagName("ul");
		for(var x=0;x<collUlNodes.length;x++){
			if(collUlNodes[x]==oulNode && oulNode.className !="open"){
				collUlNodes[x].className = "open";
			}else{
				collUlNodes[x].className = "close";
			}
		}
		
		
			/*过渡版本
				//ul的类样式有三种状态：open,    close,空(初始时还未设)
				if(oUlNode.className=="open"){
					oUlNode.className="close";
				}else{
					oUlNode.className="open";
				}
				*/
	}
  </script>
  </head>
  
  <body>
   <table id="tabFriends">
			<tr>
				<td>
					<a href="javascript:void(0);" onclick="list(this);">好友菜单1</a>
					<ul>
						<li><a href="action1">一个好友11</a></li>
						<li><a href="action2">一个好友12</a></li>
						<li><a href="action3">一个好友13</a></li>
						<li><a href="action4">一个好友14</a></li>
					</ul>
				</td>
			</tr>
			<tr>
				<td>
					<a href="javascript:void(0);" onclick="list(this);">好友菜单2</a>
					<ul>
						<li>一个好友21</li>
						<li>一个好友22</li>
						<li>一个好友23</li>
						<li>一个好友24</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td>
					<a href="javascript:void(0);" onclick="list(this);">好友菜单3</a>
					<ul>
						<li>一个好友31</li>
						<li>一个好友32</li>
						<li>一个好友33</li>
						<li>一个好友34</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td>
					<a href="javascript:void(0);" onclick="list(this);">好友菜单4</a>
					<ul>
						<li>一个好友41</li>
						<li>一个好友42</li>
						<li>一个好友43</li>
						<li>一个好友44</li>
					</ul>
				</td>
			</tr>
			
		</table>
  </body>
</html>

第1篇快速入門—js基礎實戰中的Date、Math、Global物件

第2篇快速入門—js基礎實戰BOM--瀏覽器物件模型、DOM

相關影片：

前端JS開發27個經典實戰影片教學-免費線上影片教學

以上是第3篇快速入門—js基礎實戰應用程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

封装 date math JS 对象 dom bom

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js中原型鍊和作用域鏈的理解及this指向問題【圖】下一篇：js中原型鍊和作用域鏈的理解及this指向問題【圖】

看更多