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
son1.play();//jerry在玩球
二、設計模式
1）單例模式（永遠保持一個例項）
當例項第一個物件時，儲存了這個物件的所有資料
當例項化多個物件時，後面的每一個物件都使用的是第一個例項化的物件。
function Person(name,age){
if(!Person.obj){//當這個物件不存在時，就新增上去
Person.obj={
name:name,
age:age,
init
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.onload=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)基本過濾選擇器
-
: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");
-
:odd 選擇奇數 :even 選擇偶數
$("li:odd").css("color","red");
-
:eq（index） 選擇這類元素的第幾個
$("li:eq(2)").css("color","red");
-
:gt(index) 選擇大於索引index元素
$("li:gt(2)").css("color","red");
:lt(index) 選擇小於索引index元素
$("li:lt(2)").css("color","red");
-
：header 選取標題（h1,h2,h3,h4,h5,h6）
$(":header").css("color","red");
7.:animated
$("#box").animate({//設定animate屬性
left:500
})
$("div:not(:animated)").css("color","blue");
-
:focus
$(".uname").focus();
$(".uname:not(:focus)").val("jjjj");//聚焦的不用賦值
});
9.：empty 查詢所有不包含子元素或者文字的空元素
$("td:empty").css("background","red")
-
：parent 查詢所有含有子元素或者文字的元素
$("td:parent").css("background","red");
-
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結尾的元素