22.3jQuery库资源-CSDN文库

共54个文件

html：43个

xml：4个

js：2个

197 浏览量 2023-09-24 19:43:39 上传评论收藏 515KB ZIP 举报

**jQuery库** jQuery 是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画设计和Ajax交互。自2006年首次发布以来，jQuery 已成为前端开发的重要工具，因其简洁易用的API而备受开发者喜爱。 **jQuery的核心特性** 1. **选择器**：jQuery 提供了一套强大的CSS选择器，使得开发者可以轻松地选取DOM元素。这些选择器基于W3C CSS规范，允许开发者以类似CSS的方式选取页面上的元素，例如`$("#id")`选取ID为id的元素，`$(".class")`选取所有class为class的元素。 2. **DOM操作**：jQuery 提供了一系列方法用于操作DOM，如`append()`、`prepend()`、`html()`、`text()`等，它们使插入、删除和修改HTML内容变得简单。 3. **事件处理**：jQuery 通过`.on()`方法统一处理事件绑定，支持事件冒泡和事件委托。例如，`$("button").on("click", function() {...})`用于在所有按钮上监听点击事件。 4. **动画效果**：jQuery 的`animate()`函数是创建复杂动画的基础，它可以改变任何CSS属性，如宽度、高度、透明度等，并支持链式调用。此外，还有`.show()`, `.hide()`, `.toggle()`等快捷动画方法。 5. **Ajax操作**：jQuery 提供了`.ajax()`, `.get()`, `.post()`等方法进行异步数据请求，简化了与服务器的交互。它还支持JSONP跨域请求，适应了Web服务的多元化需求。 6. **插件生态**：jQuery 社区拥有丰富的插件资源，涵盖了表单验证、图片轮播、弹窗提示等各种功能，极大地扩展了jQuery的功能。 **jQuery的使用方式** 1. **引入jQuery**：可以通过CDN（内容分发网络）链接，如`<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>`，或者将`code.jquery.com_jquery-3.7.1.min.js`这样的本地文件引入到HTML中。 2. **$(document).ready()**：确保DOM加载完成后执行代码，写法如`$(document).ready(function() {...});`或简写`$(function() {...});`。 3. **链式操作**：jQuery 方法返回的是jQuery对象，因此可以连续调用多个方法，如`$("#element").css("color", "red").fadeIn(500);`。 4. **jQuery对象与DOM元素**：jQuery对象封装了多个DOM元素，可以使用`.get()`或`[index]`获取单个DOM元素。 **学习jQuery的资源** - **官方文档**：jQuery的官方文档详尽且易于理解，是学习jQuery的最佳起点。 - **在线教程**：网上有许多免费的jQuery教程，包括视频教程和文字教程，帮助初学者快速入门。 - **示例代码**：通过阅读和分析实际项目中的jQuery代码，可以加深对jQuery的理解。 - **jQuery插件库**：浏览jQuery插件库，了解各种插件的实现方式，有助于提升开发技能。通过学习和熟练使用jQuery，开发者可以大大提高工作效率，创造出更丰富的用户体验。不过，随着现代前端框架如React、Vue、Angular的流行，jQuery在某些场景下可能不再是首选，但其设计理念和技巧依然对现代前端开发有着深远影响。

资源推荐

资源详情

资源评论

收起资源包目录

22.3 jQuery 库.zip （54个子文件）

jQuery

3. form_filter.html 3KB

17. add_child_elements.html 569B

12. content_set.html 638B

41. animation_queue.html 822B

38. multi_parameter_settings.html 1KB

27. login_verification 2.html 2KB

28. each.html 374B

30. implicit_iteration.html 532B

4. filter_method.html 2KB

20. replace_element.html 630B

18. add_sibling_elements.html 517B

code.jquery.com_jquery-3.7.1.min.js 85KB

2. filter.html 2KB

21. clone_element.html 943B

34. set_the_transparency.html 896B

35. expansion_and_contraction.html 968B

10 position_Set.html 3KB

9. left_menu.html 3KB

11. size_set.html 956B

.idea

jQuery.iml 291B

workspace.xml 5KB

inspectionProfiles

profiles_settings.xml 174B

modules.xml 271B

.gitignore 184B

jsLibraryMappings.xml 192B

31. element_data.html 901B

8. z_index.html 2KB

package.json 220B

33. fade_in_and_out.html 1KB

26. event_delegate.html 2KB

22. hover_events.html 588B

40. predefined_values.html 1014B

32. show_and_hide_elements.html 597B

25. event_bubbling.html 836B

15. login_verification.html 2KB

19. delete_element.html 847B

37. slide_animation.html 1KB

6. class_set.html 1KB

36. like_the_animation.html 1KB

29. each2.html 636B

1. cdn_jQuery.html 479B

24. default_behavior.html 765B

23. input_events.html 481B

5. attr_set.html 880B

42. animation_queue2.html 610B

7. css_set.html 572B

0. use_jQuery.html 471B

16. property_set.html 803B

39. relative_value.html 1KB

14. input_value.html 3KB

13. text_content.html 517B

jQuery库.eddx 402KB

code.jquery.com_jquery-3.7.1.min.js 85KB

22.3 jQuery 库.md 87KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜单栏练习</title> <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script> <style> /* 右侧布局 */ .right { width: 80%; height: 100%; } /* 左侧布局 */ .left { width: 20%; height: 100%; background-color: rgb(43, 43, 45); position: fixed; top: 0; left: 0; border: #352c2c inset 1px; } /* 菜单组: 外间距, 边框 */ .group { margin: 10px; border: red inset 1px; } .title { /* 标题: 文字居中, 上下外边距, 字体颜色. */ text-align: center; margin: 10px 0; color: aqua; } /* 子菜单: 背景颜色, 上边框 */ .item { background-color: rgba(0, 0, 0, 0.2); border-top: #1beb00 inset 1px; } /* 子菜选项: 文字居中, 内边距, 字体颜色, 边框 */ .content { text-align: center; padding: 5px; color: #7fbce1; border: dimgray inset 1px; } /*隐藏子菜单*/ .hied { display: none; } </style> </head> <body>  <div>  <div class="left"> <div class="group"> <div class="title">Python</div> <div class="item hied"> <div class="content">基础</div> <div class="content">进阶</div> <div class="content">高阶</div> </div> </div> <div class="group"> <div class="title">前端</div> <div class="item hied"> <div class="content">HTML</div> <div class="content">CSS</div> <div class="content">HTML</div> </div> </div> <div class="group"> <div class="title">数据库</div> <div class="item hied"> <div class="content">MySQL</div> <div class="content">MongoDB</div> <div class="content">Redis</div> </div> </div> </div>  <div class="right"></div> </div> <script> // 获取节点title元素节点. $('.title').click(function () { // 在点击标题时展开相应的子菜单, 并隐藏父标签的其他兄弟标签下的子菜单. $(this).next().removeClass('hied').parent().siblings().find('.item').addClass('hied') }) </script> </body> </html>

评论收藏

内容反馈