记录我的旅程6之JavaScript Dom学习笔记
2012-07-15 13:39
405 查看
前言:下面我们接着旅程5继续我们的JavaScript Dom征程6,通过这篇博文的学习我们能够非常容易的操作层的变化,在这片博文中我也用了很多小例子来说明我所说的每个知识点,比如:显示隐藏层,动态加载层的宽度高度,还有跟着鼠标飞的小例子。学习就是举一反三的举动，所以当我们摘掉这些的时候我们可以自己在扩展写出很多网页上面经常使用的例子的。
编程控制层
(1) 控制层的显示
修改style.display,例子：切换层的显示
<script type="text/javascript">
function toggelDiv(cb) {
var div1 = document.getElementById("div1");
if (cb.checked) {
div1.style.display = ""; //display没有值就是显示
}
else {
div1.style.display = 'none'; //none不显示
} }
</script>
</head>
<body>
<input type="checkbox" id="cbShow" onclick="toggelDiv(this)" />
<label id="cbShow1">显示高级选项</label>
<div id="div1" style="display:none">韩迎龙</div>
</body>
(2) 案例1：鼠标放到一个超链接的时候,显示一个黄色背景,带图片的悬浮提示,鼠标离开就消失,提示:鼠标进入控件的事件是onmouseover,离开的事件是onmouseout。
<a href="http://www.cnblogs.com" onmouseout="document.getElementById('buDiv').style.display='none'"
onmouseover="document.getElementById('buDiv').style.display=''">博客园</a>
<div id="buDiv" style="display:none; border-color:Green; border-style:dotted; border-width:1px;">
<font color="red">韩迎龙</font>一定要好好学习.NET</div>
(3) IE中body的事件范围
IE中如果在body上面添加onclick，onmousemove等事件响应，那么如果页面没有满，则“body中最后一个元素(横向不限制)”的部分是无法响应事件的，必须使用代码在document上面监听那些事件，比如：document.onmousemove=MovePic;
(1) <body onclick="alert('hello')">
韩迎龙<br /><br /><br /><br /><br /><br /><br /><br />
</body>
(2) <script type="text/javascript">
function body() {
alert('hell0');
}
document.onclick = body;
</script>
元素的位置,大小单位
(1) 通过Dom读取元素的top，left，width,height等取到的值不是数字，而是”10px”这样的字符串，为这些属性设值IE可以是80,90这样的数字，FF必须是”80px”,”90%”等这样的字符串形式，为了兼容统一用字符串形式。
(2) 如果要修改元素的大小（宽度加10），则首先要取出元素的宽度，然后用ParseInt将宽度转换为数字，ParseInt可以将”20px”这样数字开头的包含其他内容的字符串解析为20，parseInt(“20px”,10)，也就是解析尽可能多的部分，然后加上一个值，再加上px赋值回去。
<script type="text/javascript">
function incWidth() {
var oldwidth = document.getElementById('div1').style.width;
oldwidth = parseInt(oldwidth, 10);
oldwidth += 50;
//oldwidth = oldwidth + 50; //50px50
document.getElementById("div1").style.width = oldwidth;
}
</script>
<input type="button" value="单位" style="width:50%" />
<div id="div1" style="width:50px; height:50px; border-style:dotted; border-width:1px; border-color:Red">好好学习.NET</div>
<input type="button" onclick="alert(document.getElementById('div1').style.width)" value="取值" />
<input type="button" onclick="document.getElementById('div1').style.width='100px'" value="设值" />
<input type="button" onclick="incWidth()" value="自动加宽" />
<input type="button" onclick="alert(parseInt('50px50px',10))" value="ParseInt" />
层的操作
(1) 元素的position样式值：static(无定位，显示在默认位置)，absolute(绝对定位)，fixed(相对于窗口的固定定位，位置不会随着浏览器的流动而变化，IE6不支持)，relative(相对元素默认位置的定位)，如果要通过代码修改元素的坐标则一般使用absolute,然后修改元素的top(上边缘距离)，left(左边缘距离)两个样式值
<input type="button" value="按钮" style="position:absolute; top:200px; left:200px" />
(2) 案例1：跟着鼠标飞的图片，提示：鼠标移动的事件是onmousemove(一边移动事件一边触发，而不是移动开始或者完成后才触发)，通过window.event的clientX，clientY属性获得鼠标的位置。
<script type="text/javascript">
document.onmousemove = function () {
var x = window.event.clientX;
var y = window.event.clientY;
var divFly = document.getElementById("divFly");
if (!divFly) {
return;
}
divFly.style.left = x; //left,top都是指的层的左上角坐标
divFly.style.top = y;
}
</script>
<body>
<input type="button" value="按钮" style="position:absolute; top:200px; left:200px" />
<div id="divFly" style="position:absolute">
<img src="png-0015.png" /><br />我是，你猜？
</div>
</body>
(3)案例2：鼠标放到一个超链接的时候，在鼠标的位置显示一个黄色背景，带图片的悬浮提示，鼠标离开的时候就消失，提示：鼠标进入控件的事件是onmouseover,鼠标离开控件的事件是：onmouseout。
<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"; //设定样式，美观，第二个作用是方便LinkMouseOut找到层
div.style.position = "absolute";
div.style.top = window.event.clientY; //指定坐标
div.style.left = window.event.clientX;
div.innerHTML = "经常浏览的网站<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") { //隐藏或者删除class='tooltip'的层
document.body.removeChild(div);
//div.style.display = "none"; //隐藏的话会造成内存泄露
}
}
}
</script>
<body onload="initEvent()">
<a href="http://www.cnblogs.com">博客园</a><br /><br /><br />
<a href="http://www.baidu.com">百度</a><br /><br /><br />
<a href="http://www.sina.com">新浪</a>
</body>
(4)案例3：点击按钮层动态增大。提示：英文连续单词不会自动换行的陷阱
<script type="text/javascript">
var showIntervalId;
function showDiv() {
showIntervalId = setInterval("inc()", 10);
}
function inc() {
var div1 = document.getElementById("div1");
var oldwidth = div1.style.width;
oldwidth = parseInt(oldwidth, 10);
var oldheight = div1.style.height;
oldheight = parseInt(oldheight, 10);
if (oldwidth >= 200) {
clearInterval(showIntervalId);
}
oldwidth += 10;
oldheight += 10;
div1.style.width = oldwidth + "px";
div1.style.height = oldheight + "px";
}
</script>
<div id="div1" style="width:10px; height:100px; border-style:solid; border-color:Red; border-width:1px;">
庄子做梦变成蝴蝶，蝴蝶做梦变成庄子，陈抟老祖一睡八百年，睡出大宋盛世清年，苏乞儿一睡，在梦中学的...
庄子做梦变成蝴蝶，蝴蝶做梦变成庄子，陈抟老祖一睡八百年，睡出大宋盛世清年，苏乞儿一睡，在梦中学的...
</div>
<input type="button" value="放大" onclick="var div1=document.getElementById('div1');
div1.style.width='200px';div1.style.height='200px'" />
<input type="button" value="动态放大" onclick="showDiv()" />
编程控制层
(1) 控制层的显示
修改style.display,例子：切换层的显示
<script type="text/javascript">
function toggelDiv(cb) {
var div1 = document.getElementById("div1");
if (cb.checked) {
div1.style.display = ""; //display没有值就是显示
}
else {
div1.style.display = 'none'; //none不显示
} }
</script>
</head>
<body>
<input type="checkbox" id="cbShow" onclick="toggelDiv(this)" />
<label id="cbShow1">显示高级选项</label>
<div id="div1" style="display:none">韩迎龙</div>
</body>
(2) 案例1：鼠标放到一个超链接的时候,显示一个黄色背景,带图片的悬浮提示,鼠标离开就消失,提示:鼠标进入控件的事件是onmouseover,离开的事件是onmouseout。
<a href="http://www.cnblogs.com" onmouseout="document.getElementById('buDiv').style.display='none'"
onmouseover="document.getElementById('buDiv').style.display=''">博客园</a>
<div id="buDiv" style="display:none; border-color:Green; border-style:dotted; border-width:1px;">
<font color="red">韩迎龙</font>一定要好好学习.NET</div>
(3) IE中body的事件范围
IE中如果在body上面添加onclick，onmousemove等事件响应，那么如果页面没有满，则“body中最后一个元素(横向不限制)”的部分是无法响应事件的，必须使用代码在document上面监听那些事件，比如：document.onmousemove=MovePic;
(1) <body onclick="alert('hello')">
韩迎龙<br /><br /><br /><br /><br /><br /><br /><br />
</body>
(2) <script type="text/javascript">
function body() {
alert('hell0');
}
document.onclick = body;
</script>
元素的位置,大小单位
(1) 通过Dom读取元素的top，left，width,height等取到的值不是数字，而是”10px”这样的字符串，为这些属性设值IE可以是80,90这样的数字，FF必须是”80px”,”90%”等这样的字符串形式，为了兼容统一用字符串形式。
(2) 如果要修改元素的大小（宽度加10），则首先要取出元素的宽度，然后用ParseInt将宽度转换为数字，ParseInt可以将”20px”这样数字开头的包含其他内容的字符串解析为20，parseInt(“20px”,10)，也就是解析尽可能多的部分，然后加上一个值，再加上px赋值回去。
<script type="text/javascript">
function incWidth() {
var oldwidth = document.getElementById('div1').style.width;
oldwidth = parseInt(oldwidth, 10);
oldwidth += 50;
//oldwidth = oldwidth + 50; //50px50
document.getElementById("div1").style.width = oldwidth;
}
</script>
<input type="button" value="单位" style="width:50%" />
<div id="div1" style="width:50px; height:50px; border-style:dotted; border-width:1px; border-color:Red">好好学习.NET</div>
<input type="button" onclick="alert(document.getElementById('div1').style.width)" value="取值" />
<input type="button" onclick="document.getElementById('div1').style.width='100px'" value="设值" />
<input type="button" onclick="incWidth()" value="自动加宽" />
<input type="button" onclick="alert(parseInt('50px50px',10))" value="ParseInt" />
层的操作
(1) 元素的position样式值：static(无定位，显示在默认位置)，absolute(绝对定位)，fixed(相对于窗口的固定定位，位置不会随着浏览器的流动而变化，IE6不支持)，relative(相对元素默认位置的定位)，如果要通过代码修改元素的坐标则一般使用absolute,然后修改元素的top(上边缘距离)，left(左边缘距离)两个样式值
<input type="button" value="按钮" style="position:absolute; top:200px; left:200px" />
(2) 案例1：跟着鼠标飞的图片，提示：鼠标移动的事件是onmousemove(一边移动事件一边触发，而不是移动开始或者完成后才触发)，通过window.event的clientX，clientY属性获得鼠标的位置。
<script type="text/javascript">
document.onmousemove = function () {
var x = window.event.clientX;
var y = window.event.clientY;
var divFly = document.getElementById("divFly");
if (!divFly) {
return;
}
divFly.style.left = x; //left,top都是指的层的左上角坐标
divFly.style.top = y;
}
</script>
<body>
<input type="button" value="按钮" style="position:absolute; top:200px; left:200px" />
<div id="divFly" style="position:absolute">
<img src="png-0015.png" /><br />我是，你猜？
</div>
</body>
(3)案例2：鼠标放到一个超链接的时候，在鼠标的位置显示一个黄色背景，带图片的悬浮提示，鼠标离开的时候就消失，提示：鼠标进入控件的事件是onmouseover,鼠标离开控件的事件是：onmouseout。
<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"; //设定样式，美观，第二个作用是方便LinkMouseOut找到层
div.style.position = "absolute";
div.style.top = window.event.clientY; //指定坐标
div.style.left = window.event.clientX;
div.innerHTML = "经常浏览的网站<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") { //隐藏或者删除class='tooltip'的层
document.body.removeChild(div);
//div.style.display = "none"; //隐藏的话会造成内存泄露
}
}
}
</script>
<body onload="initEvent()">
<a href="http://www.cnblogs.com">博客园</a><br /><br /><br />
<a href="http://www.baidu.com">百度</a><br /><br /><br />
<a href="http://www.sina.com">新浪</a>
</body>
(4)案例3：点击按钮层动态增大。提示：英文连续单词不会自动换行的陷阱
<script type="text/javascript">
var showIntervalId;
function showDiv() {
showIntervalId = setInterval("inc()", 10);
}
function inc() {
var div1 = document.getElementById("div1");
var oldwidth = div1.style.width;
oldwidth = parseInt(oldwidth, 10);
var oldheight = div1.style.height;
oldheight = parseInt(oldheight, 10);
if (oldwidth >= 200) {
clearInterval(showIntervalId);
}
oldwidth += 10;
oldheight += 10;
div1.style.width = oldwidth + "px";
div1.style.height = oldheight + "px";
}
</script>
<div id="div1" style="width:10px; height:100px; border-style:solid; border-color:Red; border-width:1px;">
庄子做梦变成蝴蝶，蝴蝶做梦变成庄子，陈抟老祖一睡八百年，睡出大宋盛世清年，苏乞儿一睡，在梦中学的...
庄子做梦变成蝴蝶，蝴蝶做梦变成庄子，陈抟老祖一睡八百年，睡出大宋盛世清年，苏乞儿一睡，在梦中学的...
</div>
<input type="button" value="放大" onclick="var div1=document.getElementById('div1');
div1.style.width='200px';div1.style.height='200px'" />
<input type="button" value="动态放大" onclick="showDiv()" />
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 记录我的旅程3之JavaScript Dom学习笔记
- 记录我的旅程10之JavaScript Dom学习笔记
- 记录我的旅程5之JavaScript Dom学习笔记
- 记录我的旅程8之JavaScript Dom学习笔记
- 记录我的旅程1之JavaScript Dom学习笔记
- 记录我的旅程2之JavaScript Dom学习笔记
- 记录我的旅程7之JavaScript Dom学习笔记
- JavaScript学习笔记记录我的旅程
- JavaScript学习笔记记录我的旅程
- JavaScript学习笔记记录我的旅程
- 【第三章-DOM】javascript DOM 编程艺术-学习笔记
- 【前端学习笔记】深入学习Javascript:DOM和BOM的方法及属性总结
- JavaScript DOM编程 学习笔记-替换节点
- JavaScript高级程序设计 DOM学习笔记
- JavaScript DOM 编程艺术学习笔记（一）：静态标记
- 高性能Javascript 记录代码运行时间学习笔记
- JavaScript DOM编程 学习笔记-select级联选择
- JavaScript_DOM编程艺术第二版学习笔记-第9章
- 学习笔记---Javascript - DOM 及 简版JS二级联动
- javascript学习笔记3：DOM操作之选取文档元素