1.前端進階之路
菜鳥級：設計圖的還原，就是根據PSD文件寫HTML和CSS；
入門級：加頁面特效，輪播圖、菜單、選項卡、無縫滾動等；
HTML5+CSS3炫酷頁面、手機端頁面；
Canvas游戲；
jQuery是頁面特效的完美解決方案；
普通級：處理數據，拿到后台工程是的數據，組件頁面，Ajax；
高端級：自己寫服務，自己寫后台，Node.js；
大神級：前端架構師，MVC，路由控制，后台協作，Angular，設計模式等。
2.jQuery簡介
官網：https://jquery.com/
口號：write less, do more.
本質：是一個快速、簡潔的JavaScript框架。
是繼Prototype之后又一個優秀的JavaScript代碼庫。
產品線：
jQuery1.x.x：兼容IE6、7、8等低級版本瀏覽器
jQuery2.x.x：從1代中剔除了所有兼容代碼，產品更輕量
jQuery3.x.x：全面支持HTML5和CSS3
文件引用：
本地存放，<script src="存放地址"></script>，官方下載jQuery文件
靜態資源公共庫(CDN)，<script src="三方平台提供的url"></script>，
第三方類庫很多，如節跳動(http://cdn.bytedance.com)、騰訊(https://libs.qq.com)等
在HTML頭部（<head>內）添加引用鏈接。
3.jQuery基礎
jQuery有非常便利的選擇元素的能力，用一個“$()”函數就可以搜尋頁面上的元素。
操作過程：
① jQuery操作頁面元素一定是從一個“$()”開始的；
② $() 函數括號內使用引號，引號中寫CSS選擇器；
③ 然后加上jQuery自己的方法（不能使用 js原生的方法）。
4.$()函數
① $() 函數的執行結果（返回值）是“jq”對象，
“jq”對象是一個包含了滿足選擇器條件的元素節點的信息集合，可以像數組一樣使用，
“jq”對象可以轉換成為 js對象，調用 js方法、屬性，
$()函數可以批量獲取和操作元素節點，
jq 只能調用自己的屬性和方法
代碼示例：
<body>
<div class="divClass"></div>
<div id="divLast"></div>
<div class="divClass"></div>
<script>
var $divs=$('div'); //可以批量獲取元素節點
$divs.css({width:"100px",height:"100px",border:"1px solid darkorange",
backgroundColor:"lightgreen",margin:"10px"}); //可以批量操作元素節點，但必須使用jQuery自己的方法
$divs[1].style.backgroundColor="lightblue"; //可以轉換成 js的元素節點，使用 js原生方法操作
console.log($divs); //返回值為 jQuery對象
console.log($divs.get(2)); //jQuery獲取對象集合中的節點，也可以使用jq自己的 get()方法
</script>
</body>
② size()方法和 length屬性
是 jq對象所擁有的，用於訪問 jq對象中元素節點的數量
兩種方式都能夠獲取通過 $()函數得到的頁面元素的個數
語法：var $count = $("div").size();
var $count = $("div").length;
③ jQuery全面支持CSS2.1的選擇器
$("css選擇器")，這里所說選擇器可以是id選擇器、類選擇器、標簽選擇器、包含選擇器等css2.1中提到的任意選擇器組合。
語法示例：$("div .span #part") .animate({font-size:"40px"}, 600);
上述示例函數中傳入了一個字符串，而$()函數在內部會采用正則表達式對其進行解析，然后在頁面中搜索符合條件的所有元素節點。
④ jQuery全面支持CSS3的選擇器
對於css3選擇器的支持，簡單來說就是支持對象屬性選擇器、關系選擇器的等在css3中提出來的選擇器，可以直接在$()中使用。
語法示例：$("div[id=divBox]").css("background-color","blue");
css3選擇器最大的問題實際就是瀏覽器的兼容性問題，但是使用jQuery則不存在兼容性問題。
5.jQuery自己的偽類
作用：從指定的元素節點集合中“篩選”出想要的元素。
① 選擇器：first，選擇指定元素集合中的第一個元素
② 選擇器：last，選擇指定元素集合中的最后一個元素
③ 選擇器：eq(n)，選擇指定元素集合中從 0 開始，第 n 個元素
④ 選擇器：lt(n)，選擇指定元素集合中從 0 開始，第 n 個元素之前的所有元素（不包含n）
⑤ 選擇器：gt(n)，選擇指定元素集合中從 0 開始，第 n 個元素之后的所有元素（不包含n）
⑥ 選擇器：odd，選擇指定元素集合中從 0 開始，所有奇數序號的元素
⑦ 選擇器：even，選擇指定元素集合中從 0 開始，所有偶數序號的元素
語法：$("選擇器 :偽類") .方法/事件;
其中，“eq(n)” 可以從 $()函數中提出來作為方法使用，如 $("選擇器") .eq(n) .方法/事件;，
但其他的偽類不可以這樣使用。
語法示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="jQueryFiles/jquery-1.8.3.js"></script>
</head>
<body>
<table border="1" style="color: orangered;text-align: center" cellspacing="0">
<tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td><td>第六列</td><td>第七列</td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<script>
$('tr').css('height','40px');
// :first
$('tr:first td').css('width','100px');
// :last
$('tr:last').css('background-color','lightpink');
// :eq(n)
$('tr:eq(5)').click(function () {
$(this).css('background-color','skyblue');
$(this).animate({'height':'60px'},'slow'); //slow\/normal\/fast(字符串),也可以使用毫秒數值。
});
// lt(n)/gt(n)
var backColor='';
backColor=$('tr:lt(5)').css('background-color');
$('tr:lt(5)').mouseover(function () {
$(this).css('background-color','yellowgreen');
});
$('tr:lt(5)').mouseout(function () {
$(this).css('background-color',backColor);
});
// table奇數列和偶數列選擇
$('tr td:nth-child(even)').click(function () {
$(this).text('偶數列');
$(this).css('color','gray');
});
$('tr td:nth-child(odd)').click(function () {
$(this).text('奇數列');
$(this).css('color','gold');
});
</script>
</body>
</html>
ps：上述“mouseover和mouseout”兩個事件可以使用“hover”替代，示例如下：
$("選擇器").hover(overFunction(){}, outFunction(){});
6.$()函數與 jQuery()函數等價
事實上在 jq中做出了一個聲明，這個聲明就是“$==jQuery”，即“$()和 jQuery()”兩種寫法是等價的。
ps：$() 函數並不是 jq所獨有的，在很多其他框架（如prototype框架）中也對“$()”函數做出了聲明，
根據 js語法，同名函數后聲明的會覆蓋前面的，
因此，在工程中如果引入了多個框架，那么使用 jQuery()這種寫法是最保險的。
但是，僅對於jq框架來說，兩種寫法是等價的。
jq中規定 $()函數的返回值是一個 jq對象，其職能調用 jq設定的屬性和方法。
jq對象轉換為 js原生對象的方式：
① $("選擇器")[n]，使用中括號加索引的方式
② $("選擇器").get(n)，使用 get()方法加索引的方式
在使用$()函數選擇元素節點的時候，括號中需要使用引號，但是下面三種例外：
$(window)
$(document)
$(this)
7.添加監聽事件
jQuery對象采用打點調用方法，在jQuery中給元素添加監聽的語法：
$("選擇器").事件名(function(){ });
因為$()函數獲取的是元素集合，所以是對集合中所有元素批量添加監聽事件，無需使用for循環語句。
常用事件名：
① click()，單擊事件
② dbclick()，雙擊事件
③ mouseenter()，鼠標進入
④ mouseleave()，鼠標離開
⑤ focus()，獲取焦點
⑥ blur()，失去焦點
注意，jQuery中添加事件時一律不加“on”前綴；
同一個對象可以添加多個不同事件，互不影響；
同一個對象可以添加多個相同事件，不會覆蓋，觸發順序與書寫順序一致。
另外，jQuery中對象綁定事件時還允許使用“鏈式聲明”的方式，不需要重復獲取 jq對象。
鏈式聲明時除最后一個綁定的函數末尾加分號表示綁定結束以外，其余函數后不寫任何內容。
語法示例：$("選擇器").事件名1(function(){ })
.事件名2(function(){ })
…… ……;
8.jQuery事件監聽的特點
jq中還提供了很對事件監聽的方式：
① 通過“on()”方法添加事件監聽，通過“off()”方法取消事件監聽；
語法：$("選擇器").on("事件名", function(){ }); //添加事件監聽
$("選擇器").off("事件名"); //去除事件監聽
② 通過“bind()”方法添加事件監聽
bind()方法的優點在於，它可以給一個jq對象添加多個不同的事件監聽，事件名用“空格”隔開即可。
語法：$("選擇器").bind("事件名1 事件名2 ……", function(){ });
另外，bind()方法還可以采用JSON形式的參數添加事件監聽，添加多個不同事件監聽，且擁有不同回調函數。
語法：$("選擇器").bind({事件名1: function(){ }, 事件名2: function(){ }, ……});
③ 通過“one()”方法添加事件監聽
one()方法添加的事件監聽是“一次性”的，只能執行一次。
語法：$("選擇器").one("事件名", function(){ });
90.大咖分享（彈性布局）：
Flex布局詳解（一）：https://zhuanlan.zhihu.com/p/163217760
Flex布局詳解（二）：https://zhuanlan.zhihu.com/p/164590960