<!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>
<style type="text/css">
.day
{
background-color: Green;
}
.night
{
background-color: Black;
}
.openlight
{
background-color: White;
}
.closelight
{
background-color: Black;
}
.tooltip
{
background-color: Yellow;
border-style: solid;
border-width: 1px;
border-color: Red;
}
</style>
</head>
<body class="openlight">
<div class="day">
这里是内容</div>
<input type="button" value="黑夜（用.class）" onclick="document.getElementById('divTest').class='night';" />
<input type="button" value="黑夜（用.className）" onclick="document.getElementById('divTest').className='night';" />
<input type="button" value="白天" onclick="document.getElementById('divTest').className='day';" /><br />
<script type="text/javascript">
function switchLight() {
var switchBtn = document.getElementById("switchBtn");
if (document.body.className == "openlight") {
document.body.className = "closelight"
switchBtn.value = "开灯";
}
else if (document.body.className == "closelight") {
document.body.className = "openlight"
switchBtn.value = "关灯";
}
}
</script>
<input type="button" onclick="initEvent()" value="初始化本控件" />
<input type="button" id="switchBtn" value="关灯" onclick="switchLight()" />
<input type="button" value="改变自己的（背景）颜色" onclick="this.style.background='Red'" />
<input type="button" value="改变自己的（前景）颜色" onclick="this.style.color='Red'" />
<input type="text" value="失去/获得焦点测试" onfocus="this.style.background='Green';this.value='获得焦点';"
onblur="this.style.background='Red';this.value='失去焦点';" /><br />
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByName("nextText");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onblur = inputOnBlur;
};
}
function inputOnBlur() {
//this
if (this.value.length == 0) {
this.style.background = "red";
} else {
this.style.background = "white";
}
}
</script>
<input type="text" name="nextText" /><font color="red">*</font><br />
<input type="text" name="nextText" /><font color="red">*</font><br />
<input type="text" name="nextText" /><font color="red">*</font><br />
<input type="text" name="nextText" /><font color="red">*</font><br />
<script type="text/javascript">
function indexOf(arr, element) { //判断元素在数组中的位置;alert(indexOf([1,3,5],3))
for (var i = 0; i < arr.length; i++) {
if (element == arr[i])
return i;
}
return -1;
}
function initRating() {
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onclick = tdOnClick;
td.style.cursor = "pointer";
}
}
function tdOnClick() {
this.style.background = "red";
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td");
var index = indexOf(tds, this);
for (var i = 0; i < tds.length; i++) {
if (i <= index)
tds[i].style.background = "red";
else tds[i].style.background = "white";
}
}
function initRating2() {
var tableRating = document.getElementById("tableRating2");
var tds = tableRating.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.style.cursor = "pointer";
td.onmouseover = function () {
var tableRating = document.getElementById("tableRating2");
var tds = tableRating.getElementsByTagName("td");
var index = indexOf(tds, this);
for (var i = 0; i < tds.length; i++) {
if (i <= index)
tds[i].innerText = "★";
else tds[i].innerText = "☆";
}
};
}
}
</script>
打分控件:<input type="button" onclick="initRating();" value="初始化打分控件" />
<table id="tableRating">
<tr><td>★</td><td>★</td><td>★</td><td>★</td><td>★</td></tr>
</table>
<br />
打分控件:<input type="button" onclick="initRating2();" value="初始化打分控件2" />
<table id="tableRating2">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
<br />
<script type="text/javascript">
function toggleDiv(cb) {
var toggleDiv = document.getElementById("div1");
if (cb.checked) {
toggleDiv.style.display = ""; //没有值表示显示
} else
toggleDiv.style.display = "none";
}
</script>
<input type="checkbox" id="checkBox" onclick="toggleDiv(this)" /><label for="cbShow">显示高级选项</label>
<div id="div1" style="display: none">
这里有一些高级选项</div>
<br />
<br />
<font color="Gredn">光标进入离开练习</font><br />
<a href="http://www.xtu.edu.cn" onmouseout="document.getElementById('xtuDiv').style.display='none'"
onmouseover="document.getElementById('xtuDiv').style.display=''">湘潭大学</a>
<div id="xtuDiv" style="display: none">
湘潭大学是<font color="red">老泽东同志亲笔题名并嘱托“一定要把湘潭大学办好”</font>的一所省部共建的重点大学<a href="http://www.xtu.edu.cn">www.xtu.edu.cn</a>
</div>
<br />
<!--
元素的position 样式值：static（无定位，显示在默认位置）、absolute（绝对定位）、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化， IE6不支持）、 relative （相对元素默认位置的定位）。如 果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top （上边缘距离）、 left（左边缘距离）两个样式值。left 、top 都是指的层的左上角的坐标
-->
pisition练习<br />
<input type="button" value="pisition练习(top:320px;left:300px)" style="position: absolute;
top: 320px; left: 300px" />
<script type="text/javascript">
//这里是图片跟踪鼠标显示，去掉/**/就可以了
/* document.onmousemove = function () {
var x = window.event.clientX;
var y = window.event.clientY;
if (!divMM) {
return;
}
divMM.style.left = x;
divMM.style.top = y;
}
*/
</script>
<div id="divMM" style="position: absolute">
<img src="E:/MM.jpeg" alt="MM" width="50px" height="50px" />
</div>
<br />
<br />
<br />
<script type="text/javascript">
function divInitEvent() {
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.top = window.event.clientY;
div.style.left = window.event.clientX;
div.innerHTML = "love<font color='Red'>LOVE红色</font>";
document.body.appendChild(div);
}
function linkMouseOut() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.className == "tooltip")
// div.style.display = "none"; //这里中介隐藏层，但是还是存在于内存，会造成内存泄漏
document.body.removeChild(div); //这里中介移除层，不会造成内存泄漏
}
}
</script>
<a href="http://www.xtu.edu.cn" title="本人就读的学校">湘潭大学</a> <a href="http://www.baidu.com"
title="百度搜索">百度</a> <a href="http://www.sina.com" title="博客新闻网">新浪网</a>
<input type="button" value="初始化本控件" onclick="divInitEvent()" />
<br />
<script type="text/javascript">
var intervalId;
function showDiv() {
intervalId = setInterval("inc()", 100);
}
function inc() {
var divxtu = document.getElementById('divxtu');
var oldwidth = divxtu.style.width;
oldwidth = parseInt(oldwidth, 10);
var oldheight = divxtu.style.height;
oldheight = parseInt(oldheight, 10);
if (oldwidth >= 200 && oldheight >= 200) {
clearInterval(intervalId);
} else if (oldwidth >= 200 && oldheight <= 200) {
oldheiht = oldheight + 10 + "px"
} else if (oldwidth <= 200 && oldheight >= 200) {
oldwidth = oldwidth + 10 + "px";
} else if (oldwidth <= 200 && oldheight <= 200) {
oldheiht = oldheight + 10 + "px"
oldheight = oldheight + 10 + "px";
}
divxtu.style.width = oldwidth;
divxtu.style.height = oldheight;
}
</script>
<div id="divxtu" style="width: 10px; height: 10px; border-style: solid; border-color: Red;
border-width: 1px">
湘潭大学湘潭大学湘潭大学
</div>
<input value="修改层的宽和高" type="button" onclick="var divxtu=document.getElementById('divxtu');divxtu.style.width='200px';divxtu.style.height='200px'" />
<input value="动态放大层的宽和高" type="button" onclick="showDiv()" />
</body>
</html>
分享到：
相关推荐
JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍，主要面向希望提升JavaScript客户端开发技能的程序员。DOM是Web页面的结构化表示，JavaScript通过DOM API可以...
【dom4j基础入门文档（SAX,DOM,XPATH）】 dom4j是一个流行的Java库，专门用于处理XML文档。相较于W3C DOM API，dom4j的优势在于它内置了本地XPath支持，使得XML文档的查询和操作更为简便。本文将深入介绍dom4j的...
**Ajax完全自学手册-DOM基础及高级DOM技术** 在Web开发中，DOM（Document Object Model）扮演着核心角色，它是HTML和XML文档的结构化表示，允许编程语言与页面内容进行交互。本手册深入浅出地讲解了DOM的基础概念...
#### 二、使用DOM4J创建XML文档 创建XML文档是DOM4J的基本操作之一。通常步骤如下： 1. **初始化文档**：使用`DocumentHelper.createDocument()`创建一个新的`Document`对象。 2. **添加根元素**：使用`Document`...
本书讲述了JavaScript、DOM和HTML5的基础知识，着重介绍了DOM编程技术背后的思路和原则：平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中的所有代码示例...
1. **DOM基础**：理解DOM是什么，它是如何工作的，以及如何通过JavaScript访问和遍历DOM树。 2. **元素操作**：学习选择、创建、添加、删除和修改HTML元素的方法。 3. **事件处理**：了解事件的基本概念，如何绑定和...
要精通DOM编程，首先要对JavaScript语言本身有足够的理解，包括变量、数据类型、运算符、函数、对象、事件等基础知识。 2. DOM概念：DOM（Document Object Model）是一个跨平台和语言独立的接口，允许程序和脚本...
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
#### 二、使用DOM4j创建XML文档 DOM4j提供了简单的方法来创建XML文档。以下是一些基本步骤： 1. **创建Document对象**：使用`DocumentHelper.createDocument()`方法创建一个Document对象。 ```java Document ...
3. DOM基础：文档对象模型（DOM）是一种独立于平台和语言的接口，允许程序和脚本动态地访问和更新文档内容、结构和样式。在本书中，将会详细讲解DOM的概念，以及如何利用JavaScript来操作DOM，包括获取、修改、添加...
### DOM基础和基本API知识点详解 #### 一、什么是DOM？ DOM（Document Object Model）是一种文档对象模型，它是W3C组织推荐的标准之一，用于表示和处理结构化的文档（如HTML或XML）。DOM提供了一种方式，使得程序...
【DOM4J基础与进阶】\n\nDOM4J是一个强大的Java XML API，它提供了对XML文档的全面处理能力，包括读取、创建、修改和解析。作为一款开源库，DOM4J在性能、功能和易用性上都有着出色的表现，这使得它在Java社区中得到...
总的来说，"JavaScript DOM编程艺术(第2版)"不仅教导了JavaScript的基础语法，更强调了如何利用JavaScript与DOM进行网页动态化开发。无论是对网页开发者还是对想要深入理解前端技术的人来说，这都是一本不可多得的...
1. **DOM基础**：讲解了DOM的基本概念，包括节点类型、节点关系以及如何通过JavaScript访问和操作这些节点。 2. **事件处理**：阐述了如何使用JavaScript处理用户的交互事件，如点击、鼠标移动等，并展示了事件冒泡...
总的来说，这个“基础测绘图幅管理”程序是一个基础但关键的工具，它涉及到了DWG图纸管理、DOM和DEM数据的查询与匹配，以及控制点的运用。尽管目前功能有限，但其潜力在于提升测绘作业的精确性和效率，为后续的地理...
二、DOM节点 在DOM树中，有几种主要类型的节点： 1. 元素节点：代表HTML或XML中的标签，如`<div>`、`<p>`等。 2. 文本节点：包含元素内的纯文本内容。 3. 属性节点：表示元素的属性，如`<img src="image.jpg">`中的`...
### 二、DOM4J创建XML 1. **创建Document**: 使用`DocumentFactory`创建一个空的`Document`实例，然后添加元素。 ```java DocumentFactory factory = DocumentFactory.getInstance(); Document document = ...
javascript入门必备，本书讲述了JavaScript和DOM的基础知识，但重点放在DOM编程技术背后的思路和原则：预留退路、循序渐进和以用户为中心等，这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中...