JQuery 基礎:
1. 概念: 一個JavaScript框架晃虫。簡化JS開發(fā)
* jQuery是一個快速龟糕、簡潔的JavaScript框架竹椒,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫(或JavaScript框架)藕帜。jQuery設計的宗旨 是“write Less,Do More”赏迟,即倡導寫更少的代碼,做更多的事情蠢棱。它封裝JavaScript常用的功能代碼锌杀,提供一種簡便的JavaScript設計模式,優(yōu) 化HTML文檔操作泻仙、事件處理糕再、動畫設計和Ajax交互。
* JavaScript框架:本質上就是一些js文件玉转,封裝了js的原生代碼而已
2. 快速入門
1. 步驟:
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區(qū)別:
1. jquery-xxx.js:開發(fā)版本筋现。給程序員看的,有良好的縮進和注釋箱歧。體積大一些
2. jquery-xxx.min.js:生產版本矾飞。程序中使用,沒有縮進呀邢。體積小一些洒沦。程序加載更快
2. 導入JQuery的js文件:導入min.js文件
3. 使用
var div1 = $("#div1");
alert(div1.html());
3. JQuery對象和JS對象區(qū)別與轉換
1. JQuery對象在操作時,更加方便价淌。
2. JQuery對象和js對象方法不通用的.
3. 兩者相互轉換
* jq -- > js : jq對象[索引] 或者 jq對象.get(索引)
* js -- > jq : $(js對象)
4. 選擇器:篩選具有相似特征的元素(標簽)
1. 基本操作學習:
1. 事件綁定
//1.獲取b1按鈕
$("#b1").click(function(){
alert("abc");
});
2. 入口函數(shù)
$(function () {
});
window.onload 和 $(function) 區(qū)別
* window.onload 只能定義一次,如果定義多次申眼,后邊的會將前邊的覆蓋掉
* $(function)可以定義多次的。
3. 樣式控制:css方法
// $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");
2. 分類
1. 基本選擇器
1. 標簽選擇器(元素選擇器)
* 語法: $("html標簽名") 獲得所有匹配標簽名稱的元素
2. id選擇器
* 語法: $("#id的屬性值") 獲得與指定id屬性值匹配的元素
3. 類選擇器
* 語法: $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
4. 并集選擇器:
* 語法: $("選擇器1,選擇器2....") 獲取多個選擇器選中的所有元素
2. 層級選擇器
1. 后代選擇器
* 語法: $("A B ") 選擇A元素內部的所有B元素
2. 子選擇器
* 語法: $("A > B") 選擇A元素內部的所有B子元素
3. 屬性選擇器
1. 屬性名稱選擇器
* 語法: $("A[屬性名]") 包含指定屬性的選擇器
2. 屬性選擇器
* 語法: $("A[屬性名='值']") 包含指定屬性等于指定值的選擇器
3. 復合屬性選擇器
* 語法: $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器
4. 過濾選擇器
1. 首元素選擇器
* 語法: :first 獲得選擇的元素中的第一個元素
2. 尾元素選擇器
* 語法: :last 獲得選擇的元素中的最后一個元素
3. 非元素選擇器
* 語法: :not(selector) 不包括指定內容的元素
4. 偶數(shù)選擇器
* 語法: :even 偶數(shù)蝉衣,從 0 開始計數(shù)
5. 奇數(shù)選擇器
* 語法: :odd 奇數(shù)括尸,從 0 開始計數(shù)
6. 等于索引選擇器
* 語法: :eq(index) 指定索引元素
7. 大于索引選擇器
* 語法: :gt(index) 大于指定索引元素
8. 小于索引選擇器
* 語法: :lt(index) 小于指定索引元素
9. 標題選擇器
* 語法: :header 獲得標題(h1~h6)元素,固定寫法
5. 表單過濾選擇器
1. 可用元素選擇器
* 語法: :enabled 獲得可用元素
2. 不可用元素選擇器
* 語法: :disabled 獲得不可用元素
3. 選中選擇器
* 語法: :checked 獲得單選/復選框選中的元素
4. 選中選擇器
* 語法: :selected 獲得下拉框選中的元素
5. DOM操作
1. 內容操作
1. html(): 獲取/設置元素的標簽體內容 <a><font>內容</font></a> --> <font>內容</font>
2. text(): 獲取/設置元素的標簽體純文本內容 <a><font>內容</font></a> --> 內容
3. val(): 獲取/設置元素的value屬性值
2. 屬性操作
1. 通用屬性操作
1. attr(): 獲取/設置元素的屬性
2. removeAttr():刪除屬性
3. prop():獲取/設置元素的屬性
4. removeProp():刪除屬性
* attr和prop區(qū)別病毡?
1. 如果操作的是元素的固有屬性濒翻,則建議使用prop
2. 如果操作的是元素自定義的屬性,則建議使用attr
2. 對class屬性操作
1. addClass():添加class屬性值
2. removeClass():刪除class屬性值
3. toggleClass():切換class屬性
* toggleClass("one"):
* 判斷如果元素對象上存在class="one"啦膜,則將屬性值one刪除掉有送。 如果元素對象上不存在class="one",則添加
4. 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():將對象的后代元素全部清空灯萍,但是保留當前對象以及其屬性節(jié)點
6. 案例