document

找元素  1.根据id找

 　　　　var d1 = document.getElementById("d1");

 　　　　alert(d1);  

 2.根据class找

　　　　 var d2 = document.getElementsByClassName("d"); //找到的是数组类型的；用遍历集合取出

 　　　　alert(d2[1]);

   3.根据标签名找

　　　　 var d3 = document.getElementsByTagName("div");

 　　　　alert(d3[0]);

   4.根据name找

　　　　  var d4 = document.getElementsByName("aa");  

　　　　alert(d4[0]);  

  操作元素

 操作内容  

 非表单元素   

　　　　var d1 = document.getElementById("d1");  

 1.获取文本   alert(d1.innerText);  

 2.设置文本   d1.innerText = "hello";  

 3.获取html代码   alert(d1.innerHTML);  

 4.设置html代码   d1.innerHTML = "<b>加粗文字</b>";

  表单元素  

　　　　 var b1 = document.getElementById("b1");  

 1.赋值   b1.value = "ceshi";  

 2.获取值   alert(b1.value);      

 操作属性  

1.添加属性

　　　　  var d1 = document.getElementById("d1");

　　　　 d1.setAttribute("bs","1");

 2.获取属性  alert(d1.getAttribute("cs"));  

3.移除属性  d1.removeAttribute("cs");  

 操作样式

 function showa()

 {   //1.获取样式,只能获取内联样式

  var d3 = document.getElementById("d3");

  alert(d3.style.color);  }

 function set()

 {   var d3 = document.getElementById("d3");  

 //2.设置样式

  d3.style.backgroundColor = "red";  }    

练习

<body>

<input type="checkbox" id="ck" onclick="xiugai()" />同意
<input type="button" value="注册" id="btn" disabled="disabled" />

</body>
<script type="text/javascript">

function xiugai()
{
    //找到复选框
    var ck = document.getElementById("ck");
    //找到按钮
    var btn = document.getElementById("btn");
    
    //判断复选框的选中状态
    if(ck.checked)
    {
        //移除按钮的不可用属性
        btn.removeAttribute("disabled");
    }
    else
    {
        //设置不可用属性
        btn.setAttribute("disabled","disabled");
    }
}


</script>
选取 注册可用 不选不能注册
<style type="text/css">
#caidan{
    width:500px; height:35px; border:1px solid #60F;
    
    }

.xiang{
    width:100px; 
    height:35px;
    text-align:center;
    line-height:35px;
    vertical-align:middle;
    float:left;
    color:#000
    }

</style>
</head>

<body>

<div id="caidan">
    <div class="xiang" onmouseover="huan(this)" >首页</div>
    <div class="xiang" onmouseover="huan(this)" >产品中心</div>
    <div class="xiang" onmouseover="huan(this)" >服务中心</div>
    <div class="xiang" onmouseover="huan(this)" >联系我们</div>
</div>


</body>
<script type="text/javascript">
function huan(a)
{
    //将所有的项恢复原样式
    var d = document.getElementsByClassName("xiang");
    
    for(var i=0;i<d.length;i++)
    {
        d[i].style.backgroundColor="white";
        d[i].style.color = "black";
    }
    
    //换该元素的样式
    a.style.backgroundColor = "red";
    a.style.color = "white";
}
鼠标放上变色
<body>


<div>
    <span id="daojishi">10</span>
    <input disabled="disabled" type="button" value="注册" id="anniu" />
</div>


</body>

<script type="text/javascript">
    
    
    window.setTimeout("daojishi()",1000);
    
    //功能：倒计时减1
    function daojishi()
    {
        //找到span
        var s = document.getElementById("daojishi");
        
        //判断
        if(parseInt(s.innerHTML)<=0)
        {
            document.getElementById("anniu").removeAttribute("disabled");
        }
        else
        {
        //获取内容，减1之后再交给span
        s.innerHTML = parseInt(s.innerHTML)-1;
        
        //每隔一秒调一次该方法
        window.setTimeout("daojishi()",1000);
        }        
    }
    
</script>
10秒后可以注册

 

posted @ 2016-11-11 16:07  get("新技能")  阅读(1354)  评论(0)  编辑  收藏  举报