目錄
一、概述
jQuery 是一個快速、簡潔的 JavaScript 框架，是一個優秀的 JavaScript 代碼庫，jQuery 設計的宗旨是“write Less，Do More”，倡導寫更少的代碼做更多的事。它封裝 JavaScript 常用的功能代碼，提供簡便的 JavaScript 設計模式，優化 HTML 文檔操作，事件處理、動畫設計和Ajax交互。
- JavaScript框架：本質上是一些js文件，封裝了js的原生代碼
二、使用 JQuery
1、獲取JQuery
- 目前jQuery有三個大版本：
- 1.x：兼容ie678,使用最爲廣泛的，官方只做BUG維護，功能不再新增。因此一般項目來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
- 2.x：不兼容ie678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
- 3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。最新版本：3.2.1（2017年3月20日）
- jquery-xxx.js 與 jquery-xxx.min.js區別：
- jquery-xxx.js：開發版本。給程序員看的，有良好的縮進和註釋。體積大一些
- jquery-xxx.min.js：生產版本。程序中使用，沒有縮進。體積小一些。程序加載更快
2、導入 JQuery 的 js 文件
- 導入min.js 文件，我使用的是 jquery-3.3.1.min.js 版本
- 在項目中創建js目錄，把 jquery-3.3.1.min.js 複製到目錄中去
- 在HTML頁面導入：<script src="js/jquery-3.3.1.min.js"></script>
3、JQuery對象和JS對象區別與轉換
JQuery對象在操作時，更加方便，但是 JQuery 對象和 js 對象方法不通用的，很多時候需要兩者相互轉換
- jq -- > js : jq對象[索引] 或者 jq對象.get(索引)
- js -- > jq : $(js對象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myJQuery</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<h3>JQuery的使用</h3>
<div id="div1">我是VIP1</div>
<div id="div2">我是VIP2</div>
<script>
// 使用JQuery
var div1 = $("#div1");
alert(div1.html());
var div2 = $("#div2");
alert(div2.html());
// JQuery對象JS對象相互轉換
var divs = document.getElementsByTagName("div");
for(var i =0;i<divs.length;i++){
// JS方式使用
divs[i].innerHTML = "oneStar";
// JS轉換爲JQuery對象使用
$(divs[i]).html("twoStar")
}
//JQuery轉換JS使用
var $divs = $("div");
$divs[0].innerHTML = "threeStar";
$divs.get(1).innerHTML = "fourStar";
</script>
</body>
</html>
三、選擇器
選擇器就是用來篩選具有相似特徵的標籤
1、基本語法
- 事件綁定：綁定按鍵 ==> $("#but").click(function(){...});
- 入口函數：$(function(){...});
- 樣式控制：$("#div1").css("background-color","red");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OneStar</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//JQuery入口函數（DOM文檔加載完成後執行該函數）
$(function(){
//設置樣式
$("#div1").css("background-color","red");
//綁定事件
$("#but").click(function () {
alert("www");
});
});
</script>
</head>
<body>
<input type="button" id="but" value="按鍵"><br>
<div id="div1">我的世界！</div>
</body>
</html>
2、選擇器分類
【1】基本選擇器
- 標籤選擇器（元素選擇器）
- 語法： $("html標籤名") 獲得所有匹配標籤名稱的元素
- id選擇器
- 語法： $("#id的屬性值") 獲得與指定id屬性值匹配的元素
- 類選擇器
- 語法： $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
- 並集選擇器：
- 語法： $("選擇器1,選擇器2....") 獲取多個選擇器選中的所有元素
【2】層級選擇器
- 後代選擇器
- 語法： $("A B ") 選擇A元素內部的所有B元素
- 子選擇器
- 語法： $("A > B") 選擇A元素內部的所有B子元素
【3】屬性選擇器
- 屬性名稱選擇器
- 語法： $("A[屬性名]") 包含指定屬性的選擇器
- 屬性選擇器
- 語法： $("A[屬性名='值']") 包含指定屬性等於指定值的選擇器
- 複合屬性選擇器
- 語法： $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器
【4】過濾選擇器
- 首元素選擇器
- 語法： :first 獲得選擇的元素中的第一個元素
- 尾元素選擇器
- 語法： :last 獲得選擇的元素中的最後一個元素
- 非元素選擇器
- 語法： :not(selector) 不包括指定內容的元素
- 偶數選擇器
- 語法： :even 偶數，從 0 開始計數
- 奇數選擇器
- 語法： :odd 奇數，從 0 開始計數
- 等於索引選擇器
- 語法： :eq(index) 指定索引元素
- 大於索引選擇器
- 語法： :gt(index) 大於指定索引元素
- 小於索引選擇器
- 語法： :lt(index) 小於指定索引元素
- 標題選擇器
- 語法： :header 獲得標題（h1~h6）元素，固定寫法
【5】表單過濾選擇器
- 可用元素選擇器
- 語法： :enabled 獲得可用元素
- 不可用元素選擇器
- 語法： :disabled 獲得不可用元素
- 選中選擇器
- 語法： :checked 獲得單選/複選框選中的元素
- 選中選擇器
- 語法： :selected 獲得下拉框選中的元素
四、DOM 操作
1. 內容操作
1. html(): 獲取/設置元素的標籤體內容 <a><font>內容</font></a> --> <font>內容</font>
2. text(): 獲取/設置元素的標籤體純文本內容 <a><font>內容</font></a> --> 內容
3. val()： 獲取/設置元素的value屬性值
2. 屬性操作
【1】通用屬性操作
- attr(): 獲取/設置元素的屬性
- removeAttr():刪除屬性
- prop():獲取/設置元素的屬性
- removeProp():刪除屬性
注：attr和prop區別
- 如果操作的是元素的固有屬性，則建議使用prop
- 如果操作的是元素自定義的屬性，則建議使用attr
【2】對class屬性操作
- addClass():添加class屬性值
- removeClass():刪除class屬性值
- toggleClass():切換class屬性
- toggleClass("one"): 判斷如果元素對象上存在class="one"，則將屬性值one刪除掉。 如果元素對象上不存在class="one"，則添加
- css():
3. CRUD操作
【1】append():父元素將子元素追加到末尾
- 對象1.append(對象2): 將對象2添加到對象1元素內部，並且在末尾
【2】prepend():父元素將子元素追加到開頭
- 對象1.prepend(對象2):將對象2添加到對象1元素內部，並且在開頭
【3】appendTo():
- 對象1.appendTo(對象2):將對象1添加到對象2內部，並且在末尾
【4】prependTo()：
- 對象1.prependTo(對象2):將對象1添加到對象2內部，並且在開頭
【5】after():添加元素到元素後邊
- 對象1.after(對象2)： 將對象2添加到對象1後邊。對象1和對象2是兄弟關係
【6】before():添加元素到元素前邊
- 對象1.before(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關係
【7】insertAfter()
- 對象1.insertAfter(對象2)：將對象2添加到對象1後邊。對象1和對象2是兄弟關係
【8】insertBefore()
- 對象1.insertBefore(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關係
【9】remove():移除元素
- 對象.remove():將對象刪除掉
【10】empty():清空元素的所有後代元素。
- 對象.empty():將對象的後代元素全部清空，但是保留當前對象以及其屬性節點