當你在追女生時，你們都聊些什麼？
在嗎，幹嘛，吃了沒。
哎呀，心疼，喝熱水。
多穿，快回，外面冷。
你忙，好夢，早點睡。
知道為啥單身了嗎？

一、jQuery簡介

1、jQuery 是一個JavaScript庫，也就是一個js檔案。
2、jQuery官網：jquery.com
3、jQuery的特點：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴充套件；擁有便捷的外掛擴充套件機制和豐富的外掛。jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
4、檔案的下載方式：https://cdnjs.com/libraries/jquery/1.12.0

5、檔案的形式
未壓縮版本：jquery-1.12.4.js 具有大量註釋，適用於開發和學習階段。
壓縮版本：jquery-1.12.4.min.js 幾乎不具有可讀性，體積小，適用於上線的專案中使用。

二、DOM物件和jQuery物件的關係

1、DOM物件時通過DOM方式獲取的標籤，jQuery物件時通過jQuery方式獲取的標籤。
2、jQuery物件實際是一個偽陣列形式的資料，內部儲存了DOM物件，所以jQuery物件是DOM物件的包裝集。
3、DOM物件只能使用DOM的功能，jQuery物件只能使用jQuery中的功能。
4、DOM物件轉換為jQuery物件：在$()中傳入一個DOM物件。
5、jQuery物件轉換為DOM物件：$box[0]

或者$box.get(2)
6、BOM頂級物件window，DOM頂級物件document，jQuery頂級物件$和jQuery，且$和jQuery全等。
7、$是一個函式結構，且$函式根據傳入的引數不同，可以實現不同的功能：
選擇器功能：$('div');
入口函式功能：$(function () {});
將DOM物件轉換為jQuery物件：$(document).ready(function () {});

三、選擇器功能

1、基本選擇器

① id選擇: 使用#標識

$('#box').text('這是box的內容');

② 標籤選擇器：標籤名

$('div').text('這是div');
 

③ 類選擇器：使用.標識

$('.box').text('這是類名為box的元素');

④ 交集選擇器：

$('div.box').text('這是類名為box的div');

⑤ 並集選擇器：使用,逗號表示

$('div.box,p').text('這是獲取的標籤');

2、層級選擇器

① 子代選擇器

$('#list>li').css('backgroundColor', 'red');

② 後代選擇器

$('#list li').css('backgroundColor', 'red');

3、索引選擇器

① :even - 用於獲取多個元素中索引值為偶數的元素

$('#list2>li:even').text('這是索引值為偶數的li的內容');

② :odd - 用於獲取多個元素中索引值為奇數的元素

$('#list2>li:odd').text('這是索引值為奇數的li的內容');

③ :eq() - 用於獲取某個指定索引的元素

$('#list2>li:eq(2)').text('這是第三個li');

四、jQuery的兩大特性

1、隱式迭代

在方法的內部會為匹配到的所有元素進行迴圈遍歷，執行相應的方法，而不用我們再進行迴圈，簡化我們的操作，方便我們呼叫。

2、鏈式程式設計

任意的設定形操作後都可以繼續操作當前物件。

$('#box').css('width', '100px').text('這是box的內容').css('backgroundColor', 'red');

五、篩選選擇器

篩選選擇器和前面的選擇器結構不太相同，都是方法形式，用於完善鏈式程式設計操作。

1、上下級操作

① children() 子代選擇器
引數：選擇器字串，可選，不傳預設選擇所有

$('#list').css('width', '300px').children('.item').css('backgroundColor', 'red');

② find() 後代選擇器
引數：選擇器字串，必選，不傳就會被忽略
③ parent() 父元素選擇器
引數：選擇器字串，可選
④ parents() 祖先元素選擇器
引數：選擇器字串，可選，不傳引數可以使用，但是會將html和body等標籤均進行操作，沒有意義，推薦使用時進行引數設定。

2、同級操作

① siblings() - 獲取所有同級元素
引數：選擇器字串，可選
② next() - 獲取下一個同級元素
引數：選擇器字串，可選
③ prev() - 獲取上一個同級元素
引數：選擇器字串，可選
④ nextAll() - 獲取後面的所有li
引數：選擇器字串，可選
⑤ prevAll() - 獲取前面的所有li
引數：選擇器字串，可選

3、索引操作

① eq() - 用於按照指定索引獲取元素

$('li').eq(2).text('這是第三個li');

② index() - 用於獲取某個元素在同級元素中的索引值

$(function () {
	$('span').click(function () {
		console.log($(this).index());
	});
});