Js入门和Document介绍

1while(true){learn}

已于 2022-04-19 19:27:42 修改

阅读量925

点赞数

分类专栏： JavaWeb 文章标签： java

于 2022-04-14 15:52:40 首次发布

本文链接：https://blog.csdn.net/m0_55997161/article/details/124173935

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1)JS是客户端（浏览器端）运行的脚本语言，语法风格和java比较类似
2）jS是弱类型的语言var str=99，它会根据赋值进行类型转换
3)JS的函数,没有返回值和范围修饰符
function hello(var num){}
4)DoM技术：
4-1)鼠标悬浮：onmouseover,.event..srcElement,事件传递parentElement,style.backgroundColor
鼠标离开：onmouseout
4-2)
hand/pointer,onclick td.innerText,td.innerHTML="<input type='text'/>",td.firstChild.value=oldPrice
失去焦点：onblur,input.parentElement..innerText=newPrice;
更新小计：input=event.srcElement,tr=input.parentElement.parentElement;tr.cells,parseInt
更新总计：document.getElementById("fruit_tbl"),fruitTbl.rows
4-3)
删除一行：img,img.parentElement.parentElement.rowIndex,table.deleteRow(rowIndex)

function $(id){
	return document.getElementById(id);
}

window.onload=function(){
	updateZJ();
	//当页面加载完成，我们需要绑定各种事件
	//根据id获取到表格
	var fruitTbl =  $("tbl_fruit");
	//获取表格中的所有的行
	var rows = fruitTbl.rows ;
	for(var i = 1 ; i<rows.length-1 ; i++){
		var tr = rows[i];
		trBindEvent(tr);
	}

	$("addBtn").onclick=addFruit;
}

function trBindEvent(tr){
	//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 addFruit(){
	var fname = $("fname").value;
	var price = parseInt($("price").value);
	var fcount = parseInt($("fcount").value);
	var xj = price * fcount ;

	var fruitTbl =  $("tbl_fruit");
	var tr = fruitTbl.insertRow(fruitTbl.rows.length-1);
	var fnameTD = tr.insertCell();
	fnameTD.innerText = fname ;

	var priceTD = tr.insertCell();
	priceTD.innerText = price ;

	var fcountTD = tr.insertCell();
	fcountTD.innerText = fcount ;

	var xjTD = tr.insertCell();
	xjTD.innerText = xj ;

	var imgTD = tr.insertCell();
	imgTD.innerHTML = "<img src='imgs/del.jpg' class='delImg'/>";

	updateZJ();

	trBindEvent(tr);

}

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 = $("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 = $("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";
	}

}

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/css01.css">
		<script type="text/javascript" src="js/js01.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>
				<hr />
				<div id="add_fruit_div">
					<table>
						<tr>
							<td class="w30">名称：</td>
							<td><input class="input" type='text' id='fname' value="apple"/></td>
						</tr>
						<tr>
							<td>单价：</td>
							<td><input class="input" type='text' id='price' value="5"/></td>
						</tr>
						<tr>
							<td>数量：</td>
							<td><input class="input" type='text' id='fcount' value="100"/></td>
						</tr>
						<tr>
							<th colspan="2">
								<input type='button' id="addBtn" class="btn" value="添加"/>
								<input type='button' class="btn" value="重填"/>
							</th>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>

Document 对象中的方法介绍

document.getElementById(elementId)

通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值 document.getElementsByName(elementName)

通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值 document.getElementsByTagName(tagname)

通过标签名查找标签 dom 对象。tagname 是标签名

document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

注： document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象

getElementById 方法示例代码：验证用户名是否合法

<!DOCTYPE html>
<!--设置语言支持,en代表英语-->
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onclikeFun() {
            // 1 当我们要操作一个标签的时候，一定要先获取这个标签对象
            var name = document.getElementById("username");
            var namev = name.value;
            // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术
            var patt = /^\w{5,12}$/;
        /*
         * test()方法用于测试某个字符串，是不是匹配我的规则 ，
         * 匹配就返回 true。不匹配就返回 false.
         * */
         var span = document.getElementById("userSpan");
            // innerHTML 表示起始标签和结束标签中的内容
            // innerHTML 这个属性可读，可写
        if (patt.test(namev)){
            //1.span.innerHTML="用户名合法";
            span.innerHTML="<img src=\"imgs/right.png\" width=\"18\" height=\"18\">";
        }else {
            //1.span.innerHTML="用户名不合法";
            span.innerHTML="<img src=\"imgs/wrong.png\" width=\"18\" height=\"18\">";
        }
    }
</script>
</head>
<body>
        用户名:<input type="text" id="username" value="wzg">
        <span id="userSpan" style="color: red"></span>
        <button onclick="onclikeFun()">校验</button>
</body>
</html>

getElementsByName 方法

<!DOCTYPE html>
<!--设置语言支持,en代表英语-->
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
            var name = document.getElementsByName("hobby");
            for (var i = 0; i < name.length; i++) {
                name[i].checked=true;
            }
        }
        function checkNo() {
            var name = document.getElementsByName("hobby");
            for (var i = 0; i < name.length; i++) {
                name[i].checked=false;
            }
        }
        function checkReverse() {
            var name = document.getElementsByName("hobby");
            for (var i = 0; i < name.length; i++) {
                name[i].checked=!name[i].checked;
            }
        }
    </script>
</head>
<body>
兴趣爱好：
        <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
        <input type="checkbox" name="hobby" value="java">Java
        <input type="checkbox" name="hobby" value="js">JavaScript
        <br/>
        <button onclick="checkAll()">全选</button>
        <button onclick="checkNo()">全不选</button>
        <button onclick="checkReverse()">反选</button>
</body>
</html>

getElementsByTagName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 全选
        function checkAll() {
// document.getElementsByTagName("input");
// 是按照指定标签名来进行查询并返回集合
// 这个集合的操作跟数组 一样
// 集合中都是 dom 对象
// 集合中元素顺序 是他们在 html 页面中从上到下的顺序。
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
        兴趣爱好：
        <input type="checkbox" value="cpp" checked="checked">C++
        <input type="checkbox" value="java">Java
        <input type="checkbox" value="js">JavaScript
        <br/>
        <button onclick="checkAll()">全选</button>
</body>
</html>

createElement

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            // 现在需要我们使用 js 代码来创建 html 标签，并显示在页面上
            // 标签的内容就是：<div>123456</div>
            var divObj = document.createElement("div"); // 在内存中 <div></div>
            var textNodeObj = document.createTextNode("123456"); 
            divObj.appendChild(textNodeObj); 
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>
</body>
</html>