使用全局函数$.getScript(),这个全局函数与它的同辈函数类似,接受一个URL参数以查找脚本文件
- 2017-06-30 15:18:00
- admin 原创
- 324
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The Devil's Dictionary</title> <style> /*************************************** Default Styles ***************************************/ html, body { margin: 0; padding: 0; } body { font: 62.5% Verdana, Helvetica, Arial, sans-serif; color: #000; background: #fff; } #container { font-size: 1.2em; margin: 10px 2em; } h1 { font-size: 2.5em; margin-bottom: 0; } h2 { font-size: 1.3em; margin-bottom: .5em; } h3 { font-size: 1.1em; margin-bottom: 0; } code { font-size: 1.2em; } a { color: #06581f; } /*************************************** Chapter Styles ***************************************/ #header { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #eee; } .letters { float: left; width: 15%; padding-right: 5%; } .letter { margin: 10px; } .letter h3 { font-weight: bold; } .letter ul { list-style: none; padding: 0; margin: 0 1em; } .letter input { width: 100%; margin-bottom: 1em; } #dictionary { float: left; width: 78%; } .entry { padding: 1em 0em; border-bottom: 1px solid #eee; } .entry .term { display: inline; font-weight: bold; } .entry .part { padding: 0 1em; display: inline; font-style: italic; } .entry .definition { padding: .5em; } .entry .definition .quote { margin: .5em 2em; padding: 0 1em; color: #333; border-left: 2px #eee solid; } .entry .definition .quote .quote-author { font-weight: bold; margin-left: 20em; } #loading { display: none; position: fixed; left: 50%; top: 40%; width: 90px; padding: 20px; margin-left: -66px; border: 1px #000 solid; background-color: #eee; } * html #loading { position: absolute; } .highlighted { background-color: #dfd; font-style: italic; } </style> <script src="http://code.ybao.org/js/jquery.js"></script> <script> $(document).ready(function() { $('#letter-a a').click(function(event) { event.preventDefault(); $('#dictionary').load('http://code.ybao.org/demo/src/ajax/a.html'); }); $('#letter-b a').click(function(event) { event.preventDefault(); $.getJSON('http://code.ybao.org/demo/src/ajax/b.json', function(data) { var html = ''; $.each(data, function(entryIndex, entry) { html += '<div class="entry">'; html += '<h3 class="term">' + entry.term + '</h3>'; html += '<div class="part">' + entry.part + '</div>'; html += '<div class="definition">'; html += entry.definition; if (entry.quote) { html += '<div class="quote">'; $.each(entry.quote, function(lineIndex, line) { html += '<div class="quote-line">' + line + '</div>'; }); if (entry.author) { html += '<div class="quote-author">' + entry.author + '</div>'; } html += '</div>'; } html += '</div>'; html += '</div>'; }); $('#dictionary').html(html); }); }); $('#letter-c a').click(function(event) { event.preventDefault(); $.getScript('http://code.ybao.org/demo/src/ajax/c.js'); }); }); </script> </head> <body> <div id="container"> <div id="header"> <h2>The Devil's Dictionary</h2> <div class="author">by Ambrose Bierce</div> </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-b.html">B</a></h3> </div> <div class="letter" id="letter-c"> <h3><a href="entries-c.html">C</a></h3> </div> <div class="letter" id="letter-d"> <h3><a href="entries-d.html">D</a></h3> </div> <div class="letter" id="letter-e"> <h3>E</h3> <ul> <li><a href="e.php?term=Eavesdrop">Eavesdrop</a></li> <li><a href="e.php?term=Edible">Edible</a></li> <li><a href="e.php?term=Education">Education</a></li> <li><a href="e.php?term=Eloquence">Eloquence</a></li> <li><a href="e.php?term=Elysium">Elysium</a></li> <li><a href="e.php?term=Emancipation">Emancipation</a></li> <li><a href="e.php?term=Emotion">Emotion</a></li> <li><a href="e.php?term=Envelope">Envelope</a></li> <li><a href="e.php?term=Envy">Envy</a></li> <li><a href="e.php?term=Epitaph">Epitaph</a></li> <li><a href="e.php?term=Evangelist">Evangelist</a></li> </ul> </div> <div class="letter" id="letter-f"> <h3>F</h3> <form action="f.php"> <input type="text" name="term" value="" id="term"> <button type="submit">Search</button> </form> </div> <div class="letter" id="letter-g"> <h3><a href="entries-g.html">G</a></h3> </div> <div class="letter" id="letter-h"> <h3><a href="entries-h.html">H</a></h3> </div> </div> <div id="dictionary"> </div> </div> </body> </html>
文章分类
联系我们
电话: | 18902328227 |
---|---|
Email: | 2689701946@qq.com |
QQ: | 2689701946 |
微信: | 18902328227 |
地址: | 广州番禺区繁华路 |