javascript中的jQuery简单应用

最新推荐文章于 2023-08-16 23:05:57 发布

dusea

最新推荐文章于 2023-08-16 23:05:57 发布

阅读量693

点赞数

本文链接：https://blog.youkuaiyun.com/dusea/article/details/48439207

版权

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 οnclick="Test()">test</button>  	
</body> 
</html>

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