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>