`
holoblog
  • 浏览: 1264213 次
博客专栏
E0fcf0b7-6756-3051-9a54-90b4324c9940
SQL Server 20...
浏览量：19539
文章分类
社区版块
存档分类
最新评论

DOM 基础（三）

 
阅读更多

<!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 initLogin() {
var divLogin = document.getElementById("divLogin");
divLogin.style.display = "";
}
function closeLogin() {
var divLogin = document.getElementById("divLogin");
divLogin.style.display ="none";
}
</script>
</head>
<body onload="initPhotos();initUL();">
<input type="button" value="登录" onclick="initLogin()"/><br />
<div id="divLogin" style="width:250px;display:none;position:absolute;border-style:solid;border-color:Blue;border-width:2px;color:Black">
<img src="images/cc.jpg" alt="关闭" style="float:right" onclick="closeLogin()" />
<table id="tableLogin">
<tr><td><label for="username">用户名：</label></td><td><input type="text" id="username"/></td></tr>
<tr><td><label for="password">密&nbsp;码：</label></td><td><input type="password" id="password"/></td></tr>
</table>
</div>
<br />
<script type="text/javascript">
function showDetails() {
var details = document.getElementById("details");
details.style.display = "";
}
function closeButton() {
var details = document.getElementById("divDetails");
details.style.display = "none";
}
function initPhotos() {
var data = {
"images/mm_small.jpg": ["images/MM.jpeg", "MM", "175cm"],
"images/00_small.jpg": ["images/00.jpg", "小甜甜", "165cm"],
"images/01_small.jpg": ["images/01.jpg", "小玉玉", "175cm"],
"images/02_small.jpg": ["images/02.jpg", "小猫猫", "185cm"]
};
for (var smallPhotoPath in data) {
var smallImg = document.createElement("img");
smallImg.src = smallPhotoPath;
var detailData = data[smallPhotoPath];
smallImg.setAttribute("imageSrc", detailData[0]);
smallImg.setAttribute("detailHeight", detailData[2]);
smallImg.setAttribute("detailName", detailData[1]);
smallImg.alt = "MM";
smallImg.onmouseover = function () {
document.getElementById("imgID").src = this.getAttribute("imageSrc");
document.getElementById("detailHeight").innerHTML = this.getAttribute("detailHeight");
document.getElementById("detailName").innerHTML = this.getAttribute("detailName");

var divDetails = document.getElementById("divDetails");
divDetails.style.display = "";
}
smallImg.onmouseout = function () {
var divDetails = document.getElementById("divDetails");
// divDetails.style.display = "none";
}
document.body.appendChild(smallImg);
};
}
</script>
<div id="divDetails" style="display:none;">
<img src="" id="imgID" alt="MM" style="width:350px;height:350px"/>
<p id="detailHeight"></p>
<p id="detailName"></p>
<input type="button" onclick="closeButton()" value="关闭"/>
</div>

<script type="text/javascript">
function initUL() {
var ulName = document.getElementById("ulName");
var lis = ulName.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
li.onmouseover = function () {
var ulName = document.getElementById("ulName");
var lis = ulName.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
if (li == this) {
li.style.fontSize = 30;
li.style.background = "red";
} else {
li.style.fontSize = 14;
li.style.background = "white";
}
}
}
}
}
</script>
<ul id="ulName">
<li>我们的</li>
<li>你们的</li>
<li>她们的</li>
<li>他们的</li>
</ul>

<script type="text/javascript">
function searchOnfoucs() {
var searchText = document.getElementById("searchText");
if (searchText.value == "输入搜索关键词") {
searchText.value = "";
searchText.style.color = "Black";
}
}
function searchBlur() {
var searchText = document.getElementById("searchText");
if (searchText.value.length <= 0) {
searchText.value = "输入搜索关键词";
searchText.style.color = "Gray";
}
}
</script>
<input value="输入搜索关键词" onblur="searchBlur()" onfocus="searchOnfoucs()" type="text" id="searchText" style="color:Gray;"/><input type="button" value="开始搜索" onclick=""/><br />
</body>
</html>

分享到：
| DOM 基础（二）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DOM基础.pdf

    文档对象模型（DOM，Document Object Model）是Web开发...以上是DOM基础中涉及到的关键知识点，它们构成了网页动态交互和内容管理的基础。通过深入理解和应用这些知识点，可以有效地控制网页元素的动态行为和样式表现。

    dom4j基础入门文档（SAX,DOM,XPATH）

    【dom4j基础入门文档（SAX,DOM,XPATH）】 dom4j是一个流行的Java库，专门用于处理XML文档。相较于W3C DOM API，dom4j的优势在于它内置了本地XPath支持，使得XML文档的查询和操作更为简便。本文将深入介绍dom4j的...

    05-DOM基础.pptx

    总的来说，DOM基础是JavaScript中进行动态网页开发的关键技能，通过熟练掌握DOM节点的操作和元素属性的控制，开发者可以实现丰富的交互效果和动态内容更新，提升用户体验。对于想要深入学习JavaScript和Web开发的人...

    java基础学习dom资料及jar包

    Java基础学习DOM资料及JAR包是一套针对Java初学者和开发者的重要资源，它涵盖了Java编程语言的基础知识以及DOM（Document Object Model）解析技术。DOM是处理XML文档的标准API，对于理解和操作XML数据至关重要，特别...

    Ajax完全自学手册-DOM基础及高级DOM技术（word版，附源码）

    **Ajax完全自学手册-DOM基础及高级DOM技术** 在Web开发中，DOM（Document Object Model）扮演着核心角色，它是HTML和XML文档的结构化表示，允许编程语言与页面内容进行交互。本手册深入浅出地讲解了DOM的基础概念...

    DOM4J从基础到精通

    #### 三、使用DOM4J解析XML文件 DOM4J提供了两种解析XML的方式：`SAXReader`和`DOMReader`。 - **SAXReader**：基于SAX解析器构建DOM4J树。可以从多种输入源构建DOM4J树，如XML文件。 - **DOMReader**：从一个已经...

    JavaScript 第三章 DOM编程基础 使用document对象

    本章将重点讨论DOM（Document Object Model）编程基础，特别是如何使用`document`对象来实现这一目标。DOM是HTML或XML文档的一种结构化表示，它允许程序和脚本动态更新、添加和删除页面元素。 首先，`document`对象...

    dom4j从基础到精通.pdf

    #### 三、使用DOM4j解析XML文件 DOM4j提供了多种方式来解析XML文件，其中最常用的是构建DOM4j树和使用XPath进行查询。 1. **构建DOM4j树**：可以使用SAXReader类来读取XML文件，并将其转换为DOM4j树。 ```java ...

    DOM基础和基本API.txt

    ### DOM基础和基本API知识点详解 #### 一、什么是DOM？ DOM（Document Object Model）是一种文档对象模型，它是W3C组织推荐的标准之一，用于表示和处理结构化的文档（如HTML或XML）。DOM提供了一种方式，使得程序...

    dom4j从基础到精通

    【DOM4J基础与进阶】\n\nDOM4J是一个强大的Java XML API，它提供了对XML文档的全面处理能力，包括读取、创建、修改和解析。作为一款开源库，DOM4J在性能、功能和易用性上都有着出色的表现，这使得它在Java社区中得到...

    dom基础_day3.zip

    三、操作DOM节点 DOM提供了一系列方法来操作这些节点： 1. `getElementById()`: 根据ID获取元素。 2. `getElementsByClassName()`和`getElementsByTagName()`: 分别根据类名和标签名获取元素集合。 3. `...

    dom4j使用教程+dom4j.jar

    ### 三、DOM4J修改XML 1. **修改元素内容**: 使用`Element`的`setText()`方法改变元素的文本内容。 ```java element.setText("new text content"); ``` 2. **修改属性值**: 调用`Attribute`的`setValue()`方法...

    基础测绘图幅管理，DWG DOM DEM 控制点

    总的来说，这个“基础测绘图幅管理”程序是一个基础但关键的工具，它涉及到了DWG图纸管理、DOM和DEM数据的查询与匹配，以及控制点的运用。尽管目前功能有限，但其潜力在于提升测绘作业的精确性和效率，为后续的地理...

    JavaScript基础和DOM API函数

    一、JavaScript基础 1. 位置：JavaScript代码可以放置在HTML的`&lt;head&gt;`或`&lt;body&gt;`标签内，通常`&lt;head&gt;`内的脚本定义全局函数，而`&lt;body&gt;`内的脚本处理页面加载后的交互。此外，通过`&lt;script&gt;`标签的`src`属性，可以...

    DOM与DOM4J的实战操作

    首先，文档中展示了Java代码来创建DOM操作的基础结构，包括引入必要的类和方法： ```java import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml....

    dom4j-1.6.1 + w3cschool.CHM离线帮助文档

    dom4j 目录的介绍： 1）docs 是文档目录 2）如何查 Dom4j 的文档 3）Dom4j 快速入门 2）lib 目录 ...第三方的解析： jdom 在 dom 基础上进行了封装、 dom4j 又对 jdom 进行了封装。 pull 主要用在 And

    DOM编程艺术 书+源码

    一、DOM基础 DOM是一种标准，它允许程序和脚本动态更新、添加和删除HTML或XML文档的元素。DOM将整个文档视为一个树形结构，其中每个节点代表文档的一个部分，如元素、属性、文本等。通过DOM，开发者可以精确地定位到...

    高分遥感大数据支持下的国土三调DOM制作

    文中以高分辨率遥感影像为基础,以甘肃省阿克塞县作为研究区,依据三调正射影像生产规程,系统介绍卫星影像生产流程,着重介绍了基于集群软件快速生产DOM的处理流程和镶嵌、修改影像的快速方法。结果表明,基于影像快速...

    dom4j-2.1.1.jar

    虽然Java标准库中的JAXB和DOM API提供了XML处理的基础功能，但DOM4J因其简洁的API和强大的功能，成为了许多Java开发者首选的XML处理库。 总结，DOM4J-2.1.1.jar作为一款强大的XML处理工具，不仅具备了基本的XML操作...

Magicbox
Global site tag (gtag.js) - Google Analytics