前端--阶段笔记（三） jQuery + js进阶

jQuery Day 01

js开发框架 ，仓库

特点：链式编程，隐式迭代
支持插件 有丰富第三方插件

1 引入 script src = XX.js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

2 测试
控制台输入
jQuery.fn.jquery
引入成功会显示当前引入版本

jQuery 入口函数

等DOM结构渲染完毕即可执行sj 代码 ，不必等所有外部资源加载完成。

相当于DOMcontentLoaded

//1 .
$(document).ready(function({
$('div').hide();  //此处是页面DOM加载完成的入口
}))

//2.
$(function(){
    $('div').hide(); //此处是页面DOM加载完成的入口
})

关于$符号

1 $是jquery的入口符号

2 $ 是jquery的顶级对象
相当于原上js的window

dom对象和jquery对象

用原生js获取过来的对象就是dom对象，jquery方法获取的对象就是jquery对象

jquery 本质是利用$来获取DOM对象包装后产生的对象 ，以伪数组形式存储。

jQuery对象转换成dom对象

1 dom转jquery

​ (1) 直接获取标签,得到的就是jquery对象
​ (2) 已经用原生js获取过来的对象转jQuery对象
​ $(DOM 对象) 例如：$(‘div’)

​ (3) jquery 对象转DOM对象
​ 3.1 $(‘div’)[indexNumber]
​ 3.2 $(‘div’).get(indexNumber)

jQuery 常用API

jQuery基本和层级选择器

$(“选择器”)//里面选择器直接写css选择器即可

例如： $("#id")

层级选择器
子代 $(“ul>li”) , 后代选择器 $(“ul li”)

隐式迭代

遍历内部DOM元素（伪数组存储）叫做隐式迭代。

给所有匹配到的元素进行循环遍历，执行相同方法，不用再写循环，减少工作量方便调用。

筛选选择器

:eq(index)　　　　//匹配index下标的元素
　　　　　　　　:first()　　　　　　//获取第一元素
　　　　　　　　:last()　　　　　　//获取最后一个元素
　　　　　　　　:odd()　　　　　　//获取最后一个元素

筛选方法

注意这里也有.eq()这种写法 把eq当做一种方法来用。

parents(“XXX”) 中间可以指定标签或者类名，精确查找父级。

注意这里加了s。

兄弟节点siblings

    <div class="yeye">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>我是屁标签</p>
        <div>
            <p>我是p</p>
        </div>
    </div>

// 注意一下都是方法 带括号
        $(function() {
            // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
            console.log($(".son").parent());
            // 2. 子
            // (1) 亲儿子 children()  类似子代选择器  ul>li
            // $(".nav").children("p").css("color", "red");
            // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
            $(".nav").find("p").css("color", "red");
            // 3. 兄
            $(function() {
            // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            // 2. 第n个元素
            var index = 2;
            // (1) 我们可以利用选择器的方式选择
            // $("ul li:eq(2)").css("color", "blue");
            // $("ul li:eq("+index+")").css("color", "blue");
            // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
                //方便该为动态的变量
            // $("ul li").eq(2).css("color", "blue");
            // $("ul li").eq(index).css("color", "blue");
            // 3. 判断是否有某个类名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));


        });
            

新浪微博下拉菜单

li 里面可以继续嵌套 ul li

       $(function() {
            // 鼠标经过
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 当前元素  this不要加引号
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").show();
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })
        })

展示案例

链式编程，节约代码量。务必注意是针对哪个对象执行操作。

        $(function() {
            // 1. 鼠标经过左侧的小li 
            $("#left li").mouseover(function() {
                // 2. 得到当前小li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
                // $("#content div").eq(index).show();
                // 4. 让其余的图片（就是其他的兄弟）隐藏起来
                // $("#content div").eq(index).siblings().hide();
                // 链式编程
 			$("#content div").eq(index).show().siblings().hide();

            })
        })

操作css方法

jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式。

1 .参数只写属性名，则返回属性值$(this).css(“color”);
2 .属性名 + 属性值且以逗号分割，这样写才是修改属性内容
3 .参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号。

$("p").css("background-color","yellow");

$("div").css({
width:400,
height:400,
backgroundColor:"red"//如果是复合属性必须采用驼峰命名法
})

设置类样式的方法

作用相当于classList，可以操作类样式，注意操作类里面的参数前面不要加点。

//1,tianjia
$("div").click(funtion(){
	$(this).addClass("current");
})
//2,shanchu 
$("div").click(funtion(){
	$(this).removeClass("current");
})
//3,qiehuan 
$("div").click(funtion(){
	$(this).toggleClass("current");//如果有就去掉，没有就添加。
})

tab切换案例

    $(function() {
            // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
            $(".tab_list li").click(function() {
                // 链式编程操作
                $(this).addClass("current").siblings().removeClass("current");
                // 2.点击的同时，得到当前li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3.让下部里面相应索引号的item显示，其余的item隐藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        })

addClass与jQuery类操作区别

原生js中的className会覆盖原来所有类名，jQuery类操作只是对指定类进行操作，不影响原先类名。

jQuery显示与隐藏效果

1 .显示语法规范
show([speed],[easing],[fn])
2 关于参数
可以全部省略，无动画直接显示。

上下拉滑动效果

slideDown slideUp slideToggle

事件切换

      $(function() {
            // 鼠标经过
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                $(this).children("ul").slideToggle();
            });
        })

停止动画排队

去除触发多个动画之后，动画一定要排队执行完毕的现象。

必须写在要停止的动画前面

   $(function() {
            $(".nav>li").hover(function() {
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });
        })

淡入淡出效果

fadeIn，fadeOut，fadeTo，fadeToggle
返回值:jQueryfadeTo([[speed],opacity,[easing],[fn]])

    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);

            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);

            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);

            });


        });
    </script>

自定义动画

animate(param,[speed],[easing],[fn])

params是必写项，写入想要修改的样式属性，以对象形式传递，写属性名和属性值。属性名可以不加引号，如果是复合属性，需用驼峰命名法。

    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>

手风琴案例

        $(function() {
            // 鼠标经过某个小li 有两步操作：
            $(".king li").mouseenter(function() {
                // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })



        });

jQuery Day 02

获取属性

$(function(){
element.prop("属性名");
})

设置属性值

$(function(){
console.log($("a").prop("href"));
$("a").prop("title","are you ok");
})

获取复选框当前是否被选中

$(function(){
$("input").change(function(){ //给input添加了一个叫做change的方法
console.log($(this).prop("checked"));
})
})

给元素添加自定义属性

固有属性prop ，自定义属性 attr()
类似于js原生的getAttritube()

$(function(){
console.log($("div").attr("index")); //获取
$("div").attr("index",4));//设置
})

H5 自定义属性 data-开头的，此方法也适用

数据缓存data()，此方法可以在指定元素上存数据，但是页面刷新后，数据会被移除。

在指定元素上存取数据，不修改dom元素结构 ，意味着在页面中看不出来。

把一个元素当变量来看，数据存储在内存（缓存）里，页面刷新后则不存在。

 $("span").data("uname","andy");
        console.log($("span").data("uname"));

还可以获取H5新增自定义属性，data-开头不用写，返回的是数字型的结果。

购物车全选反选案例

change()方法，jquery中在对象被点了就触发。

:checked 选择器，查找被选中的表单元素。

if($(".j-checkbox:checked").length === 3){
	$(".j-all").prop("checked" ,checked)
}

jQuery内容文本值

1 获取设置元素内容html()

​ html(); 获取值 html(“内容”);写入内容 相当于原生innerHTML
注意这里要加引号 (" ")

2 获取设置元素文本内容 text()

​ text();相当于原生innerText

3 获取设置表单值 val()

相当于原生value() input.val()

增减数量模块案例

parents() 祖先选择器 可以返回所有父级元素，带上指定目标可以返回指定目标元素。

toFixed() 保留n位小数，例如
var price = (p *n).toFixed(2);

如果直接修改商品数量，需要用表单的change事件，识别变化。

$(.itxt).change(function(){
	...
})

jQuery元素操作

遍历

隐式迭代是给不同元素做了同样操作。如果要做不同操作需要用遍历 .each()。

语法：

$("div").each(function(index,domEle){xxx;})

这里的index和domEle都只是代指，具体名字可以自定义。
each()方法遍历每一个元素，主要用dom处理。
两个参数，index是每个元素的索引号，domEle是DOM对象，不是jquery对象。
如果要写为jQuery对象，需要转为jquery对象$(domEle);

var arr = ["red","green","bule"];

$("div").each(function(i,domEle){
	console.log(i); 
    $(domEle).css("color",arr[i]);
})

dom对象没有css方法，jQuery有。
字符型型转化为数字型，用parseInt();
转换成浮点型，parseFloat();

$.each()和.each()

$.each()和.each()不同，前者即可以遍历DOM对象也可以遍历数组或者对象。

$.each($("div"),function(i,ele){
    console.log(i);
    console.log(ele);
});

$.each(arr,function(i,ele){
    console.log(i);
    console.log(ele);
})

$.each({
    name:"andy",
    age:18
},function(i,ele){
    console.log(i);
    console.log(ele);
})

创建删除添加元素

1 创建

$(function(){
   // 1.创建
	var li = $("<li>我是动态创建的li</li>");
   // 2.添加
    	//（1）内部添加
    $("ul").append(li); //内部添加并放在最后面
    $("ul").prepend(li);//内部添加并放在最前面
        //（2）外部添加
    var div = $("<div>wo shi hou ma sheng de</div>");
    $(".test").after(div);
    //$(".text").before(div);
   //3.删除
   	//remove 删除匹配的元素 自杀
    //empty 清空全部的子节点
    //html("")//添加空字符串 清空全部的子节点
}) 

jQuery位置尺寸操作

1 .获取大小
尺寸
height([val|fn])
width([val|fn])
innerHeight()
innerWidth()
outerHeight([options]) // option为tru 获得包括margin
outerWidth([options]) // option为tru 获得包括margin

以上参数为空则获取对应值，返回的是数字型。如果参数为数字则为修改对应值。参数可以不写单位。

2 .获取位置

2 .1 .offset() 相对于文档的坐标，与父盒子没关系。获取出来的是一个对象。
.offset(“left:20”);

2 .2 .posstion() 相对与带有定位的父亲的坐标，如果父盒子均没有定位，则相对于文档。只能获取不能设置偏移。

2 .3 .scrollTop() 被卷去的头部的高度。

        $(function () {
            $(document).scrollTop(100);//赋值，使得页面一打开就跳转到被卷去100px的位置。
            // console.log(1);
            var boxTop = $(".container").offset().top;
            $(window).scroll(function () {
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            })

        })
           // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })

动画只能是元素做动画，页面本身不能做动画。所以要封装一个$(“body,html”)

jQuery Day03 事件

单个事件注册

语法：
element.事件(function(){})
$(“div”).click(function(){事件处理程序})

其他事件和原生基本一致
比如mouseover、mouseout、focus、change、keydown、keyup、resize、scroll

on( ) 方法

on()方法在匹配元素撒谎那个绑定一个或者多个事件的处理函数。
语法：
element.on(events,[selector],fn)
1.events: 一个或者多个用空格分隔的事件类型，如click或keydown
2.selector:元素的子元素选择器

$("div").on({
    mouseenter:function(){
        $(this).css("background",skyblue);
    },
    click:function(){
        $(this).css("background",purple)
    }
    
})

advantage 1 : on() method’s
bond more events，and multiple event function
如果事件处理程序相同

$("div").on("mouseover mouseout",function(){
$(this).toggleClass("currents");
})

优势2 事件委派（事件委托）

吧原来加给子元素的事件绑定在父元素上。就是委派给父元素。

$("ul").on("click","li",function(){//ul 有很多 li 但是点击小li冒泡到ul上面，实现事件委派
XXXXX
})

优势3 on可以给未来动态创建的元素绑定事件

$("ol"),on("click","li",function(){
alert(11);
})

var li = $("<li>woshi huolai chuangjian de </li>")
$(ol).append(li);

off()

解绑事件。如果括号为空则解绑所有事件。 如果只想触发一次就用one()

自动触发

1 click() 2 trigger() 3 triggerHandler() 第三个方法不会触发默认元素默认行为

jquery拷贝对象

语法：
$extend([deep],target,object1,[objectN]);

1 .deep 设置为true 为深拷贝，默认为false浅拷贝。
2 .target 要拷贝的目标对象，粘贴对象。
3 .object1 被拷贝的对象。

jquery多库共存

1如果$符号冲突，那么就直接写jQuery这个单词

2可以自定义 让jquery释放对$的控制权。让用户自己决定。

var suibian = jQuery.noConflict();
console.log(suibian("span"));
suibian.each();

jQuery插件

jquery之家 htmleaf.com

瀑布流插件

先引入jquery插件

jquery22.com htmleaf.com

在head中引入对应js文件、jquery文件和css样式文件，并写出对应html结构代码

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" type="text/css" href="css/default.css"> 

然后引入html结构

<body>
    <section id="gallery-wrapper">
        <article class="white-panel">
            <img src="images/P_000.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_001.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="images/P_002.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="images/P_003.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="images/P_004.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="images/P_005.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_006.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_007.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
    </section>
</body>

在结构后面引入js代码

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/pinterest_grid.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#gallery-wrapper").pinterest_grid({
                no_columns: 5,
                padding_x: 15,
                padding_y: 10,
                margin_bottom: 50,
                single_column_breakpoint: 700
            });

        });
    </script>

懒加载技术

页面看得到的图片加载，看不到的不加载。

easylazyload.js
easylazyload 的js插件必须放在dom元素（图）后面引入。然后再写配置代码。

1 对应js文件
2 jquery文件
3 把所有图片的src 换为 data-lazy-sr
4 写对应js配置代码

    <!-- footer end -->
    <!-- 必须在这里引入我们的懒加载插件 -->
    <script src="js/EasyLazyload.min.js"></script>
    <script>
        lazyLoadInit({
            showTime: 1100,
            onLoadBackEnd: function(i, e) {
                console.log("onLoadBackEnd:" + i);
            },
            onLoadBackStart: function(i, e) {
                console.log("onLoadBackStart:" + i);
            }
        });
    </script>

全屏滚动

没有滚动条但是有下拉三角或者直接滚动鼠标滚轮。

    <script src="js/jquery.min.js"></script>
    <script src="js/fullpage.min.js"></script> <script>
        $(function() {
            $('#dowebok').fullpage({
                sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
                navigation: true

            });
        });
    </script>

bootstrap组件 和 bootstrap js插件

bootstrap自身有组件。

bootstrap 框架也是依赖于jquery开发的，因此里面的js插件的使用，也必须先引入jquery才行。

div class = container bootstrap需要放在这个结构内才能用？

bootstrap组件：常用功能的组合叫组件。

jquery清除标签内的数据：$(“ol”).empty();

数组 splice(i,p)方法 删除元素。 两个参数，i从哪个位置开始，p删除几个元素。

JS高级

JS AD Day 01

面向对象编程OOP：封装继承多态

使用功能来划分问题，而不是步骤。

类和对象

js中 对象是一组无序的相关属性和方法的集合，所有的事物都是对象。例如字符串，函数，数组等。

对象是由属性和方法组成的。
属性是事物的特征。
方法是事物的行为。

类，class，类抽象了对象的公共部分，泛指某一大类。
对象特指某一个，通过类实例化一个具体的对象。

1创建类
语法：

class name {
//class body 
}

创建实例：

var xxx = new name();

类必须使用 new 来实例化对象。

constructor 构造函数

constructor()方法是类的构造函数（默认方法）。用于传递参数，返回实例对象，通过new命令生成实例对象时，自动调用该方法。如果不写也会自动生成。

例：

class Star {
    constructor(uname,age) {
        this.uname = uname;
        this.age = age;
    }
    say() {
        console.log('hi');
    }
}

var ldh = new Star('刘德华',18);
console.log(ldh.uname);

继承

extends ，子类可以继承父类的一些属性和方法。

 class Father {
            money() {
                console.log(100);
            }
        }

        class Son extends Father {

        }

        var son = new Son();
        son.money();

super关键字

class Father {
constructor(x,y) {
    this.x = x;
    this.y = y;
}
    sum() {
        console.log(this.x + this.y);
    }
}

class Son extends Father {
	constructor(x,y) {
        super (x,y);//调用了父类中的构造函数
    }
    var son = new Son(1,2);
	son.sum();
}

var son = new son();
son.money();

super关键字可以调用父级构造函数也可以调用普通函数。

extends 继承就近原则 ，父亲和儿子 产生冲突的时候，离谁近先执行谁的。

如果要输出父类中的方法，加super.say()，super.say()就是调用父类中的普通函数say()；

super必须放在子类的this之前调用。

类和对象三个注意点

1 .es6中，类没有变量提升，所以必须先定义类才能通过类来实例化对象。
2 .类里面共有的属性和方法一定要加this使用。
3 .constructor里面的this指向的是创建的实例对象。类中的方法指向的是调用者，谁调用指向谁。

TAB栏切换案例

insertAdjacentHTML(positon,text);
appendChild 不支持字符串 insertAdjacentHTML支持。

双击事件 ：ondbclick
双击默认操作是选中文字，所以用以下代码清除默认操作：

window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();

核心思路，双击文字的时候，在里面生成一个文本框，当时去焦点或者按下回车的时候把文本框输入的值给原先的元素即可。

JS AD 02

构造函数与原型

ES6之前没有类的概念。基于构建函数的特殊对象来创建。

对象示例：

    // 1. 利用 new Object() 创建对象
    var obj1 = new Object();
	var obj = new Object();
	obj.uname = 'nancy';
	obj.sex = female;

	obj.sayHi = function() {
	console.log('Hi~');
	}


        // 2. 利用 对象字面量创建对象

        var obj2 = {};

		var obj2 = {
		username: "charlotte",
		age:18,
		sex:female,
		sayHi: function() {
		console.log('hi～');
		}
	}

        // 3. 利用构造函数创建对象
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
            this.sing = function() {
                console.log('我会唱歌');

            }
        }

        var ldh = new Star('刘德华', 18);
        var zxy = new Star('张学友', 19);
        console.log(ldh);
        ldh.sing();
        zxy.sing();

class方法示例：

class Star {
    constructor(uname,age) {
        this.uname = uname;
        this.age = age;
    }
    say() {
        console.log('hi');
    }
}

var ldh = new Star('刘德华',18);
console.log(ldh.uname);

js是一门动态的语言

构造函数法注意事项：
1.实例成员就是构造函数内部通过this指定的成员，比如name，age等。
实例成员需要通过实例化之后的对象来进行访问，实例化对象指的是，var ldh = new Star(‘刘德华’,18);中的ldh。
2.静态成员，在构造函数本身上添加的成员，sex就是静态成员
Star.sex = ‘男’；
静态成员只能通过构造函数访问，不能通过对象访问。通过console.log(ldh.sex)
会报错。

静态成员 – 直接给构造函数添加的成员称为静态成员

  function Hero(name, blood, weapon) {
      // 实例成员  /  对象成员   --  跟对象相关的成员，将来使用对象的方式来调用
      this.name = name;
      this.blood = blood;
      this.weapon = weapon;

      this.attack = function () {
        console.log(this.weapon + ' 攻击敌人');
      }
    } 

    // 静态成员  -- 直接给构造函数添加的成员
	// Warning 这里是给了构造函数本身
 
    Hero.version = '1.0';
    

    var hero = new Hero('刘备', 100, '剑');
    hero.attack();

    var hero1 = new Hero('关羽', 100, '刀');
    hero1.attack();
    // 静态成员不能使用对象的方式来调用
    console.log(hero.version); ////注意这里的h是小写

    // 静态成员使用构造函数来调用
    console.log(Hero.version); //注意这里的H是大写

构造函数实例原型之间关系

对象原型（_proto_）和构造函数（prototype）原型对象里面都有一个属性：constructor属性。constructor我们称为构造函数，此函数智慧构造函数本身。

原型对象

概念

我们每创建一个函数，都有一个*prototype(原型)*属性，这个属性是一个指针，指向一个对象，这个对象包含特定类型所有实例共享的属性和方法。

constructor主要用于记录该对象，引用于那个构造函数，可以让原型对象重新指向原来的构造函数。

原型链

静态类型与动态类型

静态类型语言：
是指在编译时变量的数据类型即可确定的语言，多数静态类型语言要求在使用变量之前必须声明数据类型，某些具有类型推导能力的现代语言可能能够部分减轻这个要求.。

动态类型语言：
是在运行时确定数据类型的语言。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。如python中，变量a=1,那a的类型就是整型，若a=”abc”，a的类型就是字符串。

this指向

谁调用指向谁

扩展内置对象

可通过原型对象，对原来的内置对象进行扩展自定义的方法。
比如给数组对象添加求偶数和求和的操作。

注意：数组和字符串内置对象不能给原型对象覆盖遭挫Array。prototype = {}，只能是Array.prototype.xxx = function(){}。

ES6之前的继承

ES6之前没有extends继承。可以通过构造函数+原型对象模拟继承。

call()

调用函数，并修改函数运行时的this指向

fun.call(thisAeg,arg1,arg2...)

thisArg :当前调用函数this的指向对象
arg1，arg2 传递的其他参数

构造函数继承父类型属性，原型对象继承父类型方法。

错误示范：son.prototype = father.prototype; 这样直接赋值会导致共用一个内存地址，修改一个动另外一个。

正确写法：son.prototype = new father();

如果利用了对象的形式修改了原型对象，需要用constructor指回原来的构造函数。

son.prototype.constructor = son;

ES5 新增方法

es5新增了一些方法，可以很方便地操作数组或者字符串，主要包括：
数组方法
字符串方法
对象方法

1.数组方法

some filter foreEach

使用这些最后需要用一个数组来接收新数据。

trim() 删除字符串首尾的空格。 value.trim();

2.对象方法

2.1 Object.keys(obj) 用于获取对象自身所有的属性（属性名字）。
效果类似for …in 返回一个由 属性名组成的数组。

//13

2.2 Object.defineProperty() 定义对象中的新属性或者修改原有属性，

Object.defineProperty(obj,prop,descriptor);

obj：被修改的对象
prop：被修改的属性，如果没有则添加
descriptor：

Object.define

案例 查询商品价格

        // 利用新增数组方法操作数据
        var data = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        }, ];
        // 1. 获取相应的元素
        var tbody = document.querySelector('tbody');
        var search_price = document.querySelector('.search-price');
        var start = document.querySelector('.start');
        var end = document.querySelector('.end');
        var product = document.querySelector('.product');
        var search_pro = document.querySelector('.search-pro');
        setDate(data);
        // 2. 把数据渲染到页面中
        function setDate(mydata) {
            // 先清空原来tbody 里面的数据
            tbody.innerHTML = '';
            mydata.forEach(function(value) {
                // console.log(value);
                var tr = document.createElement('tr');
                tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
                tbody.appendChild(tr);
            });
        }

        // 3. 根据价格查询商品
        // 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
        search_price.addEventListener('click', function() {
            // alert(11);
            var newDate = data.filter(function(value) {
                return value.price >= start.value && value.price <= end.value;
            });
            console.log(newDate);
            // 把筛选完之后的对象渲染到页面中
            setDate(newDate);
        });
        // 4. 根据商品名称查找商品
        // 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高]
        search_pro.addEventListener('click', function() {
            var arr = [];
            data.some(function(value) {
                if (value.pname === product.value) {
                    // console.log(value);
                    arr.push(value);
                    return true; // return 后面必须写true  
                }
            });
            // 把拿到的数据渲染到页面中
            setDate(arr);
        })
   

JS AD 03 函数进阶

函数定义方式

1 自定义函数（命名）
function fn() {};

2 函数表达式（匿名函数）
var fun = function() {};

3 利用newFunction(‘参数1’,‘参数2’,‘函数体’);
var f = new Function();

var fn = new Function('a','b','console.log(a + b)');
fn(1,2);

instanceof 函数 检测前者是不是属于后者。输出一个布尔值。

检测是不是XXX

console.log(fn instanceof Object );
//检测fn 是不是对象 

js中 万物皆对象。

函数调用

目前已经学习6种函数

1.普通函数
2.对象的方法
3.构造函数
4.绑定事件函数
5.定时器函数
6.立即执行函数

this指向问题

js提供了 一些函数方法来处理this指向问题，如 call(),apply(),bind().

call（）主要作用是实现继承

apply()主要是调用一个函数，
fun.apply(thisArg,[argsArray]);
thsiArg 运行时指定的this ，[argesArray] 传递的值，必须包含在数组里面。返回值就是函数的返回值。

严格模式

安全 避免歧义，预留ES6的关键字，strict

1 脚本严格模式

在脚本之前添加特定语句’use strcit’;

<script>
'use strict'; //后面的代码就会开启严格模式
</script>

//或者
<script>
    (function(){ //整个脚本里面只有一个立即执行函数 相当于给整个脚本开启了严格模式
    'use strict';
})(); 
</script>

2 函数严格模式

function fn() {

‘use strict’;

}

其他函数不受影响

删除变量 用 delete
严格模式下不能随意删除变量
严格模式下全局作用域中的函数的

高阶函数

指的是在调用等级上更高一级的函数。

回调函数是在前面所有参数和代码执行完毕之后再执行。

闭包

被访问的局部变量所在的函数，称为闭包函数

函数也是一种参数类型，所以可作为一个参数被返回。

闭包的作用，延伸了变量的作用范围。

for循环是一个同步任务，进入之后就会直接执行小括号内的代码，但是在大括号内的内容可能是异步的，比如一个onclick触发事件。

递归

可以在函数内部调用自身，此函数为递归函数

死递归 导致 栈溢出

使用return返回，并设定退出条件

一直不知道javascript还有类似jQ里面eq()的函数，原来原生javascript的item()有类似功能：

下面来说明下item()的用法：

定义和用法

item() 方法节点列表中位于指定索引的节点。

以下两条语法产生相同的结果：

document.body.childNodes.item(0);

document.body.childNodes[0];

深拷贝与浅拷贝

assign(targetobj,originalobj);浅拷贝语法糖

    <script>
        // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };
        var o = {};
        // 封装函数 
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 判断我们的属性值属于那种数据类型
                // 1. 获取属性值  oldobj[k]
                var item = oldobj[k];
                // 2. 判断这个值是否是数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    deepCopy(newobj[k], item)
                } else if (item instanceof Object) {
                    // 3. 判断这个值是否是对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item)
                } else {
                    // 4. 属于简单数据类型
                    newobj[k] = item;
                }

            }
        }
        deepCopy(o, obj);
        console.log(o);

        var arr = [];
        console.log(arr instanceof Object);
        o.msg.age = 20;
        console.log(obj);
    </script>

JS AD 04

正则表达式

也是对象，regular expression

创建两种办法

1 利用 RegExp 对象的构造函数创建

var 变量名 = new RegExp(/ 表达式/);

2 字面量创建

var rg = /123/;

var 变量名 = //;

正则表达式检测办法

test() ,返回 true 或者 false。符合我们定义规则的，返回true，反之返回false。

regexObj.test(str);

1 . regexObj 是写的正则表达式规则

2 . str是被检测文本

console.log(re.test(123));

^ 开始符，开始的时候需要以这个为开头
$ 结尾符，结束的时候需要以这个为结尾
[] 字符集，从中选出一个是符合括号内的内容，都返回true

 var rg1 = /^[a-z]$/;
 var rg1 = /^[a-zA-Z0-9-_]$/;
//如果中括号里面有^，则表示取反的意思，不能包含后面全部的内容

            console.log(rg1.test('a'));
            // console.log(rg1.test('b'));
            // console.log(rg1.test('c'));

            // console.log(rg1.test('abc'));

* 量词符号 ，规定前面的字符可以出现0 或者很多次，>=0。

+相当于出现1 或者很多次,>=1。

？相当于1 || 0

{n} 量词符，前面的一个字符重复n次，{n,}重复n次以上，{n,m}重复n-m次

() 表示优先级

预定义类

正则中的 或 符号是用一个| 来表示的。

昵称是中文：/^[\u4e00-\u9fa5]{2,8}$/

replace() [参数 /修饰符 ]

g全局匹配 i 忽略大小写

JS AD 05 ES6

一 ES6的新增语法

let 关键字

有了作用域

       let arr1 = [];

            for (let i = 0;i <2;i++){
                // var num = i;
                arr1[i] = function(){
                    console.log(i);
                }

                // arr1[i] = num;
            }
            arr1[0]();
            arr1[1]();
            // console.log(arr1[1]);
            // console.log(arr1[0]);

const 常量

对应的内存地址不可更改，也就是值不可更改。

特点：1 具有块级作用域 2 内存地址不可以更改 3 声明的时候就要赋值。

简单数据类型，直接不能修改数据大小，复杂数据类型可以修改内部的数据，但是不能给整个复杂数据类型直接重新赋值，重新赋值需要重新安排内存地址，所以不行。

例子：

   const ary = [11, 22];

            console.log(ary[1]);

            ary[1] = 100;
            console.log(ary[1]);//常量内部值可以更=更改

            ary = [100,200];// 报错 不允许常量整体重新赋值，需要重新分配内存地址。

结构赋值

没有对应值，则这个值为undefined

对象解构

两种写法

箭头函数

不定义this

对象不能产生作用域 ，内部方法定义在全局作用域下。

剩余参数

实参数量大于形参，多出来的叫剩余参数。

例：

          const sum = (...args) => {
                let total = 0;
                args.forEach(item => total += item);
                return total;
            };

           console.log(sum(10, 20)) ;
            
           console.log(sum(10,20,30)) ;

函数 sum里面，形式参数args的前面添加了三个…，代表可以接受剩余参数，在前面的形式参数与实参一一对应后，接受剩余的全部实参。

例:

            let ary1 = ['zhangsan', 'lisi', 'wangwu'];
            for (var k in ary1) {
      
            console.log(ary1[k]);
                //obj[k] 得到 属性里面的值。
            }

            let [s1,...s2] = ary1;
            console.log(s1);
            console.log(s2);

这个例子中，同时使用了剩余参数和结构赋值。

二 ES6的内置对象扩展

扩展运算符

剩余参数是吧剩余的参数放在一个形参中，扩展运算符是吧数组或者对象转为用逗号分隔的参数序列。

扩展运算符也是 …

作用1 合并数组
arry3 = […arry1,…arry2];

作用2 将类数组转换为真的数组
​

let oDivs = document.getElementsByTagName('div');
     console.log(oDivs);

     var oDivs1 = [...oDivs];
     console.log(oDivs1);

构造函数方法

arry.from()

    let arryLike = {
                "0":1,
                "1":2,
                "2":3,
                "length":3
            }

            for (var k in arryLike){
                console.log(arryLike[k]);
            }

            var ary111 = Array.from(arryLike); 

            console.log(ary111);

            for (var k in ary1){
                console.log(ary111[k]);
            }

arry.from() 还可以接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，处理后的数组放入返回的数组。

item代表数组的每个元素，乘2后输出。

       let arryLike = {
                "0":0,
                "1":1,
                "2":2,
                "length":3
            }
            
            var arry111 = Array.from(arryLike,(item) =>item*2);
            console.log(arry111);
//结果为[0,2,4]

关于 map ()

定义和用法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

返回一个数组，数组中元素为原始数组的平方根:

var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}

//输出结果为
//2,3,4,5

Set

数据结构 类似数组，内部数组都是唯一的不能有重复