1、jQuery的基本概念 1.1、什麼是jQuery js的方法庫，封裝了很多js的方法，需要的時候可以直接調用 1.2、使用jQuery的三個步驟 js：當頁面所有元素包括圖片，樣式文件，等所有資源都載入完才開始執行; jQuery：當頁面的文檔樹載入完成後就會執行，並不會等所有的文件都載入完成 ...
1、jQuery的基本概念
1.1、什麼是jQuery
js的方法庫，封裝了很多js的方法，需要的時候可以直接調用
註意事項：方法調用的時候都要帶();
1.2、使用jQuery的三個步驟
//1、 引入jQuery包
<script src="jquery-1.11.1.js"></script>
//2、 入口函數
$(document).ready(function(){});
//3、 書寫函數體
$("#btnShowDiv").click(function () {
$("div").show(1000);
});
1.2.1、js與jQuery入口函數執行的差別
js：當頁面所有元素包括圖片，樣式文件，等所有資源都載入完才開始執行;
jQuery：當頁面的文檔樹載入完成後就會執行，並不會等所有的文件都載入完成再執行
1.3、jQuery的版本
1.X 支持IE6/7/8
2.X 不支持IE6/7/8
3.0 不支持IE6/7/8
1.4、$符號的本質
$符其實就是一個函數，參數不同，功能不同(常用的幾種功能如下代碼)
註意事項：括弧中的參數為字元串類型的時候不要忘記引號
$(function() {});//參數是function，說明是入口函數
$("#btnSetConent");//參數是字元串，並且以#開頭，是一個標簽選擇，查找id=“btnSetContent”的元素
$("div");//查找所有的div元素
1.5、jQuery對象與DOM對象
1.5.1、使用js方法獲取的頁面元素返回的就是dom對象
var btn = document.getElementById("btnShowDiv");
var divs = document.getElementsByTagName("div");
dom對象只可以使用dom對象的方法和屬性
domObject.innerHTML = "dom對象設置文本";
domObject.style.display= "block";//dom對象顯示對象
domObject.onclick = function() {}//dom對象綁定事件
1.5.2、使用jQuery方法獲取頁面元素返回的就是jQuery對象
註意事項:jQuery對象調用方法的時候，方法記得加().
$("div");//標簽選擇器返回的jquery對象。
$("#btnShowDiv");//id選擇器返回的jquery對象。
jquery對象只能使用jquery對象的方法
var $obj = $("div");
$obj.html("jquery對象設置文本的方法");
$obj.show();//jquery對象顯示文本
$obj.click(function() {});//jquery對象綁定事件
1.5.3、jQuery對象與DOM對象之間的轉換
1、jquery對象轉DOM對象的方法
var $li = $("li");
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)
//其實jQuery對象轉DOM對象的實質就是取出jQuery對象中封裝的DOM對象。
2、DOM對象轉jQuery對象的方法
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對象轉jQuery對象
2、jQuery選擇器
2.1、基本選擇器
- ID選擇器
- 用法：$("#ID")
- 說明：獲取指定的ID，不要忘記引號
- 類選擇器
- 用法：$(".類名")
- 說明：獲取同一類元素
- 標簽選擇器
- 用法：$("selecor")
- 說明：獲取同一類標簽的所有元素
- 並集選擇器
- 用法：$("div,p,li")
- 說明：用逗號分隔，滿足條件的所有的所有的元素都會被選中
- 交集選擇器
- 用法：$("div.redClass")
- 說明：兩個元素之間沒有空格，同時滿足條件的元素才會被選中
2.2、層級選擇器
- 子代選擇器
- 用法：$("ul>li")
- 說明：用>連接，只會選擇到他兒子級的元素，不會選擇到孫子級的元素
- 後代選擇器
- 用法：$("ul li")
- 說明：用空格分隔開來，會選擇到父級元素下所有的子級元素，包含孫子輩等
2.3、過濾選擇器
- :eq（index）
- 用法：$("li:eq(2)").css("color", "red")
- 說明：會選擇到li下麵索引值為2的li標簽，註意：元素的索引值是從0開始
- :odd
- 用法：$("li:odd").css("color", "red")
- 說明：會選中索引值為奇數的元素，索引值是從0開始的，所以在實際現實中表示的是偶數行
- :even
- 用法：$("li:even").css("color", "red")
- 說明：會選中索引值為偶數的元素，索引值是從0開始的，所以在實際現實中表示的是奇數行
2.3、過濾選擇器(是方法)
- children(selector)
- 用法：$("ul").children("li")
- 說明：獲取$("ul")下的所有的兒子級的li，獲取到的是一個集合，相當於$("ul>li")，子類選擇器
- find(selector)
- 用法：$("ul").find("li")
- 說明：獲取的是$("ul")下的所有的li元素包括孫子級，相當於$("ul li")後代選擇器
- siblings(selector)
- 用法：$("#first").siblings("li")
- 說明：獲取的是所有的兄弟節點，並且不包括自身
- parent()
- 用法：$("#first").parent()
- 說明：查找父級節點
- eq(index)
- 用法：$("li").eq(2);
- 說明：相當於$("li:eq(2)"),index從0開始
3、jQuery操作樣式
3.1 設置樣式
- 設置單個樣式
//name：需要設置的樣式名稱 //value：對應的樣式值 css(name, value); //使用案例 $("#one").css("background","gray");//將背景色修改為灰色 - 設置多個樣式
//參數是一個對象，對象中包含了需要設置的樣式名和樣式值 css(obj); //使用案例 $("#one").css({ "background":"gray", "width":"400px", "height":"200px" }); - 獲取樣式
/*name:需要獲取的樣式名稱*/ css(name); /*案例*/ $("div").css("background-color");註意：獲取樣式操作只會返回第一個元素對應的樣式值
3.2 操作樣式
- 添加樣式類
/*name：需要添加的樣式類名，註意參數不要帶點.*/ addClass(name); /*例子,給所有的div添加one的樣式。*/ $("div").addClass("one"); - 移除所有樣式類
//不帶參數，移除所有的樣式類 removeClass() //例子，移除div所有的樣式類 $("div").removeClass(); - 移除單個樣式類
//name:需要移除的樣式類名 removeClass("name"); //例子，移除div中one的樣式類名 $("div").removeClass("one"); - 切換樣式類
//name:需要切換的樣式類名，如果有，移除該樣式，如果沒有，添加該樣式。 toggleClass(name); //例子 $("div").toggleClass("one"); - 判斷是否有樣式類
//name:用於判斷的樣式類名，返回值為true false hasClass(name) //例子，判斷第一個div是否有one的樣式類 $("div").hasClass("one");
3.3、總結
1. 如果操作到的樣式非常少，可以考慮css方法
2. 如果操作到的樣式非常多，那麼可以通過class方法來操作，將樣式寫到一個class類裡面。
3. 如果考慮到後期維護方便，將css從js中分離出來，那麼推薦使用class的方式來操作。
