一、Jquery簡介

Jquery是一個優秀的Javascrīpt框架。它是輕量級的js庫(壓縮後只有21k) ，它兼容CSS3，還兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 Jquery應用到我們的項目中能夠使程序員從設計和書寫繁雜的JS應用中解脫出來，將關註點轉向功能需求而非實現細節上，從而提高項目的開發速度。它有助於簡化 JavaScript以及Ajax 編程。它能讓你在你的網頁上簡單的操作文檔、處理事件、實現特效並為Web頁面添加Ajax交互。

官方站點：http://jquery.com/ 中文站點：http://jquery.org.cn/ ----------最後附上jq各版本的引用地址

二、jQuery的特點

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

三、jQuery的使用

引入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各大版本的引用

官網jquery壓縮版引用地址:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

jquery-3.0.0
官網jquery壓縮版引用地址:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

jquery-2.1.4
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

jquery-2.1.1
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

jquery-2.0.0
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>

jquery-1.11.3
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

jquery-1.11.1
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

jquery-1.10.2
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

jquery-1.9.1
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

jquery-1.8.3
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

jquery-1.7.2
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

jquery-1.6.4
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

jquery-1.5.2
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

jquery-1.4.4
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.4/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

jquery-1.4.2
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

jquery-1.3.2
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.3.2.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>

jquery-1.2.3
百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script>

微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.2.3.min.js"></script>

官網jquery壓縮版引用地址:
<script src="http://code.jquery.com/jquery-1.2.3.min.js"></script>

Jquery的詳細解析和用法