第3篇快速入门—js基础实战应用代码分享
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='button' value='OK'/>";
//objp3.innerHTML += "<input type='button' value='OK'/>";
objp3.innerHTML += "<a href='http://www.baidu.com'>百度</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,'red');">大字体</a>
<a href="javascript:changeFont(18,'yellow');">中字体</a>
<a href="javascript:changeFont(16,'blue');">小字体</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('max');">大字体</a>
<a href="javascript:changeFont('norm');">中字体</a>
<a href="javascript:changeFont('min');"> 小字体</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('1')">风格1</span>
<span onclick="changeSuit('2')">风格2</span>
<a href="javascript:changeFont('max');">大字体</a>
<a href="javascript:changeFont('norm');">中字体</a>
<a href="javascript:changeFont('min');"> 小字体</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
相关视频：
以上是第3篇快速入门—js基础实战应用代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
如何修复KB5055523无法在Windows 11中安装？
3 周前
By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前
By DDD
<🎜>：死铁路 - 如何驯服狼
4 周前
By DDD
R.E.P.O.的每个敌人和怪物的力量水平
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：种植花园 - 完整的突变指南
2 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
神秘的JavaScript：它的作用以及为什么重要
Apr 09, 2025 am 12:07 AM
JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
JavaScript的演变：当前的趋势和未来前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。
JavaScript引擎：比较实施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。
JavaScript：探索网络语言的多功能性
Apr 11, 2025 am 12:01 AM
JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
如何使用Next.js（前端集成）构建多租户SaaS应用程序
Apr 11, 2025 am 08:22 AM
本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库
从C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。
使用Next.js（后端集成）构建多租户SaaS应用程序
Apr 11, 2025 am 08:23 AM
我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。 首先，什么是多租户SaaS应用程序？ 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务
