java day44【JQuery 基礎：概念，快速入門，JQuery對象和JS對象區別與轉換，選擇器，DOM操做，案例】

時間 2020-06-06

標籤 java day44 day jquery 基礎概念快速入門對象區別轉換選擇器 dom 案例欄目 Java 简体版

原文原文鏈接

第一章 JQuery 基礎

1. 概念：一個JavaScript框架。簡化JS開發
* jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。css

* 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：生產版本。程序中使用，沒有縮進。體積小一些。程序加載更快html

2. 導入JQuery的js文件：導入min.js文件
3. 使用
var div1 = $("#div1");jquery

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 得到下拉框選中的元素app

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區別？
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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-3.3.1.min.js"></script>

<script>
//需求：將數據行的奇數行背景色設置爲 pink，偶數行背景色設置爲 yellow
$(function () {
//1. 獲取數據行的奇數行的tr，設置背景色爲pink
$("tr:gt(1):odd").css("backgroundColor","pink");
//2. 獲取數據行的偶數行的tr,設置背景色爲yellow
$("tr:gt(1):even").css("backgroundColor","yellow");
});
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="刪除"></td>
</tr>
<tr style="background-color: #999999;">
<th><input type="checkbox"></th>
<th>分類ID</th>
<th>分類名稱</th>
<th>分類描述</th>
<th>操做</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>0</td>
<td>手機數碼</td>
<td>手機數碼類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>電腦辦公</td>
<td>電腦辦公類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
</table>
</body>
</html>

全選和全不選.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script>
//分析：須要保證下邊的選中狀態和第一個複選框的選中狀態一致便可

function selectAll(obj){
//獲取下邊的複選框
$(".itemSelect").prop("checked",obj.checked);
}

</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="刪除"></td>
</tr>
<tr>
<th><input type="checkbox" onclick="selectAll(this)" ></th>
<th>分類ID</th>
<th>分類名稱</th>
<th>分類描述</th>
<th>操做</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手機數碼</td>
<td>手機數碼類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>電腦辦公</td>
<td>電腦辦公類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居飾品</td>
<td>家居飾品類商品</td>
<td><a href="">修改</a>|<a href="">刪除</a></td>
</tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>QQ表情選擇</title>
<script src="../../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{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; }
</style>
<script>
//需求：點擊qq表情，將其追加到發言框中
$(function () {
//1.給img圖片添加onclick事件
$("ul img").click(function(){
//2.追加到p標籤中便可。
$(".word").append($(this).clone());
});

});

</script>

</head>
<body>
<div class="emoji">
<ul>
<li><img src="img/01.gif" height="22" width="22" alt="" /></li>
<li><img src="img/02.gif" height="22" width="22" alt="" /></li>
<li><img src="img/03.gif" height="22" width="22" alt="" /></li>
<li><img src="img/04.gif" height="22" width="22" alt="" /></li>
<li><img src="img/05.gif" height="22" width="22" alt="" /></li>
<li><img src="img/06.gif" height="22" width="22" alt="" /></li>
<li><img src="img/07.gif" height="22" width="22" alt="" /></li>
<li><img src="img/08.gif" height="22" width="22" alt="" /></li>
<li><img src="img/09.gif" height="22" width="22" alt="" /></li>
<li><img src="img/10.gif" height="22" width="22" alt="" /></li>
<li><img src="img/11.gif" height="22" width="22" alt="" /></li>
<li><img src="img/12.gif" height="22" width="22" alt="" /></li>
</ul>
<p class="word">
<strong>請發言：</strong>
<img src="img/12.gif" height="22" width="22" alt="" />
</p>
</div>
</body>
</html>

左右移動.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-3.3.1.min.js"></script>

.border{
height: 500px;
padding: 100px;
}
</style>

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

$(function () {
//toRight
$("#toRight").click(function () {
//獲取右邊的下拉列表對象，append(左邊下拉列表選中的option)
$("#rightName").append($("#leftName > option:selected"));
});

//toLeft
$("#toLeft").click(function () {
//appendTo 獲取右邊選中的option，將其移動到左邊下拉列表中
$("#rightName > option:selected").appendTo($("#leftName"));

});
});

</script>

</head>
<body>
<div class="border">
<select id="leftName" multiple="multiple">
<option>張三</option>
<option>李四</option>
<option>王五</option>
<option>趙六</option>
</select>
<div id="btn">
<input type="button" id="toRight" value="-->"><br>
<input type="button" id="toLeft" value="<--">

</div>

</div>

</body></html>