WEB前端第四十三課——jQuery框架（一）$()函式、新增事件監聽
1.前端進階之路
菜鳥級：設計圖的還原，就是根據PSD檔案寫HTML和CSS；
入門級：加頁面特效，輪播圖、選單、選項卡、無縫滾動等；
HTML5+CSS3炫酷頁面、手機端頁面；
Canvas遊戲；
jQuery是頁面特效的完美解決方案；
普通級：處理資料，拿到後臺工程是的資料，元件頁面，Ajax；
高階級：自己寫服務，自己寫後臺，Node.js；
大神級：前端架構師，MVC，路由控制，後臺協作，Angular，設計模式等。
2.jQuery簡介
官網：https://jquery.com/
口號：writeless,domore.
本質：是一個快速、簡潔的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