第一章JQuery 基礎

1. 概念： 一個JavaScript框架。簡化JS開發

* jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫(或JavaScript框架)。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化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區別：

1. jquery-xxx.js：開發版本。給程序員看的，有良好的縮進和注釋。體積大一些

2. jquery-xxx.min.js：生產版本。程序中使用，沒有縮進。體積小一些。程序加載更快

2. 導入JQuery的js文件：導入min.js文件

3. 使用

var div1 = $("#div1");

3. JQuery對象和JS對象區別與轉換

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. 入口函數

$(function () {

});

window.onload 和 $(function) 區別

* 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. 偶數選擇器

* 語法： :even 偶數，從 0 開始計數

5. 奇數選擇器

* 語法： :odd 奇數，從 0 開始計數

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(): 獲取/設置元素的標簽體內容 內容 --> 內容

2. text(): 獲取/設置元素的標簽體純文本內容 內容 --> 內容

3. val()： 獲取/設置元素的value屬性值

2. 屬性操作

1. 通用屬性操作

1. attr(): 獲取/設置元素的屬性

2. removeAttr():刪除屬性

3. prop():獲取/設置元素的屬性

4. removeProp():刪除屬性

* attr和prop區別？

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():將對象的后代元素全部清空，但是保留當前對象以及其屬性節點

第二章 ?案例

01.隔行換色.html

//需求：將數據行的奇數行背景色設置為 pink，偶數行背景色設置為 yellow

$(function () {

//1. 獲取數據行的奇數行的tr，設置背景色為pink

$("tr:gt(1):odd").css("backgroundColor","pink");

//2. 獲取數據行的偶數行的tr,設置背景色為yellow

$("tr:gt(1):even").css("backgroundColor","yellow");

});

分類ID分類名稱分類描述操作

	0	手機數碼	手機數碼類商品	修改|刪除
	1	電腦辦公	電腦辦公類商品	修改|刪除
	2	鞋靴箱包	鞋靴箱包類商品	修改|刪除
	3	家居飾品	家居飾品類商品	修改|刪除

全選和全不選.html

//分析：需要保證下邊的選中狀態和第一個復選框的選中狀態一致即可

function selectAll(obj){

//獲取下邊的復選框

$(".itemSelect").prop("checked",obj.checked);

}

分類ID分類名稱分類描述操作

	1	手機數碼	手機數碼類商品	修改|刪除
	2	電腦辦公	電腦辦公類商品	修改|刪除
	3	鞋靴箱包	鞋靴箱包類商品	修改|刪除
	4	家居飾品	家居飾品類商品	修改|刪除

QQ表情選擇

*{margin: 0;padding: 0;list-style: none;}

.emoji{margin:50px;}

ul{overflow: hidden;}

li{float: left;width: 48px;height: 48px;cursor: pointer;}

.emoji img{ cursor: pointer; }

//需求：點擊qq表情，將其追加到發言框中

$(function () {

//1.給img圖片添加onclick事件

$("ul img").click(function(){

//2.追加到p標簽中即可。

$(".word").append($(this).clone());

});

});

請發言：

左右移動.html

#leftName , #btn,#rightName{

float: left;

width: 100px;

height: 300px;

}

#toRight,#toLeft{

margin-top:100px ;

margin-left:30px;

width: 50px;

}

.border{

height: 500px;

padding: 100px;

}

//需求：實現下拉列表選中條目左右選擇功能

$(function () {

//toRight

$("#toRight").click(function () {

//獲取右邊的下拉列表對象，append(左邊下拉列表選中的option)

$("#rightName").append($("#leftName > option:selected"));

});

//toLeft

$("#toLeft").click(function () {

//appendTo 獲取右邊選中的option，將其移動到左邊下拉列表中

$("#rightName > option:selected").appendTo($("#leftName"));

});

});

張三

李四

王五

趙六

錢七

總結

以上是生活随笔為你收集整理的java与jquery的选择器区别_java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。