iOS转前端之JS进阶技巧及Demo演示

今天抽个空把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)

例子：

三、JS中的CRUD

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

// c 创建create

// 1.直接往body中动态的添加标签(可以是任意类型)
    document.write('helloWorld');
    document.write('');

// 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中的常用事件

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

    
    
    


   
   
我对你的爱如滔滔江水.......
   
5

   

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

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