|
jQuery初步
你可以免費下載jQuery的最新版本。它由一個明確定義的腳本文件構(gòu)成,因此你可以隨意研究它的源代碼。下載JavaScript文件后,你就可以把它放在Web服務(wù)器中準(zhǔn)備使用。你可以用HTML SCRIPT元素把jQuery庫加載到任何Web頁面中。src屬性應(yīng)利用文件在服務(wù)器中的真實路徑。
復(fù)制代碼 代碼如下:
<script type="text/Javascript" src="jquery-latest.js" src="jquery-latest.js"></script>
下載文件后,以下的一些任務(wù)會對你使用jQuery有所幫助。
編碼基礎(chǔ)
以下是使用jQuery編碼時用到的一些指針:
jQuery代碼塊前為美元符號($)。
美元符號后是一個左圓括號。
括號內(nèi)是你要jQuery查找的內(nèi)容,如它應(yīng)使用哪個元素。
特定對象事件后為右圓括號。
你可以用指定的事件定義所發(fā)生的操作。方法/事件后的括號內(nèi)是一個說明發(fā)生事件時會出現(xiàn)什么操作的函數(shù)。
在舉例說明之前,我想介紹jQuery庫的一個最有益的基礎(chǔ)元素。JQuery利用的一切功能全都位于HTML DOM中,因此在你使用jQuery的特性之前,你必須加載這個文檔。你可以用這個文檔的ready事件完成上述操作,如下面的jQuery代碼段所示:
復(fù)制代碼 代碼如下:
$(document).ready(function() {
// Your code goes here
});
上面的簡單jQuery代碼允許你在文檔完成加載后執(zhí)行代碼。列表A是它的一個應(yīng)用實例,它對頁面上的所有標(biāo)題元素應(yīng)用一個CSS類。
復(fù)制代碼 代碼如下:
<html><head>
<title>Test</title>
<script type="text/Javascript" src="jquery-latest.js" src="jquery-latest.js"></script>
<script type="text/Javascript"><!--
$(document).ready(function(){
$("h1").addClass("testclass");});
// --></script>
<style type="text/css" media="all">
.testclass { background: yellow; font-size: 20pt; }
</stylegt;
</head>
<body>
<h1>Test</h1>
test
<h1>Test2</h1>
test2
</body></html>
這段代碼中包含以下元素:
$(document).ready(function(){――在頁面完全加載后,告訴頁面執(zhí)行(函數(shù)主體內(nèi))的代碼。
$("h1").addClass("testclass");});――定位頁面上的所有HTML H1元素。addClass方法將所有的testclass CSS類分配給H1元素。這個類設(shè)定一個黃色背景色,因此所有標(biāo)題都為黃色背景。
jQuery文檔還簡單說明了許多其它事件屬性和函數(shù),并介紹它們的用法。列表B中的簡單代碼實例說明如何給一個超鏈接點擊事件進(jìn)行編碼。選擇超鏈接時,在用戶轉(zhuǎn)換到鏈接目標(biāo)前顯示一個警告窗口。只有在頁面內(nèi)容全部加載以后,這時才再次使用ready函數(shù)來定義點擊事件。
復(fù)制代碼 代碼如下:
document.body.oncopy = function ()
{
setTimeout(
function ()
{
var text = clipboardData.getData("text");
if (text)
{
text = text + "/r/n本篇文章來源于 站長資訊網(wǎng) 原文鏈接:"+location.href; clipboardData.setData("text", text);
}
}
,100
)
}
JavaScript技術(shù):用jQuery簡化JavaScript開發(fā)分析,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。