本文详细介绍了ES6的新特性，包括函数参数默认值、箭头函数和类的使用，以及模块的导入导出。接着，深入讲解了jQuery库，阐述了其作为JavaScript库的封装，简化DOM操作的理念，以及基本选择器、属性操作、样式修改、事件处理和动画功能的使用方法。
目录
1.简介：是JavaScript的库(对JavaScript的封装)
4.操作标签的html代码（就是操作标签的innerHTML属性）
一、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，目的是解决跨域访问的问题
二、jQuery库
1.简介：是JavaScript的库(对JavaScript的封装)
2.理念：写的少,做的多
3.使用方法
(1)在页面文件中导入jquery.js文件
(2)在script标签中编写js代码
'$'：是jQuery的全局对象,代表的是jQuery
$(function(){ //jQuery的入口函数
jquery代码
})
完整写法：
$(document).ready(function(){
jquery代码
})
4.jQuery的基本选择器
(1)id选择器：#id
(2)类选择器：.class
(3)标签名选择器：标签名
5.jQuery的基本过滤选择器
(1):first：选择第一个元素
(2):last：选择最后一个元素
(3):not(selector) : 不是指定的某个元素
(4):even：索引为偶数的元素
(5):odd：索引为奇数的元素
(6):eq(index) : 索引等于index的元素
(7):gt(index) : 索引大于index的元素
(8):lt(index) : 索引小于index的元素
6.属性选择器
(1)[attribute]：拥有给定属性的元素
(2)[attribute=value]：选择指定属性的值为value的元素
(3)[attribute!=value]：选择指定属性的值不等于value的元素
(4)[attribute^=value]：选择指定属性的值以value开始的元素
(5)[attribute$=value]：选择指定属性的值以value结尾的元素
(6)[attribute*=value]：选择指定属性的值含有value的元素
三、jQuery中操作元素的属性
1.读取属性值 attr(属性名)
2.修改属性的值
（1）attr(key,value)
参数key表示属性名，参数value表示属性值，属性名用括号
（2）attr({属性1：属性值，属性2：属性值2})
采用key：value方式设置属性值，可以设置多个属性，属性名不用括号括
（3）attr(key：fn)
参数key表示属性名，fn是回调函数，在函数中设置属性的值，属性名需要用引号括起来
3.删除属性 removeAttr（属性名）
四、操作元素的样式
1.通过class属性修改
（1）给元素添加指定的类名（class属性值）
addClass(类名)
（2）删除元素的class属性 removeClass(类名)
2.通过css函数修改
（1）获取css样式属性值 css(name)
参数name表示样式
（2）设置css样式 css(key,value)
参数key表示样式属性名，参数value表示样式属性值
（3）设置多个css样式
css（{样式1：值，样式2：值，样式3：值}）
3.获取或设置页面元素（标签）的宽度和高度
（1）获取宽度 width（）
（2）设置宽度 width（val）
（3）设置高度 height（）
（4）设置高度 height（val）
4.操作标签的html代码（就是操作标签的innerHTML属性）
（1）获取html值 html()
（2）设置html值 html（val）
5.操作input标签的值
（1）获取value值 val()
（2）设置value值 val(value)
五、jQuery的事件处理
1.页面载入完成的事件
（1）JavaScript中页面载入事件：window.onload
（2）jQuery中的页面载入事件：
$(doument).ready(function(){ })
简写方式
$(function(){ })
2.给元素绑定事件
（1）bind(type,[data],fn)
type：表示事件类型
data：可选参数，传递给事件对象的额外数据
fn：回调函数，事件处理函数
（2）元素对象.事件名（function(){}）
3.反绑定（取消绑定的事件）
unbind([type],[data])
type：事件类型，可选的
data：可选参数，传递给事件对象的额外数据
（1）unbind()：取消所有的绑定事件
（2）unbind()：取消绑定的事件
4.一次性绑定事件
one(type,[data],fn)
绑定的事件只能执行一次
5.模拟鼠标悬停效果
hover(over,out)
over：当鼠标进入时，执行该函数
out：当鼠标离开时，执行该函数
六、jQuery的动画
（1）隐藏 hide(speed,[callback])
speed参数：隐藏对象所用的时间
callback：可选参数，当对象隐藏后执行该函数
（2）显示 show(speed,[callback])
参数作用同上
（3）交替 toggle(speed,[callback]) 如果隐藏就显示，如果显示就隐藏
speed：表示速度，可以是数字，也可以是表示速度的字符串（‘slow’、‘normal’、‘fast’）
2.收缩与展开
（1）向上收缩 slideUp(speed,[callback])
（2）向下展开 sildeDown(speed,[callback])
（3）交替 sildeToggle(speed,[callback])
3.淡入淡出：通过改变对象透明度，来实现动画
（1）淡入 fadeIn(speed,[callback])
（2）淡出 fadeIn(speed,[callback])
（3）将对象透明度设定为指定值
fadeTo(speed,opacity,[callback])
opacity：指定对象不透明度（0-1之间的数字）
（4）透明度的交替
fadeToggle(speed,[callback])
扫一扫
2608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
