jquery基礎知識點使用詳解

這次帶給大家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選擇器

element層級選擇器>子代選擇器選擇已符合的元素中索引號碼為index的元素，index從0開始#選擇符合到的元素中索引號碼為奇數的所有元素，index從0開始

符號（名稱）	說明	用法
基本選擇器（重點）
	#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)		$(“li:eq(2)”).css(“color”, ”red”); 選擇li元素中索引號碼為2的一個元素
:odd		$(“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總體架構分析與使用詳解

#jQuery判斷上傳圖片類型與大小方法詳解

jQuery框架使用詳解

#

以上是jquery基礎知識點使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！