一、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)基本过滤选择器
-
: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结尾的元素