前端进阶学习笔记

jQuery介绍

• jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
• 它的设计思想是write less,do more

jQuery能做什么

• 访问和操作DOM元素
• 控制页面样式
• 对页面事件进行处理
• 扩展新的jQuery插件
• 与Ajax技术完美结合

jQuery和javaScript的关系

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

其实，jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩，而jQuery也是对JavaScript的高度压缩库

jQuery的优势

• 体积小，压缩后只有100KB左右
• 强大的选择器
• 出色的DOM封装
• 可靠的事件处理机制
• 出色的浏览器兼容性

jQuery的使用

<script src="js/jquery-3.4.1.min.js"></script>

基本语法

<script> $(selector).action(); </script>

基本语法说明

• 工厂函数 $() ：将DOM对象转化为jQuery对象
• 选择器 selector：获取需要操作的DOM 元素（没错，用法基本上和css一致 ）
• 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”

 DOM对象和DOM对象之间的转换

var a = document.getElementById("name"); // a是DOM对象 
var b = $(a); // b是jQuery对象

var a = $("#name"); // a是jQuery对象 
var b = jqObject.get(0); // b是DOM对象

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

 层次选择器

 属性选择器

 过滤选择器

 鼠标事件

 键盘事件

 表单事件

 鼠标悬停复合事件

hover()方法相当于mouseover与mouseout事件的组合

<img src="img/3.jpg" width="400"> 
<script src="js/jquery-3.4.1.min.js"></script> 
<script> 
    $("img").hover( 
        function(){ 
            $(this).css("border","5px solid red"); 
        },
        function(){ 
            $(this).css("border","5px solid white"); 
        }
    ); 
</script>

连续点击复合事件

<h2>修仙小说</h2>
<ul>
    <li>凡人修仙传</li>
    <li>遮天</li>
    <li>神墓</li>
    <li>残袍</li>
    <li>大主宰</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
  $("h2").click(function(){
      $("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换
  });
</script>

事件的动态绑定

可以同时绑定一个或多个事件

$(".del").on('click', function() {
    alert('hello');
})

$(".del").on('click mouseover', function() {
    alert('hello');
})

元素的隐藏和显示（带动画效果）

• show( speed )：显示
• hide( speed )：隐藏
• toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示
• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

 改变元素的高（拉伸效果）

• slideDown( speed ) ：显示
• slideUp( speed )：隐藏
• slideToggle( speed )等价于slideDown+slideUp
• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

不改变元素的大小（淡入淡出效果）

• fadeIn( speed ) 显示
• fadeOut( speed ) 隐藏
• fadeToggle( speed ) 等价于fadeIn+fadeOut动画
• fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起 ；

 属性函数

•  attr( "属性" ); 获得元素的属性值
• attr( "属性" , "新值" ); 修改元素的属性值
• attr( 样式参数 ) ：样式参数可以写成json格式
• val() ; 获得表单元素中的value值
• val("x") 修改表单元素中的value值
• html(); 获得元素中的内容（标签+文本）
• html("x") 修改元素中的内容（标签+文本）
• text(); 获得元素中的文本
• text("x") 修改元素中的文本

样式函数

• css( "属性"); 获得该属性值
• css( "属性","值"); 设置属性的值
• css( { json} ); 设置多个属性的值

获取标签的高和宽

• width(); 获得元素的宽度
• width( number ); 修改元素的宽度
• height(); 获得元素的高度
• height( number ); 修改元素的高度

类样式选择器

• addClass(); 为元素添加类样式
• removeClass(); 将元素的类样式移除
• toggleClass(); 样式的切换（有->无，无->有）

节点操作

• 创建节点

• • 工厂函数$()用于获取或创建节点

• 插入节点
  • 插入子节点

• 插入同辈节点

• 替换节点
  • replaceWith()
  • replaceAll()
• 复制节点
  • clone()
• 删除节点
  • remove()删除整个节点
  • empty()清空节点内容

祖先节点

 用于向上遍历 DOM 树的方法

• parent() 返回被选元素的直接父元素，仅仅是上一级 （找爸爸）
• parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

同辈元素

• next() 获取紧邻匹配元素之后的元素
• prev() 获取紧邻匹配元素之前的元素
• siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素

后代元素

• children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”
• find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。

元素的过滤

• first()：过滤第一个元素
• last()：过滤最后一个元素
• eq(index)：过滤到下标为index的元素
• not()：除了什么之外的元素
• is()：返回布尔，判断是不是这种元素

ECMAScript6 简介

• ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

ECMAScript 和 JavaScript 的关系

• 要讲清楚这个问题，需要回顾历史。
• 1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织ECMA，希望这种语言能够成为国际标准
• ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
• 因此，ECMAScript （宪法）和 JavaScript（律师） 的关系是，前者是后者的规格，后者是前者的一种实现

什么是Node.js

• 简单的说 Node.js 就是运行在服务端的 JavaScript。
• JavaScript程序，必须要依赖浏览器才能运行！没有浏览器怎么办？OK，nodejs帮你解决
• Node.js是脱离浏览器环境运行的JavaScript程序，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

Node.js有什么用

如果你是前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那Node.js是一个非常好的选择。

Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。

当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。

查看版本

node -v

服务器端应用开发（了解）

const http = require("http"); // node中自带的require引入方法，http也是node中自带的服务对象
http.createServer( function(request,response){

    // 发出http请求的头部信息
    // http的状态码：200；OK
    // 请求的内容类型：text/plain
    response.writeHead(200,{"Content-Type": "text/plain"});

    //响应的数据 "hello,welcome！" ,此时，并不支持中文（以后一定会解决！）
    response.end("hello,welcome!");
} ).listen(8888); // 监听端口

console.log("服务器已启动，请访问 http://127.0.0.1:8888");

什么是NPM

• NPM全称Node Package Manager，是Node.js包管理工具
• 是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是Node.js的包管理工具，相当于端的Maven
• 如果一个项目需要引用很多第三方的js文件，比如地图，报表等，文件杂而乱，自己去网上下载，到处是广告和病毒
• 那么，我们就想办法，把这些js文件统一放在一个仓库里，大家谁需要，谁就去仓库中拿过来，方便多了
• npm就是这个仓库系统，如果你需要某个js文件，那就去远程仓库中下载，放在本地磁盘中，进而引用到我们的项目中

 使用npm管理项目，项目初始化

全新创建一个目录，作为项目目录，使用dos命令进入此目录，输入命令

npm init

# 接下来是一堆项目信息等待着你输入，如果使用默认值或你不知道怎么填写，则直接回车即可。

# package name:  你的项目名字叫啥
# version: 版本号
# description: 对项目的描述
# entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
# test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
# git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
# keywirds： 项目关键字（我也不知道有啥用，所以我就不写了）
# author: 作者的名字（也就是你叫啥名字）
# license: 发行项目需要的证书（这里也就自己玩玩，就不写了）

最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml

我们之后也可以根据需要进行修改。

上述初始化一个项目也太麻烦了，要那么多输入和回车。想简单点，一切都按照默认值初始化即可

npm init -y

修改npm镜像和存储位置

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

设置镜像和存储地址：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org

#设置npm下载包时保存在本地的地址（建议英文目录）
npm config set prefix "E:\repo_npm"

#查看npm配置信息
npm config list

npm install命令的使用

npm install jquery

• 使用 npm install 安装依赖包的最新版
• 模块安装的位置：项目目录 ode_modules
• 安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
• 同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的<dependencies>

安装指定版本插件，后缀@版本号

npm install jquery@1.9.1

ES6基本语法

•  ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

let声明变量

与我们的JavaScript中var声明变量有什么区别？

1、作用域不同

{
    var a = 0; // var声明的变量是全局变量
    let b = 0; // let声明的变量是局部变量
}

console.log(a);
console.log(b); //b is not defined：b没有定义

2、声明次数不同

// var可以声明多次
// let只能声明一次
var m = 1;
var m = 2;
let n = 3;
let n = 4; //SyntaxError: Identifier 'n' has already been declared（语法错误：n已经声明过了）

console.log(m);
console.log(n);

3、声明与使用顺序不同

// var 声明的变量会全局存储
// let 声明的变量只能在执行后才存储

console.log( x ); //没有报错，输出：undefined
var x = "苹果";

console.log(y);  //y is not defined（y没有定义）
let y = "香蕉";

const声明常量

1. 一旦声明之后，其值是不允许改变的
2. 一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错误，声明常量丢失了初始化）

解构赋值

• 解构赋值是对赋值运算符的扩展
• 它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
• 解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取
• 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取

数组解构

var arr = [1,2,3];

// 传统的js
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);

//es6的解构
var [x,y,z] = arr;
console.log(x,y,z);

对象解构

var user = {
    username : "吕布",
    weapon:"方天画戟",
    horse:"赤兔马"
};

// 传统的js
let mingzi = user.username;
let wuqi = user.weapon;
let zuoji = user.horse;
console.log("姓名:"+mingzi+",武器:"+wuqi+",坐骑:"+zuoji);

//es6的解构
let {username,weapon,horse} = user;  // 注意：解构的变量名必须是对象中的属性
console.log("姓名:"+username+",武器:"+weapon+",坐骑:"+horse);

模板字符串

• 模板字符串相当于加强版的字符串
• 用反引号 `,除了作为普通字符串，还可以用来定义多行字符串
• 还可以在字符串中加入变量和表达式。

let str = `hello,
你俩在哪呢？
心情不好，出来喝点啊！`;

console.log(str);

let name = `吕布`;
let age = 24;

// 传统的拼接字符串
var info1 = "我叫:"+ name +",我今年"+age+"岁！";
console.log(info1);

// es6的拼接字符串
var info2 = `我叫:${name},我明年${age+1}岁！`;
console.log(info2);

function test(){
    return "吃喝玩乐";
}

let str = `悲催的人生，从${test()}开始`;
console.log( str );

声明对象的简写

let name = `吕布`;
let age = 28;

//传统
let user1 = {
    name : name,
    age : age
};
console.log(user1);

//es6新语法中的简写
let user2 = {name,age};
console.log(user2);

定义方法的简写

let user1 = {
    say : function(){
        console.log("大家好！");
    }
};

user1.say();

//es6
let user2 = {
    say(){
        console.log("大家好啊！");
    }
};

user2.say();

对象拓展运算符

拓展运算符 {...} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象

let user1 = {
    name:"项羽",
    age:34
};

let user2 = {...user1}; // 深拷贝（克隆）

console.log(user1);
console.log(user2);
// 合并对象
let user1 = {
    name:"项羽",
    age:34
};

let user2 = {head:"诸葛亮"};

let user = {...user1,...user2};

console.log( user );

 函数的默认参数

function test(name , age = 18){
    console.log(`我叫${name}，我今年${age}岁`);
}

test("吕布",33); //我叫吕布，我今年33岁
test("貂蝉"); //我叫貂蝉，我今年18岁
test("关羽",null); //我叫关羽，我今年null岁
test("马超",""); //我叫马超，我今年岁
test("张飞",undefined); //我叫张飞，我今年18岁

函数的不定参数

function test( ...arg ){
    console.log(`传入了${arg.length}个参数`);
    for(var i = 0 ;i<arg.length;i++){
        console.log(arg[i]);
    }
}

test(1);
test(1,2);
test(1,2,3,4,5,6);
test();
test("郭","嘉",28);

箭头函数

// 当箭头函数一个参数时，（）可以省略
// 当箭头函数没有参数或者有多个参数，要用（）括起来
// 当箭头函数的函数体有多行语句，用｛｝括起来，表示代码块
// 当只有一条语句，并且需要返回时，可以省略｛｝，结果会自动返回

var f3 = (a,b) => {
    let sum = a+b;
    return sum;
}
console.log( f3(3,7) );

// 可以将f3进行简化
var f4 = (a,b) => a + b;
console.log( f3(11,22) );

Promise（了解）

next = n =>
  //Promise的构造函数接收一个参数，是函数，
  //并且传入两个参数：resolve(异步操作执行成功后的回调函数)，reject(异步操作执行失败后的回调函数)
  new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(n);
    }, 1000);
  });

next(1)
  .then(res => { // 成功
    console.log(res);
    return next(2); //在then方法中调用的next方法，一定要用return ，否则不会通过resolve把数据往下传递
  })
  .then(res => {
    console.log(res);
    return next(3);
  })
  .then(res => {
    console.log(res);
  })
  .catch(() => {  //处理失败：catch方法的第二个参数是失败的回调
    console.log("出错啦！");
  });

模块化

传统模块化方式

function addUser(name){
    return `保存${name}成功！`;
}

function removeUser(id){
    return `删除${id}号用户！`;
}

// 声明模块并导出
// module.exports={
//     save:addUser,
//     delete:removeUser
// }

// 声明模块导出的简写
module.exports={
    addUser,
    removeUser
}
```

test.js

```js
let user = require("./user.js"); //引入user模块

console.log( user );

let result1 = user.addUser("吕布");
let result2 = user.removeUser(101);

console.log(result1);
console.log(result2);

ES6的模块化

let name = "老孙";
let age = 66;
let fn = function(){
    return `我是${name}!我今年${age}岁了！`;
}

// 声明模块并导出
export{
    name,
    age,
    fn
}
```

test.js

```js
import {name,age,fn} from "./user.js"

console.log(name);
console.log(age);
console.log(fn);

运行test.js，报错：SyntaxError: Unexpected token { （语法错误，在标记{的位置 ）

原因是node.js并不支持es6的import语法，我们需要将es6转换降级为es5！需要安装babel-cli

链接进入  ——》  babel的安装及使用

 模块化as的用法

// 如果你不想暴露模块当中的变量名字，可以通过as来进行操作:
let name = "老孙";
let age = 66;
let fn = function(){
    return `我是${name}!我今年${age}岁了！`;
}

// 声明模块并导出
export{
    name as a,
    age as b,
    fn as c
}

import {a,b,c} from "./user.js";

console.log(a);
console.log(b);
console.log( c() );

// 也可以接收整个模块
import * as info from "./user.js";   // 通过*来批量接收，as来指定接收的名字

console.log(info.a);
console.log(into.b);
console.log( into.c() );

默认导出

export default{
    name:"老孙",
    eat(){
        return "吃点啥！";
    }
}

/*****************导入****************************/
import p from "./person.js";
console.log( p.name, p.eat() );

重命名export和import

export let name = "我是来自student1.js";

/*******************student2.js************************/
export let name = "我是来自student2.js";

/*******************test_student.js************************/
import {name as name1} from './student1.js';
import {name as name2} from './student2.js';

console.log( name1 ); // 我是来自student1.js
console.log( name2 ); // 我是来自student2.js

 什么是Bootstrap？

• Bootstrap来自 Twitter，是目前最受欢迎的**响应式**前端框架。
• Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。

为什么使用 Bootstrap

• 移动设备优先：自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式。
  • 不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。
  • 也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
• 浏览器支持：所有的主流浏览器都支持 Bootstrap。
• 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
• Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
• 它为开发人员创建接口提供了一个简洁统一的解决方案。
• 它包含了功能强大的内置组件，易于定制。
• 它还提供了基于 Web 的定制。
• 它是开源的。

bootstrap快速通道参考链接：      BootStrap详解

学习和使用bootstrap主要参考官网：

中文官网： https://www.bootcss.com/

英文官网：http://getbootstrap.com

 对于bootstrap，我的原则是随拿随查随用