JavaScript基础与DOM
键盘按下与松开
onkeypress:键盘按下并松开
onkeydown:键盘按下未松开
onkeyup:键盘按下正松开
图片轮播
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
li{
list-style:none;
position:relative;
left:570px;
margin-left:20px;
border:1px solid black;
width:15px;
float:left;
}
.mouseover{
background-color:red;
}
</style>
</head>
<script type="text/javascript">
<!--
var n = 0;
var t = 0;
var b = 0;
function init() {
var lis = document.getElementsByTagName("li");
//给每个li标签注册事件
for (var i=0; i<lis.length; i++) {
//鼠标放在数字标签上时，图片静止
lis[i].onmouseover = function () {
//时间静止
clearTimeout(t);
//拿到鼠标放置的数字
b = this.innerHTML;
document.getElementById("photo").src = "images/photo_0" + b + ".jpg";
//清空数字对应的样式
clear();
this.className = "mouseover";
};
//鼠标划出时，图片自动播放
lis[i].onmouseout = function () {
n = b;
t = setTimeout("fun()",1500);
};
}
//图片自动播放
fun();
}
function fun() {
n ++;
if (n == 7) {
n = 1;
}
//每隔一秒更换图片
document.getElementById("photo").src = "images/photo_0" + n + ".jpg";
//清空
clear();
//设置相应的数字变色
document.getElementById("i"+n).className = "mouseover";
t = setTimeout("fun()",1500);
}
//清空样式
function clear() {
//清空数字对应的样式
var lis = document.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].className = "";
}
}
//-->
</script>
<body onload = "init()">
<div id="image" class="image" align = "center">
<img id = "photo" src="images/photo_01.jpg" width="300px" height="300px" border="0">
</div>
<ol>
<li id = "i1">1</li>
<li id = "i2">2</li>
<li id = "i3">3</li>
<li id = "i4">4</li>
<li id = "i5">5</li>
<li id = "i6">6</li>
</ol>
</body>
</html>
xml Dom
节点信息：
每个节点都有包含关于节点某些信息的属性，这些属性是：
- nodeName(节点名称)
- nodeValue(节点值)
- nodeType(节点类型)
可以通过使用节点彼此间的关系在节点间进行导航：
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
添加节点信息删除节点信息(简易版)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
</style>
</head>
<script type="text/javascript">
<!--
function add() {
//获取输入的内容
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var age = document.getElementById("age").value;
if (name == "") {
alert("姓名不能为空！");
document.getElementById("name").focus();
return;
}
var tables = document.getElementsByTagName("table");
//创建新的表格行
var tr = document.createElement("tr");
var nameTd = document.createElement("td");
var emailTd= document.createElement("td");
var ageTd = document.createElement("td");
var option = document.createElement("td");
//添加内容
nameTd.innerHTML = name;
emailTd.innerHTML =email;
ageTd.innerHTML = age;
option.innerHTML = "<input type='button' value='删除' onclick='deleteTr(this)'>";
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(ageTd);
tr.appendChild(option);
//将tr添加到tbody中？？？？？？？？？？？
tables[1].appendChild(tr);
}
//删除操作
function deleteTr(option) {
var table = option.parentNode.parentNode.parentNode;
var tr = option.parentNode.parentNode;
table.removeChild(tr);
}
//-->
</script>
<body>
<table width=600 height=100 align=center>
<tr>
<td>姓名:</td>
<td><input type="text" name="name" id="name"></td>
<td>邮箱：</td>
<td><input type="text" name="email" id="email"></td>
<td>年龄：</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td align="center" colspan="6"><input type="button" value="添加" onclick="add()"></td>
</tr>
</table>
<br/><br/><br/><br/><br/><br/>
<hr>
<table width="500" border="1" align="center">
<tr>
<td>姓名</td>
<td>邮箱</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
</body>
</html>
定义公有属性和私有属性
私有属性
- 在函数中：用var定义
- 在函数外：用对象.属性名定义
公有属性
- 在函数中：用this.属性名定义
- 在函数外：函数名.prototype.属性名=默认值;定义
function Person() {
var name = "lily";
}
Person.prototype.height = 190; //定义了一个公有属性
var p = new Person(); //new一个对象
p.weight = 180; //函数外定义私有属性
var p1 = new Person();
alert(p1.weight); //弹不出来，因为weight属性是私有的
定义公有方法和私有方法
私有方法：
- 在函数中：采用var 方法名 = function() {}定义
- 在函数外：采用对象名.方法名 = function(){}定义
function Person() {
var show = function() {
alert("我是私有方法");
}
this.display = function() {
show(); //可以调用
}
}
Person.prototype.sing = function() {
alert("sing"); //公有方法
}
var p = new Person();
//show(); //调用不来，因为是私有的
p.eat = function() {
alert("eat"); //私有方法
}
公有方法：
- 在函数中，采用this.方法名 = function(){}定义
- 在函数外：采用函数名.prototype
静态属性和静态方法
注意：定义静态属性和方法都用函数名来定义，调用的时候只能用函数名来调用，不能用对象名调用。
构造函数（无参，有参）
注意：函数名不要重复，因为先定义的函数永远调用不到
直接用object或函数对象加属性与方法
如何创建JavaScript对象
创建JavaScript对象的三种方式：
- 采用new 函数名()
- 采用new object()
- 采用json格式定义
var json = {"a":"中国","b":"美国","c":"韩国"};
alert(json.a); //拿到中国字符串
alert(json["b"]); //拿到美国字符串
var json = {1:"中国",2:"美国",3:"韩国"};
alert(json["2"]); //拿到美国字符串
//注意：不能使用json.2或者json."2"来获取值
//如果想拿到所有的值，需要用foreach循环
for (var i in json) {
alert(i + ":" +json[i]); //打印所有的值，不能使用json.i
}