Jquery——js库

1. jQuery 基础操作

jQuery 是一个快速、小巧的 JavaScript 库，设计用于简化 HTML 文档的遍历、事件处理、动画设计和 Ajax 交互。jQuery 使用户能够更快地编写 JavaScript 代码，并且能够更容易地处理 HTML 文档、事件、动画和 Ajax。

加载 jQuery

要使用 jQuery，首先需要在 HTML 文档中加载 jQuery 库。可以通过 CDN 或下载到本地来加载。

<!-- 通过 CDN 加载 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

选择器

jQuery 提供了强大的选择器，可以方便地选择 HTML 元素。

// 选择所有 p 元素
$("p")// 选择 id 为 myId 的元素
$("#myId")// 选择类名为 myClass 的元素
$(".myClass")// 选择所有 div 元素
$("div")

2. jQuery 事件绑定

jQuery 提供了一个简单的方法来绑定事件到 HTML 元素。

// 绑定 click 事件到所有 p 元素
$("p").click(function() {alert("You clicked a paragraph!");
});

3. jQuery 操作内容、属性

jQuery 提供了方法来操作元素的内容和属性。

// 设置元素的文本内容
$("#myId").text("Hello, World!");// 获取元素的文本内容
var text = $("#myId").text();// 设置元素的 HTML 内容
$("#myId").html("<b>Hello, World!</b>");// 获取元素的 HTML 内容
var html = $("#myId").html();// 设置元素的属性
$("#myId").attr("class", "myClass");// 获取元素的属性
var classValue = $("#myId").attr("class");

4. 样式与动画

jQuery 提供了方法来操作元素的样式和动画。

// 设置元素的 CSS 样式
$("#myId").css("color", "red");// 淡入淡出动画
$("#myId").fadeIn();
$("#myId").fadeOut();// 滑动动画
$("#myId").slideUp();
$("#myId").slideDown();

5. jQuery 创建与删除 JS 相关元素

jQuery 提供了方法来创建和删除元素。

// 创建新的 div 元素
var newDiv = $("<div></div>");// 将新元素添加到 body 中
$("body").append(newDiv);// 删除元素
$("#myId").remove();

6. jQuery 实现 Ajax 异步并跨域

jQuery 提供了 $.ajax() 方法来实现 Ajax 请求，支持跨域请求。

$.ajax({url: "https://api.example.com/data",type: "GET",dataType: "json",success: function(data) {console.log(data);},error: function(error) {console.log(error);}
});

7. jQuery 实现点击菜单

jQuery 可以用来实现点击菜单的功能。

<ul id="menu"><li>Home</li><li>About</li><li>Contact</li>
</ul><script>
$(document).ready(function() {$("#menu li").click(function() {alert("You clicked: " + $(this).text());});
});
</script>