jQuery（案例實現）
阿新 • • 發佈：2018-12-08
一、jQuery概述
1、什麼是jQuery？
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。它封裝JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，優化HTML文件操作、事件處理、動畫設計和Ajax互動。
2、jQuery的核心特性
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴充套件；擁有便捷的外掛擴充套件機制和豐富的外掛。jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
3、JQuery的作用:
- 寫更少的程式碼,做更多的事情: write Less ,Do more
- 將我們頁面的JS程式碼和HTML頁面程式碼進行分離
二、jQuery入門
1、JQ的開發步驟:
1. 匯入JQ相關的檔案 <script type="text/javascript" src="js/jquery-1.11.0.js"></script> 2. 文件載入完成事件: $(function) : 頁面初始化的操作: 繫結事件, 啟動頁面定時器 $(function () {} 3. 確定相關操作的事件 用JQ選擇器選定要繫結事件的按鈕或者元素，通過.事件的方法繫結時間，裡面再巢狀一個函式 4. 事件觸發函式 5. 函式裡面再去操作相關的元素
2、JS和JQ文件流載入區別
<script>
//js文件載入完成的事件
window.onload = function(){
alert("window.onload 111");
}
window.onload = function(){
alert("window.onload 222");
}
/*文件載入完成的事件*/
jQuery(document).ready(function(){
alert("jQuery(document).ready(function()");
} js會覆蓋，而JQ不會覆蓋
3、JQ和JS之間的轉換
- JQ物件,只能呼叫JQ的屬性和方法
- JS物件 只能呼叫JS的屬性和方法
function changeJS(){
var div = document.getElementById("div1");
// div.innerHTML = "JS成功修改了內容"
//將JS物件轉成JQ物件
$(div).html("轉成JQ物件來修改內容")
}
$(function(){
//給按鈕繫結事件
$("#btn2").click(function(){
//找到div1
// $("#div1").html("JQ方式成功修改了內容");
//將JQ物件轉成JS物件來呼叫
var $div = $("#div1");
// var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML="jq轉成JS物件成功";
});
});
三、JQuery中的選擇器
1、基本選擇器
- ID選擇器 : #ID的名稱
- 類選擇器: 以 . 開頭 .類名
- 元素選擇器: 標籤的名稱
- 萬用字元選擇器: *
- 選擇器,選擇器: 選擇器1,選擇器2
案例：
<!--
- ID選擇器 : #ID的名稱
- 類選擇器: 以 . 開頭 .類名
- 元素選擇器: 標籤的名稱
- 萬用字元選擇器: *
- 選擇器,選擇器: 選擇器1,選擇器2
-->
<script>
//文件載入事件,頁面初始化的操作
$(function(){
//初始化操作: 給按鈕繫結事件
$("#btn1").click(function(){
$("#two").css("background-color","palegreen");
});
//找出mini類的所有元素
$("#btn2").click(function(){
$(".mini").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("*").css("background-color","palegreen");
});
/*選擇器分組*/
//找出mini類 和 span元素
$("#btn5").click(function(){
$(".mini,span").css("background-color","palegreen");
});
});
</script>
2、層級選擇器
- 子元素選擇器: 選擇器1 > 選擇器2
- 後代選擇器: 選擇器1 兒孫
- 相鄰兄弟選擇器 : 選擇器1 + 選擇器2 : 找出緊挨著的一個弟弟
- 通用兄弟選擇器: 選擇器1~ 選擇器2 : 找出所有的弟弟
<script>
//文件載入事件,頁面初始化的操作
$(function(){
//初始化操作: 給按鈕繫結事件
//找出body下面的子div
$("#btn1").click(function(){
$("body > div").css("background-color","palegreen");
});
//找出body下面的所有div
$("#btn2").click(function(){
$("body div").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("#one+div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("#two~div").css("background-color","palegreen");
});
});
</script>
3、JQ中的基本過濾器
:even
:odd
:gt
:lt
:eq
:first
:last
<script>
$(function(){
/<script>
//文件載入事件,頁面初始化的操作
$(function(){
//初始化操作: 給按鈕繫結事件
//過濾出所有div中第一個元素
$("#btn1").click(function(){
$("div:first").css("background-color","palegreen");
});
//過濾出所有div中偶數位的div
$("#btn2").click(function(){
$("div:even").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div:odd").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("div:gt(2)").css("background-color","palegreen");
});
});
</script>
4、JQ中的屬性選擇器
$(function(){
//找到有name屬性的input
$("#btn1").click(function(){
$("input[name]").attr("checked",true);
});
$("#btn2").click(function(){
$("input[name='accept']").attr("checked",true);
});
$("#btn3").click(function(){
$("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
});
});
5、JQ中的表單過濾器
:selected
:checked
<script>
//1.文件載入事件
$(function(){
$(":text").css("background-color","pink");
});
</script>
四、JQ中常用函式及遍歷陣列
$(function) : 文件載入完成的事件
css() : 修改css樣式
prop() : 修改屬性/ 獲取屬性
html() : 修改innerHTML
append : 給自己新增子節點
appendTo : 將自己新增到別人家,給自己找一個爹
prepend : 在自己最前面新增子節點
after : 在自己後面新增一個兄弟
empty : 清空所有子節點
$(cities).each(function(i,n){
})
$.each(arr,function(i,n){
});
五、JQ中的動畫效果
show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : 自定義動畫
六、使用JQuery完成頁面定時彈出廣告
1、 需求分析
當用戶開啟介面，3秒鐘之後彈出廣告，這個廣告顯示5秒鐘，隱藏廣告
2、 技術分析
定時器: setTimeout
顯示和隱藏: style.display = “block/none”
3、步驟分析
- 匯入JQ的檔案
- 編寫JQ的文件載入事件
- 啟動定時器 setTimeout("",3000);
- 編寫顯示廣告的函式
- 在顯示廣告裡面再啟動一個定時器
- 編寫隱藏廣告的函式
4、程式碼實現
<script>
//顯示廣告
function showAd(){
$("#img1").slideDown(2000);
setTimeout("hideAd()",3000);
}
//隱藏廣告
function hideAd(){
$("#img1").slideUp(2000);
}
$(function(){
setTimeout("showAd()",3000);
});
</script>
七、使用JQ完成表格的隔行換色
1、需求分析
在我們的實際開發過程中,我們的表格如果所有的行都是一樣的話,很容易看花眼,所以我們需要讓我們的表格隔行換色
2、技術分析
獲取所有行 table.rows
遍歷所有行
根據行號去修改每一行的背景顏色: bgColor
style.backgroundColor = “red”
3、步驟分析
- 匯入JQ的包
- 文件載入完成函式: 頁面初始化
- 獲得所有的行 : 元素選擇器
- 根據行號去修改顏色
5、程式碼實現
$(function(){
//獲得所有的行 : 元素選擇器
$("tbody > tr:even").css("background-color","#CCCCCC");
//修改基數行
$("tbody > tr:odd").css("background-color","#FFF38F");
// $("tbody > tr").css("background-color","#FFF38F");
});
八、使用JQuery完成表單的全選全不選功能以及隔行換色
1、需求分析
在我們對錶格處理的時,有些情況下,我們需要對錶格進行批量處理,，隔行換色
2、程式碼實現:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
$(function () {
$("tr:even:gt(0)").css("background-color","#CCCCCc");
//滑鼠點選後觸發
$("tr:odd").mousedown(function(){
$("tr:odd").css("background-color","red");
});
//通過滑鼠在元素上移動
$("tr:odd").mousemove(function(){
$("tr:odd").css("background-color","yellow");
});
//mouseout事件在滑鼠從元素上離開後會觸發
$("tr:odd").mouseout(function(){
$("tr:odd").css("background-color","blue");
});
//為元素繫結函式，點選
$("#cheack1").click(function(){
//全選和取消全選
$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
$("body > table > tbody > tr:nth-child(2) > td:nth-child(1) > input[type="checkbox"]")
});
});
</script>
</head>
<body>
<table border="1px" width="300px" cellpadding="0" cellspacing="0">
<tr>
<th><input type="checkbox" id="cheack1"/></th>
<th>姓名</th>
<th>年齡</th>
<th>愛好</th>
</tr>
<tr align="center">
<td><input type="checkbox"/></td>
<td >江彬</td>
<td>24</td>
<td>程式設計</td>
</tr>
<tr align="center">
<td><input type="checkbox"/></td>
<td>初識</td>
<td>22</td>
<td>看書</td>
</tr>
<tr align="center">
<td><input type="checkbox"/></td>
<td>張三</td>
<td>26</td>
<td>鞋子</td>
</tr>
<tr align="center">
<td><input type="checkbox"/></td>
<td>王五</td>
<td>23</td>
<td>看電影</td>
</tr>
</table>
</body>
</html>
九、使用JQ完成省市聯動效果
1、需求分析
在我們的登錄檔單中,通常我們需要知道使用者的籍貫,需要一個給用選擇的項,當用戶選中了省份之後,列出省下面所有的城市
2、技術分析
- 準備工作 : 城市資訊的資料
- 新增節點 : appendChild (JS)
- append : 新增子元素到末尾
- appendTo : 給自己找一個爹,將自己新增到別人家裡
- prepend : 在子元素前面新增
- after : 在自己的後面新增一個兄弟
- 遍歷的操作:
3、步驟分析
- 匯入JQ的檔案
- 文件載入事件:頁面初始化
- 進一步確定事件: change事件
- 函式: 得到當前選中省份
- 得到城市, 遍歷城市資料
- 將遍歷出來的城市新增到城市的select中
4、程式碼實現
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>省市聯動效果製作</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
/*
準備工作 : 準備資料
*/
var provinces = [
["深圳市","東莞市","惠州市","廣州市"],
["長沙市","岳陽市","株洲市","湘潭市"],
["廈門市","福州市","漳州市","泉州市"]
];
$(function () {
$("#province").change(function(){
var citys=provinces[this.value];
//清空城市資訊
$("#city").empty();
//遍歷城市資訊
$(citys).each(function(i,n){
$("#city").append("<option>"+n+"</option>");
})
});
});
</script>
</head>
<body>
<!--選擇省份-->
<select name="sheng" id="province">
<option value="1">請選擇</option>
<option value="0">廣東</option>
<option value="1">湖南</option