jQuery基本概念
學習目標:學會如何使用jQuery,掌握jQuery的常用api,能夠使用jQuery實現(xiàn)常見的效果。
為什么要學習jQuery?
【01-讓div顯示與設置內(nèi)容.html】
使用javascript開發(fā)過程中,有許多的缺點:
1. 查找元素的方法太少,麻煩。
2. 遍歷偽數(shù)組很麻煩,通常要嵌套一大堆的for循環(huán)。
3. 有兼容性問題。
4. 想要實現(xiàn)簡單的動畫效果,也很麻煩
5. 代碼冗余。
jQuery初體驗
【02-讓div顯示與設置內(nèi)容.html】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 200px;
margin-bottom: 10px;
background-color: #a43035;
display: none;
}
</style>
<!--1. 需要引入jQuery文件-->
<script src="jquery-1.12.4.js"></script>
<script>
//2. 入口函數(shù)的標準
$(document).ready(function(){
//注冊事件,把on去掉,是一個方法
$("#btn1").click(function () {
//隱式迭代:偷偷的遍歷,jQuery會自動的遍歷,不需要我們遍歷。
$("div").show(2000);
});
$("#btn2").click(function () {
$("div").text("我是內(nèi)容");
});
});
</script>
</head>
<body>
<input type="button" value="展示完美身材" id="btn1">
<input type="button" value="設置內(nèi)容" id="btn2">
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
優(yōu)點總結(jié):
1. 查找元素的方法多種多樣,非常靈活
2. 擁有隱式迭代特性,因此不再需要手寫for循環(huán)了。
3. 完全沒有兼容性問題。
4. 實現(xiàn)動畫非常簡單,而且功能更加的強大。
5. 代碼簡單、粗暴。
沒有對比,就沒有傷害,有了對比,處處戳中要害。
什么是jQuery?
jQuery的官網(wǎng) http:///
jQuery就是一個js庫,使用jQuery的話,會比使用JavaScript更簡單。
js庫:把一些常用到的方法寫到一個單獨的js文件,使用的時候直接去引用這js文件就可以了。(animate.js、common.js)
我們知道了,jQuery其實就是一個js文件,里面封裝了一大堆的方法方便我們的開發(fā),其實就是一個加強版的common.js,因此我們學習jQuery,其實就是學習jQuery這個js文件中封裝的一大堆方法。
jQuery的版本
官網(wǎng)下載地址:http:///download/
jQuery版本有很多,分為1.x 2.x 3.x
大版本分類:
1.x版本:能夠兼容IE678瀏覽器
2.x版本:不兼容IE678瀏覽器
1.x和2.x版本jquery都不再更新版本了,現(xiàn)在只更新3.x版本。
3.x版本:不兼容IE678,更加的精簡(在國內(nèi)不流行,因為國內(nèi)使用jQuery的主要目的就是兼容IE678)
關(guān)于壓縮版和未壓縮版
jquery-1.12.4.min.js:壓縮版本,適用于生產(chǎn)環(huán)境,因為文件比較小,去除了注釋、換行、空格等東西,但是基本沒有顆閱讀性。
jquery-1.12.4.js:未壓縮版本,適用于學習與開發(fā)環(huán)境,源碼清晰,易閱讀。
jQuery的入口函數(shù)
使用jQuery的三個步驟:
1. 引入jQuery文件
2. 入口函數(shù)
3. 功能實現(xiàn)
關(guān)于jQuery的入口函數(shù):
//第一種寫法
$(document).ready(function() {
});
//第二種寫法
$(function() {
});
jQuery入口函數(shù)與js入口函數(shù)的對比
js的入口函數(shù)執(zhí)行要比jQuery的入口函數(shù)執(zhí)行得晚一些。
1.JavaScript的入口函數(shù)要等到頁面中所有資源(包括圖片、文件)加載完成才開始執(zhí)行。
2.jQuery的入口函數(shù)只會等待文檔樹加載完成就開始執(zhí)行,并不會等待圖片、文件的加載。
jQuery對象與DOM對象的區(qū)別(重點)
1. DOM對象:使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象。
2. jQuery對象:jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。
3. jQuery對象其實就是DOM對象的包裝集(包裝了DOM對象的集合(偽數(shù)組))
4. DOM對象與jQuery對象的方法不能混用。
DOM對象轉(zhuǎn)換成jQuery對象:
【聯(lián)想記憶:花錢 money】
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對象轉(zhuǎn)jQuery對象
jQuery對象轉(zhuǎn)換成DOM對象:
var $li = $(“l(fā)i”);
//第一種方法(推薦使用)
$li[0]
//第二種方法
$li.get(0)
練習:隔行變色案例
![在這里插入圖片描述](http://image109.360doc.com/DownloadImg/2022/01/1412/237782986_1_20220114120710241_wm)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>我是第1個li</li>
<li>我是第2個li</li>
<li>我是第3個li</li>
<li>我是第4個li</li>
<li>我是第5個li</li>
<li>我是第6個li</li>
<li>我是第7個li</li>
<li>我是第8個li</li>
<li>我是第9個li</li>
<li>我是第10個li</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//就這么寫,會不會報錯,會不會有效果
var lis = $("li");
for (var i = 0; i < lis.length; i++) {
if (i % 2 == 0) {
// lis:jq對象
// lis[i]:DOM對象,通過下標取出來了
lis[i].style.backgroundColor = "pink";
} else {
lis[i].style.backgroundColor = "hotpink";
}
}
});
</script>
</body>
</html>