05-javascript基础学习笔记

1.节点的操作###

根据后台返还的数据来创建节点，之前写的操作：写好页面结构，通过dom树获取节点，再对获取的节点进行操作，今天学习一下dom节点的创建、添加、删除和插入

首先获取父元素
var body = document.getElementsByTagName("body")[0];

• 创建并添加节点

    /* 1. 添加节点的相关操作*/
    var btnAdd = document.getElementsByTagName("button")[0];
    var box;
    btnAdd.onclick = function () {
        /*1.2 创建节点（一般通过document来创建）*/
        box = document.createElement("div");
        /*设置属性*/
        box.style.width = 100 + "px";
        box.style.height = 100 + "px";
        box.style.background = "yellow";
        /* 1.3 添加节点（一般通过父节点来添加）*/
        body.appendChild(box);
    };

• 删除节点

 /* 2. 删除节点的相关操作，一半通过父节点来操作*/
    var btnDel = document.getElementsByTagName("button")[1];
    btnDel.onclick= function () {
        body.removeChild(box);
    };

• 插入节点

    /* 3. 插入节点的相关操作，一般通过父节点来操作*/
    var btnIns = document.getElementsByTagName("button")[2];
    btnIns.onclick = function () {
        //创建节点
        var box1 = document.createElement("div");

        //设置属性
        box1.style.width = 100+"px";
        box1.style.height = 100+"px";
        box1.style.background = "pink";

        //插入节点，也是通过父节点
        //第一个参数表示要插入的节点，第二个表示被插入的节点
        body.insertBefore(box1,box);
    };

• 节点的获取（子节点、父节点、兄弟节点）
  子节点的获取(返回伪数组)

获取box下面的子节点,childNodes获取文本节点，但是我们一般不需要文本节点，需要标签节点
var  rst = box.childNodes;

我们一般获取子节点通过children获取，因为我们需要的是标签节点
    var myChildren = box.children;
    console.log(myChildren.length);

• 兄弟节点

兼容性问题
                    
    //1.获取btn1
    var btn1 = document.getElementById("btn1");
    //2.获取兄弟节点
    /* nextElementSibling:获取标签元素，一般浏览器可以实现对应的效果
     * IE浏览器不能有对应的效果，但是nextSibling可以在ie获取标签元素
      * 所以我们需要兼容*/
    var brotherSym = btn1.nextElementSibling||btn1.nextSibling;
    console.log(brotherSym);

• 父节点

    //1.获取btn1
    var btn1 = document.getElementById("btn1");
    //2.获取父节点
    var parentSym = btn1. parentNode;
    console.log(parentSym);

2.date的认识###

1.创建时间对象，表示当前的时间
var myDate = new Date();

2.当前时间的时间戳，获取的是1970年1月1日开始的毫秒数，用来纪念unix诞生的时间
var minS = myDate.getTime();

3.32位最大只能存储2的32次方，所以32位电脑上date对象最大只能获取到2038年之前的时间

4.定义自己的时间戳
var myDate = new Date("2017/07/03 18:20:20");

5.date对象的相关方法

//    1.创建时间对象
    var myDate = new Date();
//    2.1获取当前年份
    var year = myDate.getFullYear();
//    2.2获取月份，获取的值是0到11
    var month = myDate.getMonth();
//    2.3获取日期，0代表周末，其他均正常
    var day = myDate.getDate();
//    2.4获取星期
    var weekDay = myDate.getDay();
//    2.5获取每小时
    var hour = myDate.getHours();
//    2.6获取每分钟
    var min = myDate.getMinutes();
//    2.7获取每秒
    var second = myDate.getSeconds();
//    2.8获取毫秒
    var mins = myDate.getMilliseconds();

3.js三部分###

1.ECMA规范
2.DOM（文档对象模型）
3.BOM(浏览器对象模型）

border边框none与0###

界面上所有内容都是渲染出来的，当边框设置为none时不会渲染，为0时会渲染

this###

一般放在事件指令中，表示谁触发了这个事件，一般是事件源

事件域###

当一个动态节点添加以后，动态节点所在的{}内就是他的事件域

for循环中的i++与++i###

for(初始值;终止值;变化){
    //循环执行代码
}

• 第一次循环中i++与++i没区别
• 所有语言在运行中最终都会转为机器语言（汇编语言），i++会在机器语言中创建一个中间变量，++i不会，所以++i性能高于i++
• 人们一直都在用i++，当发现++i性能略高于i++时，已经养成了习惯。所以总是使用i++

九宫格算法（掌握）###

• 行号和列号的计算
• 动态创建节点应用

下面是动态创建九宫格的代码

CSS代码：

        #box{
            position: relative;
        }
        /* 为了避免以后获取同样的标签的时候写很多对应的属性的设置，
        我们最好把这些属性设置抽取成一个类用来表示这些属性*/
        .newBox{
            width: 100px;
            height: 100px;
            position: absolute;
            background: yellow;
            border-radius: 10px;
            display: inline-block;
        }

HTML代码：

<button>添加</button>
<button>删除</button>
<div id="box">

</div>

JS代码：

    //1.获取按钮与父节点
    var btn = document.getElementsByTagName("button");
    var box = document.getElementById("box");
    //2.操控按钮
    //2.1 创建一个值用来记录索引，也可以叫做记录盒子的个数
    var index = 0;
    btn[0].onclick = function () {
        index++;
        //2.1创建盒子
        var div = document.createElement("div");
        //2.2设置属性 — 通过类名
        div.className = "newBox";
        div.innerHTML = index;

        //2.3 设置盒子的位置
        //2.3.1 确定行号和列号
        var col = (index-1)%3;
        console.log(col);
        var row = parseInt((index-1)/3);
        div.style.left = col * (100+10)+"px";
        div.style.top = row * (100+10)+"px";

        console.log(div);

        //2.4添加节点
        box.appendChild(div);
    }

    //3. 删除盒子
    btn[1].onclick= function () {
        if(box.children.length-1<0)return;
        //3.1删除节点
        box.removeChild(box.children[index-1]);
        //3.2 为了让每次点击都可以删除最后一个节点，我们让索引自减
        index--;
    };

发布微博###

创建ul时，在点击事件外面创建

• 点击按钮（插入）
  1.判断输入框中内容是否为空，是的话提示为空，否则再添加li节点
  2.添加节点的时候，需要判断ul中是否有节点，没有的话直接添加，有的话插入到第一个前面
• 点击按钮（删除）
  1.删除li，获取a标签，并对a标签数组进行遍历，分别添加点击事件。当点击时则删除对应的li

下面是代码

CSS代码：

        *{
            margin: 0;
            padding: 0;
        }
        #box{
            border: 1px solid #000;
            padding: 10px;
            width: 600px;
            height: 600px;
            margin: 100px auto;
            text-align: center;
        }
        #txta{
            width: 490px;
            height: 200px;
            resize: none;
            border: 1px solid #000;
        }
        #box ul{
            width: 460px;
            margin: 0 auto;
        }
        #box ul li{
            list-style:none;
            border-bottom: 1px dashed black;
            height: 30px;
            line-height:30px;
            text-align: left;
        }
        #box ul li a {
            float: right;
            cursor: pointer;
        }

HTML代码：

<div id="box">
    发布微博
    <textarea name="" id="txta" cols="30" rows="10"></textarea>
    <button>发布</button>
</div>

JS代码：

    //获取标签
    var parentBox = document.getElementById("box");
    var textArea = document.getElementById("txta");
    var btn = document.getElementsByTagName("button")[0];

    //创建ul标签
    var myUl = document.createElement("ul");
    parentBox.appendChild(myUl);

    //点击发布按钮响应事件
    btn.onclick = function () {
        //获取要发布的内容
        var content = textArea.value;

        //如果要发布的内容为空，则返回
        if(content==""){
            alert("请输入要发布的内容");
            return;
        }else{
            //如果发布的内容有值，那么就创建新节点
            var li = document.createElement("li");
            //给新节点添加属性与内部内容
            li.innerHTML = content + "<a>删除</a>";
            //判断新创建节点是否为第一条，如果是，直接添加。如果不是，则插入到首行
            if(myUl.children.length==0){
                myUl.appendChild(li);
            }else{
                myUl.insertBefore(li,myUl.children[0]);
            }

        }

        //删除记录操作，一定写在点击事件里面，因为a标签需要动态获取，如果在事件外，那么就只能获取一次。但是a标签是可以多次添加，会导致无法删除
        var as = document.getElementsByTagName("a");
        for(let i = 0; i < as.length; ++i){
            as[i].onclick= function () {
                //点击删除按钮后，从ul上删除对应的li，相当于删除a标签的父节点
                myUl.removeChild(this.parentNode);
            }
        }

        textArea.value="";
    };

通过类名获取标签###

通过自定义封装一个工具类函数来获取标签，了解即可，需要用的时候会写

下面是自己练习的一个封装方法
HTML代码：

<div id="box">
    <button class="btn">btn按钮</button>
    <button class="btn">btn按钮</button>
    <button class="btn">btn按钮</button>
    <button class="btn submit">btn按钮</button>
    <button>按钮</button>
</div>

JS代码：

    var box = document.getElementById("box");
    function getSymByClassName(dom,className){
        if(dom.getElementsByClassName){
            return dom.getElementsByClassName(className);
        }
        var symArr = dom.getElementsByTagName("*");
        var arr = [];
        for(var i = 0; i<symArr.length; i++){
            var symClassNameArr = symArr[i].className.split(" ");
            for(var j = 0; j < symClassNameArr.length; j++){
                if(symClassNameArr[j] == className)
                    arr.push(symArr[i]);
            }
        }
        return arr;
    }
    var rst = getSymByClassName(box,"btn");
    for(var i = 0; i < rst.length; i++){
        rst[i].style.backgroundColor = "green";
    }

封装一个直接获取ID标签的方法：

function $(tag){
  return document.getElementById(tag);
}

transform###

基于默认值进行变化
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

写了个钟表的实现

CSS代码：

        *{
            margin: 0;
            padding: 0;
            border: none;
        }
        .clock{
            width: 600px;
            height: 600px;
            margin: 100px auto;
            position: relative;
            background: url("images/clockImages/clock.jpg") no-repeat;
        }
        .hour,.minute,.second{
            width: 600px;
            height: 600px;
            position: absolute;
        }
        .hour{
            background: url("images/clockImages/hour.png") no-repeat center;
        }
        .minute{
            background: url("images/clockImages/minute.png") no-repeat center;
        }
        .second{
            background: url("images/clockImages/second.png") no-repeat center;
        }

HTML代码：

<div id="clock" class="clock">
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
</div>

JS代码：

    /* 1.获取标签 */
    var h = document.getElementsByClassName("hour")[0];
    var m = document.getElementsByClassName("minute")[0];
    var s = document.getElementsByClassName("second")[0];
    /* 2.操控标签，标签旋转 */
    /* 为了每时每刻都获取对应时间，我们需要使用定时器 */

    /* 创建时间对象 */
    var timer = setInterval(function () {
        var myDate = new Date();
        /* 2.1 获取毫秒 */
        var minS = myDate.getMinutes();
        /* 每秒旋转6* */
        var sec = myDate.getSeconds()+minS/1000;
        console.log(sec);
        /* 每分旋转6* */
        var min = myDate.getMinutes()+sec/60;
        /* 每小时旋转30* */
        var hour = myDate.getHours()%12+min/60;
        /* 2.2设置旋转 */
        h.style.webkitTransform = "rotate("+ hour * 30 +"deg)";
        m.style.webkitTransform = "rotate("+ min * 6 +"deg)";
        s.style.webkitTransform = "rotate("+ sec * 6 +"deg)";
    },100);

HTTP/HTTPS###

• 客户端从服务器拿数据发请求

• http就是用来规定客户端和服务器之间的传输协议

• 客户端发请求：HTTP请求（共有八种，常见的请求：GET、POST）
  1.post请求安全性高于get请求
  2.https:基于http通信协议中增加了一层SSL，更加安全
  3.对传出的数据进行了加密，即使数据被另有所图的人截取，解密也不会那么容易。

线程###

• 多线程
  会提升性能，但是会降低安全性
  比如手机app发送请求会调用hub，但是同时还可以进行其他操作
• 性能和安全性，只能取其一或者中和