這次帶給大家jquery基礎知識點使用詳解，jquery基礎知識點所使用的注意事項有哪些，以下是實戰案例，一起來看一下。
jQuery是一個優秀的、輕量級的js函式庫，它相容於CSS3，也相容於各種瀏覽器（IE 6.0 , FF1.5 , Safari 2.0 , Opera 9.0 ），而jQuery2.0及後續版本將不再支援IE6/7/8瀏覽器。 jQuery讓用戶能更方便地處理HTML（標準通用標記語言下的一個應用程式）、events、實作動畫效果，並且方便地為網站提供AJAX互動。 jQuery還有一個比較大的優點是，它的文件說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。
1、jQuery入口函數與Js入口函數的差異
【註】js入口函數指的是：window.onload = function (){};
區別一：書寫個數不同
#Js入口函數只能出現一次，出現多次會存在事件覆蓋的問題。
jQuery的入口函數，可以出現任意多次，並不會有事件覆蓋問題。
區別二：執行時機不同
Js入口函數是在所有的檔案資源載入完成後，才執行。這些檔案資源包括：頁面文件、外部的js檔案、外部的css檔案、圖片等。
jQuery的入口函數，是在文件載入完成後，就執行。文件載入完成指的是：DOM樹載入完成後，就可以操作DOM了，不用等到所有的外部資源都載入完成。
文件載入的順序：從上往下，邊解析邊執行。
2、jQuery物件和DOM物件的相互轉換
①DOM物件此處指的是：使用js操作DOM傳回的結果
var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象
②jQuery物件此處指的是：使用jQuery提供的操作DOM的方法傳回的結果
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
3、jQuery選擇器
| 符號（名稱） | 說明 | 用法 |
| 基本選擇器（重點） | ||
| #ID選擇器 |
$(“#btnShow”).css(“color”, “red”); 選擇id為btnShow的一個元素（傳回值為jQuery對象，下同） |
|
| . | ##類別選擇器 | $(“.liItem”).css(“color”, “red”);選擇含有類別liItem的所有元素 |
| 標籤選擇器 | $(“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元素中的第二個 |
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是jquery基礎知識點使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
