快捷導(dǎo)航

用jQuery簡化JavaScript開發(fā)分析

更新時(shí)間：2009年02月19日 23:47:53 作者：

我總是樂于嘗試新工具或利用節(jié)省開發(fā)時(shí)間的資源。由于市面上存在有許多Web開發(fā)工具，你可能很難縮小搜索范圍。

jQuery是我最近發(fā)現(xiàn)的一個(gè)新工具。jQuery開發(fā)團(tuán)隊(duì)形容jQuery是“一個(gè)快捷、簡練的JavaScript庫，它可以簡化HTML文檔檢查、事件處理、動(dòng)畫執(zhí)行、并給你的Web頁面增加AJAX交互?！?
jQuery初步
你可以免費(fèi)下載jQuery的最新版本。它由一個(gè)明確定義的腳本文件構(gòu)成，因此你可以隨意研究它的源代碼。下載JavaScript文件后，你就可以把它放在Web服務(wù)器中準(zhǔn)備使用。你可以用HTML SCRIPT元素把jQuery庫加載到任何Web頁面中。src屬性應(yīng)利用文件在服務(wù)器中的真實(shí)路徑。

復(fù)制代碼代碼如下:

<script type="text/javascript" src="jquery-latest.js" src="jquery-latest.js"></script>

下載文件后，以下的一些任務(wù)會(huì)對(duì)你使用jQuery有所幫助。
編碼基礎(chǔ)
以下是使用jQuery編碼時(shí)用到的一些指針：
jQuery代碼塊前為美元符號(hào)（$）。
美元符號(hào)后是一個(gè)左圓括號(hào)。
括號(hào)內(nèi)是你要jQuery查找的內(nèi)容，如它應(yīng)使用哪個(gè)元素。
特定對(duì)象事件后為右圓括號(hào)。
你可以用指定的事件定義所發(fā)生的操作。方法/事件后的括號(hào)內(nèi)是一個(gè)說明發(fā)生事件時(shí)會(huì)出現(xiàn)什么操作的函數(shù)。
在舉例說明之前，我想介紹jQuery庫的一個(gè)最有益的基礎(chǔ)元素。JQuery利用的一切功能全都位于HTML DOM中，因此在你使用jQuery的特性之前，你必須加載這個(gè)文檔。你可以用這個(gè)文檔的ready事件完成上述操作，如下面的jQuery代碼段所示：

復(fù)制代碼代碼如下:

$(document).ready(function() { 
// Your code goes here 
}); 

上面的簡單jQuery代碼允許你在文檔完成加載后執(zhí)行代碼。列表A是它的一個(gè)應(yīng)用實(shí)例，它對(duì)頁面上的所有標(biāo)題元素應(yīng)用一個(gè)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元素。這個(gè)類設(shè)定一個(gè)黃色背景色，因此所有標(biāo)題都為黃色背景。

jQuery文檔還簡單說明了許多其它事件屬性和函數(shù)，并介紹它們的用法。列表B中的簡單代碼實(shí)例說明如何給一個(gè)超鏈接點(diǎn)擊事件進(jìn)行編碼。選擇超鏈接時(shí)，在用戶轉(zhuǎn)換到鏈接目標(biāo)前顯示一個(gè)警告窗口。只有在頁面內(nèi)容全部加載以后，這時(shí)才再次使用ready函數(shù)來定義點(diǎn)擊事件。

復(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 
) 
} 

您可能感興趣的文章: