jQuery基礎知識
1.概念
- jquery是一個快速、簡潔的JavaScript框架，是繼prototype之後的又一個優秀的JavaScript框架。jQuery的設計宗旨是“write less，do more”，即倡導寫更少的程式碼，做更多的事情。它封裝了JavaScript常用的功能程式碼，提供一種簡便的JavaScript的設計模式，最佳化html檔案操作、事件處理、動畫設計和Ajax互動
- JavaScript框架：本質就是一些js檔案，封裝了js的原生程式碼而已
2.快速入門
- 1.下載jQuery
- jquery-xxx.js和jquery-xxx.min.js有什麼區別？
- jquery-xxx.js：開發版本。給程式設計師看的，有良好的縮排和註釋，體積更大一些
- jquery-xxx.min.js：生產版本。程式中使用，沒有縮排，體積小一些，程式載入更快
2.匯入js檔案
3.使用
4.示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery快速入門</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1111</div>
<div id="div2">div2222</div>
<script>
$(function () {
alert($("#div1").html());
alert($("#div2").html());
})
</script>
</body>
</html>
3.jQuery物件和JS物件的區別與轉換
- jQuery物件在操作時更加的方便
- jQuery物件和js物件方法不通用
- 兩者的相互轉換
- jquery ----> js
- jquery物件[索引] 或者 jquery物件.get(索引)
- js ------- > jquery
4.選擇器
<body>
<div id="div1">div1111</div>
<div id="div2">div2222</div>
<input id="b1" type="button" value="點我"/>
<script>
$(function () {
$("#b1").click(function () {
alert("ok...")
});
})
</script>
</body>
- window.onload和$(function(){})的區別
- window.onload只能定義一次，如果定義多次，後邊的會將前面的覆蓋掉
- $(function(){})可以定義多次，不會被覆蓋
- 1.3樣式控制
$(function () {
$("#div1").css("background-color", "red");
//下面這種寫法可以檢查樣式是否寫錯了
$("#div2").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.首元素選擇器
- 2.尾元素選擇器
- 3.非元素選擇器
- 語法：:not(selector)不包括指定內容的元素
- 4.偶數選擇器
- 5.奇數選擇器
- 6.等於索引選擇器
- 7.大於索引選擇器
- 8.小於索引選擇器
- 9.標題選擇器
- 5.表單過濾選擇器
- 1.可用元素選擇器
- 2.不可用元素選擇器
- 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()的區別
- 1.如果操作的是元素的固有屬性，則建議使用prop
- 2.如果操作的是元素的自定義屬性，則建議使用attr
- 2.對class屬性進行操作
- 1.addClass():新增class屬性值
- 2.removeClass():刪除
- 3.toggleClass():切換
- toggleClass(“one”):判斷如果元素物件上存在class=“one”,那麼就刪除掉，如果不存在，就新增該屬性
- 4.css():增加樣式
- 3.CRUD操作
- append():物件1.append(物件2)：將物件2新增到物件1元素內部，並且在末尾
- appendTo()：與上面相反，追加到開頭
- prepend()：物件1.append(物件2)：將物件2新增到物件1元素內部，並且在開頭
- prependTo();追加到
- after()：物件1.after(物件2)，將物件2新增到物件1後邊，並且是兄弟關係
- before()：新增到前邊
- insertAfter()： 將物件2新增到物件1後邊，並且是兄弟關係
- insertBefore()：前邊
- remove():刪除物件
- empty()：將物件的後代元素清空，但保留當前物件及其屬性
6.案例
- 程式碼過多就不在這裡展示了，只要掌握上面的就足夠了。
- 全選和全不選
<!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>
jQuery 高階部分
1.動畫
- 三種方式顯示和隱藏動畫
- 1.預設顯示和隱藏
- show([speed,[easing],[fn]])
- 引數
- speed：動畫的速度。三個預定義的值(“slow”,“normal”, “fast”)或表示動畫時長的毫秒數值(如：1000)
- easing：用來指定切換效果，預設是"swing"，可用引數"linear"
- swing：動畫執行時效果是 先慢，中間快，最後又慢
- linear：動畫執行時速度是勻速的
- hide([speed,[easing],[fn]])
- toggle([speed],[easing],[fn])
- fn：在動畫完成時執行的函式，每個元素執行一次。
-
2.滑動顯示和隱藏
-
3.淡入淡出顯示和隱藏
2.遍歷
3.事件繫結
4.案例