JQuery教程及实例资源-CSDN文库

共292个文件

png：104个

jpg：86个

js：37个

2星需积分: 9 21 浏览量 2009-09-18 16:44:18 上传评论收藏 4.63MB ZIP 举报

**jQuery教程及实例详解** jQuery，作为一款强大的JavaScript库，极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。"The Learning jQuery Fake Bookstore"是一个模拟的项目，旨在通过实际应用来教授jQuery的基本概念和高级特性。在这个教程中，我们将深入探讨jQuery的核心功能，并通过一系列章节来解析其在实际场景中的应用。 1. **jQuery基础** - **选择器**: jQuery的选择器是基于CSS的，使得选取页面元素变得简单。如`$("#id")`选取ID为`id`的元素，`$(".class")`选取所有class为`class`的元素。 - **DOM操作**: `$(selector).append()`用于在元素末尾添加内容，`$(selector).prepend()`则在开头添加，`$(selector).html()`用于获取或设置元素的HTML内容。 2. **事件处理** - **绑定事件**: `$(selector).on('event', handler)`用于绑定事件，如点击事件`'click'`。`handler`是当事件触发时执行的函数。 - **事件冒泡与阻止**: `event.stopPropagation()`阻止事件向上冒泡，`event.preventDefault()`阻止默认行为。 3. **动画效果** - **淡入淡出**: `$(selector).fadeIn()`和`.fadeOut()`实现元素的淡入淡出效果。 - **滑动显示**: `$(selector).slideToggle()`实现元素的上下滑动显示或隐藏。 4. **Ajax交互** - **$.ajax()**: 这是jQuery最核心的Ajax函数，可以进行异步数据请求。 - **$.get()**和**$.post()**: 简化的GET和POST请求，用于快速实现数据获取或提交。 5. **jQuery插件开发** - **扩展jQuery对象**: 使用`$.fn.extend()`方法可扩展jQuery对象，创建自定义函数。 - **插件结构**: 一个典型的jQuery插件会定义一个函数，接受选项参数，并在内部使用`this`引用当前jQuery对象。 6. **性能优化** - **缓存DOM选择**: 频繁使用的元素应先存储在变量中，避免多次DOM查询。 - **使用事件委托**: 使用`$(parent).on('event', selector, handler)`可以减少事件监听器的数量，提高性能。 7. **Chapters分析** - **Ch1**: 概述jQuery的引入和基本用法。 - **Ch2**: 深入讨论选择器及其在页面元素选取中的应用。 - **Ch3**: 介绍事件绑定和处理，包括事件代理。 - **Ch4**: 动画效果的实现，如淡入淡出、滑动等。 - **Ch5**: AJAX的基础和高级用法，包括JSONP处理跨域问题。 - **Ch6**: 讲解jQuery的DOM操作，如元素增删改查。 - **Ch10**: 插件开发入门，如何创建和使用自定义的jQuery插件。 - **Ch11**: 性能优化技巧，包括DOM操作和事件处理的优化。 - **ChC**: 可能是案例或实战部分，结合前面的知识点进行综合运用。通过以上章节的学习，读者将能够熟练掌握jQuery的基本用法，理解其工作原理，并具备利用jQuery构建动态、交互性强的网页应用的能力。"The Learning jQuery Fake Bookstore"项目则提供了一个实践平台，让学习者能在实践中巩固理论知识，提升实际开发技能。

资源推荐

资源详情

资源评论

收起资源包目录

JQuery教程及实例（292个子文件）

ui.theme-2.css 17KB

ui.theme-1.css 15KB

ui.css 4KB

forms.css 3KB

bookstore.css 3KB

flatland.css 2KB

rotators.css 2KB

chapter2.css 2KB

tables.css 1KB

gettysburg.css 1KB

dictionary.css 1KB

carol.css 1KB

closures.css 635B

alice.css 366B

global_functions.css 350B

dom_traversal.css 309B

selectors.css 282B

default.css 256B

object_methods.css 218B

shortcuts.css 197B

parameters.css 111B

enlarge.gif 4KB

loading.gif 3KB

right.gif 2KB

left.gif 1KB

rolo-3.gif 1KB

rolo-2.gif 1KB

rolo-1.gif 1007B

wait.gif 432B

close.gif 428B

index.html 40KB

index.html 33KB

index.html 14KB

index.html 7KB

h.html 6KB

index.html 6KB

index.html 4KB

index.html 3KB

a.html 2KB

index.html 2KB

ui.html 2KB

index.html 1KB

index.html 901B

index.html 749B

index.html 684B

1904811256.jpg 121KB

1904811728.jpg 110KB

1904811612.jpg 107KB

1904811965.jpg 105KB

1904811159.jpg 102KB

1904811418.jpg 99KB

1904811604.jpg 91KB

1904811825.jpg 89KB

1904811906.jpg 88KB

1904811655.jpg 88KB

1904811337.jpg 88KB

1904811515.jpg 87KB

1904811493.jpg 86KB

1904811639.jpg 85KB

1904811000.jpg 85KB

1904811698.jpg 85KB

1904811361.jpg 84KB

1904811140.jpg 84KB

1904811329.jpg 84KB

1904811841.jpg 82KB

1904811930.jpg 82KB

1904811523.jpg 81KB

1904811507.jpg 80KB

1904811736.jpg 80KB

1904811868.jpg 80KB

1904811280.jpg 79KB

1904811922.jpg 79KB

1904811973.jpg 79KB

1904811213.jpg 78KB

1904811531.jpg 77KB

1904811558.jpg 76KB

1904811302.jpg 76KB

1904811450.jpg 76KB

1904811590.jpg 76KB

1904811884.jpg 75KB

1904811620.jpg 75KB

1904811272.jpg 75KB

1904811310.jpg 74KB

1904811078.jpg 74KB

1904811132.jpg 73KB

1904811426.jpg 72KB

1904811094.jpg 71KB

1904811795.jpg 71KB

1904811787.jpg 71KB

1904811760.jpg 70KB

1847190979.jpg 69KB

1904811892.jpg 69KB

1904811442.jpg 68KB

共 292 条

<?php $ajax = $_SERVER['HTTP_X_REQUESTED_WITH']; if (!$ajax): // include header only if the page is NOT being returned via ajax. ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Shipping</title> <link rel="stylesheet" href="../styles/bookstore.css" type="text/css" media="screen" /> <link rel="stylesheet" href="../styles/tables.css" type="text/css" media="screen" /> <link rel="stylesheet" href="../styles/forms.css" type="text/css" media="screen" /> <link rel="stylesheet" href="../styles/rotators.css" type="text/css" media="screen" /> <script src="../scripts/jquery.js" type="text/javascript"></script> <script src="../scripts/cookbook.js" type="text/javascript"></script> <script src="../scripts/tables.js" type="text/javascript"></script> <script src="../scripts/rotators.js" type="text/javascript"></script> </head> <body> <div id="wrapper"> <div id="branding"> <h1><a href="../index.html">Learning jQuery</a></h1> </div> <div id="container"> <div id="content"> <h2>Shipping</h2> <?php endif; if (isset($_POST['op']) && $_POST['op'] == 'Save') { // Code here would save the new shipping address back to the database, or to the session variables. $name = $_POST['first-name'] .' '. $_POST['last-name']; print('<p id="shipping-name"><a href="shipping.php">'. $name .'</a></p>'); } else { $shipping = array(); $shipping['first-name'] = 'Steve'; $shipping['last-name'] = 'Schoon'; $shipping['address'] = '52 Rodeo Drive'; $shipping['city'] = 'Beverly Hills'; $shipping['state'] = 'CA'; $shipping['zip'] = '90210'; $shipping['message'] = 'Enjoy these great books! You\'ll love the cliff-hangers!'; ?> <form action="shipping.php" method="post" accept-charset="utf-8"> <ol> <li><label for="first-name">First name:</label><input type="text" name="first-name" value="<?php print $shipping['first-name']; ?>" id="first-name" /></li> <li><label for="last-name">Last name:</label><input type="text" name="last-name" value="<?php print $shipping['last-name']; ?>" id="last-name" /></li> <li><label for="address">Address:</label><input type="text" name="address" value="<?php print $shipping['address']; ?>" id="address" /></li> <li><label for="city">City:</label><input type="text" name="city" value="<?php print $shipping['city']; ?>" id="city" /></li> <li><label for="state">State:</label><input type="text" name="state" value="<?php print $shipping['state']; ?>" id="state" /></li> <li><label for="zip">ZIP:</label><input type="text" name="zip" value="<?php print $shipping['zip']; ?>" id="zip" /></li> <li><label for="message">Gift message:</label><textarea name="message" id="message"><?php print $shipping['message']; ?></textarea></li> <li> <input type="submit" name="op" id="op" value="Save" /> </li> </ol> </form> <?php } if (!$ajax): // include footer only if the page is NOT being returned via ajax. ?> </div>  <div id="primary-nav"> <ul> <li><a href="../books/index.html">Books</a></li> <li><a href="../news/index.html">News</a></li> <li><a href="../contact/index.html">Contact</a></li> </ul> </div> </div>  <div id="secondary-nav"> <h3><a href="./index.html">Your Cart</a></h3> <ul> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> <li>Lorem ipsum dolor</li> </ul> </div> <div id="sidebar"> <h2>Sidebar</h2> <div> <form id="search" action="search/index.php" method="post" accept-charset="utf-8"> <label for="search-text">search the site</label><input type="text" name="search-text" id="search-text" /> </form> </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam adipiscing, risus quis fringilla venenatis, diam nisi adipiscing magna, sit amet rutrum risus nunc sit amet odio. Praesent ullamcorper. Donec sit amet ipsum. Nam consequat rhoncus lacus. Pellentesque libero erat, elementum a, mattis in, molestie id, magna. Integer sed libero vitae lacus elementum egestas. Nullam massa magna, gravida sed, porta vel, ultricies at, purus. Maecenas turpis. Vivamus ante risus, eleifend sed, scelerisque at, lacinia vitae, nunc. Vestibulum ut arcu. Cras ut magna. Pellentesque eleifend commodo est. Sed vitae odio eget ipsum tristique hendrerit. Cras elementum turpis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed erat at velit bibendum varius. Sed venenatis sagittis lectus. Cras ligula felis, ultrices et, imperdiet et, laoreet sed, odio. Morbi nunc tellus, hendrerit in, aliquet eget, rutrum a, magna. Nunc nunc.</p> </div>  <div id="footer"> This is the footer. </div> </div>  </body> </html> <?php endif;

评论收藏

内容反馈