js的内置对象

作者: 阿凡提说AI | 来源:发表于2017-07-16 15:48 被阅读9次

1.window对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script>
    // window
    // 1.所有全局的变量都是它的属性
    // 2.所有全局的函数都是它的函数


//    console.log(age);
//    console.log(window.age+ '------');

//    function sum(){
//        var age = 18;
//        console.log(age);
//    }
//    sum();
//    window.sum();

//    console.log('000000');
//    window.console.log('111111');

//    function dog(){
//        console.log(this);
//    }
//
//    //
//    dog()
//
//   var dog1 = new dog();

//      window.location.href = 'http://www.baidu.com';
     location.href = 'http://www.520it.com';

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

2.document对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        // document
        // 1.动态的获取网页中所有的节点
        // 2.可以动态的对节点进行CRUD
        // 3.CRUD是指在做计算处理时的增加(Create)、读取(Retrieve)（重新得到数据）、更新(Update)和删除(Delete)

//        document.write('hello world');
//        document.write('<button>百度一下</button>');
//        document.write('![](https://img.haomeiwen.com/i2460271/e3afe0dd0fe0b77c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)');

//      getElementById  id名
//      getElementsByClassName  className
//     getElementsByName  根据标签的内部属性name
//     getElementsByTagName

        function change(){
         var img = document.getElementsByTagName('img')[0];
         img.src = 'img/img_02.jpg';
      }

        
    </script>
</head>
<body>
  ![](img/img_01.jpg)
  <p></p>
  <button onclick="change();">改变图片</button>
  <div class="test1"></div>
</body>
</html>

3.来回切换图片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        // document
        // 1.动态的获取网页中所有的节点
        // 2.可以动态的对节点进行CRUD
        // 3.CRUD是指在做计算处理时的增加(Create)、读取(Retrieve)（重新得到数据）、更新(Update)和删除(Delete)

//        document.write('hello world');
//        document.write('<button>百度一下</button>');
//        document.write('![](https://img.haomeiwen.com/i2460271/e3afe0dd0fe0b77c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)');

//      getElementById  id名
//      getElementsByClassName  className
//     getElementsByName  根据标签的内部属性name
//     getElementsByTagName

        function change(){
         var img = document.getElementsByTagName('img')[0];
         img.src = 'img/img_02.jpg';
      }

        
    </script>
</head>
<body>
  ![](img/img_01.jpg)
  <p></p>
  <button onclick="change();">改变图片</button>
  <div class="test1"></div>
</body>
</html>

4.Dom操作-2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
![](img/img_01.jpg)

<input value="hello world">

<script>
    var img = document.getElementsByTagName('img')[0];
    img.onmousemove = function(){
        console.log('在图片上移动');
    }

    img.onmouseover = function(){
        console.log('进入图片');
    }

    img.onmouseout = function(){
        console.log('移出图片');
    }

    var input = document.getElementsByTagName('input')[0];
    input.onfocus = function(){
        input.style.outline = 'none';
        input.style.width = '300px';
        input.style.height = '400px';
        input.style.fontSize = '30px';
    }

    input.onselect = function(){
        alert(input.value);
    }
</script>
</body>
</html>

5.DOM操作-3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
![](img/img_01.jpg)
<p id="word">12311121221212112</p>
<p></p>
<button id="btn">隐藏</button>

<script>
    var img = document.getElementById('icon');
    var p = document.getElementById('word');
    var btn = document.getElementById('btn');

    btn.onclick = function(){
        if(btn.innerHTML == '隐藏'){
            btn.innerHTML = '显示';
            img.style.display = 'none';
            p.style.display = 'none';
        }else{
            btn.innerHTML = '隐藏';
            img.style.display = 'inline-block';
            p.style.display = 'block';
        }
    }
</script>
</body>
</html>

网友评论

HTML/CSS/JavaScript

本文标题：js的内置对象

本文链接：https://www.haomeiwen.com/subject/duntkxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

js的内置对象

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

HTML/CSS/JavaScript