這篇文章帶給大家的內容是關於Jquery的簡介及其詳細用法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
一、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互動。
二、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物件
#第一種方式：
//此時就把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的簡介及其詳細用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
