• 前端JavaScript入门——JavaScript变量和操作元素


    变量
    JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’:

    var a = 123;
    var b = 'asd';
    //同时定义多个变量可以用","隔开,公用一个‘var’关键字
    var c = 45,d='qwe',f='68';
    1
    2
    3
    4
    变量类型

    5种基本数据类型:
    number、string、boolean、undefined、null

    1种复合类型:
    object

    变量、函数、属性、函数参数命名规范

    区分大小写
    第一个字符必须是字母、下划线(_)或者美元符号($)
    其他字符可以是字母、下划线、美元符或数字
    js定义变量使用var定义,可以一行定义一个,也可以一个var定义多个变量;

    js变量声明和类型实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    // 单行注释

    /*
    多行注释
    下面将两个变量申明合成一句
    */

    //var iNum = 12;
    //var sTr = 'abc';
    var iNum = 12, sTr = 'abc';
    var iNum02;
    //alert(iNum);
    //alert(sTr);
    alert(iNum02);
    </script>
    </head>
    <body>

    </body>
    </html>

    js变量声明和类型实例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    获取元素方法一
    可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如:

    <script type="text/javascript">
    var oDiv = document.getElementById('div1');
    </script>
    ....
    <div id="div1">这是一个div元素</div>
    1
    2
    3
    4
    5
    上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有两种:

    第一种方法:将javascript放到页面最下边

    ....
    <div id="div1">这是一个div元素</div>
    ....
    <script type="text/javascript">
    var oDiv = document.getElementById('div1');
    </script>
    </body>
    1
    2
    3
    4
    5
    6
    7
    第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了

    <script type="text/javascript">
    window.onload = function(){
    var oDiv = document.getElementById('div1');
    }
    </script>
    ....
    <div id="div1">这是一个div元素</div>
    1
    2
    3
    4
    5
    6
    7
    如果我们要通过js给元素添加样式,比如设置font-size=30px;注意要将-的书写方式改为驼峰式的书写方式,比如fontSize,否则会报错;

    js获取元素改变样式实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload = function () {
    /*
    document.getElementById('div1').style.color = 'red';
    document.getElementById('div1').style.fontSize = '30px'
    用变量简化代码:
    */
    var oDiv = document.getElementById('div1');

    oDiv.style.color = 'red';
    oDiv.style.fontSize = '30px';
    }
    </script>
    </head>
    <body>
    <div id="div1">这是一个div元素</div>
    </body>
    <!--<script type="text/javascript">-->
    <!--var oDiv = document.getElementById('div1');-->
    <!--oDiv.style.color = 'red';-->
    <!--oDiv.style.fontSize = '30px';-->
    <!--</script>-->
    </html>

    js获取元素改变样式实例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    操作元素属性
    获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。

    操作属性的方法 :

    “.” 操作
    “[ ]”操作
    属性写法

    html的属性和js里面属性写法一样
    “class” 属性写成 “className”
    “style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”
    通过“.”操作属性:
    操作元素属性实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload = function(){
    var oDiv = document.getElementById('div1');
    var oA = document.getElementById('link');
    var oDiv2 = document.getElementById('div2');

    // 读取属性
    var sId = oDiv.id;
    alert(sId);

    // 写属性
    oDiv.style.color = "red";
    oA.href = "http://www.baidu.com";
    oA.title = "这是去到百度网的链接";

    // 操作class属性需要写成 className
    oDiv2.className = "box2";
    }
    </script>

    <style type="text/css">
    .box{
    font-size:20px;
    color:gold;
    }
    .box2{
    font-size:30px;
    color:pink;
    }
    </style>
    </head>
    <body>
    <div id="div1">这是一个div元素</div>
    <a href="#" id="link">这个一个链接</a>
    <div class="box" id="div2">这是第二个div</div>
    </body>
    </html>

    操作元素属性实例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    通过“[ ]”操作属性:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload = function(){
    var oDiv = document.getElementById('div1');
    var sMystyle = 'fontSize';
    var sValue = '30px';
    // oDiv.style.fontSize = sValue; //这句话有效
    /*
    这一句没有作用:变量sMystyle被认为是一个属性
    oDiv.style.sMystyle = sValue;
    */
    /* 属性用变量来代替的话需要用[]来操作*/
    oDiv.style[sMystyle] = sValue;
    }
    </script>
    </head>
    <body>
    <div id="div1">这是一个div元素</div>
    </body>
    </html>

    通过“[ ]”操作属性示例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    改变元素内容

    innerHTML
    innerHTML可以读取或者写入标签包裹的内容
    常用于从数据库读取内容,然后塞入标签内;

    innerHTML 示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload = function(){
    var oDiv = document.getElementById('div1');
    // 读取元素里面的内容
    var sTr = oDiv.innerHTML;
    alert(sTr);
    // 写元素里面的内容
    //oDiv.innerHTML = "修改的文字";
    oDiv.innerHTML = "<a href='http://www.baidu.com'>百度一下</a>"
    }
    </script>
    </head>
    <body>
    <div id="div1">这是一个div元素</div>
    </body>
    </html>

    innerHTML 示例
    --------------------- 

  • 相关阅读:
    巴洛克式和哥特式的区别
    推荐阅读书籍,是时候再行动起来了。
    AtCoder ABC 159F Knapsack for All Segments
    AtCoder ABC 159E Dividing Chocolate
    AtCoder ABC 158F Removing Robots
    AtCoder ABC 158E Divisible Substring
    AtCoder ABC 157F Yakiniku Optimization Problem
    AtCoder ABC 157E Simple String Queries
    AtCoder ABC 157D Friend Suggestions
    AtCoder ABC 156F Modularness
  • 原文地址:https://www.cnblogs.com/hyhy904/p/10983047.html
Copyright © 2020-2023  润新知