第13天-js+jquery

1.回顾
js 的onload有覆盖现象
this-----self；；；innerText
要用this，不能用oBoxs[i]-----因为var声明的变量，存在变量提升

变量提升，不会取值，报undefined
演示tab选项卡
es6 let声明变量，属于块级作用域
es6阮一峰 资料参考 www.ruanyienfg.com

小结：var声明的变量存在变量提升
let声明变量，属于块级作用域
const声明的是常量 一旦声明变量，不可改变 //直接会报错Uncaught TypeError: Assignment to constant variable.

设置标签属性
    <div class='box' id='box' title='哈哈哈'></div>
    var oDiv = document.getELementsByClassName('box')[0];
    oDiv.className+=' active'
添加属性 ：oDiv.className+=' active'  注意空格

//样式属性
    oDiv.style.width = '200px';
    oDiv.style.backgroundColor  = 'red';

1.DOM三种获取方法;Id/ClassName/TagName
document.getELementsByClassName('box');
在HTML当中，一切都是节点：（非常重要）

2.DOM的创建和添加
    //创建节点
    var oP = document.createElement('p');
    
    //设置文本
    // oP.innerText = '<a href="#">123</a>';
    oP.innerHTML = '<a href="#">123</a>';
       重点 parentNode、children  
    //追加孩子节点
    oBox.appendChild(oP);
    
    父节点.insertBefore(新的节点,参考的子节点);
    
    
    //对属性节点的操作
    getAttribute();
    setAttribute();
    removeAttribute();

2.案例12自己演示
3.js面向对象--重要！------听视频（上午最后一节）
    （1）谁做的事件，这个this指的就是这个对象
    
    创建对象常用方式：构造函数首字母要大写
    1.字面量方式创建
    var person = {
            name:"张三",
            age:18,
            fav:function(){}
        
        };
        person.name
        person.age
        person.fav();
    4.使用原型（prototype）继承的方式来创建对象---重要
    function Person(name,age){
        this.name = name;
        this.age  = age;
    };
    Person.prototype.showName = function(){
        console.log(this);//Person对象
    };
    JS中使用new关键字来创建对象，没有对象new一个
    var p1= new Person('zz',19);
    
    js中：
        function add(){}
        
        //构造函数
        function Person(){}
        new Person()
    在js中prototype原型 是每个对象的父类
    
补充：1.es6中的函数可以写成箭头函数
无function关键字
    function add(a,b){
        return a+b
    };
    
    var add = function(a,b){
    return a+b
    }
    console.log(add(1,2));

    var add = (a,b)=>{
    return a+b
    }
2.es5中引入模块的方式，一个js文件就是一个模块
script引入 但是引入的模块，属于同步调用(等待)
from xxx import ooo;
                  
es6中引入模块：import ooo from 'xxx'
前端中有三大工具：grunt工具、glup工具、webpack工具  
babel工具 编译器能将es6的代码转化成es5的代码，在所有浏览器都执行
vue中使用。。babel、nodejs看博客视频
    nodejs下载8.1版本，安装npm install jquery --save演示使用
       
4.定时器
setInterval()周期循环
循环性的定时器
只会执行一次的定时器 setTimeout()  实现异步，让1111不等待

DOM总结：
    1.获取事件源的三种方式
    2.设置标签的属性
    3.设置样式属性
    4.创建节点  追加节点 移除节点
    5.DOM树结构
             document
        
                html 
            
            head    body  
                    div  p ul li....
                    
    在html中一切都是节点
    操作DOM的三步
    1.事件源 2.事件 3.事件处理程序

BOM 浏览器对象
1.后退、前进、刷新按钮
搜索?wd=123   就是search中内容
记住---location对象的属性

jquery
1.引包 src  2.入口函数$(function(){})
(3)js对象和jquery对象的转化
    js=》jquery  $(js对象)
    jquery=>js $('.box')[0]

事件无覆盖现象 
jquery库在js的基础上封装
可以修改多个样式，$() --js对象转化成jquery对象
2.选择器
trim去除前后空格
获取文本text不能方式
属性选择器不重要
嵌套多层要找到父元素点点找到    siblings()  查找所有兄弟元素（不包括自己） 

3.jquery动画
    找不到可以先，保存下来
    stop().toggle()
    滑入滑出（卷帘门）：slideup/slidedown
    淡入淡出：.fadeIn。。
    自定义动画！！！--重点--animate
    先stop再动画
    
    
4.属性
    1.注意checked获取attr就不是所填的
    prop获取的是dom对象的属性；attr是设置属性值或者 返回被选元素的属性值！！重点记住