課前須知: 學(xué)習(xí)jQuery前必須先掌握J(rèn)avaScript
jQuery雖然屬于前端技術(shù), 但是對(duì)于后端人員(諸如Java蝠筑、PHP等,也需要掌握)
jQuery是什么脊框？
- jQuery是一款優(yōu)秀的JavaScript庫昼扛，從命名可以看出jQuery最主要的用途是用來做查詢（jQuery=js+Query）.
- 在jQuery官方Logo下方還有一個(gè)副標(biāo)題（write less, do more）, 體現(xiàn)了jQuery除了查詢以外,還能讓我們對(duì)HTML文檔遍歷和操作辜伟、事件處理仇穗、動(dòng)畫以及Ajax變得更加簡(jiǎn)單
- 體驗(yàn)jQuery
- 原生JS設(shè)置背景（先不要求看懂代碼奠衔，先看看誰更爽）
<script>
// 查詢
var div = document.getElementsByTagName("div");
var one = document.getElementsByClassName("one");
var two = document.getElementById("two");
// 操作css
div[0].style.backgroundColor = "red";
one[0].style.backgroundColor = "yellow";
two.style.backgroundColor = "blue";
</script>
- 使用jQuery設(shè)置背景
<script>
$(document).ready(function () {
// 查詢谆刨，操作CSS一步到位
$("div").eq(0).css('background', 'red');
$(".one").eq(0).css('background', 'yellow');
$("#two").css('background', 'blue');
});
</script>
為什么要使用jQuery？
-
強(qiáng)大選擇器: 方便快速查找DOM元素
- 如上面實(shí)例所展示一樣归斤，通過jQuery查找DOM元素要比原生js快捷很多
- jQuery允許開發(fā)者使用CSS1-CSS3幾乎所有的選擇器,以及jQuery獨(dú)創(chuàng)的選擇器
-
鏈?zhǔn)秸{(diào)用: 可以通過.不斷調(diào)用jQuery對(duì)象的方法
- 如上面實(shí)例所展示一樣痊夭，jQuery可以通過.（點(diǎn)）.不斷調(diào)用jQuery對(duì)象的方法，而原生JavaScript則不一定
<script>
// 1.原生JavaScript
var div = document.getElementsByTagName("div");
// 報(bào)錯(cuò),必須分開寫
div[0].style.backgroundColor = "red".width = 200+"px";
// div[0].style.width = 200+"px";
// 2.jQuery
$(document).ready(function () {
// 不報(bào)錯(cuò),后面還可以接著繼續(xù)寫
$("div").eq(1).css('background', 'yellow').css('width', '200px');
});
</script>
- 隱式遍歷(迭代): 一次操作多個(gè)元素
<script>
// 1.原生JavaScript
var div = document.getElementsByTagName("div");
// div.style.backgroundColor = "red";// 無效
for(var i = 0; i<div.length; i++){
div[i].style.backgroundColor = "red";
}
// 2.jQuery
$(document).ready(function () {
// 隱式遍歷(迭代)找到的所有div
$("div").css('background', 'yellow');
});
</script>
- 讀寫合一: 讀數(shù)據(jù)/寫數(shù)據(jù)使用是一個(gè)函數(shù)
<script>
$(document).ready(function () {
// 讀取數(shù)據(jù)
var $tx = $("div").eq(0).text();
alert($tx);
// 寫入數(shù)據(jù)
$("div").eq(0).text("新的數(shù)據(jù)");
});
</script>
- 事件處理
- DOM操作(C增U改D刪)
- 樣式操作
- 動(dòng)畫
- 豐富的插件支持
-
瀏覽器兼容(前端開發(fā)者痛點(diǎn))
1.x：兼容ie678脏里，但相對(duì)其它版本文件較大她我，官方只做BUG維護(hù)，功能不再新增迫横，最終版本：1.12.4 (2016年5月20日).
2.x：不兼容ie678番舆，相對(duì)1.x文件較小，官方只做BUG維護(hù)矾踱，功能不再新增恨狈，最終版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的瀏覽器呛讲，很多老的jQuery插件不支持這個(gè)版本禾怠，相對(duì)1.x文件較小，提供不包含Ajax/動(dòng)畫API版本圣蝎。
-
應(yīng)該選擇幾點(diǎn)幾版本jQuery?
- 查看百度網(wǎng)頁源碼使用1.x
- 查看騰訊網(wǎng)頁源碼使用1.x
- 查看京東網(wǎng)頁源碼使用1.x
- 綜上所述學(xué)習(xí)1.x,選擇1.x
-
應(yīng)該使用開發(fā)板還是生產(chǎn)版?
- 開發(fā)板: 所有代碼沒有經(jīng)過壓縮,體積更大(200-300KB)
- 生產(chǎn)版:所有代碼經(jīng)過壓縮,提及更小(30-40KB)
- 初學(xué)者為了更好的理解jQuery編碼時(shí)使用開發(fā)板,項(xiàng)目上線時(shí)為了提升訪問速度使用生產(chǎn)版
- ... ...
如何使用jQuery刃宵？
- 下載jQuery庫
- 下載地址: http://code.jquery.com/
- 引入下載的jQuery庫
<head>
<meta charset="UTF-8">
<title>01-初識(shí)jQuery</title>
<script src="code/js/jquery-1.12.4.js"></script>
</head>
- 編寫jQuery代碼
<script>
$(document).ready(function () {
// 所有jQuery代碼寫在這里面
alert("hello LNJ");
});
</script>
