web第五课html课堂笔记

最新推荐文章于 2022-06-01 22:32:41 发布

jjfly999

最新推荐文章于 2022-06-01 22:32:41 发布

阅读量732

点赞数 2

分类专栏： 2018年前的JAVA 文章标签： web javascript

本文链接：https://blog.csdn.net/jjfly999/article/details/51591123

版权

2018年前的JAVA 专栏收录该内容

134 篇文章 0 订阅

订阅专栏

javascript放在页面最后：

JavaScript脚本语言块最好放在整个网页页面的最后面，因为这样做可以让网页优先加载网页内容，满足客户的加载速度需求，然后再刷出剩下的动态效果。

html知识点：

firstChild:第一个节点

<body>
	<span id="h1"><a href="#">互联网时代——连接一切</a></span>
	<input type="button" value="戳我" οnclick="show();"/>
</body>
</html>
<script type="text/javascript">
	function show(){
		var span = document.getElementById("h1");
		alert(span.firstChild.firstChild.nodeValue);
	}
</script>

调用两次第一节点，可以得到标签内容，然后调用nodeValue可以获取标签内容.

节点的更换位置方法：

		喜欢的城市：<br/>
		<ul id="city">
			<li id="bj" value="beijing" οnclick="change();">北京</li>
			<li>上海</li>
			<li>天津</li>
		</ul>
		喜欢的游戏:<br/>
		<ul id="game">
			<li id="fk" value="fankong">反恐精英</li>
			<li>极品飞车</li>
		</ul>

	function change(){
		alert("进入了chang()");
		var citynode = document.getElementById("city");
		var gamenode = document.getElementById("game");
		var bjnode = document.getElementById("bj");
		var fknode = document.getElementById("fk");
		citynode.replaceChild(fknode,bjnode);
	}

window.onload = funciton(){}是放在最后执行的：

<script type="text/javascript">
	window.onload = function(){
		alert("最后完成的window.onload");
	}
	function change(){
		alert("进入了chang()");
		var citynode = document.getElementById("city");
		var gamenode = document.getElementById("game");
		var bjnode = document.getElementById("bj");
		var fknode = document.getElementById("fk");
		citynode.replaceChild(fknode,bjnode);
	}
	
	function show(){
		var span = document.getElementById("h1");
// 		alert(span.firstChild.firstChild.nodeValue);
// 		alert(span.innerHTML);
	}
	alert("测试window.onload是否最后执行，本条测试语句放在了最后...");
</script>

往select里面添加一个option:

<body>
	<select id="s1">
		<option value="销售部">销售部</option>
		<option value="财务部">财务部</option>
		<option value="行政部">行政部</option>
		<option value="开发部">开发部</option>
	</select>
	<input οnclick="addNode();"type="button"value="添加"/>
</body>
</html>
<script type="text/javascript">
	function addNode(){
		var selObj = document.getElementById("s1");
		var optObj = document.createElement("option");
		optObj.setAttribute("value","小卖部");
		optObj.innerHTML = "小卖部";
		selObj.appendChild(optObj);
	}
</script>

获取输入信息制定表格：

	添加新用户<br/>
	用户名:<input type="text" id="name"/><br/>
	年龄:    <input type="text" id="age"/><br/>
	邮箱:    <input type="text" id="email"/><br/>
	<input type="button" οnclick="add1();" value="添加1"/>
	<input type="button" οnclick="add2();" value="添加2"/>
	<table id="t1">
		<tr><th>用户名</th><th>年龄</th><th>邮箱</th><th>操作</th></tr>
	</table>
	<script type="text/javascript">
		function add1(){
			var tableObj = document.getElementById("t1");
			var nameObj = document.getElementById("name");
			var ageObj = document.getElementById("age");
			var emailObj = document.getElementById("email");
			var rowObj = document.createElement("tr");
			rowObj.innerHTML = "<th>"+nameObj.value+"</th><th>"+age.value+"</th><th>"+email.value+"</th><th><input type='button' value='删除'οnclick='del(this);'/></th>";
			tableObj.appendChild(rowObj);
		}

		function del(it){
			it.parentNode.parentNode.parentNode.removeChild(it.parentNode.parentNode);
		}

另一种实现方式:

		function add2(it){
			var t1 = document.getElementById("t1");
			var tr = t1.insertRow();
			var nameCell = tr.insertCell();
			var ageCell = tr.insertCell();
			var emailCell = tr.insertCell();
			var dealCell = tr.insertCell();
			
			var nameObj = document.getElementById("name");
			var ageObj = document.getElementById("age");
			var emailObj = document.getElementById("email");
			
			nameCell.innerHTML = nameObj.value;
			ageCell.innerHTML = ageObj.value;
			emailCell.innerHTML = emailObj.value;
			dealCell.innerHTML = "<input type='button' value='删除' οnclick='del(this);'/>";
		}

多选框的全选，全不选与反选：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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 here</title>
</head>
<body>
	<input type="checkbox" value="绿茶"/>绿茶
	<input type="checkbox" value="红茶"/>红茶
	<input type="checkbox" value="可乐"/>可乐
	<input type="checkbox" value="雪碧"/>雪碧
	<br/>
	<input type="button" value="全选" id="selectAll" οnclick="selectAll();"/>
	<input type="button" value="全不选" id="selectNotAll" οnclick="selectNotAll();"/>
	<input type="button" value="反选" id="selectInverse" οnclick="selectInverse();"/>
	
</body>
</html>
<script type="text/javascript">
	function selectAll(){
		var inputArr = document.getElementsByTagName("input");
		for(var i=0;i<inputArr.length;i++){
			inputArr[i].checked = true;
		}
	}
	function selectNotAll(){
		var inputArr = document.getElementsByTagName("input");
		for(var i=0;i<inputArr.length;i++){
			inputArr[i].checked = false;
		}
	}
	function selectInverse(){
		var inputArr = document.getElementsByTagName("input");
		for(var i=0;i<inputArr.length;i++){
			inputArr[i].checked = !inputArr[i].checked;
		}
	}
</script>

jjfly999

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web第五课html课堂笔记

window.onload执行顺序，javascript放html页面最后的原因，全选与反选的web实现,firstChild节点的运用获取用户输入信息、表格的动态制作，,web多选框的全选、全不选、反选...
复制链接

扫一扫