iOS转前端之JS进阶技巧及Demo演示_ios开发转前端教程-优快云博客

本文链接：https://blog.youkuaiyun.com/hmh007/article/details/77701310

本文介绍了JavaScript中的关键内置对象Window和Document的基本用法，演示了如何使用JavaScript进行DOM元素的增删改查操作，并展示了常见事件的绑定及响应实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天抽个空把JS剩下的一些操作介绍下，当然不可能介绍的很全面，大部分是我认为很重要的部分，还有很多事在实际工作会遇到的，再去查资料，不断完善知识体系。

首先，我们来看下JS中的内置对象

一、Window

这里可不是iOS中的Window对象，在JS中，Window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。它有连个特点，1.所有的全局变量都是window的属性；2. 所有全局的函数都是window的函数。下面我们看一个例子：

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';

我们可以通过iOS中的webView拦截这个请求，从而做对应的操作，这是iOS和JS交互的一种方法。

二、Document

简单来说，document是window的一个对象属性。它主要有三个用途：

1.动态的获取当前网页中的任意一个标签
2.动态的对获取到的标签进行CRUD
3.增加(Create)、读取(Retrieve)（重新得到数据）、更新(Update)和删除(Delete)

例子：

<script type="text/javascript">
        // 动态插入
        document.write('hello world!');
        // 插入标签
        document.write('<input type="date">');
        // 插入一张图片
        document.write('<img src="image/img_01.jpg">');
    </script>

三、JS中的CRUD

然后我们看下增删改查的操作：

// 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);

然后，我们看下JS中的常用事件

  <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>

了解了这些基本操作，最后我们运用上面的这些知识，来做一个简单的Demo。

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

        img{
            display: none;
        }

        p{
            color: red;
            font-size: 50px;
            text-shadow: 3px 3px 4px 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>
</html>

最后的效果，大家可以下载Demo运行看看，在我的github上( 包括上面的js操作)，就是简单的倒计时功能加上图片的显示和隐藏。

传送门：https://github.com/kiddhmh/HTML-Demo