目录
一、ES6的新特性
1.函数
(1)函数参数的默认值
(2)箭头函数
2.类
3.模块
(1)export导出
(2)使用import导入
(3)默认导出:export default 名称
二、jQuery库
1.简介:是JavaScript的库(对JavaScript的封装)
2.理念:写的少,做的多
3.使用方法
(1)在页面文件中导入jquery.js文件
(2)在script标签中编写js代码
4.jQuery的基本选择器
5.jQuery的基本过滤选择器
6.属性选择器
三、jQuery中操作元素的属性
1.读取属性值 attr(属性名)
2.修改属性的值
(1)attr(key,value)
(2)attr({属性1:属性值,属性2:属性值2})
(3)attr(key:fn)
四、操作元素的样式
1.通过class属性修改
2.通过css函数修改
3.获取或设置页面元素(标签)的宽度和高度
4.操作标签的html代码(就是操作标签的innerHTML属性)
5.操作input标签的值
五、jQuery的事件处理
1.页面载入完成的事件
2.给元素绑定事件
3.反绑定(取消绑定的事件)
4.一次性绑定事件
5.模拟鼠标悬停效果
六、jQuery的动画
一、ES6的新特性
1.函数
(1)函数参数的默认值
function fun(name='张三',age,cb){
函数体语句;
}
(2)箭头函数
a、没有参数用户括号代替 let fun = ()=>{ 函数体语句 }
b、只有一个参数,省略'()' let fn = arg=>{ 函数体语句 }
c、箭头函数本身隐含有return的作用(函数体只有一条语句,不带'{}')
let add = (arg1,arg2)=> arg1 arg2
等价于
let add = function(arg1,arg2){
return arg1 arg2
}
d、在箭头函数中若要使用隐式返还的功能返回一个对象,则必须用'()'将对象括起来
let test = ()=>({})
e、在箭头函数中没有this绑定
f、在箭头函数中没有内置的对象arguments
2.类
(1)ES5类的创建:先定义构造方法,在构造方法中封装类的功能,使用new运算符创建类的对象
(2)在ES6中使用class关键字创建类,语法更简洁、语义化更强
(3)ES6支持getter(获取属性值)和setter(设置属性值)方法
class Person{
constructor(name,age){
this.pname = name
this.page = age
}
get pname(){ //必须带get,方法名必须和属性名相同,用来获取私有属性pname的值
return this._pname //pname必须带上'_',表示pname是Person类的私有属性
}
et pname(newName){ //setter方法用来设置私有属性pname的值,必须带set
this._pname = newName
}
}
var p1 = new Person('关羽',28)
console.log(p1.pname) //默认调用的是get方法(pname())
p1.pname = '李四' //默认调用的是set方法
强调:属性的getter和setter方法必须同时定义
(4)静态成员:类的所有对象共享的成员。
说明:类的成员包括成员变量(属性)和成员方法
A、ES5中定义静态成员的方法:
- a、静态属性:构造方法名.属性名 //该属性是静态的,为所有对象共享
- b、静态方法:构造方法名.方法名(){} 该方法是静态的,为所有对象共享
B、ES6中定义静态成员的方法
通过static关键字来定义静态成员
(5)类的继承
A、ES6中类继承的实现:通过extends关键字来实现
B、ES5中继承的实现:通过call、apply、bind方法来实现继承
3.模块
一个模块就是一个.js文件,在模块内部定义的变量、函数、对象在外部是无法访问的,在模块的外部访问模块内部的内容在ES6中可以将其导出
(1)export导出
A、导出一个变量
B、导出多个变量
C、在导出变量时通过as给变量重命名
(2)使用import导入
(3)默认导出:export default 名称
a、一个模块只有一个默认导出,导入的名称和导出的名称可以不一致
b、一个默认导出,包含多个内容:将需要导出的内容打包到对象中
node运行.js文件时不识别ES6的模块化指令的解决办法
(1)报错:SyntaxError: Cannot use import statement outside a module
(2)原因:node的模块化指令和ES6的模块化指令不同:node不支持ES6的模块化指令
(3)解决办法(在vscode中)
a、将js文件放入html文件中:
<script type="module" src='../js/t6.js'></script>
默认的:<script type="text/javascript" src='../js/t6.js'></script>
仍然使用的是node的模块化方式
b、给vscode安装插件:live server,目的是解决跨域访问的问题