编辑“JQuery第一个例子学习”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px; margin-bottom:15px;"><strong>导航:</strong> [[JQuery|上一页]] | {{Template:JavaScript导航}}</span>
<div style="clear:both;"></div>


*使用JQuery的步骤十分简单，去[http://jquery.com/ JQuery官方]下载最新版本的JQuery，无需安装JQuery的，你只要将其放到你站点的公共部分即可。然后在所要使用

的页面引用其位置即可。

*第一个例子的讲解
<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库的script标签一定要放在我们自己定义的script标签之前，否则，jQuery框架将引用不到。

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

</pre>

*代码分析：$()结构是用来选取文档的某个部分，常以一个字符串作为参数，其能够包含任一[[css]]选择符表达式。上面的例子表示的是找到文档内所有class均为poem-stanza的部分。.addClass()为选中的页面部分添加class。












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