day24 ES6构造函数以及继承 设计模式以及jquery基本选择器

一、ES6构造函数和继承

class Father{

        constructor(name,age){

            this.name=name;

            this.age=age;

            this.init();//jerry在跑步

        }

        init(){

            this.run();

        }

        run(){

            alert(this.name+"在跑步");

        }

        eat(){

            alert(this.name+"在吃饭");

        }

     }

//   var p1=new Father("tom",19);

//   p1.eat();

    class Son extends Father{

        constructor(name,age,sex){

            super(name,age);

            this.sex=sex;

        }

        play(){

            alert(this.name+"在玩球");

        }

     }

     var son1=new Son("jerry",19);

     son1.play();//jerry在玩球

二、设计模式

     1）单例模式（永远保持一个实例）

          当实例第一个对象时，保存了这个对象的所有数据

          当实例化多个对象时，后面的每一个对象都使用的是第一个实例化的对象。

function Person(name,age){

        if(!Person.obj){//当这个对象不存在时，就添加上去

            Person.obj={

            name:name,

            age:age,

            init:function(){

                this.run();

            },

            run:function(){

                alert(this.name+"在跑步");

            },

            eat:function(){

                alert(this.name+"吃饭");

            }

            }

        }

        return Person.obj;

    }

    var p1=new Person("tom",10);

    var p2=new Person("jerry",10);

    alert(p1.name);//tom

    alert(p2.name);//tom

    p1.init();//tom在跑步

    p2.eat();//tom在吃饭

2）观察者模式

     什么时候观察

     观察要对应的情况后作出对应的反应。    

function Son(dad){

        this.dad=dad;

        this.cry=function(){

            this.dad.weinai();

        }

        setTimeout(function(){//延迟执行cry函数

            this.cry();

        }.bind(this),5000);

    }

    

    function Dad(){

        this.weinai=function(){

            alert("该泡奶粉了");

        }

    }

    var dad=new Dad();

    new Son(dad);

观察模式案例：

三、JQuery（就是框架，库）在这之前学的js都是原生的。

       $是jquery对象

1）引入jquery原则     

    先引入jquery.js，在引入自已写的代码。（在使用JQuery时，必须要引入这个文件，才能使用相关的代码，才有效果）

     jquery.js没有压缩的文件（平常用这个），jquery.min.js压缩过的文件。（产品上线用这个）；

2）jquery入口

     a.js入口是window.οnlοad=function(){};

        这个是整个页面都加载完毕后再执行这个里面的代码。包括src等资源。

     b.Jquery入口

        b.1$(document).ready(function(){});

        b.2$(function(){});

         这个只要浏览器加载到页面底部就可以执行里面代码了，不管其他图片等资源是否加载完。

四、JQuery下的选择器

       在css中怎么用。就该怎么用但是都要包个衣$("");

    (1).基本选择器

    1.*通配符

        var eles=document.getElementsByTagName("*");

        console.log(eles[eles.length-1].nodeName);

        console.log($("*").length);//有length属性

    2.元素选择器、类型选择符、标签选择器（div 、p）

      $("div").css("color","red");

    3.类选择器  .class名  

      $(".aa").css("color","yellow");

    4.id选择器   #id名

        $(function(){// 必须要写这个，jquery代码都在这个里面执行

        $("#box").css("color","red").css("width","200").css("                                   background","yellow");//这里也可以不加px，也可以加

        $("#box").css({//设置属性

         "width":"200px", 键可以加双引号，也可以不加双引号

         height:"100",    值可以加px，也可以不加px

         color:"red",     其他的地方该加就加。 

         background:"yellow"

        })

    });

   5.群组选择符  选择符1，选择符2......

         $("#box,.aa").css("color","red");

（2）层次关系选择符

        1.E F 后代选择符，包含选择符了，找到E下面的F元素

                $("div p").css("color","red");

        2.E>F  子代选择器，找到E下面儿子F，F一定是E的儿子，不能是孙子。

              $("#box>p").css("color","red");

        3.E+F相邻兄弟选择器，F一定是E的后面相邻兄弟选择器

                 $("#box+p").css("color","red");

        4.E~F 匹配到E元素后面所有的F兄弟元素

                $("#box~p").css("color","red");

(3)基本过滤选择器

1.     :first    找到这类第一个出现的

              $("p:first").css("color","blue");

      2.      ：not(select)   这个元素不变，但是这类元素其他都变

               <p id="text">div2中的p</p>//蓝色

        <p id="text1">div2中的p</p>

        <p id="text">div2中的p</p>// 蓝色

              $("p:not(#text1)").css("color","blue");

1.  :odd 选择奇数   :even   选择偶数

        $("li:odd").css("color","red");

1.  :eq（index） 选择这类元素的第几个

        $("li:eq(2)").css("color","red");

1.  :gt(index) 选择大于索引index元素

      $("li:gt(2)").css("color","red");

       :lt(index)    选择小于索引index元素

               $("li:lt(2)").css("color","red");

1.   ：header 选取标题（h1,h2,h3,h4,h5,h6）

       $(":header").css("color","red");

       7.:animated         

            $("#box").animate({//设置animate属性

     left:500

    })

    $("div:not(:animated)").css("color","blue");

1.  :focus

    $(".uname").focus();

     $(".uname:not(:focus)").val("jjjj");//聚焦的不用赋值

     });

  9.：empty  查找所有不包含子元素或者文本的空元素  

     $("td:empty").css("background","red")

1.   ：parent  查找所有含有子元素或者文本的元素

       $("td:parent").css("background","red");

1. attribute[]  匹配包含给定属性的元素

             $("div[id]").css("background", "red");

         $("input[name='newsletter']")    选择所有的name属性等                     于'newsletter'的input元素

         $("input[name!='newsletter']") 选择所有的name属性不等                   于'newsletter'的input元素

         $("input[name^='news']")         选择所有的name属性                          以'news'开头的input元素 

         $("input[name$='news']")         选择所有的name属性                         以'news'结尾的input元素 

         $("input[name*='man']")          选择所有的name属性包                     含'news'的input元素

         $("input[id][name$='man']")    可以使用多个属性进行联合选                  择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素