javascript获取网页指定内容_JavaScript之总结回顾（一）

JavaScript的学习即将告一段落，知识点很多也很杂，需要把这段时间所学习的内容做一个大致的梳理。

JavaScript，简称JS，是一种客户端脚本语言，主要用来向HTML网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

jQuery ，是一款免费且开放源代码的JavaScript代码库，它提供了HTML文档操作，节点查找，事件处理，动画设计，Ajax交互等丰富的功能。jQuery设计的宗旨就是：写更少的代码，做更多的事情。

Node 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node 不是一种独立的语言、 不是 JavaScript 框架， Node 是一个除了浏览器之外的、可以让 JavaScript 运行的环境。Node.js 是一个让 JavaScript 运行在服务端的开发平台，是使用事件驱动，异步非阻塞I/O，单线程，跨平台的 JS 运行环境。

Ajax，即浏览器异步通信技术， 是一种用于创建快速动态网页的技术，它通过在后台与服务器进行少量数据交换， 可以使网页实现异步更新，即在不重新加载整个网页的情况下，对网页的某部分进行更新。

Vue ，是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

ES6，即ECMAScript 6.0，是 JavaScript 语言的下一代标准。

首先回顾一下ES6和jQuery。

一、ES6

1.let、var及const

var的作用是声明变量，它定义的变量可以修改，如果不初始化会输出undefined，但不会报错。

let命令也用来声明变量，它是块级作用域，它定义的变量只在块内生效，不会影响其他区域，更加“清洁”。let定义变量不存在变量声明提前，也不能重复定义。

const的作用是声明一个只读的常量，即一旦声明不可改变，需要在声明的同时赋值，否则会报错。它和let一样，都是块级作用域，不存在变量声明提前，不允许重复定义。

2.结构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

①数组的解构赋值

图1.数组的结构赋值

②对象的解构赋值

图2.对象的解构赋值

③字符串解构赋值

图3.字符串的结构赋值

3.字符串

ES6用反引号 ( ` ) 包住字符串,可以让字符串多行书写,也可以自由的嵌入变量.

4.对象

ES6 允许直接写入变量和函数，作为对象的属性和方法。

5.函数

ES6 允许使用“箭头”（=>）定义函数。

规则如下：

①如果参数只有一个，可以将()省略

arr.map(c=>c+1);

②如果没有参数，则一定能要写上()

()=> console.log(‘a’)

③如果多于一个参数，每个参数之间用逗号分隔

(x, y) => { ... }

④如果方法体只有一句代码，可以省略{} 和分号，如果有返回可以省略return

⑤如果方法体多于一句代码，则不能省略{} ,每句代码使用 分号分隔

注意：

a. 箭头函数没有自己的this，函数体内部写的this，指向的是外层代码块的this

b. 箭头函数内部的this是定义时所在的对象，而不是使用时所在的对象并且不会改变

c. 箭头箭头函数不能用作构造函数

d. 箭头函数内部不存在arguments，箭头函数体中使用的arguments其实指向的是外层函数的arguments

二、jQuery

jQuery选择器分为九大类：基础、层级、基本、内容、可见性、属性、子元素、表单、表单对象属性

1、基础

①id选择器

语法:$('#id值')→返回值 ：array(Element)，获取给定ID匹配的元素

​②element选择器

语法：$('标签名')→返回值：array(Element(s)),获取给定标签匹配的所有元素

③class选择器

​语法：$('.类名')→返回值 ：array(Element(s)),获取给定类名匹配的所有元素

④*选择器

语法：$('*')→返回值 ：array(Element(s)),获取所有的元素

⑤多个选择器

​语法：$('选择器1，选择器2，选择器n')→返回值 ：array(Element(s)),每个选择器匹配到的元素合并一起返回

2、层级

①ancestor descendant

语法：$('有效的选择器，第一个参数的后代元素') →将匹配指定选择器的所有后代元素一起返回

②父级 > 子级

语法：$('父级元素 > 子级元素')→在指定父级选择器下匹配的所有指定的子级元素一起返回

③prev + next

语法：$('有效的选择器 + 紧接着第一个有效选择器的有效选择器')→匹配所有符合条件的紧接在Prev后的next元素

④prev~siblings

语法：$('有效的选择器','作为第一个参数同辈的选择器')→匹配所有在Prev后面的同级元素

3、基本

①:first

语法:$('有效选择器:first')→获取匹配的第一个元素，只匹配一个元素

​②:last

​语法：$('有效选择器:last')→获取匹配的最后一个元素，只匹配一个元素

​③:not(selector)

语法：$('有效选择器(可填可不填):not(筛选的选择器)')→获取去除给定符合筛选选择器的元素外的所有元素

④:even

语法：$('有效选择器(可填可不填):even')→获取所有索引值为偶数的元素，从0开始计数

⑤:odd

语法：$('有效选择器(可填可不填):odd')→获取所有索引值为奇数的元素，从0开始计数

⑥:eq(index)

​语法：$('有效选择器(可填可不填):eq(索引值)')→获取指定索引值的元素，索引值从0开始计时，只返回一个元素

⑦:gt(index)

​语法：$('有效选择器(可填可不填):gt(索引值)')→获取所有大于指定索引值的元素，索引值从0开始计时

⑧:lt(index)

语法：$('有效选择器(可填可不填):lt(索引值)')→获取所有小于指定索引值的元素，索引值从0开始计时

⑨:header

语法：$(':header')→获取如h1,h2等标题元素

⑩:animated

语法：$(':animated')→获取所有正在执行动画效果的元素

⑪:focus

语法：$(':focus')→获取当前获得焦点的元素