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>

js中基本操作的更多相关文章

node.js中对 redis 的安装和基本操作
一.win下安装redis https://github.com/MicrosoftArchive/redis/releases 下载Redis-x64-3.2.100.zip,然后解压,放到自定义目 ...
浅解析js中的对象
浅解析js中的对象原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...
H5JS二维动画制作！two.js的基本操作class1
今天介绍一个网络上并不常用的插件two.js,刚开始学习的过程中,发现网上并没有合适的教程,在此发表基本操作 two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果下载网址如下: ...
js中对象转化成字符串、数字或布尔值的转化规则
js中对象可以转化成字符串.数字.布尔值一.对象转化成字符串: 规则: 1.如果对象有toString方法,则调用该方法,并返回相应的结果:(代码通常会执行到这,因为在所有对象中都有toStrin ...
JavaScript基础&实战（4）js中的对象、函数、全局作用域和局部作用域
文章目录 1.对象的简介 2.对象的基本操作 2.1 代码 2.2 测试结果 3.属性和属性值 3.1 代码 3.2 测试结果 4.对象的方法 4.1 代码 4.2 测试结果 5.对象字面量 5.1 ...
5.0 JS中引用类型介绍
其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...
【repost】JS中的异常处理方法分享
我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...
JS中给正则表达式加变量
前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下. 一.字面量其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...
js中几种实用的跨域方法原理详解（转）
今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

随机推荐

putExtra方法
[开篇骂几句:fuck]1.扯淡intent.putExtra()怎么使用?2.胡说intent.putExtra(); [扯淡:其实你在问它怎么用的时候,你要明白,你知道不知道这是个什么东东,有必要 ...
char，vchar，nchar，nvchar的区别
char和varchar的长度都在1到8000之间,它们的区别在于char是定长字符数据,而varchar是变长字符数据.所谓定长就是长度固定的,当输入的数据长度没有达到指定的长度时将自动以英文空格在 ...
Sample SecondarySort 浅析
示例文件: 100 99 100 98 100 56 100 78 20 100 30 100 20 50 30 50 30 60 20 80 需求:首先按第一个数字分组,组成按第二个数字排序. 解决 ...
Quicksum -SilverN
quicksum Given a string of digits, find the minimum number of additions required for the string to e ...
NOIP2012普及组 (四年后的)解题报告 -SilverN
本章施工仍未完成现在的时间是3.17 0:28,我困得要死本来今天(昨天?)晚上的计划是把整个四道题的题解写出来,但是到现在还没写完T4的高效算法,简直悲伤. 尝试了用floyd写T4,终于大功告 ...
jemter的使用（三）
前面的文章已经把接口请求.响应等前序工作做好,那么如何施加压力呢,看下面 1.点击线程组,设置线程属性,其中:线程数即并发用户数,ramp-up period是多长时间初始化上面的并发用户数,循环次数 ...
如何解决inline-block元素的空白间距
早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...
HDU 5047 推公式+别样输出
题意:给n个‘M'形,问最多能把平面分成多少区域解法:推公式 : f(n) = 4n(4n+1)/2 - 9n + 1 = (8n+1)(n-1)+2 前面部分有可能超long long,所以要转化 ...
HDU 2189 悼念512汶川大地震遇难同胞――来生一起走 --生成函数
这题跟上两题也差不多. 把150以内的素数找出来,把素数的值看做硬币的面值,每个硬币的个数即ceil(150/prime[i]),因为再多也没用,最多组成n=150就行了,所以又回到了找硬币问题.用生 ...
利用Clip制作打洞效果
起因如上篇博文所说,连线原型需要在中间文字上下各留15像素的空白.设计师完成原型之后,问我有没有办法实现,我说,我能想到两种实现方式.其中一种就是上篇博文所说的OpacityMask.第二种就是使用 ...