jQuery 學習體驗
昨天從文超那瞭解到JavaScript指令碼中有一個javascript庫叫：jQuery；我對這個東東蠻有興趣的，所以現在抽點時間 學習一下，並記錄一下自己的體驗心得：
首先瞭解一下jQuery:
jQuery 是一個新型的JavaScript庫.
jQuery是一個簡潔快速的JavaScript庫，它能讓你在你的網頁上簡單的操作文檔、處理事件、運行動畫效果或者添加Ajax互動。jQuery的設計會改變你寫JavaScript代碼的方式。
jQuery是一個輕量級的指令碼，其代碼非常小巧，JavaScript包只有15K左右。
jQuery支援CSS1-CSS3,以及基本的xPath(xPath是什麼呢？)
jQuery是跨瀏覽器的，它支援的瀏覽器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+
註：xPath:為XML路徑語言（XML Path Language），它是一種用來確定XML文檔中某部分位置的語言。(詳細參考http://zh.wikipedia.org/wiki/XPath)
==========================================================================================
1、ready函數
格式：
$(document).ready(function()
{
//當文檔載入後從此處開始執行代碼
});
說明：
$(document).ready(fn):當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。這是事件模組中最重要的一個函數，因為它可以極大地提高web應用程式的響應速度。
$(document).ready表示：擷取文檔對象就緒的時候。
註：DOM：是Document Object Model文件物件模型的縮寫
2、滑鼠點擊事件
格式：$("div/#id/.class").click(function()
{
//事件效果代碼，每個事件結束後用分號結束語句。
})
$(div/#id/.class)表示事件發生在當前頁面的所有層/同名id/同名類都綁定了**事件，若用this表示返回當前對象
例子：點擊文字那一層，出現提示資訊：這是我的第一個jQuery例子！！！
<html>
<head>
<title>第一個jQuery例子</title>
</head>
<script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
<script language="javascript">
<!--
$(document).ready(function()
{
$("div").click(function()
{
alert("這是我的第一個jQuery例子！！！");
})
})
-->
</script>
<body>
<div>
點擊這些文字看會出現什麼效果……
</div>
</body>
</html>
不明地方： <script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
這句語句做何解釋，為什麼沒有這句時，點擊文字不會出現提示資訊？
3、對CSS 的操作方法：addclass & removeclass
addclass:添加指定層的樣式類名
removeclass:移除指定層的樣式類名
格式： $("div/#id/.class").addClass("樣式類名");
$("div/#id/.class/this").removeClass("樣式類名");
例子：
<script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
<style>
.a { background-color:#00FF66}
</style>
<script language="javascript">
<!--
$(document).ready(function()
{
$("div").addClass("a");//載入網頁時添加樣式
$("div").click(function()
{
$(this).removeClass("a");//滑鼠點擊時觸發綁定的click事件
})
})
-->
</script>
<body>
<div>
點擊我看看，是不是有變化呢？
</div>
</body>
註：addClass & removeClass 中的Class中的C一定要大寫，否則看不出效果！！！
==========================================================================================
4、css\height\width
格式：1) css(key,value) 2) css(name) 3) css(properties)
height(value)
width(value)
說明:css(key,value) key:標記類名或ID名 value:屬性值
css(name) name:標記類名或ID名
css(properties) properties:把一個“名/值對”對象設定為所有匹配元素的樣式屬性。
例子：
<script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
<script language="javascript">
<!--
$(document).ready(function()
{
$("#bb").click(function()
{
$(this).css("background","#0033FF");
alert($(this).css("background"));
})
$("#b").click(function()
{
$(this).css({ background: "#33FF00", height:"100px" });
})
$("#h").click(function()
{
$(this).css("background","#0033ff");
$(this).height("200px");
$(this).width("300px");
})
})
-->
</script>
<div id="bb">
css(key,value);
css(name);
</div>
<div id="b">
css(properties);
</div>
<div id="h">
height,width;
</div>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
