前端學習之JQuery選擇器第一天
JQuery選擇器
一、為什麼要學jQuery？
1、學習JS的遇到的痛點
痛點的總結：
二、jQuery是什麼？
1、jQuery描述（理解）
jQuery是js的一個庫，封裝了我們開發過程中常用的一些功能，方便我們來呼叫，提高了我們的開發效率。
Js庫是把我們常用的功能放到一個單獨的檔案中，我們用的時候，直接引用到頁面裡面來就可以了。
animate.js(JQurey.js)是我們自己封裝的庫，而jQuery是別人幫我們封裝好的庫。
2、學習jQuery，主要是學什麼呢？
目前這個階段，主要學習如何來使用jQuery操作DOM，其實就是學習jQuery封裝好的那些功能方法，這些方法叫做API
這些API的共同特點是：幾乎全都是方法。所以，在使用jQuery的API時，都是方法呼叫，也就是說要加小括號()，小括號裡面是相應的引數，引數不同，功能不同。
3、體驗JQuery
JS實現顯示盒子，設定文字。
JQ實現顯示盒子，設定文字。
三、如何使用jQuery？（重點）
使用步驟：
1．引包
2．入口函式
3．功能實現程式碼（事件處理）
jQuery隱式迭代簡單介紹：（瞭解）
隱式 對應的是 顯示，隱式迭代的意思是：在方法的內部進行迴圈遍歷，而不用我們自己再進行迴圈，簡化我們的操作，方便我們呼叫。
四、jQuery詳細解釋
1、版本介紹（瞭解）
注：v1.11.3和v2.1.4是兩個大版本的最新版
版本一：1.x版本
版本二：2.x版本
兩個版本的區別：2.x版本，不再支援IE6、7、8
兩個版本對瀏覽器的支援情況：
這幾天主要學習1.x版本，1.x版本說明：
同版本兩個檔案的區別：
min：壓縮版，壓縮過後，體積會更小
壓縮指的是：把註釋、空格、換行全部去掉，把變數名稱儘可能的換成更加簡短的字元。
壓縮的主要目的：就是讓檔案變的更小。
平時開發過程中，這兩個檔案使用哪個都可以；但是，專案上線的時候，推薦使用壓縮版。
2、引包注意點（理解）
第一點：在使用jQuery之前，先把jQuery檔案引到頁面中來
如果在使用jQuery之前，沒有引用jQuery檔案，會報錯：
第二點：src路徑一定要寫正確
如果src路徑寫錯，也會報錯：
3、jQuery的入口函式（重點）
4、jQuery入口函式與js入口函式的區別（理解）
js入口函式指的是：window.onload = function() {};
區別一：書寫個數不同
Js入口函式只能出現一次，出現多次會存在事件覆蓋的問題。
jQuery的入口函式，可以出現任意多次，並不會存在事件覆蓋問題。
區別二：執行時機不同
Js入口函式是在所有的檔案資源載入完成後，才執行。這些檔案資源包括：頁面文件、外部的js檔案、外部的css檔案、圖片等。
jQuery的入口函式，是在文件載入完成後，就執行。文件載入完成指的是：DOM樹載入完成後，就可以操作DOM了，不用等到所有的外部資源都載入完成。
文件載入的順序：從上往下，邊解析邊執行。
5、jQuery的$符號（重點）
js命名規範允許出現的字元有：數字、字母、下劃線、$。
Js命名規範允許作為變數命名開頭的字元有：字母、下劃線、$；但是，不允許以數字作為變數命名的開頭。
var $ = “我是字串”;
var $ = 123;
function $(){
alert(“我是函式$”);
}jQuery使用$符號原因：書寫簡潔、相對於其他字元與眾不同、容易被記住。
怎麼理解jQuery裡面的$符號：
$實際上表示的是一個函式。
$(); // 呼叫上面我們自定義的函式$
$(document）.ready(function(){}); // 呼叫入口函式
$(function(){}); // 呼叫入口函式
$(“#btnShow”) // 獲取id屬性為btnShow的元素
$(“div”) // 獲取所有的div元素
jQuery裡面的$函式，根據傳入引數的不同，進行不同的呼叫，實現不同的功能。返回的是jQuery物件
jQuery這個js庫，除了$之外，還提供了另外一個函式：jQuery
jQuery函式跟$函式的關係：jQuery ===$;
6、jQuery物件和DOM物件的相互轉換（難點）
DOM物件此處指的是：使用js操作DOM返回的結果。
var btn = document.getElementById(“btnShow”); // btn就是一個DOM物件
jQuery物件此處指的是：使用jQuery提供的操作DOM的方法返回的結果。
jQuery拿到DOM物件後又對其做了封裝，讓其具有了jQuery方法的jQuery物件，說白了，就是把DOM物件重新包裝了一下。
（聯想：手機和有手機殼的手機，手機就好比是DOM物件，有手機殼的手機就好比是jQuery物件）
var $btn = $(“#btnShow”); // $btn就是一個jQuery物件
DOM物件轉換成jQuery物件：
var $btn1 = $(btn); // 此時就把DOM物件btn轉換成了jQuery物件$btn1
// $(document）.ready(function(){}); // 呼叫入口函式
// 此處是將document這個js的DOM物件，轉換成了jQuery物件，然後才能呼叫jQuery提供的方法：ready
jQuery物件轉換成DOM物件：
// 第一種方式
var btn1 = $btn[0]; // 此時就把jQuery物件$btn轉換成了DOM物件btn1 （推薦使用此方式）
// 第二種方式
var btn2 = $btn.get(0);// 此時就把jQuery物件$btn轉換成了DOM物件btn2
這兩種方式都要記住，使用哪一種都可以。
案例：隔行變色
案例：開關燈
圖解：
所有這些，都體現了jQuery對js的封裝！
四、JS跟jQuery的區別是什麼？（理解）
1、為什麼要學jQuery選擇器？
1.1、JS提供的選擇DOM元素的方法有幾個？
考慮相容性的話，js裡面提供的選擇DOM的方法只有兩個：
|
JavaScript選擇元素的方法： |
|
|
document.getElementById(); |
通過id屬性獲取指定元素 返回唯一的DOM物件 |
|
document.getElementsByTagName(); |
通過標籤名獲取指定元素 返回DOM物件陣列（即使只有一個元素） |
正是因為js提供的選擇DOM的方法太少了，滿足不了我們平時開發的需要，所以，我們可以使用jQuery選擇器來彌補這方面的不足。
1.2、什麼是jQuery選擇器
jQuery選擇器是jQuery強大的體現，它提供了一組方法，讓我們更加方便的獲取到頁面中的元素。（聯想：CSS選擇符）
1.3、強大的jQuery選擇器（重點）
強大的原因：jQuery實現了從CSS1到CSS3所有的選擇器以及其他常用的選擇器。
各種選擇器之間可以相互代替，所以，平時真正用到的只是最常用的選擇器。
1.4、基本選擇器（重點）
|
符號(名稱) |
說明 |
用法 |
|
# |
Id選擇器 |
$(“#btnShow”).css(“color”, “red”); 選擇id為btnShow的一個元素（返回值為jQuery物件，下同） |
|
. |
類選擇器 |
$(“.liItem”).css(“color”, “red”); 選擇含有類liItem的所有元素 |
|
element |
標籤選擇器 |
$(“li”).css(“color”, “red”); 選擇標籤名為li的所有元素 |
1.5、層級選擇器（重點）、基本過濾選擇器
|
符號(名稱) |
說明 |
用法 |
|
|
層級選擇器 |
|||
|
空格 |
後代選擇器 |
$(“#j_wrap li”).css(“color”, “red”); 選擇id為j_wrap的元素的所有後代元素li |
|
|
> |
子代選擇器 |
$(“#j_wrap > ul > li”).css(“color”, “red”); 選擇id為j_wrap的元素的所有子元素ul的所有子元素li |
|
|
基本過濾選擇器 |
|||
|
:eq(index) |
選擇匹配到的元素中索引號為index的一個元素，index從0開始 |
$(“li:eq(2)”).css(“color”, ”red”); 選擇li元素中索引號為2的一個元素 |
|
|
:odd |
選擇匹配到的元素中索引號為奇數的所有元素，index從0開始 |
$(“li:odd”).css(“color”, “red”); 選擇li元素中索引號為奇數的所有元素 |
|
|
:even |
選擇匹配到的元素中索引號為偶數的所有元素，index從0開始 |
$(“li:odd”).css(“color”, “red”); 選擇li元素中索引號為偶數的所有元素 |
|
1.6、篩選選擇器（方法）（重點）
|
符號(名稱) |
說明 |
用法 |
|
find(selector) |
查詢指定元素的所有後代元素（子子孫孫） |
$(“#j_wrap”).find(“li”).css(“color”, “red”); 選擇id為j_wrap的所有後代元素li |
|
children() |
查詢指定元素的直接子元素（親兒子元素） |
$(“#j_wrap”).children(“ul”).css(“color”, “red”); 選擇id為j_wrap的所有子代元素ul |
|
siblings() |
查詢所有兄弟元素（不包括自己） |
$(“#j_liItem”).siblings().css(“color”, “red”); 選擇id為j_liItem的所有兄弟元素 |
|
parent() |
查詢父元素（親的） |
$(“#j_liItem”).parent(“ul”).css(“color”, “red”); 選擇id為j_liItem的父元素 |
|
eq(index) |
查詢指定元素的第index個元素，index是索引號，從0開始 |
$(“li”).eq(2).css(“color”, “red”); 選擇所有li元素中的第二個 |
css();hide();show()
index();過去當前元素在父元素中的索引值（解放自定義屬性）