JavaScript 02

在JavaScript中声明一个对象通过 var obj = {} ,这样就可以声明一个对象了.在对象中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js面向对象</title>
</head>
<body>
    <script type="text/javascript">

    // 声明一个对象
    var Person = {
        // 属性
        'name' : 'zhangsan',
        "age" : 18,
        //方法(调用)
        eat: function(food) {
            console.log('人吃' + food);
        },

        sleep: function () {
            // body...
        console.log('人要睡觉');    
        }
    }
    // 获取对象属性的值
    console.log(Person.age);
    // 重新给属性赋值                                     
    Person.age = 20;
    console.log(Person.age);
    Person.eat('饭');
    Person.sleep();
    </script>
</body>
</html>

在JavaScript中操作标签元素,有四种方法,我们可以动过document在js中来获取标签,然后针对标签做对应的事情,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js获取标签</title>
</head>
<body>
    <p id="item_one">字段一</p>
    <p class="item_two">字段</p>
    <button name="item_three">Button</button>

    <script type="text/javascript">
            // 顺序不分先后

            // 第一种通过获取标签定义的id
            var p = document.getElementById('item_one');
            console.log(p);

            // 第二种通过获取标签的名字
            var p2 = document.getElementsByTagName('p')[1];
            console.log(p2);

            // 第三种通过获取标签定义的name
            var button = document.getElementsByName('item_three')[0];
            // 获取到button的标签给它定义点击事件
            button.onclick = function () {
                console.log('按钮被点击');
            }
            console.log(button);            

            // 第四种通过获取标签定义的classname    
            var p3 = document.getElementsByClassName('item_two');
            console.log(p3);    

    </script>
</body>
</html>

运行时在浏览器中:
这里写图片描述
此时我们通过获取到的标签,给Button设置点击事件在浏览器中就可以看到打印的log.

注:在浏览器中打开开发者工具的快捷键是Ctrl + Shift + I

猜你喜欢