jquery 思维导图

jQuery思维导图

1、jQuery简介：

- jQuery是一个快速、简洁的JavaScript库，用于简化HTML文档遍历、事件处理、动画和Ajax交互。

- jQuery的设计宗旨是“write less, do more”，即用更少的代码实现更多的功能。

- jQuery兼容各种主流浏览器，如Chrome、Firefox、Safari、IE等。

2、引入jQuery：

- 通过CDN引入：在HTML文件中添加<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>即可。

- 下载jQuery库文件：从官网下载最新版本的jQuery库文件，然后将其放入项目中，并在HTML文件中引用。

3、选择器：

- ID选择器：$("#id")，用于选取具有特定ID的元素。

- 类选择器：$(".class")，用于选取具有特定类名的元素。

- 标签选择器：$("tag")，用于选取所有指定标签的元素。

- 属性选择器：$("[attribute]")，用于选取具有特定属性的元素。

- 子元素选择器：$("#parent > child")，用于选取某个父元素下的直接子元素。

4、DOM操作：

- 获取元素：$("#element")或$(".element")或$("tag")或$("[attribute]")。

- 修改元素内容：$("#element").html()或$("#element").text()。

- 修改元素属性：$("#element").attr("attribute", "value")。

- 添加元素：$("#parent").append("<child>")或$("#parent").after("<child>")。

- 删除元素：$("#element").remove()或$("#element").empty()。

5、事件处理：

- 绑定事件：$("#element").on("event", function() {...})。

- 解绑事件：$("#element").off("event")。

- 阻止事件冒泡：$("#element").stopPropagation()。

- 阻止默认事件：$("#element").preventDefault()。

6、动画效果：

- hide()：隐藏元素。

- show()：显示元素。

- toggle()：切换元素的可见状态。

- fadeIn()、fadeOut()、fadeToggle()：实现淡入、淡出和切换效果。

- slideUp()、slideDown()、slideToggle()：实现滑动效果。

- animate()：自定义动画效果。

7、Ajax交互：

- $.ajax()：发起Ajax请求。

- $.get()：发起GET请求。

- $.post()：发起POST请求。

- $.getJSON()：发起JSON格式的GET请求。

- $.load()：加载HTML内容到指定的元素中。