首页 前端知识 ES6的新特性以及jQuery库总结

ES6的新特性以及jQuery库总结

2024-06-16 01:06:30 前端知识 前端哥 638 871 我要收藏

目录

一、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,目的是解决跨域访问的问题

二、jQuery库

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12249.html
标签
servlet
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!