js中基本操作

时间：2016-05-11 11:22:33 阅读：262 评论：0 收藏：0 [点我收藏+]

标签：

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>

js中基本操作

标签：

原文地址：http://www.cnblogs.com/xidongyu/p/5478580.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行