黑马自学_DOM_4

原创 2012年03月30日 22:24:19

---------------------- Windows Phone 7手机开发.Net培训、期待与您交流! ----------------------

 

练习一:自动提示。一个文本框。默认value值为:说点什么吧。字体色为 Gray。当获得焦点时清空文本框,字体色变为黑色。失去焦点时,如果文本框为空则恢复初始状态。

<script type="text/javascript">
    function ssfocus(txtss) {
        if (txtss.style.color == "gray") {                                            html中属性值开头字母是大写,js中都是小写
            txtss.value = "";
            txtss.style.color = "white";
        }      
    }
    function ssblur() {
        if (txtss.value == "") {
            txtss.style.color = "Gray"
            txtss.value="说点什么吧!!!!"
        }
    }
</script>
<input id="txtss" type="text" value="说点什么吧!!!!!!!!" style="background-color:Gray" onfocus="ssfocus(this)" onblur="ssblur(this)" />

 

练习二:点击按钮弹出登陆对话框。

<script type="text/javascript">
    function landNow() {
        var div1 = document.getElementById("div1");                    修改div的style中display的值来控制div中内容的显示
        div1.style.display = "";
    }
</script>

                                        创建div
<div id="div1" style="border-style:solid;border-width:thin;border-color:Red;width:300px;position:absolute;top:200px;left:200px;display:none">

<center>

<table>

<tr><td colspan="2"><input type="button" value="关闭" onclick="document.getElementById('div1').style.display='none'" style="float:right" /></td>  关闭按钮

</tr><tr><td>用户名:</td><td><input type="text" /></td></tr>        用户名框

<tr><td>密码:</td><td><input type="password" /></td></tr>       密码框

</table>

</center></div>

<input type="button" value="立即登录" onclick="landNow()" />            点击显示登陆界面

 

练习三:点击小图片显示详细信息。

 <script type="text/javascript">
    var dataImages = { "images/mm/27small.JPG": ["images/mm/27.JPG", "英子", "165"], "images/mm/28small.JPG": ["images/mm/28.JPG", "惠子", "168"],"images/mm/39small.JPG": ["images/mm/39.JPG", "戈薇", "169"] };
    function initImageMouseover() {
        var divImages = document.getElementById("divImages");       获得放小图片的层
        for (var imgKey in dataImages) {                                                    遍历数据集合,将所有小图片放在新创建的img标签中
            var image = document.createElement("img");
            image.src = imgKey;                                                                 设置一系列img的属性、样式和响应函数
            image.setAttribute("imgId", imgKey);                                          创建一个img没有的属性imgId,它的值存放小图片的src的值,便于调用。
            image.style.width = "70px";
            image.style.height = "98px";
            image.style.cursor = "pointer";
            image.onmouseover = showAll;
            divImages.appendChild(image);
        }
    }
    function showAll() {                                                                                                鼠标放到图片上的事件的响应函数
        var divBigImages = document.getElementById("divBigImages");
        var bigImage = document.getElementById("bigImage");
        var imageName = document.getElementById("imageName");
        var imageheight = document.getElementById("imageheight");
        for (var imgKey in dataImages) {
            if (this.imgId == imgKey) {
                bigImage.src = dataImages[imgKey][0];
                imageName.innerHTML = dataImages[imgKey][1];
                imageheight.innerHTML = dataImages[imgKey][2];
            }
        }
        divBigImages.style.top = window.event.clientY;
        divBigImages.style.left = window.event.clientX;
        divBigImages.style.display = "";
    }
</script>
<br /><div id="divImages" style="width:300px"></div><div id="divBigImages" style="position:absolute;display:none">
    <img id="bigImage" src="" />
    <p id="imageName"></p>
    <p id="imageheight"></p>
    <input type="button" value="关闭" onclick="document.getElementById('divBigImages').style.display='none'" />

 

---------------------- Windows Phone 7手机开发.Net培训、期待与您交流! ----------------------

 

 

黑马程序员_王康 java利用DOM4J解析XML文件

《水浒传》 80 施耐庵 元末 《西游记》 90 吴承恩 明代 《三国演义》 75 罗贯中 元末 《红楼梦》 79 曹雪...

黑马程序员---关于使用dom4j写入数据时的乱码问题分析

------- Java、.Net、Android培训期待与您交流!------- 1、在使用dom4j 对xml 文档进行解析时,通常会遇到把更新后的文档内容在写入到硬盘的xml 文档中,这时就存...

黑马程序员--dom4j操作XML

dom4j操作XML dom4j这个包里定义定义的jiel

(黑马)总结:dom4j 操作xml文件

自己写的一些小的代码,这些代码有一些局限性。
  • tianzhw
  • tianzhw
  • 2011年03月21日 19:38
  • 421

黑马自学_DOM_层的操作

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------     层的操作:      ...
  • cxylu
  • cxylu
  • 2012年03月29日 20:59
  • 142

黑马自学_Dom_window对象、document对象

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------    window对象的属性 h...
  • cxylu
  • cxylu
  • 2012年03月28日 19:28
  • 152

小白自学Android路之 xml文件的Dom4j解析编程

相对于前面的d

【黑马程序员】DOM基础知识

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ---------------------- 一、DOM入门 Dom就是HTML...

黑马程序员_Dom学习知识简单总结

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ---------------------- Dom:       ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:黑马自学_DOM_4
举报原因:
原因补充:

(最多只允许输入30个字)