javascript中的jQuery简单应用

来源：互联网发布：淘宝20年使用权编辑：程序博客网时间：2024/04/29 15:44

jQuery在JavaScript中有很强的功能

这里仅做一个抛砖引玉的介绍

1、下载jQuery，http://jquery.com/download/

这里下载的是Download the uncompressed, development jQuery 2.1.4

将其重命名为jquery.js，放在你的html同一目录下面；

2、写一个index.html文件，里面要引用jquery.js

将下面的代码放入到index.html中去

<!DOCTYPE html><html><head><script src="jquery.js"></script> <div id="dictionary"> </div> <div class="letters">   <div class="letter" id="letter-a">     <h3><a href="entries-a.html">A</a></h3>   </div>   <div class="letter" id="letter-b">     <h3><a href="entries-a.html">B</a></h3>   </div>   <div class="letter" id="letter-c">     <h3><a href="entries-a.html">C</a></h3>   </div>   <div class="letter" id="letter-d">     <h3><a href="entries-a.html">D</a></h3>   </div>   <!-- and so on --> </div> </head><body ><script>$(document).ready(function() {   $('#letter-a').click(function(event) {     event.preventDefault();     $('#dictionary').load('a.html');   });   $('#letter-b').click(function(event) {     event.preventDefault();     $('#dictionary').load('left.html');   });}); </script></body></html>

3、在相同的目录下面建立a.html

放入如下代码

 <!DOCTYPE html>  <html lang="en">   <head>   <style type="text/css">  body {   background-color: #fff;   color: #000;   font-family: Helvetica, Arial, sans-serif; } h1, h2, h3 {   margin-bottom: .2em; } .poem {   margin: 0 2em; } .highlight {   background-color: #ccc;   border: 1px solid #888;   font-style: italic;   margin: 0.5em 0;   padding: 0.5em; }  </style>    <meta charset="utf-8">     <title>Through the Looking-Glass</title>      <link rel="stylesheet" href="01.css">      <script src="jquery.js"></script>     <script src="01.js"></script>   </head>    <body>       <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">         "— 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>   </body> </html>

放入left.html

<html><body> ceshi<!self.parent.frames["left"]; >function Test(){self.parent.frames["right"].document.getElementById("btnOk").click(); }</script><button name = btnOk onclick="Test()">test</button>  </body> </html>

OK了，这就是一个简单的jQuery的应用。

0 0