Dom学习

原创 2012年03月30日 15:38:28

案例1:
创建三个输入文本框,当光标离开文本框时如果文本框为空,则将文本框的背景色设置为红色,如果不为空则为白色。提示:焦点进入控件的事件是onfocus,焦点离开控件的事件是onblur。

<script type ="text/javascript">
    function initiail(){
    var inputs=document.getElementsByTagName("input");
    for(var i=0;i<inputs.length;i++){
    var input=inputs[i];
    input.onblur=function(){
    if(this.value.length<=0)
    {
    this.style.background="red";
    }
    else{this.style.background="white";}
    }
    }
    }

    </script>
</head>
<body onload ="initiail()">
<input type ="text" />
<input type ="text" />
<input type ="text" />
<input type ="text" />
<input type ="text" />
</body>

易错:单独修改样式的属性使用"style.属性名"。注意在css中属性名在JavaScript中操作的时候属性名可能不一样,主要集中在那些属性名中包含-的属性,因为JavaScript中-是不能做属性、类名的。所以CSS中背景颜色是background-color,而JavaScript则是style.background,元素样式名是class,在JavaScript中是calssName属性;font-size—>style.fontSize;margin-top—> style.marginTop。

实例:
   <script type="text/javascript">
          function say-hello()
              {alert("hello");}
  
   <body onload="say-hello()"></body>//报错:'say'未定义

单独修改控件的样式<input type="button" value="AAA" onclick="this.style.color='red'"/>

 

案例2:评分控件V1,用一个单行5列的Table做评分控件,监听td的click事件,点击一个td的时候,将这个td及之前的td背景变为红色,之后的td背景变为白色。鼠标在评分控件上的时候显示超链接形式的鼠标图标。                }
          

<script type ="text/javascript">
    function initial(){
        var tableid=document.getElementById("tableid");
        var tds=tableid.getElementsByTagName("td");
        for(var i=0;i<tds.length;i++){
            var td=tds[i];
            td.style.cursor="pointer";
            td.onmouseover=tdOnclick;
            
        }
    }
    function tdOnclick(){
        var tableid=document.getElementById("tableid");
        var tds=tableid.getElementsByTagName("td");
        var index= indexOf(tds,this);
        for(var i=0;i<=index;i++){
            tds[i].style.color="green";
        }
        for(var j=index+1;j<tds.length;j++){
            tds[j].style.color="black";
        }
           /*for(var i=0;i<tds.length;i++){
            if(tds[i]==event.srcElement){
                for(var j=0;j<=i;j++){
                    tds[j].style.color="green";
                }
                for(var k=i+1;k<tds.length;k++){
                    tds[k].style.color="black";
                }
            }   
        }*/
    }
    function indexOf(arr,element){
        for(var i=0;i<arr.length;i++){
            if(arr[i]==element){
                return i;
            }    
        }
         return -1;
    }
    </script>
</head>
<body onload ="initial()">
<table id="tableid"><tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr></table>
</body>



练习1:超链接的单选效果,页面上若干个超链接,点击一个超链接的时候被点击的超链接变为红色背景,其他超链接背景还原为白色。

<script type ="text/javascript">
    function init(){
        var links=document.getElementsByTagName("a");
        for(var i=0;i<links.length;i++){
           var link=links[i];
            link.onclick=linkOnclick;
           
        }
    }
    function linkOnclick(){
        var links=document.getElementsByTagName("a");
        for(var i=0;i<links.length;i++){
           var link=links[i];
           if(link==this) {
                link.style.background="red";
           }
           else{
                link.style.background="white";
           }
        }
        
       window.event.returnValue=false;

    }
    </script>
</head>
<body onload="init()">
 <a href="http://www.sina.com.cn">新浪</a><br/>
 <a href="http://www.sina.com.cn">百度</a><br/>
 <a href="http://www.sina.com.cn">谷歌</a><br/>
 <a href="http://www.sina.com.cn">新华</a><br/>
 <a href="http://www.sina.com.cn">天涯</a><br/>
</body>

 

练习2:表格隔行变色:偶数行为黄色背景,奇数行为默认颜色

<script type ="text/javascript">
    function init(){
        var tableid=document.getElementById("tableid");
        var trs=tableid.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            if((i+1)%2==0){
                trs[i].style.background="red";
            }
        }
    }
    </script>
</head>
<body onload ="init()">
<table id="tableid">
<tr><td>dfddddddddddf</td></tr>
<tr><td>dfdfddddddddddd</td></tr>
<tr><td>dfdfddddddd</td></tr>
<tr><td>dfdddddddddddf</td></tr>
<tr><td>dfdfdddddddddd</td></tr>
<tr><td>dfddddddddddf</td></tr>
</table>
</body>


 

练习3:获得焦点的文本框黄色背景,其他控件背景颜色还原

<script type ="text/javascript">
    function init(){
        var inputs =document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;i++){
            input=inputs[i];
            input.onfocus=inputFocus;
        }
    }
    function inputFocus(){
        var inputs =document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;i++){
            input=inputs[i];
            if(input==this){
                input.style.background="yellow";
            }
            else{
                input.style.background="white";
            }
        }
    }
    </script>
</head>
<body onload ="init()">
<input type ="text" />
<input type ="text" />
<input type ="text" />
<input type ="text" />
<input type ="text" />
</body>


 

练习4:点击表格行,被点击的行高亮显示(背景是黄色),其他行白色背景。监听每个tr的onclick事件,将点击的背景设置为黄色,其他的设置为白色背景。

<script type="text/javascript">
    function init(){
        var tableid=document.getElementById("tableid");
        var trs=tableid.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            tr=trs[i];
            tr.onmouseover=trOnclick;
            tr.style.cursor="pointer";
        }
    }
    function trOnclick(){
        var tableid=document.getElementById("tableid");
        var trs=tableid.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            tr=trs[i];
            if(tr==this){
                tr.style.background="yellow";
            }
            else{
                tr.style.background="white";
            }
        }
    }
    </script>
</head>
<body onload ="init()">
<table id="tableid">
    <tr><td>dfddddddddddd</td></tr>
    <tr><td>dfddddddddddd</td></tr>
    <tr><td>dfddddddddddd</td></tr>
    <tr><td>dfddddddddddd</td></tr>
    <tr><td>dfddddddddddd</td></tr>
    <tr><td>dfddddddddddd</td></tr>
</table>
</body>
 
 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

DOM学习笔记整理二使用及定时器

DOM的用途:—— 使用JavaScript增删改查HTML文档内容 (1)节点树、元素树 (2)遍历HTML文档,查看其内容 (3)查找节点   getElementById() getEleme...

dom学习总结

  • 2012-02-16 23:33
  • 49.94MB
  • 下载

Dom4j学习教程 API

  • 2009-06-01 10:15
  • 1.23MB
  • 下载

React学习笔记—虚拟DOM

React对底层的代码作了封装,在大多数情况下,我们不需要直接去操作DOM。但是有时候我们还是需要使用到底层的代码的,比如输入框获取焦点,这个时候可以通过第三方的类库或者React提供的API实现。 ...

【JAVA学习小结】-【Dom4J解析MXL】

上一篇写了用JAXP开发包解析XML,这一篇写下用Dom4J开发包解析XML。 JAXP虽然是sun公司自己开发的解析XML开发包,但是现在主流使用的解析XML开发包都是Dom4J。 使用Dom...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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