jQuery

jQuery是一個js庫，免費開源易用，提供了我們開發中常用到的操作DOM的API，解決了我們使用js操作DOM常遇到的一些問題，強大的選擇器，簡化我們的操作

jQuery的特點：

a. 輕量級b. 富應用c. DOM操作、事件處理、運動動畫、AJAXd. 跨瀏覽器（不再考慮瀏覽器相容）e. 鏈式呼叫f. 隱式迭代g. 豐富的外掛庫 .........

jQuery基本使用

官網下載: https://code.jquery.com/主版本號3是不相容ie9之前的瀏覽器主版本號1是相容所有瀏覽器

引入jQuery

路徑引入
<script src='檔案路徑'></script>
引入線上資源
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
 

入口函式

$(document).ready(function(){
    //類似於原生js的window.onload
});

簡寫

$(function(){   });

和window.onload的區別

區別一：書寫個數不同

Js入口函式只能出現一次，出現多次會存在事件覆蓋的問題。
jQuery的入口函式，可以出現任意多次，並不會存在事件覆蓋問題。

區別二：執行時機不同

Js入口函式是在所有的檔案資源載入完成後，才執行。這些檔案資源包括：頁面文件、外部的js檔案、外部的css檔案、圖片等。
jQuery的入口函式，是在文件載入完成後，就執行。文件載入完成指的是：DOM樹載入完成後，就可以操作DOM了，不用等到所有的外部資源都載入完成。
 

DOM物件和jQuery物件

jQuery物件:

jQuery選擇器拿到DOM物件後又對其做了封裝，讓其具有了jQuery方法的jQuery物件，說白了，就是把DOM物件重新包裝了一下。

jQuery物件轉換為DOM物件

第一種方式

var btn1 = $btn[0]; 

// 此時就把jQuery物件$btn轉換成了DOM物件btn1 （推薦使用此方式）第二種方式

var btn2 = $btn.get(0);// 此時就把jQuery物件$btn轉換成了DOM物件btn2

DOM物件轉換為jQuery

使用$(domObject)包裹就可以包裝成一個jQuery物件

jQuery選擇器

jQuery選擇器是jQuery強大的體現，它提供了一組方法，讓我們更加方便的獲取到頁面中的元素。語法和css的選擇符保持一致。

基本選擇器

"#"

Id選擇器

--示例$(“#btnShow”).css(“color”, “red”);選擇id為btnShow的一個元素（返回值為jQuery物件）

"."

類選擇器

--示例$(“.liItem”).css(“color”, “red”);選擇含有類liItem的所有元素

"element"

標籤選擇器

--示例$(“li”).css(“color”, “red”);選擇標籤名為li的所有元素

"空格"

層級選擇器(後代選擇器)

--示例$(“#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元素中索引號為偶數的所有元素

篩選（方法）

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元素中的第二個

優化jQuery的程式碼效能

01 jQuery中效能最快的選擇器是ID選擇器 ($('#someid')). 這是因為它直接對映為JavaScript的getElementById()方法。 選擇單個元素

02 類選擇器前面限定標籤名

03 快取jQuery物件，jQuery有隱式迭代機制，儲存為jQuery物件後在操作可以減少重複選擇

04 利用事件委派處理事件

05 減少直接操作新增多個DOM元素，使用字串拼接，新增給父元素效率會更高。

來源：千鋒HTML5