zoukankan      html  css  js  c++  java

  • js中基本操作

    1.操作标签值

    <!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<script type="text/javascript">
    function changeValue(id){
        var oTxt = document.getElementById(id);
        if(id == "in1")
            oTxt.value = "This is a input1!";
        else
            oTxt['value'] = "This is a input2"
    }
</script>
<head>
    <title>操作属性</title>
</head>
<body>
    <input type="text" id="in1">
    <button type="button" onclick="changeValue('in1')">设置值</button>
    <input type="text" id="in2">
    <button type="button" onclick="changeValue('in2')">设置值</button>
</body>
</html>

    结果：

    2.标签的样式操作

    <!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
    }
    .box{
        background-color: green;
    }
</style>
<script type="text/javascript">
    function toRed(){
        var oDiv  = document.getElementById("div1");
        oDiv.style.background = "red";
    }

    function toGreen(){
        var oDiv = document.getElementById("div1");
        oDiv.className = "box";
    }

</script>
<head>
    <title>操作属性</title>
</head>
<body>
    <button type="button" onclick="toRed()">变红</button>
    <button type="button" onclick="toGreen()">变绿</button>
    <div id="div1"></div>
</body>
</html>

    通过style属性或者是className可以操作一个标签的样式，但是两者是有区别的sytle修改的是标签的行间样式，而className则为一个标签添加了一个class类而已。

    下图中先点变绿后点变红会起作用，但是先点变红后点变绿则没有效果。

    3.提取行间事件

    　　通常可以在行间添加某个事件 <button type="button" onclick="toRed()">变红</button> ,但是在开发过程中基本上是将html css 和分离的，所以我们最好将行间的css和js提取出来

    <!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
    }
</style>
<script type="text/javascript">
 window.onload = function (){
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oDiv = document.getElementById('div1');
    oBtn1.onclick = function (){
        oDiv.style.background = 'red';
    }

    oBtn2.onclick = function (){
        oDiv.style.background = 'green';
    }
 }
</script>
<head>
    <title>操作属性</title>
</head>
<body>
    <button id="btn1" type="button">变红</button>
    <button id="btn2" type="button">变绿</button>
    <div id="div1"></div>
</body>
</html>

    浏览器在解析页面时，是没读一行解释一行，而代码中window.onload是当页面加载完后才执行js代码。

    <!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<script type="text/javascript">
    window.onload = function (){
        var oBtn =  document.getElementById('btn');
        var flage = false;
        oBtn.onclick=function (){
            var oDiv = document.getElementById('div1');
            var oTags = oDiv.getElementsByTagName('input');
            var i=0;
            if(flage == false){
                while(i < oTags.length)
                    oTags[i++].checked = true;
                flage = true;
            }else{
                 while(i < oTags.length)
                    oTags[i++].checked = false;
                 flage = false;
                } 
            }
        }
</script>
<head>
    <title>操作属性</title>

</head>
<body>
    <button id="btn" type="button">全选</button><br>
    <div id="div1">
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
        <input type="checkbox"><br>
    </div>
</body>
</html>

    4.选项卡的实现

    <!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
    <title>操作属性</title>
<style type="text/css">
    #div2 div{
        width: 100px;
        height: 100px;
        background-color: gray;
        display: none;
    }
    .active{
        background-color: orange;
    }
</style>
<script type="text/javascript">
    window.onload = function (){
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        var oBtns = oDiv1.getElementsByTagName('button');
        var oDivs = oDiv2.getElementsByTagName('div');
        for(var i=0;i < oBtns.length;i++){
            oBtns[i].index = i;
            oBtns[i].onclick = function(){
                for(var j=0;j<oBtns.length;j++){
                    oBtns[j].className = '';
                    oDivs[j].style.display = 'none';
                }
                this.className = 'active';
                oDivs[this.index].style.display = "block";
            }
        }

    }
</script>
</head>
<body>
    <div id="div1">
        <button type="button" id="btn1" class="active" >按钮1</button>
        <button type="button" id="btn2" >按钮2</button>
        <button type="button" id="btn3" >按钮3</button>
        <button type="button" id="btn4" >按钮4</button>
    </div><br>
    <div id="div2">
        <div style="display:block;">111</div>
        <div >222</div>
        <div >333</div>
        <div >444</div>
    </div>
</body>
</html>

    更加简单的方式

    <!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
    <title>操作属性</title>
<style type="text/css">
    #div2{
        width: 100px;
        height: 100px;
        background-color: gray;
    }
    .active{
        background-color: orange;
    }
</style>
<script type="text/javascript">
    window.onload = function (){
        var oTxts = ['1111', '2222', '3333', '4444'];
        var oDiv1 = document.getElementById('div1');
        var oBtns = oDiv1.getElementsByTagName('button');
        var oDiv2 = document.getElementById('div2');
        for(var i=0;i < oBtns.length;i++){
            oBtns[i].index = i;
            oBtns[i].onclick = function(){
                for(var j=0;j<oBtns.length;j++){
                    oBtns[j].className = '';
                }
                this.className = 'active';
                oDiv2.innerHTML = oTxts[this.index];
            }
        }

    }
</script>
</head>
<body>
    <div id="div1">
        <button type="button" id="btn1" class="active" >按钮1</button>
        <button type="button" id="btn2" >按钮2</button>
        <button type="button" id="btn3" >按钮3</button>
        <button type="button" id="btn4" >按钮4</button>
    </div><br>
    <div id="div2">1111</div>
</body>
</html> <!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
    <title>操作属性</title>
<style type="text/css">
    #div2{
        width: 100px;
        height: 100px;
        background-color: gray;
    }
    .active{
        background-color: orange;
    }
</style>
<script type="text/javascript">
    window.onload = function (){
        var oTxts = ['1111', '2222', '3333', '4444'];
        var oDiv1 = document.getElementById('div1');
        var oBtns = oDiv1.getElementsByTagName('button');
        var oDiv2 = document.getElementById('div2');
        for(var i=0;i < oBtns.length;i++){
            oBtns[i].index = i;
            oBtns[i].onclick = function(){
                for(var j=0;j<oBtns.length;j++){
                    oBtns[j].className = '';
                }
                this.className = 'active';
                oDiv2.innerHTML = oTxts[this.index];
            }
        }

    }
</script>
</head>
<body>
    <div id="div1">
        <button type="button" id="btn1" class="active" >按钮1</button>
        <button type="button" id="btn2" >按钮2</button>
        <button type="button" id="btn3" >按钮3</button>
        <button type="button" id="btn4" >按钮4</button>
    </div><br>
    <div id="div2">1111</div>
</body>
</html>

    5.数组的使用

    <!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
    <title>操作属性</title>
<style type="text/css">
    #div2{
        width: 100px;
        height: 100px;
        background-color: gray;
    }
    .active{
        background-color: orange;
    }
</style>
<script type="text/javascript">
    window.onload = function (){
        var oTxts = ['1111', '2222', '3333', '4444'];
        var oDiv1 = document.getElementById('div1');
        var oBtns = oDiv1.getElementsByTagName('button');
        var oDiv2 = document.getElementById('div2');
        for(var i=0;i < oBtns.length;i++){
            oBtns[i].index = i;
            oBtns[i].onclick = function(){
                for(var j=0;j<oBtns.length;j++){
                    oBtns[j].className = '';
                }
                this.className = 'active';
                oDiv2.innerHTML = oTxts[this.index];
            }
        }

    }
</script>
</head>
<body>
    <div id="div1">
        <button type="button" id="btn1" class="active" >按钮1</button>
        <button type="button" id="btn2" >按钮2</button>
        <button type="button" id="btn3" >按钮3</button>
        <button type="button" id="btn4" >按钮4</button>
    </div><br>
    <div id="div2">1111</div>
</body>
</html>
  • 相关阅读:
    RabbitMQ详解
    嵌入式开发学习（10）<汇编写启动代码之设置栈、调用c语言、开关看门狗和开关iCache>
    嵌入式开发学习（8）<一步一步点亮LED灯>
    gcc编译神器之makefile
    嵌入式开发学习（6）<S5PV210开发板刷系统那点破事儿之二>
    嵌入式开发学习（5）<S5PV210开发板刷系统那点破事儿之一>
    嵌入式开发学习（4）<ARM汇编指令集详解>
    嵌入式开发学习（3）<ARM汇编指令集语法>
    嵌入式开发学习（2）<S5PV210启动过程详解>
    嵌入式开发学习（1）<ARM体系结构>
  • 原文地址：https://www.cnblogs.com/xidongyu/p/5478580.html
Copyright © 2011-2022 走看看