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還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。

　　一、jQuery入口函數與Js入口函數的區別

【注】js入口函數指的是：window.onload = function(){};

區別一：書寫個數不一樣

　　Js入口函數只能出現一次，出現屢次會存在事件覆蓋的問題。

　　jQuery的入口函數，能夠出現任意屢次，並不會存在事件覆蓋問題。

區別二：執行時機不一樣

　　Js入口函數是在全部的文件資源加載完成後，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。　　

　　jQuery的入口函數，是在文檔加載完成後，就執行。文檔加載完成指的是：DOM樹加載完成後，就能夠操做DOM了，不用等到全部的外部資源都加載完成。

 　 文檔加載的順序：從上往下，邊解析邊執行。

　　二、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

　　三、jQuery選擇器

符號（名稱）	說明	用法
基本選擇器（重點）
#	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元素中的第二個