jqueryjs效果资源-CSDN文库

共23个文件

js：8个

html：4个

css：4个

需积分: 10 176 浏览量 2012-03-28 15:59:37 上传评论收藏 165KB RAR 举报

在IT行业中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的核心理念是“Write Less, Do More”，它通过提供丰富的API和插件，让开发者能够以更少的代码实现更多的功能。本项目以"jquery js效果"为主题，展示了如何使用jQuery来实现一些常见的前端交互效果。我们来看看图片展示部分。在网页中，动态展示图片是一种常见的需求，例如轮播图或图片画廊。jQuery提供了方便的动画效果和定时器功能，可以轻松创建这样的功能。通过`.fadeIn()`和`.fadeOut()`方法，我们可以实现图片的淡入淡出效果；结合`.delay()`和`.queue()`，可以设置动画的时间间隔和顺序。此外，还可以使用`.next()`和`.prev()`选择器切换图片，以及`.data()`来存储和获取图片信息。接下来，描述中的“两个选择框添加删除”可能指的是级联选择框或者联动选择。在jQuery中，我们可以监听`.change()`事件来响应用户在选择框中的操作。当一个选择框的值改变时，根据这个值更新另一个选择框的选项。`.append()`和`.remove()`方法可用于动态添加或删除HTML元素，如新的选择项。同时，可以使用`.val()`来获取或设置选择框的当前值。至于“下拉列表框联动展示数据”，这通常涉及到Ajax技术。jQuery的`.ajax()`函数是进行异步数据请求的关键。通过向服务器发送GET或POST请求，可以动态获取下拉列表的数据并更新DOM。例如，当用户在第一个下拉列表中选择一个值时，`.ajax()`发送请求到服务器，服务器返回与该值相关的数据，然后使用`.html()`或`.append()`将新数据填充到第二个下拉列表中。在这个项目中，你可能还会发现jQuery的其他实用功能，如事件绑定`.on()`, 动画效果`.slideUp()`, `.slideDown()`, `.slideToggle()`等，以及用于选择元素的各种选择器，如`.siblings()`, `.children()`, `.parent()`等。这些都极大地提高了开发效率，使得创建交互性更强的网页变得更加容易。 "jquery js效果"这个项目为初学者提供了一个学习jQuery实际应用的好机会。通过实践这些示例，你可以深入理解jQuery的用法，包括DOM操作、事件处理、动画制作以及Ajax交互，这些都是现代前端开发中不可或缺的技能。无论是图片展示、选择框联动还是下拉列表的动态加载，掌握这些技术都将对你的前端开发能力大有裨益。

资源推荐

资源详情

资源评论

收起资源包目录

jquery js效果.rar （23个子文件）

jquery js效果

两个选择框添加删除

images

windows_arrow_down.gif 1KB

windows_drag_bottom.gif 170B

windows_arrow_up.gif 1KB

onlineDine2.jpg 1KB

onlineDine1.jpg 1KB

windows_drag_middle.gif 534B

jScrollPane.js 16KB

jquery.tools.min.js 92KB

myOwn.js 3KB

jquery.mousewheel.js 2KB

jquery.1.71.js 92KB

DD_belatedPNG_0.0.8a.js 12KB

css

jScrollPane.css 1KB

demoStyles.css 1KB

style.css 12KB

online_dining.html 7KB

很好用的图片效果

index.html 2KB

2.jpg 15KB

jquery.1.71.js 92KB

style.css 521B

下拉列表框联动展示数据

main1.html 3KB

jquery.1.71.js 92KB

main.html 3KB

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" media="all" href="css/demoStyles.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/jScrollPane.css" /> <script type="text/javascript" src="js/jquery.1.71.js"></script> <script type="text/javascript" src="js/jquery.tools.min.js"></script> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jScrollPane.js"></script> <script type="text/javascript" src="js/myOwn.js"></script>  </head> <body>  <div id="center"> <span class="blank_0"></span> <div class="center_head"> <div class="content">  <div class="onlineDining"> <span class="blank_0"></span> <div class="multiple_bigbox"> <h3>菜品:</h3> <div class="select1"> <h4>待选菜品</h4>  <div class="holder winXP"> <div id="pane1" class="scroll-pane"> <ul class="nav_4"> <li><a href="javascript:;">长江团子</a> <ul class="nav_5"> <li><a href="javascript:;">菜品一</a></li> <li><a href="javascript:;">菜品二</a></li> <li><a href="javascript:;">菜品三</a></li> <li><a href="javascript:;">菜品四</a></li> </ul> </li> <li><a href="javascript:;">长江团子</a> <ul class="nav_5"> <li><a href="javascript:;">菜品一</a></li> <li><a href="javascript:;">菜品二</a></li> <li><a href="javascript:;">菜品三</a></li> <li><a href="javascript:;">菜品四</a></li> </ul> </li> <li><a href="javascript:;">长江团子</a> <ul class="nav_5"> <li><a href="javascript:;">菜品一</a></li> <li><a href="javascript:;">菜品二</a></li> <li><a href="javascript:;">菜品三</a></li> <li><a href="javascript:;">菜品四</a></li> </ul> </li> <li><a href="javascript:;">长江团子</a> <ul class="nav_5"> <li><a href="javascript:;">菜品一</a></li> <li><a href="javascript:;">菜品二</a></li> <li><a href="javascript:;">菜品三</a></li> <li><a href="javascript:;">菜品四</a></li> </ul> </li> <li><a href="javascript:;">长江团子</a> <ul class="nav_5"> <li><a href="javascript:;">菜品一</a></li> <li><a href="javascript:;">菜品二</a></li> <li><a href="javascript:;">菜品三</a></li> <li><a href="javascript:;">菜品四</a></li> </ul> </li> <li><a href="javascript:;">长江团子</a> <ul class="nav_5"> <li><a href="javascript:;">菜品一</a></li> <li><a href="javascript:;">菜品二</a></li> <li><a href="javascript:;">菜品三</a></li> <li><a href="javascript:;">菜品四</a></li> </ul> </li> <li><a href="javascript:;">长江团子</a> <ul class="nav_5"> <li><a href="javascript:;">菜品一</a></li> <li><a href="javascript:;">菜品二</a></li> <li><a href="javascript:;">菜品三</a></li> <li><a href="javascript:;">菜品四</a></li> </ul> </li> </ul> </div> </div> </div>  <div class="center_box"> <a href="javascript:;" class="center_box_right"><img src="images/onlineDine1.jpg" /></a> <a href="javascript:;" class="center_box_left"><img src="images/onlineDine2.jpg" /></a> </div> <div class="select2"> <h4>待选菜品</h4> <div class="holder winXP"> <div id="pane2" class="scroll-pane"> <ul class="onlne_content"> </ul> </div> </div>  </div> <div style="clear:both;"></div> </div>  </div>  </div> </div> </div> </body> </html>

评论收藏

内容反馈