WEB前端知识点整理（JQUERY+Bootstrap+ECharts）

1.JQUERY的概述：

jQuery 是一个 JavaScript 库。jQuery 极大地简化了JavaScript 编程，它很容易学习。
jQuery库包含以下功能：HTML 元素选取；HTML 元素操作；CSS 操作；HTML 事件函数；JavaScript 特效和动画；HTML DOM 遍历和修改；AJAX；Utilities
提示：除此之外，Jquery还提供了大量的插件

2.JQURY的使用：

jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 <script> 标签引用它：
<head><script src="jquery-1.12.4.min.js"></script></head>
（没有在 <script> 标签中使用 type="text/javascript"，在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言。）

3.jQuery 语法：

（1）jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
jQuery 中所有选择器都以美元符号开头：$()
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
（2）文档就绪事件
通常让jQuery 函数位于一个 document ready 函数中：
   $(document).ready(function(){
   // 开始写jQuery代码...
   });
这是为了防止文档在完全加载（就绪）之前运行 jQuery代码。如果在文档没有完全加载之前就运行函数，操作可能失败。
（3）#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。通过 id 选取元素语法： $("#test")
实例
当用户点击按钮后，有 id="test" 属性的元素将被隐藏：
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
（4） .class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。语法如下： $(".test")
（5）jQuery 事件
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件： $("p").click();
定义什么时间触发事件。可以通过一个事件函数实现：
$("p").click(function(){
// 动作触发后执行的代码!!
});

4.jQuery 效果

（1）jQuery hide() 和 show()
使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
语法
   $(selector).hide(speed,callback);
   $(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
实例
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
$("button").click(function(){ $("p").hide(1000); });
（2）jQuery toggle()
使用 toggle() 方法来切换 hide() 和 show() 方法。
语法
   $(selector).toggle(speed,callback);
实例
显示被隐藏的元素，并隐藏已显示的元素：
   $("button").click(function(){
   $("p").toggle();
   });
（3）淡入淡出jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
[1]jQuery fadeIn() 方法
   --用于淡入已隐藏的元素。
语法
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
实例
下面的例子演示了带有不同参数的 fadeIn() 方法：
   $("button").click(function(){
   $("#div1").fadeIn();
   $("#div2").fadeIn("slow");
   $("#div3").fadeIn(3000);
   });
[2]jQuery fadeOut() 方法
--用于淡出可见元素。
语法
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
实例
下面的例子演示了带有不同参数的 fadeOut() 方法：
   $("button").click(function(){
   $("#div1").fadeOut();
   $("#div2").fadeOut("slow");               $("#div3").fadeOut(3000);
   });
[3]jQuery fadeToggle() 方法
   jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
实例
下面的例子演示了带有不同参数的 fadeToggle() 方法：
   $("button").click(function(){
   $("#div1").fadeToggle();                   $("#div2").fadeToggle("slow");               $("#div3").fadeToggle(3000);
   });
[4]jQuery fadeTo() 方法
--该方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
实例
下面的例子演示了带有不同参数的 fadeTo() 方法：
   $("button").click(function(){
   $("#div1").fadeTo("slow",0.15);           $("#div2").fadeTo("slow",0.4);              $("#div3").fadeTo("slow",0.7);
（4）滑动
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()
（5）动画
animate() 方法
animate() 方法用于创建自定义动画。
语法
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
实例
下面的例子演示把 <div> 元素往右边移动了 250 像素：
   $("button").click(function(){
           $("div").animate({left:'250px'});
   });
animate() - 使用预定义的值
可以把属性的动画值设置为 “show”、“hide” 或 “toggle”。
实例
   $("button").click(function(){
       $("div").animate({ height:'toggle' });
   });
animate() - 使用相对值
可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=。
（6）停止动画
stop() 方法
stop() 方法用于在动画或效果完成前对它们进行停止。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法
$(selector).stop(stopAll,goToEnd);
（7）Callback
Callback 函数在当前动画 100% 完成之后执行。
jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子：$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
（8）链(Chaining)
通过 jQuery，可以把动作/方法链接在一起。
Chaining允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
jQuery 方法链接
直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。
实例
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：
   $("#p1").css("color","red")
       .slideUp(2000)
       .slideDown(2000);

5.JQuery HTML

（1）jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
DOM = Document Object Model（文档对象模型）
[1]获得内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
   $("#btn1").click(function(){
   alert("Text: " + $("#test").text());
   });
   $("#btn2").click(function(){
   alert("HTML: " + $("#test").html());
   });
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：
   $("#btn1").click(function(){
   alert("值为: " + $("#test").val());
   });
[2]获取属性
attr() 方法 - 用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
   $("button").click(function(){
   alert($("#runoob").attr("href"));
   });
（2）jQuery - 设置内容和属性
实例
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：
   $("#btn1").click(function(){
   $("#test1").text("Hello world!");
   });
   $("#btn2").click(function(){
   $("#test2").html("<b>Hello world!</b>");
   });
   $("#btn3").click(function(){
   $("#test3").val("RUNOOB");
   });
text()、html() 以及 val() 的回调函数
这三个方法同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
实例
下面的例子演示带有回调函数的 text() 和 html()：
   $("#btn1").click(function(){
   $("#test1").text(function(i,origText){
   return "旧文本: " + origText + " 新文本:        Hello world! (index: " + i + ")";
   });
   });
   $("#btn2").click(function(){
   $("#test2").html(function(i,origText){
       return "旧 html: " + origText + " 新 html:        Hello <b>world!</b> (index: " + i + ")";
   });
   });
设置属性 - attr()
该方法也用于设置/改变属性值，允许您同时设置多个属性。
实例
下面的例子演示如何同时设置 href 和 title 属性：
   $("button").click(function(){
   $("#runoob").attr({
   "href" : "http://www.runoob.com/jquery",    "title" : "jQuery 教程"
   }); });
（3） jQuery - 添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
（4） JQUERY - 删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
remove() 方法也可接受一个参数，允许对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
实例
下面的例子删除 class="italic" 的所有 <p> 元素：
   $("p").remove(".italic");
（5） JQUERY - 获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
返回 CSS 属性
语法
css("propertyname");
实例
下面的例子将返回首个匹配元素的 background-color 值：
   $("p").css("background-color");
设置 CSS 属性
语法
css("propertyname","value");
实例
下面的例子将为所有匹配元素设置 background-color 值：
   $("p").css("background-color","yellow");
设置多个 CSS 属性
语法
css({"propertyname":"value","propertyname":"value",...});
实例
下面的例子将为所有匹配元素设置 background-color 和 font-size：
   $("p").css({
       "background-color":"yellow",
       "font-size":"200%“
   });
（6）jQuery 尺寸
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth()：
返回元素的内部宽度，即元素内容区域的宽度，不包括边框和内边距。
计算方式：元素内容区域的宽度 + 左右内边距。
innerHeight()：
返回元素的内部高度，即元素内容区域的高度，不包括边框和内边距。
计算方式：元素内容区域的高度 + 上下内边距。
outerWidth()：
返回元素的外部宽度，包括元素内容区域、内边距和边框。
计算方式：元素内容区域的宽度 + 左右内边距 + 左右边框。
outerHeight()：
返回元素的外部高度，包括元素内容区域、内边距和边框。
计算方式：元素内容区域的高度 + 上下内边距 + 上下边框。

6.JQUERY遍历

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
这种移动被称为对 DOM 进行遍历。

（1） JQUERY 遍历 - 祖先
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
也可以使用可选参数来过滤对祖先元素的搜索。
该方法只会向上一级对 DOM 树进行遍历。
（2）JQUERY 遍历 - 后代
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
   $(document).ready(function(){
       $("span").parentsUntil("div");
   });
也可以使用可选参数来过滤对子元素的搜索。
find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
（3） JQUERY 遍历 - 同胞(SIBLINGS)
siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
（4） JQUERY 遍历- 过滤
三个最基本的过滤方法是：first(), last() 和 eq()，允许基于其在一组元素中的位置来选择一个特定的元素。
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。
实例

7.Boostrap简介

（1）Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
（2）安装：css jquery js（min是压缩过的）
!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap- theme.min.css">

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

8.Boostrap全局样式

（1）HTML 5 文档类型（Doctype）
<!DOCTYPE html> <html lang="zh-CN"> ... </html>

（2）为了确保适当的绘制和触屏缩放，需要在<head>之中添加 viewport meta 标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。
（3）.container 类用于固定宽度并支持响应式布局的容器。
<div class="container"> ... </div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid"> ... </div>

9.Bootstrap 栅格系统

（1）行必须放置在.container class内，以便获得适当的对齐（alignment）和内边距（padding）。
（2）通过“行（row）”在水平方向创建一组“列（column）”。
（3）内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
（4）类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
（5）通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
（6）如果一“行（row）”中包含了的“列（column）”大于 12，多余“列（column）”所在的元素将被作为一个整体另起一行排列。
（7）基本的网格结构
   <div class="container">
       <div class="row">
           <div class="col-*-*"></div>
           <div class="col-*-*"></div>
       </div>
       <div class="row">...</div>
   </div>
   <div class="container">....
（8）偏移列：
偏移是一个用于更专业布局的有用功能。可用来给列腾出更多的空间。例如，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
为在大屏幕显示器上使用偏移，要用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
（9）嵌套列：
为了在内容中嵌套默认的网格，要添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求必须占满12列）。
（10）列排序：
Bootstrap 网格系统另一个完美的特性，就是可以很容易地以一种顺序编写列，然后以另一种顺序显示列。
可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

10.Bootstrap 排版

（1）Bootstrap 中定义了所有 HTML 标题（h1 到 h6）的样式。
（2）内联子标题
如果需要向任何标题添加一个内联子标题，只要简单地在元素两旁添加<small>，或者添加 .small class，就能得到一个字号更小颜色更浅的文本。
（3）引导主体副本
为给段落添加强调文本，可以添加 class="lead"，将得到更大更粗、行高更高的文本。
（4）强调
HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。
（5）缩写
HTML 元素提供用于缩写的标记，如WWW或HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，添加 .initialism 到 <abbr>。
（6）列表
Bootstrap 支持有序列表、无序列表和定义列表。
[1]有序列表：有序列表是指以数字或其他有序字符开头的列表。
[2]无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果不想显示这些着重号，可以使用 class .list-unstyled 来移除样式。也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
[3]定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd> 是 <dt> 的描述。可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。

11.Bootstrap 代码

列表Bootstrap 允许以下两种方式显示代码：
（1）第一种是 <code> 标签。如果想要内联显示代码，那么应该使用 <code> 标签。
（2）第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么应该使用 <pre> 标签。
（3）注意：请确保在使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。

12.ECharts 对象

（1）init: 创建一个 ECharts 示例，返回 echartsInstance
（2）connect:这个方法是将2个echarts实例链接成依赖关系。
echarts.connect([chart1, chart2])
（3）disConnect: 这个和connect对应，则是表示断开echarts实例的依赖关系。
（4）dispose: 销毁实例，实例销毁后无法再被使用
（5）format: 这个属性用来格式化数据
addCommas: e(t),
encodeHTML: r(t),
formatTime: s(t,e),
formatTpl: o(t,e),
normalizeCssArray: n(t),
toCamelCase: i(t),
（6）getInstanceByDom:获取容器上的实例(echartsInstance)
（7）getInstanceById:通过ID获取实例
（8）registerMap:(mapName: string, geoJson: Object, specialAreas?: Object)。
mapName:地图名称，在 geo 组件或者 map 图表类型中设置的 map 对应的就是该值。
geoJson:GeoJson 格式的数据，具体格式见 http://geojson.org/。
specialAreas:可选。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。
注册可用的地图,这个在geo组件和map图表类型的时候回用到。
（9）registerTheme: (themeName: string, theme: Object)
注册主题，用于初始化实例的时候指定。

13.ECharts-Series

在 ECharts 中，series 表示一系列的数值以及从这些数值生成的图表。series 包括以下关键要点：
（1）一系列的数值：指定了图表中的数据集，可以是一个包含具体数值或对象的数组。
（2）图表类型（series.type）：指定了图表的类型，也被称为"图表类型"或"图表种类"。在 ECharts 中，series.type 决定了图表的整体样式和展现方式。
（3）其他参数： series 还可以包含其他一些配置参数，用于调整该系列的样式、标记点、线条样式等属性。
（4）在 ECharts 中，series.type 和 "图表类型" 是相同的概念。它用于定义图表的具体类型，决定了图表如何呈现数据。以下是一些常见的 series.type 和相应的图表类型：
line：折线图（line plot）
bar：柱状图（bar chart）
pie：饼图（pie chart）
scatter：散点图（scatter plot）
graph：关系图（graph plot）
tree：树图（tree plot）
等等...
（5）例如，下面是一个包含两个不同类型的系列（折线图和柱状图）的 ECharts 配置：
javascript
Copy code
option = {
series: [
{
type: 'line', // 折线图
name: 'Series A',
data: [10, 20, 30, 40, 50],
},
{
type: 'bar', // 柱状图
name: 'Series B',
data: [25, 15, 35, 45, 55],
},
],
// 其他配置项...
};
在这个例子中，series.type 决定了第一个系列是一个折线图，第二个系列是一个柱状图，它们分别表示不同的数据集，并以不同的图表类型展示。

13.ECharts-Component

在 ECharts 中，Component 表示图表中的各个组件，它们负责控制图表的不同方面和元素。以下是一些常见的组件和它们的解释：
xAxis（x轴）： x轴是笛卡尔坐标系中的横轴，用于表示水平方向的数据。
yAxis（y轴）： y轴是笛卡尔坐标系中的纵轴，用于表示垂直方向的数据。
grid（坐标系底板）： grid 是笛卡尔坐标系的底板，用于包裹整个图表，包括 x 轴和 y 轴。
angleAxis（极坐标系的角度轴）： angleAxis 用于极坐标系中，表示角度的轴。
radiusAxis（极坐标系的半径轴）： radiusAxis 用于极坐标系中，表示半径的轴。
polar（极坐标系底板）： polar 是极坐标系的底板，用于包裹整个极坐标系。
geo（地理坐标系）： geo 用于表示地理坐标系，可以绘制地图等地理信息。
dataZoom（数据区域缩放组件）： dataZoom 允许用户通过缩放改变数据的显示范围，支持在 x 轴和 y 轴上进行缩放。
visualMap（视觉映射组件）： visualMap 用于进行数据到视觉属性的映射，例如颜色深浅、大小等。
tooltip（提示框组件）： tooltip 显示鼠标悬停在图表上时的提示信息，包括数据信息等。
toolbox（工具箱组件）： toolbox 包含了一系列的工具，如保存图片、数据视图、刷新等。
series（系列）：系列是图表中的数据系列，定义了图表中的一组数据和对应的图表类型。
这些组件可以通过 ECharts 的配置项进行定制和配置，使得用户可以根据自己的需求调整图表的外观和交互行为。通过合理配置这些组件，可以创建丰富多彩、交互性强的数据可视化图表。