jQuery学习笔记
jQuery简介
jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等操作，jQuery的设计宗旨是“write less, do more”，即用更少的代码实现更多的功能，jQuery兼容各种主流浏览器，是目前最流行的JavaScript库之一。
引入jQuery
要使用jQuery，首先需要在HTML文件中引入jQuery库，可以通过以下三种方式引入：
1、下载jQuery库文件，将jquery-x.x.x.min.js文件放入项目文件夹中，然后在HTML文件中通过script标签引入。
<script src="jquery-x.x.x.min.js"></script>
2、使用CDN（内容分发网络）引入jQuery库，在HTML文件中添加以下代码：
<script src="https://code.jquery.com/jquery-x.x.x.min.js"></script>
3、使用npm安装jQuery，然后在项目中引入，在项目根目录下运行以下命令：
npm install jquery
然后在HTML文件中引入：
<script src="node_modules/jquery/dist/jquery.min.js"></script>
jQuery选择器
jQuery选择器类似于CSS选择器，可以用来选取HTML元素，常用的选择器有：
1、ID选择器：通过元素的ID选取元素，如$("#id")。
2、类选择器：通过元素的class属性选取元素，如$(".class")。
3、元素选择器：通过元素的标签名选取元素，如$("element")。
4、属性选择器：通过元素的属性和属性值选取元素，如$("[attribute='value']")。
5、子元素选择器：通过元素的子元素选取元素，如$("#parent > child")。
6、后代选择器：通过元素的后代元素选取元素，如$("#parent descendant")。
7、兄弟选择器：通过元素的兄弟元素选取元素，如$("#prev + next")。
8、过滤选择器：通过特定的过滤条件选取元素，如：even、：odd、：first、：last等。
9、内容选择器：通过元素的内容选取元素，如：contains()、：empty等。
10、可见性选择器：通过元素的可见性状态选取元素，如：hidden、：visible等。
jQuery基本操作
1、HTML操作：使用jQuery可以方便地创建、修改和删除HTML元素。
// 创建元素
var newElement = $("<div></div>");
// 修改元素内容
$("#element").text("新内容");
// 删除元素
$("#element").remove();
2、CSS操作：使用jQuery可以方便地修改元素的样式。
// 修改元素背景颜色
$("#element").css("background-color", "red");
// 修改元素字体大小
$("#element").css("font-size", "20px");
3、事件处理：使用jQuery可以方便地为元素绑定和解除事件。
// 绑定点击事件
$("#element").on("click", function() {
alert("点击事件触发");
});
// 解除点击事件
$("#element").off("click");
4、动画效果：使用jQuery可以方便地为元素添加动画效果。
// 淡入效果
$("#element").fadeIn();
// 淡出效果
$("#element").fadeOut();
// 滑动效果
$("#element").slideUp();
// 隐藏效果（不平滑）
$("#element").hide();
jQuery Ajax交互
使用jQuery可以轻松地实现Ajax交互，发送HTTP请求并处理响应数据。
// 发送GET请求
$.get("example.php", function(data) {
console.log(data); // 处理响应数据
});
// 发送POST请求（传递数据）
$.post("example.php", { name: "张三", age: 30 }, function(data) {
console.log(data); // 处理响应数据
});
发表评论