目錄
JQuery基礎
概念
一個JavaScript框架,簡化JS的開發.
jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript代碼庫(或JavaScript框架)。jQuery設計的宗旨是“write Less,Do More”,即倡導寫更少的代碼,做更多的事情。它封裝JavaScript常用的功能代碼,提供一種簡便的JavaScript設計模式,優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
- JavsScript框架:本質上就是一些JS的代碼,封裝了js的原生代碼.
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插件不支持這個版本。jquery-xxx.js 與 jquery-xxx.min.js區別:
1. jquery-xxx.js:開發版本。給程序員看的,有良好的縮進和註釋。體積大一些
2. jquery-xxx.min.js:生產版本。程序中使用,沒有縮進。體積小一些。程序加載更快 -
導入JQuery的js文件:注意導入的是xxxmin.js
-
使用
-
JQuery對象和JS對象的區別和聯繫
- JQuery對象在操作時,更加方便
- JQuery對象和js對象方法不通用
- 兩者可以互相轉換:
- JQuery對象-------->JavaScript對象 :Jquery對象[索引]或者JQuery對象.get(索引)
- JavaScript對象-------->JQuery對象: $(Js對象)
選擇器
選擇器功能:篩選具有相似特徵的元素(標籤)
選擇器基礎知識:
-
事件綁定
//1.獲取b1按鈕
$("#b1").click(function(){
alert(“abc”);
}); -
入口函數
$(function () {
}); -
window.onload 和 $(function) 區別
- window.onload 只能定義一次,如果定義多次,後邊的會將前邊的覆蓋掉
- $(function)可以定義多次的。
-
樣式控制:css方法
// $("#div1").css(“background-color”,“red”);$("#div1").css("backgroundColor","pink");
選擇器分類:
-
基本選擇器
-
標籤選擇器(元素選擇器)
-
標籤選擇器:
- 語法: $(“html標籤名”) 獲得所有匹配標籤名稱的元素
-
id選擇器
- 語法: $("#id的屬性值") 獲得與指定id屬性值匹配的元素
-
類選擇器
- 語法: $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
-
並集選擇器:
- 語法: $(“選擇器1,選擇器2…”) 獲取多個選擇器選中的所有元素
-
-
層級選擇器
1. 後代選擇器
* 語法: $("A B ") 選擇A元素內部的所有B元素- 子選擇器
- 語法: $(“A > B”) 選擇A元素內部的所有B子元素
-
屬性選擇器
-
1.屬性名稱選擇器
-
語法: $(“A[屬性名]”) 包含指定屬性的選擇器
-
2.屬性選擇器
* 語法: $("A[屬性名='值']") 包含指定屬性等於指定值的選擇器
- 複合屬性選擇器
- 語法: $(“A[屬性名=‘值’][]…”) 包含多個屬性條件的選擇器
- 複合屬性選擇器
-
-
過濾選擇器
- 首元素選擇器
* 語法: :first 獲得選擇的元素中的第一個元素
- 尾元素選擇器
* 語法: :last 獲得選擇的元素中的最後一個元素
- 非元素選擇器
* 語法: :not(selector) 不包括指定內容的元素
- 偶數選擇器
* 語法: :even 偶數,從 0 開始計數
- 奇數選擇器
* 語法: :odd 奇數,從 0 開始計數
- 等於索引選擇器
* 語法: :eq(index) 指定索引元素
- 大於索引選擇器
* 語法: :gt(index) 大於指定索引元素
- 小於索引選擇器
* 語法: :lt(index) 小於指定索引元素
- 標題選擇器
* 語法: :header 獲得標題(h1~h6)元素,固定寫法
-
表單過濾選擇器
- 可用元素選擇器
* 語法: :enabled 獲得可用元素
- 不可用元素選擇器
* 語法: :disabled 獲得不可用元素
- 選中選擇器
* 語法: :checked 獲得單選/複選框選中的元素
- 選中選擇器
* 語法: :selected 獲得下拉框選中的元素
-
##DOM操作
-
內容操作
-
屬性操作
-
通用屬性操作
- attr(): 獲取/設置元素的屬性
- removeAttr():刪除屬性
- prop():獲取/設置元素的屬性
- removeProp():刪除屬性
- attr和prop區別?
- 如果操作的是元素的固有屬性,則建議使用prop
- 如果操作的是元素自定義的屬性,則建議使用attr
-
-
對class屬性操作
- addClass():添加class屬性值
- removeClass():刪除class屬性值
- toggleClass():切換class屬性
- toggleClass(“one”):
- 判斷如果元素對象上存在class=“one”,則將屬性值one刪除掉。 如果元素對象上不存在class=“one”,則添加
- toggleClass(“one”):
- css():
-
CRUD操作:
- append():父元素將子元素追加到末尾
- 對象1.append(對象2): 將對象2添加到對象1元素內部,並且在末尾
- prepend():父元素將子元素追加到開頭
- 對象1.prepend(對象2):將對象2添加到對象1元素內部,並且在開頭
- appendTo():
- 對象1.appendTo(對象2):將對象1添加到對象2內部,並且在末尾
- prependTo():
- 對象1.prependTo(對象2):將對象1添加到對象2內部,並且在開頭
- after():添加元素到元素後邊
- 對象1.after(對象2): 將對象2添加到對象1後邊。對象1和對象2是兄弟關係
- before():添加元素到元素前邊
- 對象1.before(對象2): 將對象2添加到對象1前邊。對象1和對象2是兄弟關係
- insertAfter()
- 對象1.insertAfter(對象2):將對象1添加到對象2後邊。對象1和對象2是兄弟關係
- insertBefore()
- 對象1.insertBefore(對象2): 將對象1添加到對象2前邊。對象1和對象2是兄弟關係
- remove():移除元素
- 對象.remove():將對象刪除掉
- empty():清空元素的所有後代元素。
- 對象.empty():將對象的後代元素全部清空,但是保留當前對象以及其屬性節點
- append():父元素將子元素追加到末尾
案例
案例一:隔行換色
<!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>
案例二:全選和全不選
<!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>
案例三:發送選擇的qq表情
<!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());//JQuery對象有clone方法,JavaScript沒有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>
案例四:多選下拉列表的左右移動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-3.3.1.min.js"></script>
<style>
#leftName , #btn,#rightName{
float: left;
width: 100px;
height: 300px;
}
#toRight,#toLeft{
margin-top:100px ;
margin-left:30px;
width: 50px;
}
.border{
height: 500px;
padding: 100px;
}
</style>
<script>
//需求:實現下拉列表選中條目左右選擇功能
$(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>
<select id="rightName" multiple="multiple">
<option>錢七</option>
</select>
</div>
</body>
</html>
JQuery高級
動畫
-
三種方式顯示和隱藏元素
-
默認顯示和隱藏方式
-
show([speed,[easing],[fn]])
- 參數:
- speed:動畫的速度。三個預定義的值(“slow”,“normal”, “fast”)或表示動畫時長的毫秒數值(如:1000)
- easing:用來指定切換效果,默認是"swing",可用參數"linear"
- swing:動畫執行時效果是 先慢,中間快,最後又慢
- linear:動畫執行時速度是勻速的
- fn:在動畫完成時執行的函數,每個元素執行一次。
-
hide([speed,[easing],[fn]])
-
toggle([speed],[easing],[fn])
-
-
滑動顯示和隱藏方式
- slideDown([speed],[easing],[fn])
- slideUp([speed,[easing],[fn]])
- slideToggle([speed],[easing],[fn])
-
淡入淡出顯示和隱藏方式
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])
-
遍歷
- js的遍歷方式
- for(初始化值;循環結束條件;步長)
- jq的遍歷方式
- jq對象.each(callback)
- 語法:
jquery對象.each(function(index,element){});- index:就是元素在集合中的索引
- element:就是集合中的每一個元素對象
- this:集合中的每一個元素對象
- 回調函數返回值:
- true:如果當前function返回爲false,則結束循環(break)。
- false:如果當前function返回爲true,則結束本次循環,繼續下次循環(continue)
- $.each(object, [callback])
- for…of: jquery 3.0 版本之後提供的方式
for(元素對象 of 容器對象)
時間綁定
-
jquery標準的綁定方式
- jq對象.事件方法(回調函數);
- 注:如果調用事件方法,不傳遞迴調函數,則會觸發瀏覽器默認行爲。
- 表單對象.submit();//讓表單提交
-
on綁定事件/off解除綁定
- jq對象.on(“事件名稱”,回調函數)
- jq對象.off(“事件名稱”)
- 如果off方法不傳遞任何參數,則將組件上的所有事件全部解綁
-
事件切換:toggle
-
jq對象.toggle(fn1,fn2…)
- 當單擊jq對象對應的組件後,會執行fn1.第二次點擊會執行fn2…
-
注意:1.9版本 .toggle() 方法刪除,jQuery Migrate(遷移)插件可以恢復此功能。
-
案例
插件
1.實現方式:
- $.fn.extend(object)
- 增強通過Jquery獲取的對象的功能 $("#id")
- $.extend(object)
- 增強JQeury對象自身的功能 $/jQuery
天下事以難而廢者十之一,以惰而廢者十之九