Dom的学习随笔四
学习Dom都有二十天了，断断续续的，一直没时间整理笔记，趁现在有空整理下笔记……
一、动态创建表格，不兼容IE6及以下的版本~~
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动态创建表格（代码不兼容IE6）</title>
<script type="text/javascript">
function LoadData() {//方法一
var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "淘宝": "http://www.taobao.com" };
var tableLinks = document.getElementById("tableLinks");
for (var key in data) {
var value = data[key];
var tr = document.createElement("tr");
var td1 = document.createElement("td");//先创建td,在td中放入内容，再加入tr
td1.innerText = key;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
tr.appendChild(td2);
//tableLinks.appendChild(tr);
tableLinks.tBodies[0].appendChild(tr);//并且在<table>标签里要加上<tbody></tbody>
}
} //动态产生的元素，查看源代码是看不到的。但可以通过DebugBar->Dom->Document->HTML可以看到
function LoadData2() {//方法二
var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "淘宝": "http://www.taobao.com" };
var tableLinks2 = document.getElementById("tableLinks2");
for (var key in data) {
var value = data[key];
var tr = tableLinks2.insertRow(-1);//在表格最后插入一行，并且返回插入行的对象。联想Winform中TreeNode node=treeNode.AddNode("hello")
var td1 = tr.insertCell(-1);//在tr中增加一个td，并且返回增加的td，然后td中放入内容
td1.innerText = key; //FF不支持innerText
var td2 = tr.insertCell(-1);
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";//也可以用createElement
}
}
</script>
</head>
<body>
<table id="tableLinks">
<tbody></tbody></table>
<table id="tableLinks2"></table>
<input type="button" value="加载数据" onclick="LoadData()" />
<input type="button" value="加载数据2" onclick="LoadData2()" />
</body>
</html>
二、评分控件的创建：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>评分控件的创建</title>
<script type="text/javascript">
function indexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function initEvent() {
//给所有td增加onclick事件
var tableRatin = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td"); //取得tableRating下的所有td，不处理其它table
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onclick = TdOnClick;
td.style.cursor = "pointer";//让鼠标放到td上显示手形状的光标
}
}
function TdOnClick() {
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td"); //取得tableRating下的所有td，不处理其它table
var index = indexOf(tds, this);
for (var i = 0; i <= index; i++) {
var td = tds[i];
td.style.background = "red";
}
for (var i = index + 1; i < tds.length; i++) {
var td = tds[i];
td.style.background = "white";
}
}
</script>
</head>
<body onload="initEvent();">
<table id="tableRating">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
三、评分控件的改进（编程控制层）：
元素的position样式值：static（无定位，显示在默认位置）、absolute(绝对位置)、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、relative(相对元素默认位置的定位)。如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top（上边缘距离）、left（左边缘距离）两个样式值。
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>编程控制层练习</title>
<script type="text/javascript">
function indexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
}
function initEvent() {
var rating = document.getElementById("rating");
var tds = rating.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.style.cursor = 'pointer';
td.onmouseover = function () {
//不用担心和initEvent()中的rating、tds变量冲突，因为他们是不同函数，只是写在了一起而已
var rating = document.getElementById("rating");
var tds = rating.getElementsByTagName("td");
var index = indexOf(tds, this);
for (var i = 0; i <= index; i++) {
tds[i].innerText = "★";
}
for (var i = index + 1; i < tds.length; i++) {
tds[i].innerText = "☆";
}
}
}
}
</script>
</head>
<body onload="initEvent()">
<table id="rating"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table>
</body>
</html>
四、超链接自定义ToolTip（当鼠标移到超链接上时显示提示信息，详细介绍见代码注释）
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超链接自定义ToolTip</title>
<style type="text/css">
.tooltip
{
background-color:Yellow;
border-style:solid;
border-width:1px;
border-color:Red;
}
</style>
<script type="text/javascript">
function initEvent() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.onmouseover = linkMouseOver;
link.onmouseout = linkMouseOut;
}
}
function linkMouseOver() {
var div = document.createElement("div"); //动态创建层
div.className="tooltip";
div.style.position = "absolute";
div.style.left = window.event.clientX;
div.style.top = window.event.clientY;
div.innerHTML = "lasjdfijasdf<font color='red'>红色字体</font>";
document.body.appendChild(div); //createElement只是内存模型，只有appendChild到一个可视元素中才会被显示出来
}
function linkMouseOut() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.className == "tooltip") {
document.body.removeChild(div);
//div.style.display = "none";//隐藏的话会造成内存的泄漏
}
}
}
</script>
</head>
<body onload="initEvent()">
<a href="http://www.sina.com/" title="最大的华人社区">新浪网</a><br /><br /><br />
<a href="http://www.sina.com/" title="中国新闻网">新华网</a><br /><br /><br />
<a href="http://www.sina.com/" title="搜狐搜狗啥都搜">搜狐网</a><br /><br /><br />
</body>
</html>
五、事件中的this：
除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement.
例子：在页面里放5个普通按钮，当点击按钮时显示按钮的名称(即按钮的Value)。其中，当点击Logan3按钮时弹出的消息提示框为：undefined.
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件中的this</title>
<script type="text/javascript">
function btnClick3() {//在事件响应函数调用的函数里就不能通过this获得事件对象了
alert(this.value);
}
function btnClick4(btn) {//在事件响应函数中将this传过来就可以
alert(btn.value);
}
function btnClick5() {//this与event.srcElement语义是不一样的，this就表示当前监听事件的这个对象，event.srcElement是引发事件的对象
alert(event.srcElement.value);
}
</script>
</head>
<body>
<input type="button" value="Logan" onclick="alert(event.srcElement.value)" />
<input type="button" value="Logan2" onclick="alert(this.value)" />
<input type="button" value="Logan3" onclick="btnClick3()" />
<input type="button" value="Logan4" onclick="btnClick4(this)" />
<input type="button" value="Logan5" onclick="btnClick5()" />
</body>
</html>
六、输入文本框的提示效果：
有一个搜索文本框，当焦点不在文本框中的时候，如果文本框没有值，则文本框中显示灰色文本（Gray）的“输入搜索关键词”，否则显示用户输入的值；焦点在文本框中时如果之前显示“输入搜索关键词”则清空文本框的值，并且将文本修改为黑色。编程提示：onfocus的时候如果文本框中的值为"输入搜索关键词"，则清空文本框，并且恢复文本框的颜色为Black；onblur的时候如果文本框中没有值，则将文本框的值设置为“输入搜索关键词”并且文本框中显示灰色文本.(style.color='Gray');
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>搜索框效果</title>
<script type="text/javascript">
function inputBlur(keyword) {
if (keyword.value.length <= 0) {
keyword.value = "请输入搜索关键词";
keyword.style.color = 'Gray';
}
}
function inputFocus(keyword) {
//var keyword = document.getElementById("keyword");把this传给两个方法，省去了getElementById依赖id
if (keyword.value == "请输入搜索关键词") {
keyword.value = "";
keyword.style.color = 'Black';
}
}
</script>
</head>
<body>
<input onblur="inputBlur(this)" onfocus="inputFocus(this)" id="keyword" value="请输入搜索关键词" style="color:Gray" />
<input type="button" value="搜索" />
<input id="Text1" /><input id="Text2" />
</body>
</html>
笔记整理中，待续……
posted on 2012-01-18 14:19 Gelivable【IT随笔】 阅读(312) 评论(0) 编辑 收藏 举报
