Javascript——现在不懂也许以后就懂了的案例2

例：点击按钮禁用文本框

<body>
<input type="button" value="禁用文本框" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<script>
    //先根据id获取按钮，为按钮注册点击事件，添加事件处理函数
    document.getElementById("btn").onclick=function(){
        //根据id获取文本框，设置disabled属性
        document.getElementById("txt").disabled=true;
    };
</script>
</body>

例：点击按钮修改列表背景颜色

<input type="button" value="变色" id="btn"/>
<ul id="uu">
    <li>旅行团</li>
    <li>新裤子</li>
    <li>宇宙人</li>
    <li>盘尼西林</li>
    <li>反光镜</li>
</ul>
<script>
    document.getElementById("btn").onclick=function(){
        document.getElementById("uu").style.backgroundColor="yellow";
    };
</script>

例：阻止超链接默认跳转

<body>
<a href="http://www.baidu.com" id="ak">Baidu</a>
<script>
    document.getElementById("ak").onclick=function(){
        return false;
    };
</script>
</body>

例：点击小图显示大图

<body>
<a href="images/1.jpg" id="ak"><img src="images/1-small.jpg" alt=""></a>
<img src="" alt="" id="big">
<script src="common.js"></script> //封装函数，见上篇文章
<script>
    //点击小图，下面显示大图
    //点击超链接
    my$("ak").onclick=function(){
        my$("big").src=this.href;
        return false;
    };
</script>
</body>

例：列表隔行变色

<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
    <li>盛夏光年</li>
    <li>成名在望</li>
    <li>转眼</li>
    <li>如烟</li>
    <li>终于结束的起点</li>
    <li>任意门</li>
    <li>后来的我们</li>
    <li>少年他的奇幻漂流</li>
</ul>
<script>
    //奇红偶黄
    //点击按钮
    document.getElementById("btn").onclick=function (){
        //获取所有的li标签
        var list=document.getElementById("uu").getElementsByTagName("li");
        for(var i=0; i<list.length; i++){
            if(i%2==0){
                //偶数
                list[i].style.backgroundColor="red";
            }else{
                //奇数
                list[i].style.backgroundColor="yellow";
            }
        }
    };
</script>
</body>

例：列表高亮显示

<body>
<input type="button" value="隔行变色" id="btn"/>
<ul>
    <li>盛夏光年</li>
    <li>成名在望</li>
    <li>转眼</li>
    <li>如烟</li>
    <li>终于结束的起点</li>
    <li>任意门</li>
    <li>后来的我们</li>
    <li>少年他的奇幻漂流</li>
</ul>
<script>
    //鼠标进入和鼠标离开两个事件
    //获取所有li标签
    var list=document.getElementsByTagName("li");
    for(var i=0; i<list.length; i++){
        //为li注册鼠标进入事件
        list[i].onmouseover=function(){
            this.style.backgroundColor="yellow";
        };
        //为li注册鼠标离开事件
        list[i].onmouseout=function(){
            //恢复到这个标签默认的颜色
            this.style.backgroundColor="";
        };
    }
</script>
</body>

Javascript——现在不懂也许以后就懂了的案例2

猜你喜欢