jQuery是一個(gè)優(yōu)秀的JavaScript庫，它憑借簡(jiǎn)潔地語法和跨平臺(tái)的兼容性，極大地簡(jiǎn)化了開發(fā)人員遍歷HTML文檔，操作DOM，處理事件，執(zhí)行動(dòng)畫和開發(fā)Ajax操作。
jQuery優(yōu)勢(shì)：
1.輕量級(jí)
2.強(qiáng)大的選擇器
3.出色的DOM操作的封裝
4.可靠的事件處理機(jī)制
5.完善的Ajax
6.不污染頂級(jí)變量
7.出色的瀏覽器兼容性
8.鏈?zhǔn)讲僮鞣绞?/P>
9.隱式迭代
10.行為層與結(jié)構(gòu)層分離
11.豐富的插件支持
12.完善的文檔
13.開源
（1）編寫簡(jiǎn)單的jQuery代碼:
注：$ 就是jQuery的簡(jiǎn)寫形式。
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () { //等待DOM元素加載完畢.（可能DOM元素關(guān)聯(lián)的文件沒有加載完）
alert("Hello World!"); //彈出一個(gè)框
});
$(document).ready(function () { //可以同時(shí)編寫多個(gè)
alert("Hello again!");
});
$(function () { //簡(jiǎn)寫形式
alert("Hello jQuery!");
});
</script>
（2）jQuery的代碼風(fēng)格
注：鏈?zhǔn)讲僮鳌?/P>
1、對(duì)同一個(gè)對(duì)象不超過3次操作的，可以寫成一行?！ ?
2、對(duì)于同一個(gè)對(duì)象操作較多的，建議每行寫一個(gè)操作。
3、對(duì)于多個(gè)對(duì)象的少量操作，可以每個(gè)對(duì)象寫一行，如果涉及子元素，可以考慮適當(dāng)?shù)目s進(jìn)。
4、對(duì)于多個(gè)對(duì)象的較多操作，可以結(jié)合2,3條。
添加必要的注釋。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-4-3</title>
<style type="text/css">
#menu {
width:300px;
}
.has_children{
background : #555;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
div{
padding:0;
}
div a{
background : #888;
display : none;
float:left;
width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight") //為當(dāng)前元素增加highlight類
.children("a").show().end() //將子節(jié)點(diǎn)的a元素顯示出來并重新定位到上次操作的元素
.siblings().removeClass("highlight") //獲取元素的兄弟元素，并去掉他們的highlight類
.children("a").hide(); //將兄弟元素下的a元素隱藏
});
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第1章-認(rèn)識(shí)jQuery</span>
<a>1.1-JavaScript和JavaScript庫</a>
<a>1.2-加入jQuery</a>
<a>1.3-編寫簡(jiǎn)單jQuery代碼</a>
<a>1.4-jQuery對(duì)象和DOM對(duì)象</a>
<a>1.5-解決jQuery和其它庫的沖突</a>
<a>1.6-jQuery開發(fā)工具和插件</a>
<a>1.7-小結(jié)</a>
</div>
<div class="has_children">
<span>第2章-jQuery選擇器</span>
<a>2.1-jQuery選擇器是什么</a>
<a>2.2-jQuery選擇器的優(yōu)勢(shì)</a>
<a>2.3-jQuery選擇器</a>
<a>2.4-應(yīng)用jQuery改寫示例</a>
<a>2.5-選擇器中的一些注意事項(xiàng)</a>
<a>2.6-案例研究——類似淘寶網(wǎng)品牌列表的效果</a>
<a>2.7-還有其它選擇器么？</a>
<a>2.8-小結(jié)</a>
</div>
<div class="has_children">
<span>第3章-jQuery中的DOM操作</span>
<a>3.1-DOM操作的分類</a>
<a>3.2-jQuery中的DOM操作</a>
<a>3.3-案例研究——某網(wǎng)站超鏈接和圖片提示效果</a>
<a>3.4-小結(jié)</a>
</div>
</div>
</body>
</html>
（3）DOM對(duì)象與jQuery對(duì)象
DOM(Document Object Model,文檔對(duì)象模型)，每一個(gè)DOM都可以表示成一棵樹。JavaScript中的getElementById或者getElementByTagName來獲取元素節(jié)點(diǎn)，這樣的DOM元素就是DOM對(duì)象。
jQuery對(duì)象是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的，可以使用jQuery中的方法，但不能使用DOM對(duì)象的方法。
注：jQuery對(duì)象都是通過$()函數(shù)制造出來的，$()函數(shù)就是一個(gè)jQuery對(duì)象的制造工廠。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function () {
var domObj = document.getElementsByTagName("h3")[0]; // Dom對(duì)象
var $jQueryObj = $(domObj); //jQuery對(duì)象
alert("DOM對(duì)象：" + domObj.innerHTML);
alert("jQuery對(duì)象：" + $jQueryObj.html());
});
</script>
</head>
<body>
<h3>例子</h3>
<p title="選擇你最喜歡的水果.">你最喜歡的水果是?</p>
<ul>
<li>蘋果</li>
<li>橘子</li>
<li>菠蘿</li>
</ul>
</body>
</html>
DOM對(duì)象與jQuery對(duì)象可以相互轉(zhuǎn)換，案例如下：
1.DOM對(duì)象方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-6-2</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function () {
var $cr = $("#cr"); //jQuery對(duì)象
var cr = $cr.get(0); //DOM對(duì)象獲取 2種方式 $cr[0] 或者 $cr.get(0)
$cr.click(function () {
if (cr.checked) { //DOM方式判斷
alert("感謝你的支持!你可以繼續(xù)操作!");
}
})
});
</script>
</head>
<body>
<input type="checkbox" id="cr" />
<label for="cr">我已經(jīng)閱讀了上面制度.</label>
</body>
</html>
2.jQuery對(duì)象方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-6-1</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function () {
var cr = document.getElementById("cr"); //DOM對(duì)象
var $cr = $(cr); //jQuery對(duì)象
$cr.click(function () {
if ($cr.is(":checked")) { //jQuery方式判斷
alert("感謝你的支持!你可以繼續(xù)操作！");
}
})
});
</script>
</head>
<body>
<input type="checkbox" id="cr" />
<label for="cr">我已經(jīng)閱讀了上面制度.</label>
</body>
</html>
以上就是關(guān)于jquery學(xué)習(xí)的第一課，希望大家繼續(xù)關(guān)注。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試