2020.08.06（javaweb）（1）

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量827 收藏
点赞数
分类专栏： javaweb 文章标签： dom html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/spiritttt/article/details/107901113
版权

Day14：

1.Dom

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
			window.onload = function() {	
				var btn01Ele = document.getElementById("btn01");
				btn01Ele.onclick = function() {		
					//查找北京这个城市
					//<li id="bj">北京</li>
					//查询元素时通常都是根据元素的特点进行获取
					//在整个HTML文档中，id属性的值不能重复，否则只有第一个有效
					//给元素节点对象的变量命名时，最好以Ele或Element结尾
					var bjEle = document.getElementById("bj");
					alert(bjEle.firstChild.nodeValue);
					//<p><b>tt</b></p>		
				};	
				var btn02Ele = document.getElementById("btn02");
				btn02Ele.onclick = function() {
					//查找全部城市、游戏和手机
					var liEleArr = document.getElementsByTagName("li");
					//alert(liEleArr.length);
					for(var i = 0; i < liEleArr.length; i++) {
						alert(liEleArr[i].firstChild.nodeValue);
					}
				};
			 var btn03Ele = document.getElementById("btn03");
				btn03Ele.onclick = function() {
					//查找所有单选框
					/* gender:
					<input type="radio" name="gender" value="male"/>
					Male
					<input type="radio" name="gender" value="female"/> */
					var genderEleArr = document.getElementsByName("gender");
					alert(genderEleArr.length);
				};
				var btn04Ele = document.getElementById("btn04");
				btn04Ele.onclick = function(){
					//读取文本框中的输入内容
					var usernameEle = document.getElementById("username");
					//读取属性值——元素对象.属性名
					//文本框的输入内容可以通过value属性进行读写
					alert(usernameEle.value);
				};
				var btn05Ele = document.getElementById("btn05");
				btn05Ele.onclick = function(){
					//设置文本框中的输入内容
					var usernameEle = document.getElementById("username");
					//设置属性值——元素对象.属性名=新值
					//文本框的输入内容可以通过value属性进行读写
					usernameEle.value = "new value";
				};
				var btn06Ele = document.getElementById("btn06");
				btn06Ele.onclick = function() {
					//读取北京这个城市的文本内容方式一
					//文本节点对象和文本节点中的文本内容
					//使用DOM标准中定义的API获取文本值
					//1.获取文本节点父节点
					//<li id="bj">北京</li>
					var bjEle = document.getElementById("bj");
					//2.调用父节点的 firstChild属性得到它的第一个子节点
					//alert(bjEle.firstChild.nodeName);#text
					var textNode = bjEle.firstChild;
					//3.得到文本节点后再获取节点的值
					var textContent = textNode.nodeValue;
					alert("full:"+textContent);
					//简化写法
					alert("simple:"+bjEle.firstChild.nodeValue);
				};
				var btn07Ele = document.getElementById("btn07");
				btn07Ele.onclick = function() {
					//读取北京这个城市的文本内容方式二
					//1.获取文本节点父节点
					//<li id="bj">北京</li>
					var bjEle = document.getElementById("bj");
					//使用时注意：这是一个属性，不是方法，不要在后面加()
					//alert("innerHTML="+bjEle.innerHTML);
					var cityEle = document.getElementById("city");
					alert(cityEle.innerHTML);
				};
			};
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				<br>
				<br>
				<p>
					你喜欢哪款单机游戏?
				</p>
				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>
				<br />
				<br />
				<p>
					你手机的操作系统是?
				</p>
				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>
			<div class="inner">
				gender:
				<input type="radio" name="gender" value="male"/>
				Male
				<input type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找北京这个城市</button></div>
			<div><button id="btn02">查找全部城市、游戏和手机</button></div>
			<div><button id="btn03">查找所有单选框</button></div>
			<div><button id="btn04">读取文本框中的输入内容</button></div>
			<div><button id="btn05">设置文本框中的输入内容</button></div>
			<div><button id="btn06">读取北京这个城市的文本内容方式一</button></div>
			<div><button id="btn07">读取北京这个城市的文本内容方式二</button></div>
		</div>
	</body>
</html>

输出：
在这里插入图片描述

Spirit °
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IDEA2020.2中开发JavaWeb工程
08-18
IDEA2020.2 中开发 JavaWeb 工程的详细教程 IDEA2020.2 中开发 JavaWeb 工程是当前 JavaWeb 开发中非常重要的一步，IDEA2020.2 版本创建 JavaWeb 工程与以前的版本变化较大。为此，本文将详细介绍如何在 IDEA2020.2...
Idea2020.2创建JavaWeb项目(部署Tomcat)方法详解
08-24
Idea2020.2创建JavaWeb项目（部署Tomcat）方法详解 Idea2020.2 创建 JavaWeb 项目是一项复杂的任务，需要一步步地执行多个步骤。在本文中，我们将详细介绍如何使用 Idea2020.2 创建 JavaWeb 项目并部署到 Tomcat ...
2020.08.06（javaweb）（2）
spiritttt的博客
08-09 75
Day 14： 1.Tomcat Tomcat是可以运行JSP 、Servlet、Filter、 这样的程序的，因为Tomcat已经实现了JavaEE 里面的一些规范，Java EE 的工程是主要就是写JSP 、Servlet、Filter这些，tomcat符合JavaEE的规范，所以可以运行JSP 、Servlet、Filter，这些都是Java代码，Java代码必须放到虚拟机里面运行，所以Tomcat必须依赖于虚拟机，才能启动，才能运行我们的程序。 查看Eclipse 集成的Tomcat 工作空间 修改
2020.08.07（javaweb）
spiritttt的博客
08-09 100
Day 15： 1.Servlet Servlet的使用三步曲： （1）创建一个类 （2）在web.xml中“注册”这个实现类 （3）Tomcat 生命周期方法 构造器 init()方法 service()方法 destroy()方法 执行过程 第一次请求 创建对象 执行init()方法 执行service()方法 后面请求 执行service()方法 …. …… 对象销毁前 执行destroy()方法 Servlet对象创建特殊情况 <load-on-startup&g
2020.08.05（javaweb）（1）
spiritttt的博客
08-09 74
Day 15： 1.常用开发工具 HBuilder，EditPlus，Eclipse 2. html 语法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- ①标签不能交叉嵌套 --> 正确：<p><i>早安，A
2020.08.05（javaweb）（3）
spiritttt的博客
08-09 98
Day13： JavaScript <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title h
2020.08.05（javaweb）（2）
spiritttt的博客
08-09 85
Day 13： css： css定义样式位置： css位置优先级 行内样式 > 内部样式 > 外部样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <p style="color: red ; font-size: 12px"
2020-08-29 javaweb总结
qq_41646697的博客
08-30 257
javaweb 1,什么是servlet？Servlet接口及方法。 Java Servlet 是运行在 Web 服务器或应用服务器上的程序，它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。 方法: Servlet 通过调用 init () 方法进行初始化。 Servlet 调用 service() 方法来处理客户端的请求。 Servlet 通过调用 destroy() 方法终止（结束）。 最后，Servlet 是由 JVM 的垃圾回收器进行垃
JavaWeb之Session的简单使用！！！
qq_64847107的博客
09-06 387
因为客户端关闭后，cookie对象被销毁，客户端请求服务器会创建新的session。2.在默认情况下，不是同一个。如果需要两个Session相同，则可以创建一个Cookie对象，key为：JSESSIONID，设置一下最大存活时间，让Cookie持久化保存Session的ID，就可以实现客户端关闭，两次获取Session就是同一个。3.使用同一个浏览器发送请求时，访问通一个服务器端，会在请求头中设定该sessionid 的值，服务器端就会从请求头中获取到该sessionid 查找对应session。
JavaWeb-08-JSP
Void的博客
03-20 319
JavaWeb-08-JSP 1.概述 JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。 JSP是一种Java servlet，主要用于实现Java web应用程序的用户界面部分。 2.JSP原理 找到jsp编译后的文件 //本人电脑上的jsp目录 C:\Users\用户\AppData\Local\JetBrains\IntelliJIdea2020.1\tomcat\Unnamed
JavaWeb
weixin_47520834的博客
08-25 2574
JavaWeb html 1.html基本规则 1.文件标签：构成html最基本的标签 * html:html文档的根标签 * head：头标签。用于指定html文档的一些属性。引入外部的资源 * title：标题标签。 * body：体标签 * <!DOCTYPE html>：html5中定义该文档是html文档 2.文本标签：和文本有关的标签 <!-- 元标签 对页面的设置信息 书写格式： 双标签 <xxx> </xxx>
基于JavaWeb的点餐系统.zip
04-13
【标题】"基于JavaWeb的点餐系统"指的是一个使用JavaWeb技术开发的在线订餐平台。这个系统可能包括了用户界面、后台管理、订单处理、支付接口等多个功能模块，旨在为用户提供方便快捷的在线订餐体验。 【描述】虽然...
javaweb项目实例1.zip
04-20
一个使用Servlet+jsp制作,用MyEclipse和Mysql数据库进行搭建，导入后可以使用。适合新同学使用。
javaweb课后习题答案.zip
12-25
1. **Servlet**: Servlet是JavaWeb开发中的核心组件，用于处理HTTP请求和响应。它扩展了服务器的功能，可以接收和响应来自客户端（通常是浏览器）的请求，处理数据并返回响应。 2. **JSP（JavaServer Pages）**: ...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3268
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
[HTML]一文掌握
CSDN20221005的博客
07-21 975
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 682
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 1913
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
idea2022.3的版本配置javaWeb
03-06
开发环境需要安装Java Development Kit (JDK)和Apache Tomcat服务器。在IDEA中，可以通过File -> Settings -> Build, Execution, Deployment -> Application Servers来配置Tomcat服务器。同时，需要在项目中添加Web模块，并在模块设置中配置Web应用程序的上下文根和Web资源目录。最后，可以在Run/Debug Configurations中配置Tomcat服务器的启动参数和调试选项。希望这些信息能对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值