JavaWeb学习（第一天）-3-JavaScript部分

最新推荐文章于 2024-02-02 10:42:50 发布
最新推荐文章于 2024-02-02 10:42:50 发布
阅读量598 收藏 1
点赞数
文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shouhmzhl/article/details/123299767
版权 
<html>
	<head>
		<meta charset="utf-8">
		<script language="javascript">
			// String str = "hello world" ;


			var str = "hello world";
			alert(typeof str);
			str = 9999 ;
			alert(typeof str);

			var person = new Object();
			person.pid = "p001";
			person.pname="鸠摩智";

			alert(person.pid+"_"+person.pname);

			//java 方法
			
			//public String hello(String name){
			//	return "hello to " + name ;
			//}

			//js 方法
			function hello(num1 , num2 , name){
				if(num1>num2){
					return "hello to" + name ;
				}else{
					alert("HELLO");
				}
			}


		</script>
	</head>
	<body>
		
	</body>
</html>
<!--
Javascript : 客户端的一个脚本语言
js是一门弱类型的语言 , 变量的数据类型由后面赋的值的类型决定

-->

鼠标悬浮与离开

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/demo05.css">
		<script type="text/javascript" src="js/demo08.js"></script>
	</head>
	<body>
		<div id="div_container">
			<div id="div_fruit_list">
				<table id="tbl_fruit">
					<tr>
						<th class="w20">名称</th>
						<th class="w20">单价</th>
						<th class="w20">数量</th>
						<th class="w20">小计</th>
						<th>操作</th>
					</tr>
					<tr>
						<td>苹果</td>
						<td>5</td>
						<td>20</td>
						<td>100</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>	
						<td>西瓜</td>
						<td>3</td>
						<td>20</td>
						<td>60</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>菠萝</td>
						<td>4</td>
						<td>25</td>
						<td>100</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>榴莲</td>
						<td>3</td>
						<td>30</td>
						<td>90</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>总计</td>
						<td colspan="4">999</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

window.onload=function(){
	updateZJ();
	//当页面加载完成，我们需要绑定各种事件
	//根据id获取到表格
	var fruitTbl =  document.getElementById("tbl_fruit");
	//获取表格中的所有的行
	var rows = fruitTbl.rows ;
	for(var i = 1 ; i<rows.length-1 ; i++){
		var tr = rows[i];
		//1.绑定鼠标悬浮以及离开时设置背景颜色事件
		tr.onmouseover=showBGColor;
		tr.onmouseout=clearBGColor;
		//获取tr这一行的所有单元格
		var cells = tr.cells;
		var priceTD = cells[1];
		//2.绑定鼠标悬浮在单价单元格变手势的事件
		priceTD.onmouseover = showHand ;
		//3.绑定鼠标点击单价单元格的事件
		priceTD.onclick=editPrice;
	}

}

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var priceTD = event.srcElement ;
		//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3  ElementNode对应的是1
		if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
			//innerText 表示设置或者获取当前节点的内部文本
			var oldPrice = priceTD.innerText ;
			//innerHTML 表示设置当前节点的内部HTML
			priceTD.innerHTML="<input type='text' size='4'/>";
			// <td><input type='text' size='4'/></td>
			var input = priceTD.firstChild;
			if(input.tagName=="INPUT"){
				input.value = oldPrice ;
				//选中输入框内部的文本
				input.select();
				//4.绑定输入框失去焦点事件 , 失去焦点，更新单价
				input.onblur=updatePrice ;
			}
		}
		
	}
}

function updatePrice(){
	if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
		var input = event.srcElement ;
		var newPrice = input.value ;
		//input节点的父节点是td
		var priceTD = input.parentElement ;
		priceTD.innerText = newPrice ;

		//更新当前行的小计这一个格子的值
		//priceTD.parentElement td的父元素是tr
		updateXJ(priceTD.parentElement);

	}
}

//更新指定行的小计
function updateXJ(tr){
	if(tr && tr.tagName=="TR"){
		var tds = tr.cells;
		var price = tds[1].innerText ;
		var count = tds[2].innerText ;
		//innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算
		var xj = parseInt(price) * parseInt(count);
		tds[3].innerText = xj ;

		//更新总计
		updateZJ();
	}

}

//更新总计
function updateZJ(){
	var fruitTbl = document.getElementById("tbl_fruit");
	var rows = fruitTbl.rows ;
	var sum = 0 ;
	for(var i = 1; i<rows.length-1 ; i++){
		var tr = rows[i];
		var xj = parseInt(tr.cells[3].innerText);		//NaN    not a number 不是一个数字
		sum = sum + xj ;
	}
	rows[rows.length-1].cells[1].innerText = sum ;
}




//当鼠标悬浮时，显示背景颜色
function showBGColor(){
	//event : 当前发生的事件
	//event.srcElement : 事件源
	//alert(event.srcElement);
	//alert(event.srcElement.tagName);	--> TD
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		//td.parentElement 表示获取td的父元素 -> TR
		var tr = td.parentElement ;
		//如果想要通过js代码设置某节点的样式，则需要加上 .style
		tr.style.backgroundColor = "navy" ;

		//tr.cells表示获取这个tr中的所有的单元格
		var tds = tr.cells;
		for(var i = 0 ; i<tds.length ; i++){
			tds[i].style.color="white";
		}
	}
}

//当鼠标离开时，恢复原始样式
function clearBGColor(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		var tr = td.parentElement ;
		tr.style.backgroundColor="transparent";
		var tds = tr.cells;
		for(var i = 0 ; i<tds.length ; i++){
			tds[i].style.color="threeddarkshadow";
		}
	}
}

//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		//cursor : 光标
		td.style.cursor="hand";
	}

}
*{
	color: threeddarkshadow;
}
body{
	margin:0;
	padding:0;
	background-color:#808080;
}
div{
	position:relative;
	float:left;
}

#div_container{
	width:80%;
	height:100%;
	border:0px solid blue;
	margin-left:10%;
	float:left;
	background-color: honeydew;
	border-radius:8px;
}
#div_fruit_list{
	width:100%;
	border:0px solid red;
}
#tbl_fruit{
	width:60%;
	line-height:28px;
	margin-top:120px;
	margin-left:20%;
}
#tbl_fruit , #tbl_fruit tr , #tbl_fruit th , #tbl_fruit td{
	border:1px solid gray;
	border-collapse:collapse;
	text-align:center;
	font-size:16px;
	font-family:"黑体";
	font-weight:lighter;
	
}
.w20{
	width:20%;
}
.delImg{
	width:24px;
	height:24px;
}
.btn{
	border:1px solid lightgray;
	width:80px;
	height:24px;
}

 更新功能：修改单价、删掉某列（仅需更新js部分，CCS、HTML代码不变）：

window.onload=function(){
	updateZJ();
	//当页面加载完成，我们需要绑定各种事件
	//根据id获取到表格
	var fruitTbl =  document.getElementById("tbl_fruit");
	//获取表格中的所有的行
	var rows = fruitTbl.rows ;
	for(var i = 1 ; i<rows.length-1 ; i++){
		var tr = rows[i];
		//1.绑定鼠标悬浮以及离开时设置背景颜色事件
		tr.onmouseover=showBGColor;
		tr.onmouseout=clearBGColor;
		//获取tr这一行的所有单元格
		var cells = tr.cells;
		var priceTD = cells[1];
		//2.绑定鼠标悬浮在单价单元格变手势的事件
		priceTD.onmouseover = showHand ;
		//3.绑定鼠标点击单价单元格的事件
		priceTD.onclick=editPrice;


		//7.绑定删除小图标的点击事件
		var img = cells[4].firstChild;
		if(img && img.tagName=="IMG"){
			//绑定单击事件
			img.onclick = delFruit ;
		}

	}
}

function delFruit(){
	if(event && event.srcElement && event.srcElement.tagName=="IMG"){
		//alert表示弹出一个对话框，只有确定按钮
		//confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true，否则返回false
		if(window.confirm("是否确认删除当前库存记录")){
			var img = event.srcElement ;
			var tr = img.parentElement.parentElement ;
			var fruitTbl = document.getElementById("tbl_fruit");
			fruitTbl.deleteRow(tr.rowIndex);

			updateZJ();
		}
	}

}

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var priceTD = event.srcElement ;
		//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3  ElementNode对应的是1
		if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
			//innerText 表示设置或者获取当前节点的内部文本
			var oldPrice = priceTD.innerText ;
			//innerHTML 表示设置当前节点的内部HTML
			priceTD.innerHTML="<input type='text' size='4'/>";
			// <td><input type='text' size='4'/></td>
			var input = priceTD.firstChild;
			if(input.tagName=="INPUT"){
				input.value = oldPrice ;
				//选中输入框内部的文本
				input.select();
				//4.绑定输入框失去焦点事件 , 失去焦点，更新单价
				input.onblur=updatePrice ;

				//8.在输入框上绑定键盘摁下的事件，此处我需要保证用户输入的是数字
				input.onkeydown=ckInput;
			}
		}
		
	}
}

//检验键盘摁下的值的方法
function ckInput(){
	var kc = event.keyCode ;
	// 0 ~ 9 : 48~57
	//backspace : 8
	//enter : 13
	//console.log(kc);

	if(!( ( kc>=48 && kc<=57 ) || kc==8 || kc==13 )){
		event.returnValue=false;
	}

	if(kc==13){
		event.srcElement.blur();
	}

}

//更新单价的方法
function updatePrice(){
	if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
		var input = event.srcElement ;
		var newPrice = input.value ;
		//input节点的父节点是td
		var priceTD = input.parentElement ;
		priceTD.innerText = newPrice ;

		//5. 更新当前行的小计这一个格子的值
		//priceTD.parentElement td的父元素是tr
		updateXJ(priceTD.parentElement);

	}
}

//更新指定行的小计
function updateXJ(tr){
	if(tr && tr.tagName=="TR"){
		var tds = tr.cells;
		var price = tds[1].innerText ;
		var count = tds[2].innerText ;
		//innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算
		var xj = parseInt(price) * parseInt(count);
		tds[3].innerText = xj ;

		//6. 更新总计
		updateZJ();
	}

}

//更新总计
function updateZJ(){
	var fruitTbl = document.getElementById("tbl_fruit");
	var rows = fruitTbl.rows ;
	var sum = 0 ;
	for(var i = 1; i<rows.length-1 ; i++){
		var tr = rows[i];
		var xj = parseInt(tr.cells[3].innerText);		//NaN    not a number 不是一个数字
		sum = sum + xj ;
	}
	rows[rows.length-1].cells[1].innerText = sum ;
}


//当鼠标悬浮时，显示背景颜色
function showBGColor(){
	//event : 当前发生的事件
	//event.srcElement : 事件源
	//alert(event.srcElement);
	//alert(event.srcElement.tagName);	--> TD
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		//td.parentElement 表示获取td的父元素 -> TR
		var tr = td.parentElement ;
		//如果想要通过js代码设置某节点的样式，则需要加上 .style
		tr.style.backgroundColor = "navy" ;

		//tr.cells表示获取这个tr中的所有的单元格
		var tds = tr.cells;
		for(var i = 0 ; i<tds.length ; i++){
			tds[i].style.color="white";
		}
	}
}

//当鼠标离开时，恢复原始样式
function clearBGColor(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		var tr = td.parentElement ;
		tr.style.backgroundColor="transparent";
		var tds = tr.cells;
		for(var i = 0 ; i<tds.length ; i++){
			tds[i].style.color="threeddarkshadow";
		}
	}
}

//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement ;
		//cursor : 光标
		td.style.cursor="hand";
	}

}

 

 删掉成功后显示：

 

shouhmzhl
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaWeb学习总结（三）——JavaScript
刘志先的博客
10-14 105
1、JavaScript简介 一、什么是JavaScript Javascript：基于对象和事件驱动的语言，应用于客户端 基于对象：不同于java的new对象。js提供好了很多对象，可以直接使用 事件驱动：html做网站静态效果，js动态效果 客户端：专门指浏览器 注：浏览器中的控制台可以调试js代码（区分大小写，html不区分） 二、JavaScript特点 交互性：信息的动态交互 安全性：js不能访问本地磁盘的文件 跨平台性：支持js的浏览器都可以运行 三、Java和JavaScript
JavaWeb开发第一天
03-24
在“JavaWeb开发第一天”这个主题中，我们主要探讨的是JavaWeb开发的基础概念和技术栈，这对于初学者或者希望深入理解Web应用开发的开发者至关重要。JavaWeb是Java技术在Web领域中的应用，它允许开发者创建动态、...
JS的Document类型
一心向晚
09-15 9323
Document HTMLDocument继承自Document。 在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用 1.属性 documentElement指向HTML页面中的<html>元素。 title 获取文档的标题 URL 获取URL domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。 referrer 取得链接到当前页面的那个页面的URL...
JS document对象详解
最新发布
大河之犬的博客
02-02 2370
document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容。实际上，浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口内部的页面（即HTML文档）自动生成一个document对象，这样我们就可以通过document对象来操作页面中所有的元素了window是浏览器为每个窗口创建的对象。通过window对象，我们可以操作窗口，如打开窗口、关闭窗口、浏览器版本等，这些操作又被统称为“BOM（浏览器对象模型）”
JavaScript之document对象最常用相关知识总结
熊凯瑞的博客
09-04 3540
浏览器对外提供的支持js的用来操作HTML文档的一个document对象，此对象封存的HTML文档的所有信息，浏览器在执行时，到达有document代码这一行，操作的不是原HTML文档，而是事先封装的document对象。 1.2 通过name 1.3 通过标签名 1.4 通过class属性值 1.5 相关实例一 2、间接方式获取HTML元素对象 2.1 父子关系 2.2 子父关系 2.3 兄弟关系 2.4 相关实例二 三、JS操作HTML元素属性 1、 获取元素属性 1.1 场
js里document的用法
weixin_45984512的博客
11-12 2476
document.write() //动态向页面写入内容 document.createElement(Tag) //创建一个html标签对象 document.getElementById(ID) //获得指定ID值的对象 document.getElementsByName(Name) //获得指定Name值的对象 document.fileSize//文件大小，只读属性 document.body.appendChild(oTag)//向节点添加最后一个子节点 document.body //指定文档
JS之DOM操作--概述、document节点属性、document节点选中页面元素、document节点创建页面元素和属性、操作页面元素属性、操作元素内容、节点操元素样式
小白小白从不日别的博客
04-12 1842
DOM
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含更多天的...
IDEA版JavaWeb从入门到精通之jQuery第3-4天
06-19
课程涵盖：Servlet程序、Filter过滤器、Listener监听器、JSP页面、EL表达式、JSTL标签库、jQuery框架、Cookie技术、Session会话、JSON使用、Ajax请求等全部Web开发核心...本系列教程共计16天，本章为第3-4天jQuery。
传智播客崔希凡JavaWeb-day16-mysql第二天-全部资料
12-08
4. **day16_code**：这部分内容可能是课程中涉及的代码实例，涵盖了一天的学习内容。通过查看和运行这些代码，学习者可以实践编程技巧，理解Java与数据库之间的交互，如JDBC（Java Database Connectivity）的使用，...
JavaWeb 视频教程 传智播客 第26天 共28天
03-14
本教程"JavaWeb 视频教程 传智播客 第26天 共28天"是传智播客教育机构提供的一套完整的JavaWeb学习资源，旨在帮助学习者系统地掌握这一领域的核心知识。 第26天的课程可能涉及了前面25天的基础知识巩固以及新的进阶...
JavaScript中document的四种方法
qiangzhogshou的博客
11-26 1万+
1、document的getElementById()方法 <body> <a id="first">a标签链接</a> <script> var element = document.getElementById("first"); console.log(element); </script> </body>...
【JavaScript】Document对象学习
寒泉
09-26 2万+
Document 对象 当浏览器载入 HTML 文档, 它就会成为 Document 对象。 Document 对象是 HTML 文档的根节点。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。 因此，可以通过js在html里面凭空创造一个标签出...
关于js_document对象中的获取元素，创建元素的方法
qq_55961861的博客
08-12 2047
关于js_document对象中的获取元素，创建元素的方法！
JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
No8g攻城狮的博客
04-02 6954
1、概念： Document Object Model 文档对象模型：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。 通过 HTML DOM（如图所示），可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被...
JavaScript核心之Document对象详解（document属性，方法）
热门推荐
上善若泪
04-30 2万+
目录 1 Document节点概述 2 document节点的属性 2.1 doctype，documentElement，defaultView，body，head，activeElement 2.1.1 doctype 2.1.2 documentElement 2.1.3 defaultView 2.1.4 body 2.1.5 head 2.1.6 activeEleme...
js document
qq_44889086的博客
10-28 150
document对象学习: 1、document对象的概念 浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。 2、使用document 获取HTML元素对象 直接获取方式： 通过id 通过name属性值 通过标签名 通过class属性值 间接获取方式： ...
原生js 之 (DOM操作）
m0_49515138的博客
11-23 2067
Element.classList.add (“类名”) // 添加类名操作 可添加多个 不会覆盖原有的类名。Element.classList.remove( “ 移除类名”) // 移除类名操作 可移除多个类名。Element.classList.toggle( “切换类名 ”) //切换类名 无则添加，有则移除。(false为捕获阶段，true为冒泡阶段)但是有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）
【Java 进阶篇】JavaScript DOM Document对象详解
繁依Fanyi的博客
10-17 1146
DocumentDocument对象是DOM的核心，代表整个HTML文档。通过Document对象，您可以获取元素、创建新元素、写入文本、处理事件以及修改元素的样式。这些功能使JavaScript能够与网页内容互动，实现动态和交互性的网页。无论是更改文本内容、更新样式、添加交互事件，还是创建新的元素，Document对象都是前端开发不可或缺的工具之一。希望这篇博客对初学者有所帮助，使他们更好地理解Document对象及其用途。
JavaWeb02-JavaScript学习笔记
08-22
JavaWeb02-JavaScript学习笔记 JavaScript是一种脚本语言，可以直接由浏览器解析，不需要编译。本篇学习笔记主要介绍了JavaScript的基本语法和常用的语句、流程控制以及数组和对象的使用方法。 JavaScript的引入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值