JavaScript基礎(chǔ)與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");
//給每個(gè)li標(biāo)簽注冊(cè)事件
for (var i=0; i<lis.length; i++) {
//鼠標(biāo)放在數(shù)字標(biāo)簽上時(shí)，圖片靜止
lis[i].onmouseover = function () {
//時(shí)間靜止
clearTimeout(t);
//拿到鼠標(biāo)放置的數(shù)字
b = this.innerHTML;
document.getElementById("photo").src = "images/photo_0" + b + ".jpg";
//清空數(shù)字對(duì)應(yīng)的樣式
clear();
this.className = "mouseover";
};
//鼠標(biāo)劃出時(shí)，圖片自動(dòng)播放
lis[i].onmouseout = function () {
n = b;
t = setTimeout("fun()",1500);
};
}
//圖片自動(dòng)播放
fun();
}
function fun() {
n ++;
if (n == 7) {
n = 1;
}
//每隔一秒更換圖片
document.getElementById("photo").src = "images/photo_0" + n + ".jpg";
//清空
clear();
//設(shè)置相應(yīng)的數(shù)字變色
document.getElementById("i"+n).className = "mouseover";
t = setTimeout("fun()",1500);
}
//清空樣式
function clear() {
//清空數(shù)字對(duì)應(yīng)的樣式
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
節(jié)點(diǎn)信息：
每個(gè)節(jié)點(diǎn)都有包含關(guān)于節(jié)點(diǎn)某些信息的屬性，這些屬性是：
- nodeName(節(jié)點(diǎn)名稱)
- nodeValue(節(jié)點(diǎn)值)
- nodeType(節(jié)點(diǎn)類型)
可以通過使用節(jié)點(diǎn)彼此間的關(guān)系在節(jié)點(diǎn)間進(jìn)行導(dǎo)航：
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
添加節(jié)點(diǎn)信息刪除節(jié)點(diǎn)信息(簡(jiǎn)易版)
<!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() {
//獲取輸入的內(nèi)容
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");
//創(chuàng)建新的表格行
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");
//添加內(nèi)容
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>
定義公有屬性和私有屬性
私有屬性
- 在函數(shù)中：用var定義
- 在函數(shù)外：用對(duì)象.屬性名定義
公有屬性
- 在函數(shù)中：用this.屬性名定義
- 在函數(shù)外：函數(shù)名.prototype.屬性名=默認(rèn)值;定義
function Person() {
var name = "lily";
}
Person.prototype.height = 190; //定義了一個(gè)公有屬性
var p = new Person(); //new一個(gè)對(duì)象
p.weight = 180; //函數(shù)外定義私有屬性
var p1 = new Person();
alert(p1.weight); //彈不出來(lái)，因?yàn)閣eight屬性是私有的
定義公有方法和私有方法
私有方法：
- 在函數(shù)中：采用var 方法名 = function() {}定義
- 在函數(shù)外：采用對(duì)象名.方法名 = function(){}定義
function Person() {
var show = function() {
alert("我是私有方法");
}
this.display = function() {
show(); //可以調(diào)用
}
}
Person.prototype.sing = function() {
alert("sing"); //公有方法
}
var p = new Person();
//show(); //調(diào)用不來(lái)，因?yàn)槭撬接械?p.eat = function() {
alert("eat"); //私有方法
}
公有方法：
- 在函數(shù)中，采用this.方法名 = function(){}定義
- 在函數(shù)外：采用函數(shù)名.prototype
靜態(tài)屬性和靜態(tài)方法
注意：定義靜態(tài)屬性和方法都用函數(shù)名來(lái)定義，調(diào)用的時(shí)候只能用函數(shù)名來(lái)調(diào)用，不能用對(duì)象名調(diào)用。
構(gòu)造函數(shù)（無(wú)參，有參）
注意：函數(shù)名不要重復(fù)，因?yàn)橄榷x的函數(shù)永遠(yuǎn)調(diào)用不到
直接用object或函數(shù)對(duì)象加屬性與方法
如何創(chuàng)建JavaScript對(duì)象
創(chuàng)建JavaScript對(duì)象的三種方式：
- 采用new 函數(shù)名()
- 采用new object()
- 采用json格式定義
var json = {"a":"中國(guó)","b":"美國(guó)","c":"韓國(guó)"};
alert(json.a); //拿到中國(guó)字符串
alert(json["b"]); //拿到美國(guó)字符串
var json = {1:"中國(guó)",2:"美國(guó)",3:"韓國(guó)"};
alert(json["2"]); //拿到美國(guó)字符串
//注意：不能使用json.2或者json."2"來(lái)獲取值
//如果想拿到所有的值，需要用foreach循環(huán)
for (var i in json) {
alert(i + ":" +json[i]); //打印所有的值，不能使用json.i
}