JS内置对象

最新推荐文章于 2022-03-11 16:48:58 发布

qq_30997845

最新推荐文章于 2022-03-11 16:48:58 发布

阅读量188

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/qq_30997845/article/details/52575114

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、widow

作用一：

1.所有的全局变量都是window的属性

2. 所有全局的函数都是 window 的函数

全局的变量

var age = 17;

//console.log(window.age);

全局的函数

function Dog(){

var age = 1000;
console.log(window.age);

}

window.Dog();

       function Dog(){
            console.log( this );
       }

Dog();

var dog1 = new Dog();

window.alert(0);

window.console.log('----wedewfd---');

作用二：动态跳转

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

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

二、document对象

document 的用途 :
1. 动态的获取当前网页中的任意一个标签（节点）
2. 动态的对获取到的标签进行 CRUD

增加(Create)、读取(Retrieve)（重新得到数据）、更新(Update)和删除(Delete)

动态插入

document.write('hello world!');

插入标签

document.write('<input type="date">');

插入一张图片

document.write('<img src="image/img_01.jpg">');

三、JS的DOM操作

function changeImg(){

拿到图片对象

var img = document.getElementById('icon');

console.log(img);

更改图片

img.src = 'image/img_02.jpg';

}

四、JS中来回切换图片

（1）

<body>
   <img class = "icon" src="image/img_01.jpg">
   <p></p>
   <button>切换图片</button3>

   <script type="text/javascript">
       // 拿到要操作的标签
       var img = document.getElementsByClassName('icon')[0];
       var btn = document.getElementsByTagName('button')[0];
//       console.log(img, btn);

       console.log(img.src);
       // 来回切换图片
       // indexOf lastIndexOf 如果找到,则返回任意正数,没有找到,返回-1
       btn.onclick = function(){
           if(img.src.lastIndexOf('image/img_01.jpg') != -1){
               img.src = 'image/img_02.jpg';
           }else{
               img.src = 'image/img_01.jpg';
           }
       }

   </script>

</body>

（2）

五、JS中常用的事件

<body>
<img name = "icon" src="image/img_01.jpg">

<input id="int"type="text"value="我是需要拷贝的内容">
<script type="text/javascript">
      //拿到对应的标签
      var img = document.getElementsByName('icon')[0];
//      console.log(img);

      // 常用的事件

      // 当鼠标进入图片
      img.onmouseover = function(){
          console.log('手指进入图片');
      }
      // 当鼠标在图片上移动
      img.onmousemove = function(){
          console.log('当鼠标在图片上移动');
      }
      // 当鼠标已出图片
      img.onmouseout = function(){
          console.log('当鼠标已出图片');
      }

      // 当页面加载完毕
      window.onload = function(){
//          alert('页面加载完毕');
      }

      // 拿到对应的输入框
      var input = document.getElementById('int');
      input.onfocus = function(){
          input.width = '700px';
          input.height = '60px';
          // css中的属性要通过style
          input.style.outline = 'none';
          input.style.fontSize = '30px';
          input.style.border = '2px solid red';
      }

      // 拿到选中的内容
      input.onselect = function(){
          alert(input.value);
      }
</script>

</body>

六、显示和隐藏

（1）

<body>
   <img class = "icon" src="image/img_01.jpg">
   <p id="word">风景真美啊!//</p>
   <p></p>
   <button>隐藏</button>

   <script type="text/javascript">
       // 拿到要操作的标签
       var img = document.getElementsByClassName('icon')[0];
       var p = document.getElementById('word');
       var btn = document.getElementsByTagName('button')[0];

       btn.onclick = function(){
          if(btn.innerText == '隐藏'){
              // 隐藏
              img.style.display = 'none';
              p.style.display = 'none';
              btn.innerText = '显示';
          }else{
              // 显示
              img.style.display = 'inline-block';
              p.style.display = 'block';
              btn.innerText = '隐藏';
          }

       }
   </script>

</body>

（2）

css的属性要加style

七、来回切换图片

<body>
   <img id = "icon" src="image/icon_01.png">
   <p></p>
   <button>上一张</button>
   <button>下一张</button>
   <script type="text/javascript">
       // 拿到对应的标签
       var img = document.getElementById('icon');
       var pre = document.getElementsByTagName('button')[0];
       var next = document.getElementsByTagName('button')[1];

       // 定义全局的索引
       var currentIndex = 1;
       var minIndex = currentIndex;
       var maxIndex = 9

       // 上一张
       pre.onclick = function(){
           if(currentIndex == minIndex){
               currentIndex = maxIndex;
           }else{
               currentIndex -= 1;
           }
           // 改变img中的src
           img.src = 'image/icon_0'+currentIndex+'.png';
           console.log(img.src);
       }
       // 下一张
       next.onclick = function(){
           if(currentIndex == maxIndex){
               currentIndex = minIndex;
           }else{
               currentIndex += 1;
           }
           // 改变img中的src
           img.src = 'image/icon_0'+currentIndex+'.png';
           console.log(img.src);
       }

   </script>

</body>

八、倒计时

<head lang = "en" >
    <meta charset = "UTF-8" >
    <title></title>
    <style>
        body{
            background-color : black ;
            text-align : center ;
            margin-top : 100 px ;
        }

        img{
            display : none ;
        }

        p{
            color : red ;
            font-size : 50 px ;
            text-shadow : 3 px 3 px 4 px purple;
            display: none;
        }

        div{
            color: red;
            font-size: 200px;
        }
    </style>
</head>
<body>
   <img id="icon"src="image/flower.gif">
   <p id="word">我对你的爱如滔滔江水.......</p>
   <div id="times">5</div>

   <script type="text/javascript">
       // 拿到所有的标签
       var img = document.getElementById('icon');
       var p = document.getElementById('word');
       var div = document.getElementById('times');

       // 倒计时 ms
     var timer = setInterval(function(){
            // 拿到div内部的10
           div.innerText -= 1;
           // 判断
           if(div.innerText == '0'){
               // 清除计时器
               clearInterval(timer);
               // 隐藏div
               div.style.display = 'none';
               // 显示图片和文字
               img.style.display = 'inline-block';
               p.style.display = 'block';
           }
       }, 1000)
   </script>

</body>

九、DOM的CRUD

</body>

// c 创建 create

// 1. 直接往 body 中动态的添加标签 ( 可以是任意类型 )
    document.write('helloWorld');
    document.write('<img src="image/img_01.jpg">');

// 2. 创建一个新的标签 , 然后插入到 body 中任意的一个标签中 appendChild
    var div = document.createElement('div');
    div.style.background = 'red';
    div.style.width = '500px';
    div.style.height = '300px';
    // 添加到父标签
    document.body.appendChild(div);

    // 往 div 中插入一张图片
    var img = document.createElement('img');
    img.src = 'image/img_02.jpg';
    div.appendChild(img);

    // 拿到 p 标签
    var img1 = document.createElement('img');
    img1.src = 'image/img_03.jpg';

    var p = document.getElementById('word');

p.appendChild(img1);

// 删除有 3 种方式 : 1. 直接用 body 进行删除 , 但是只能作用于直接子标签
//              2. 拿到当前标签的父标签 , 再来删除
//              3. 直接拿当前的标签 , 调用 remove() 方法 .

// document.body.removeChild(p);
    // 拿到当前标签的父标签 , 再来删除
//     p.parentNode.removeChild(p);
    // 3
//      p.remove();

// 改拿到对应的标签 , 做出改变 ...

// 查
// 第一种方式 :
//     document.getElementsByClassName();
//     document.getElementsByName();
//     document.getElementsByTagName();
//     document.getElementById();
// ( 注意 :id 返回一个值 , 其他的都是返回数组 )

// 第二种方式 : 遍历标签内部的内容

// find(document.body);
//
// function find(object){
//      for(var i in object){
//          console.log(object[i]);
//      }
// }

console.log(document.body.childNodes);