web第五课html课堂笔记

来源：互联网发布：淘宝助理看不到订单编辑：程序博客网时间：2024/06/06 04:09

javascript放在页面最后：

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

html知识点：

firstChild:第一个节点

<body><span id="h1"><a href="#">互联网时代——连接一切</a></span><input type="button" value="戳我" onclick="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" onclick="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 onclick="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" onclick="add1();" value="添加1"/><input type="button" onclick="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='删除'onclick='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='删除' onclick='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" onclick="selectAll();"/><input type="button" value="全不选" id="selectNotAll" onclick="selectNotAll();"/><input type="button" value="反选" id="selectInverse" onclick="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>

2 0