編輯“JQuery第一個(gè)例子學(xué)習(xí)”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px; margin-bottom:15px;"><strong>導(dǎo)航:</strong> [[JQuery|上一頁(yè)]] | {{Template:JavaScript導(dǎo)航}}</span>
<div style="clear:both;"></div>


*使用JQuery的步驟十分簡(jiǎn)單，去[http://jquery.com/ JQuery官方]下載最新版本的JQuery，無需安裝JQuery的，你只要將其放到你站點(diǎn)的公共部分即可。然后在所要使用

的頁(yè)面引用其位置即可。

*第一個(gè)例子的講解
<pre>
<?xml version="1.0" encoding="UTF-8" ?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Through the Looking-Glass</title>
<link rel="stylesheet" href="alice.css" type="text/css"
media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script src="alice.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<h1>Through the Looking-Glass</h1>
<div class="author">by Lewis Carroll</div>
<div class="chapter" id="chapter-1">
<h2 class="chapter-title">1. Looking-Glass House</h2>
<p>There was a book lying near Alice on the table, and while
she sat watching the White King (for she was still a
little anxious about him, and had the ink all ready to
throw over him, in case he fainted again), she turned over
the leaves, to find some part that she could read, <span
class="spoken">"&mdash;for it's all in some language I
don't know,"</span> she said to herself.</p>
<p>It was like this.</p>
<div class="poem">
<h3 class="poem-title">YKCOWREBBAJ</h3>
<div class="poem-stanza">
<div>sevot yhtils eht dna ,gillirb sawT'</div>
<div>;ebaw eht ni elbmig dna eryg diD</div>
<div>,sevogorob eht erew ysmim llA</div>
<div>.ebargtuo shtar emom eht dnA</div>
</div>
</div>
<p>She puzzled over this for some time, but at last a bright
thought struck her. <span class="spoken">"Why, it's a
Looking-glass book, of course! And if I hold it up to a
glass, the words will all go the right way again."</span></p>
<p>This was the poem that Alice read.</p>
<div class="poem">
<h3 class="poem-title">JABBERWOCKY</h3>
<div class="poem-stanza">
<div>'Twas brillig, and the slithy toves</div>
<div>Did gyre and gimble in the wabe;</div>
<div>All mimsy were the borogoves,</div>
<div>And the mome raths outgrabe.</div>
</div>
</div>
</div>
</div>
</body>
</html>
</pre>

*'''注意了'''，jQuery庫(kù)的script標(biāo)簽一定要放在我們自己定義的script標(biāo)簽之前，否則，jQuery框架將引用不到。

*書寫jQuery代碼，上面代碼<pre><script src="alice.js" type="text/javascript"></script></pre>即引用我們自己定制的jQuery代碼。
<pre>
$(document).ready(function() {
$('.poem-stanza').addClass('emphasized');
});

</pre>

*代碼分析：$()結(jié)構(gòu)是用來選取文檔的某個(gè)部分，常以一個(gè)字符串作為參數(shù)，其能夠包含任一[[css]]選擇符表達(dá)式。上面的例子表示的是找到文檔內(nèi)所有class均為poem-stanza的部分。.addClass()為選中的頁(yè)面部分添加class。












[[category:JQuery]]
[[category:JavaScript]]