一、jQuery初始化
jQuery是一款高效、精简并且功能强大的JavaScript库，它能够封装复杂的JavaScript代码，并且简化了JavaScript与HTML之间的操作。jQuery库可以在HTML文档中使用，只需要引入jQuery库的文件即可。在使用jQuery之前，必须先对它进行初始化。
// jQuery初始化代码
$(document).ready(function(){
// 在此添加代码
});
上述代码中，使用了jQuery中的两个核心函数：$和ready()。
- $：这个函数是jQuery中最重要的函数之一，有时也被称为jQuery选择器。$符号后面的内容是用来选择DOM元素的，可以是标签名、ID名、class名等。
- ready()：这个函数用来在DOM文档加载完成后执行一些操作。
二、jQuery初始化事件
在jQuery中，可以使用on()函数对元素进行事件绑定。以下代码示例展示了如何为按钮添加点击事件：
$(document).ready(function(){
$("button").on("click", function(){
alert("按钮被点击了！");
});
});
在这个例子中，使用on()函数对按钮添加了点击事件。当按钮被点击时，将会弹出一个消息框，显示“按钮被点击了！”。
三、jQuery初始化select
下面的代码展示了如何使用jQuery初始化select：
$(document).ready(function(){
$("select").change(function(){
var selectedValue = $(this).val();
alert("选中的值是：" + selectedValue);
});
});
在这个例子中，使用change()函数对select进行事件绑定，当选择发生变化时，将会弹出一个消息框，显示选中的值。
四、jQuery初始化方法
以下是几个常用的jQuery初始化方法：
- addClass()：为指定的元素添加一个或多个类名。
- removeClass()：从指定的元素中删除一个或多个类名。
- toggleClass()：在元素中切换一个或多个类名。
- css()：设置或返回指定的 CSS 属性。
以下代码示例展示了如何为列表元素添加类名：
$(document).ready(function(){
$("li").addClass("myClass");
});
五、jQuery初始化加载
当页面中的资源非常多时，加载速度可能会变得非常缓慢。jQuery可以通过减小JavaScript文件大小来提高加载速度。以下代码展示了如何在页面的头部使用jQuery的CDN链接加载jQuery库：
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
六、jQuery初始化含义
在上面的例子中，我们使用了$(document).ready()来初始化jQuery。这个函数用来在文档加载完成后执行一些操作。当这个函数被调用时，所有的DOM元素已经准备好了，可以被JavaScript代码操作。
七、jQuery初始化函数
下面是一些常用的jQuery初始化函数：
- $(document).ready()：当DOM加载完成后执行一些操作。
- $(window).load()：当页面上所有DOM文档和图片加载完成后执行一些操作。
- $(window).on("load", function(){})：当页面上所有DOM文档和图片加载完成后执行一些操作。
八、jQuery初始化的方法死循环
在初始化过程中，如果使用了初始化函数调用，一定要注意不要在这个函数中调用初始化函数，否则会导致死循环。
以下代码示例展示了一个不正确的初始化函数：
$(document).ready(function(){
$("div").addClass("myClass");
$(document).ready(function(){
$("span").addClass("myClass");
});
});
九、jQuery初始化加载函数
以下代码展示了如何使用$.get()来加载一个HTML文本并在页面中展示：
$(document).ready(function(){
$.get("test.html", function(data){
$("div").html(data);
});
});
十、jQuery初始化加载方法
以下代码展示了如何使用$.ajax()来交换数据并更新部分页面，不用刷新整个页面：
$(document).ready(function(){
$("#btn1").click(function(){
$.ajax({url: "demo_test.txt", success: function(result){
$("#div1").html(result);
}});
});
});
在这个示例中，当点击按钮时，$.ajax()将加载demo_test.txt文件中的内容，并插入到带有ID“div1”的元素中，无需刷新整个页面。
