什么是原型链?
如果本身没有就一直一级一级往下寻找的过程,一直找到object
一、函数绑定继承
掌握构造函数绑定实现继承
图示:
利用call和apply实现绑定继承
二、组合继承也叫伪经典继承
将原型链继承和利用call构造函数绑定继承组合在一块
利用call构造函数绑定继承实现对原型属性和方法的继承
借用原型链实现对原型属性和方法的继承
图例:
利用call只能继承父类实例属性 不能继承父类原型上的属性和方法 所以要借助于原型链继承
三、拷贝继承
把父对象的所有属性和方法,拷贝进子对象
将父对象的prototype对象中的属性,一一拷贝给Child对象的prototype对象
优点:不会把子类原型中的属性和方法所覆盖 拷贝相当于是添加新属性操作
图例:
四、ES6-class类继承
类的概念:ES6里的构造函数
关键词:
constructor 用于传参
extends 子类继承父类通过关键字extends实现
super 利用super关键字调用父类的构造函数 (super表示父类)
图示:
五、继承的小知识
1、ES6继承实际上是一种语法糖,底层就是原型链继承 ,通过new一个父类的实例,给到子类的原型上
2、可以使用 instanceof 的方式来判断 实例是否是某一个类的实例
如果属于这个类会返回true
如果不属于这个类会返回false
实验证明 :
原型链继承方式 子类的实例是属于父类的
拷贝继承和构造函数绑定继承方式 子类的实例是不属于父类的
class 类继承(底层就是原型链继承):子类的实例是属于父类的显示true
拷贝继承:子类的实例是不属于父类的 显示false
六、jQuery基础
jQuery能做什么
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
jQuery的优势
体积小,压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
获取jQuery
进入jQuery官网:http://jquery.com
jQuery库文件
jQuery库分开发版和发布版
jquery-3.版本号.js(开发版) 约286KB 完整无压缩版本,主要用于测试、学习和开发
jquery-3.版本号.min.js(发布版) 约94.8KB 经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目
在页面中引入jQuery
jQuery基本语法
$(document).ready()与window.onload类似
window.onload :方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。
格式(ready是一个方法):
$(document).ready(function(){
})
简写:
$(function(){
})
$(document).ready()与window.onload区别:
1.执行次数不同
onload只能有一个,如果存在多个,后面的覆盖前面的,
ready函数可以有无数个,按照顺序依次执行
2.执行时机不同
onload需要等待页面所有资源加载完毕才执行
ready函数在DOM层渲染完毕则自动执行
3.有无简写
window.onload没有简写
$(document).ready() 有简写
jQuery选择器
标签选择器、类选择器、ID选择器、并集选择器、全局选择器、
1、标签选择器
格式:
$("h1").css("属性","值")
图示:
$("h1")会选取到所有的h1标签 使用css方法相当于(style)给元素添加行类样式
第一个参数表示属性 第二个参数是值
使用document.querySelector("h1").style.color="red" 方式:
使用document.querySelectorAll("h1")[0].style.color="red" 方式:
只有第一个h1变红
使用 document.querySelectorAll 方法想让所有都变红 只能循环遍历
2、类选择器
格式:
$(".class标签").css("属性","值")
图示:
3、ID选择器
id选择器只匹配第一个id 就算写多个id 也只匹配第一个
格式:
$("#id").css("属性","值")
图示:
4、并集选择器
如果写的不符合操作 写多个id 在这里也会帮你把样式加上
格式:
$("id选择器,.类选择器,元素选择器").css("属性","值")
图示:
5、全局选择器
所有的标签都会加上样式 只要是标签都会
格式:
$("*").css("属性","值")
图示: