JQuery快速上手-从认识到使用

一、认识JQuery

什么是JQuery？

JQuery是一个第三方的JavaScript库下载地址：

https://jquery.com/www

为什么要使用jQuery？

‌jQuery是一个快速、简洁的JavaScript库，旨在通过写更少的代码完成更多的事情。‌

jQuery的设计宗旨是“write Less, Do More”，它封装了JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式。其主要特性和优势包括：

‌简化DOM操作‌：jQuery提供了强大的DOM选择器，使得选择和操作HTML元素变得更加简单。
‌事件处理‌：jQuery简化了事件处理过程，通过简单的API即可绑定、触发和处理事件。
‌动画和效果‌：jQuery内置了多种动画效果，可以方便地为网页添加动态效果。
‌Ajax交互‌：jQuery支持Ajax交互，使得在不刷新页面的情况下与服务器交换数据变得容易。
‌良好的浏览器兼容性‌：jQuery兼容各种主流浏览器，使得开发者无需为浏览器兼容性问题而烦恼。

jQuery的广泛应用和强大的功能使其成为前端开发中的重要工具之一。

二、使用jQuery

引入jQuery

// 网络引用
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
// 也可以使用本地下载好的jQuery

jQuery引入到html文档是，会给window对象(全局对象)添加一个“$”属性和jQuery属性，公开jQuery提供的方法

''$''就是jQuery的别名

console.log($ === jQuery) // true

1.jQuery入口函数

<body>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        // // js入口函数，页面全部加载完成后（图片加载）触发
        // window.onload = function(){
        //     var box = document.querySelector('.box')
        //     console.log(box);
        // }

        // jQ入口函数，页面文档对象模型dom节点加载完成后触发，会比js更提前一点，但是也能安全操作页面
        $(document).ready(function(){
            var box = $('.box')
            console.log(box);
        })

        // jQuery入口函数做一个简化
        $(function(){
            var box = $('.box')
            console.log(box);
        })

    </script>

    <div class="box"></div>
</body>

2.jQuery选择器

jQuery中最基本的概念就是‘选取元素并处理’，jQuery支持大多数css3或者非标准选择器
jQuery(选择器)或$(选择器)这样就可以直接获取页面中对应的dom元素的jQuery对象
通过jQuery获取的元素并不是原生dom，建议在使用jQuery获取元素时使用$作为变量名的开头

<body>
    <div id="box"></div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        var box = document.querySelector('#box')
        // var box = document.getElementById('box')
        console.log(box);
        

        // jQuery中最基本的概念就是‘选取元素并处理’，jQuery支持大多数css3或者非标准选择器

        // jQuery(选择器)或$(选择器)这样就可以直接获取页面中对应的dom元素的jQuery对象

        // 通过jQuery获取的元素并不是原生dom，建议在使用jQuery获取元素时使用$作为变量名的开头
        var box1 = $('#box')
        console.log(box1);
    </script>
</body>

3.jQuery常用选择器

<body>
    <div id="box">
        <p>1</p>
        <p class="two">2</p>
        <p>3</p>
        <h1 id="title">hellow world</h1>
        <span>span1</span>
    </div>
    <span>span2</span>

    <input type="text">
    <input type="password">
    <input type="email">
    <input type="checkbox" checked>

    <script src="/JQ/jquery-3.7.1.js"></script>
    <script>
        // jQuery常用的选择器

        // 标签选择器，返回一个jQuery对象包含所有匹配的DOM元素
        var $p = $('p')
        console.log($p);

        // 通配符选择器
        var $all = $('*')
        console.log($all);

        // ID选择器
        var $title = $('#title')
        console.log($title);

        // 类名选择器
        var $two = $('.two')
        console.log($two);
        
        // 关系选择器
        var $span = $('#box span')
        console.log($span);

        // 子代选择器
        var $span1 = $('#box > span')
        console.log($span1);

        // 复合选择器
        var $test = $('#box , #title , .two')
        console.log($test);
        
        // 属性选择器
        var $psd = $('[type=password]')
        console.log($psd);

        var $checked = $('input[checked]')
        console.log($checked);
        
        var $inp = $(':input')
        console.log($inp);
    </script>
</body>

4.jQuery中的css()方法

在jQuery中，css() 方法是一个非常实用的功能，它允许你获取或设置匹配元素的一个或多个样式属性。

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box:nth-child(2){
            width: 200px;
        }
        .box:nth-child(3){
            width: 300px;
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        // 原生js方法
        var box = document.querySelector('.box')
        box.style.backgroundColor = 'green'

        // css()方法 设置获取样式
        var $box = $('.box')
        console.log($box);
        // 获取 获取第一个元素的单一样式
        // .css()中传递一个属性名，代表获取该元素对应属性名的属性值
        console.log($box.css("width"));
        // 如果想一次获取多个属性值，传递参数时用数组的形式包含属性名
        console.log($box.css(["width",'height','background']));
        // 设置 给所有选中的元素设置样式
        // 选择器.css("属性名","属性值") 给元素设置单一样式
        $box.css("background","blue")
        // 一次设置多个属性
        // $box.css({
        //     width:'200px',
        //     height:'200px'
        // })

        // 了解
        $box.css('background',function(i,style){
            console.log(i,style);
            var red = i*100 + 50
            return 'rgba('+red+',0,0,.'+i+')'
        })
    </script>
</body>

5.属性方法prop

在jQuery中，prop() 方法是一个用于获取或设置匹配元素的属性值的重要方法。

获取属性值

当你想要获取某个元素的属性值时，可以使用 prop() 方法，并传入你想要查询的属性名称作为参数

var checked = $('#myCheckbox').prop('checked');

这段代码会获取ID为 myCheckbox 的复选框元素的 checked 属性值，并将其存储在变量 checked 中。

设置属性值

当你想要修改某个元素的属性值时，也可以使用 prop() 方法。这次，你需要传入两个参数：第一个是你想要设置的属性名称，第二个是你想要设置的新值。例如：

$('#myCheckbox').prop('checked', true);

这段代码会将ID为 myCheckbox 的复选框元素的 checked 属性值设置为 true，即选中该复选框。

6.获取设置内容

在jQuery中，获取和设置元素的内容是非常常见的操作。jQuery提供了几种方法来处理元素的内容，包括文本内容、HTML内容以及表单值。以下是一些常用的方法：

1‌.text()‌

获取或设置所选元素的文本内容。
当用于获取内容时，它会返回所有匹配元素的文本内容串联起来的字符串。

2.html()‌

获取或设置所选元素的HTML内容。
当用于获取内容时，它会返回第一个匹配元素的HTML内容。

3.val()‌

获取或设置表单字段的值。
适用于input、select和textarea元素。

设置内容

1.text(value)‌

设置所选元素的文本内容。
如果value参数包含任何HTML标签，它们将被视为普通文本，不会被浏览器解析为HTML。

2.html(value)‌

设置所选元素的HTML内容。
如果value参数包含HTML标签，这些标签将被浏览器解析并渲染。

3.val(value)‌

设置表单字段的值。
适用于input、select和textarea元素。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

<div id="myDiv">Hello, World!</div>
<input type="text" id="myInput" value="Initial Value">

<script>
// 获取内容
var divText = $('#myDiv').text();
var divHtml = $('#myDiv').html();
var inputVal = $('#myInput').val();

console.log(divText); // 输出: Hello, World!
console.log(divHtml); // 输出: Hello, World!
console.log(inputVal); // 输出: Initial Value

// 设置内容
$('#myDiv').text('New Text Content');
$('#myDiv').html('<strong>New HTML Content</strong>');
$('#myInput').val('New Value');

</script>
</body>

在这个示例中，我们首先获取了div和input元素的内容，然后设置了新的内容。注意，当使用html()方法设置内容时，我们可以包含HTML标签，这些标签将被浏览器解析和渲染。

7.jQuery对象

注意：jQuery对象与原生DOM对象是两种不同的对象，DOM对象才能使用DOM方法，jQuery对象使用jQuery方法，不能混淆使用

可以把jQuery对象转换为DOM对象，要将jQuery对象转换为DOM对象，可以使用以下几种方法之一：

方法1：使用索引

jQuery对象是一个类似数组的对象，你可以通过索引直接访问其内部的DOM元素。

var $jqueryObject = $('#myElement'); // 获取jQuery对象
var domObject = $jqueryObject; // 转换为DOM对象

方法2：使用`.get()`方法

get()方法允许你检索由jQuery对象封装的DOM元素。不带参数时，返回所有匹配的DOM元素数组。

var $jqueryObject = $('#myElement'); // 获取jQuery对象
var domObject = $jqueryObject.get(0); // 转换为DOM对象

注意

索引和.get()方法都可以返回DOM对象，但是使用索引时更简洁一些。
当处理多个DOM元素时，使用这些方法可以访问jQuery对象中的特定元素。例如，$jqueryObject或$jqueryObject.get(1)会返回第二个匹配的DOM元素。
转换后的DOM对象不再具有jQuery方法，因此你不能在它们上面调用.css(), .html()等jQuery方法。如果需要，你可以再次将它们封装成jQuery对象，例如$(domObject)。

8.jQuery的`each()方法`

jQuery的each方法更加通用，它可以遍历jQuery对象集合中的每个元素，也可以遍历一个普通的JavaScript对象或数组。它接受两个参数：一个是要遍历的对象或数组，另一个是回调函数。回调函数可以接收两个参数：当前遍历到的元素或属性的索引和当前遍历到的元素或属性的值。

// 遍历jQuery对象集合
$('li').each(function(index, element) {
    console.log(index, element);
});

// 遍历普通数组
$.each([1, 2, 3], function(index, value) {
    console.log(index, value);
});

// 遍历普通对象
const obj = { name: 'John', age: 30 };
$.each(obj, function(key, value) {
    console.log(key, value);
});

9.jQuery链式调用

在jQuery中，"链式调用"（也称为"连缀"或"链式编程"）是一种常用的编程技巧，它允许我们在单个语句中对同一个元素集合执行多个操作。这种技术通过返回对象本身来实现，使得我们可以连续调用多个方法。

$('#myElement').method1().method2().method3();

$('#myElement') 是一个jQuery对象，它代表了一个或多个DOM元素。通过在这个对象上调用 .method1()，我们执行了第一个操作，并且这个方法返回了对象本身，允许我们继续调用 .method2()。同样，.method2() 也返回了对象本身，使我们能够调用 .method3()。

10.jQuery中的ready方法

在jQuery中，ready方法是一个非常重要且常用的方法，它用于在文档DOM完全加载和解析完成后，执行指定的函数。这确保了你在操作DOM元素之前，页面的DOM结构已经完全构建好，从而避免了因为DOM元素还未加载完成而导致的JavaScript错误。

使用方法

$(document).ready(function() {
    // 在这里写你的代码
});

或者使用更简洁的写法：

$(function() {
    // 在这里写你的代码
});

在Web开发中，经常会遇到需要操作DOM元素的情况。如果直接在<script>标签中编写JavaScript代码，并且这些代码位于HTML文档的头部（<head>标签内），那么当这些代码执行时，页面的DOM元素可能还没有加载完成，从而导致无法找到对应的DOM元素或执行相关操作。

使用ready方法，可以确保你的代码在DOM元素加载完成后执行，从而避免了上述问题。

注意事项

在使用ready方法时，应该将所有需要在DOM加载完成后执行的代码都放在它提供的回调函数中。
ready方法只应该在文档加载时使用一次。如果你多次使用它，虽然不会导致错误，但可能会增加不必要的复杂性和执行时间。
随着现代浏览器的发展，原生JavaScript也提供了DOMContentLoaded事件，它可以在不使用jQuery的情况下实现与ready方法相同的功能。如果你的项目中没有使用jQuery，或者你想要减少依赖，可以考虑使用原生JavaScript的DOMContentLoaded事件

11.jQuery查找方法

在jQuery中，提供了多种查找DOM元素的方法，这些方法允许你根据选择器、元素之间的关系或其他条件来查找和选取页面上的元素。以下是一些常用的jQuery查找方法：

1‌.$(selector)‌：

最基本的查找方法，通过CSS选择器来查找匹配的元素集。

2‌.find(selector)‌：

在jQuery对象内部查找匹配的元素。这个方法只会在当前jQuery对象表示的元素的后代中查找。

‌3.children([selector])‌：

获取jQuery对象表示的元素的所有子元素，如果指定了选择器，则只获取匹配的子元素。

‌4.parent([selector])‌：

获取jQuery对象表示的元素的直接父元素。如果指定了选择器，则只获取匹配的父元素。

5‌.parents([selector])‌：

获取jQuery对象表示的元素的所有父级元素，直到文档的根元素。如果指定了选择器，则只获取匹配的父级元素。

6‌.closest(selector)‌：

从当前元素开始，逐级向上查找DOM树，直到找到匹配选择器的元素为止。这个方法也可以用来查找当前元素本身。

‌7.siblings([selector])‌：

获取jQuery对象表示的元素的所有同级元素（兄弟元素）。如果指定了选择器，则只获取匹配的同级元素。

8‌.next([selector])‌：

获取jQuery对象表示的元素的下一个同级元素。如果指定了选择器，则只获取匹配的下一个同级元素。

9‌.prev([selector])‌：

获取jQuery对象表示的元素的上一个同级元素。如果指定了选择器，则只获取匹配的上一个同级元素。

1‌0.eq(index)‌：

从匹配的元素集合中取得一个特定位置的元素，index是从0开始的索引号。

‌11.filter(selector)‌：

筛选出与指定选择器匹配的元素集合。这个方法也可以接受一个函数作为参数，用于自定义筛选逻辑。

1‌2.not(selector)‌：

从匹配的元素集合中删除与指定选择器匹配的元素。

这些方法提供了灵活的方式来查找和操作页面上的DOM元素，使得jQuery成为了一个非常强大的JavaScript库。

12.jQuery类名操作

在jQuery中，处理类名（即CSS类）是一项常见的任务，因为类名经常用于控制元素的样式。jQuery提供了一系列方法来添加、删除和切换类名，使得这些操作变得简单而高效。以下是一些常用的jQuery类名操作方法：

‌.addClass(className)‌：给匹配的元素添加一个或多个类名。如果指定的类名已存在，则不会重复添加。
‌.removeClass(className)‌：从匹配的元素中删除一个、多个或所有类名。如果指定的类名不存在，则不会执行任何操作。
‌.toggleClass(className)‌：如果存在（不存在）就删除（添加）一个类名。这是切换类名状态的一种快捷方式。
‌.hasClass(className)‌：检查当前的元素是否含有特定的类名，如果有则返回true。

// 添加类名
$('#myElement').addClass('newClass');

// 删除类名
$('#myElement').removeClass('oldClass');

// 切换类名
$('#myElement').toggleClass('toggleClass');

// 检查类名
if ($('#myElement').hasClass('someClass')) {
    // 如果具有someClass类名，则执行一些操作
}

13.jQuery事件绑定

在jQuery中，事件绑定是一种将事件处理器（如点击、鼠标移动、键盘按键等）附加到元素上的方法。当指定的事件发生时，事件处理器会被触发并执行相应的代码。

‌.on(events, [selector], handler)‌：
这是jQuery中最通用的事件绑定方法。events参数是一个或多个用空格分隔的事件类型和可选的命名空间，selector参数是一个选择器字符串，用于过滤出触发事件的目标元素的后代，handler参数是事件被触发时执行的函数。
‌.click([handler])‌：
这是一个快捷方式，用于绑定点击事件。如果提供了handler参数，则当元素被点击时执行该函数。
‌.hover([handlerIn], handlerOut)‌：
用于模拟光标悬停事件。handlerIn是当光标移入元素上方时触发的函数，handlerOut是当光标移出元素时触发的函数。
‌.focus([handler])‌：
当元素获得焦点时触发。如果提供了handler参数，则在元素获得焦点时执行该函数。
‌.blur([handler])‌：
当元素失去焦点时触发。如果提供了handler参数，则在元素失去焦点时执行该函数。
‌.change([handler])‌：
当元素的值发生变化时触发。这适用于<input>、<select>和<textarea>元素。
‌.keydown([handler])‌、.keypress([handler])、.keyup([handler])**：
分别用于处理键盘按键按下、按键持续按下和按键释放的事件。
‌.mousedown([handler])‌、.mousemove([handler])、.mouseup([handler])**：
用于处理鼠标按下、鼠标移动和鼠标释放的事件。
.dblclick()方法来为元素添加双击事件的处理函数。
.hover() 方法是一个用来模拟光标悬停事件（即鼠标移入和移出事件）的便捷方式。这个方法接受两个函数作为参数：第一个函数在鼠标移入时触发，第二个函数在鼠标移出时触发。

使用这些方法时，你可以选择性地传递一个事件处理函数作为参数。当事件发生时，这个函数将被调用，并且this关键字将引用触发事件的元素。

// 绑定点击事件
$('#myButton').on('click', function() {
    alert('Button clicked!');
});

// 使用快捷方式绑定点击事件
$('#myButton').click(function() {
    alert('Button clicked with shortcut!');
});

// 绑定悬停事件
$('#myElement').hover(
    function() {
        // 光标移入
        $(this).addClass('hover');
    },
    function() {
        // 光标移出
        $(this).removeClass('hover');
    }
);




$("#myElement").hover(
    function() {
        // 鼠标移入时的操作
        $(this).addClass("hover");
    },
    function() {
        // 鼠标移出时的操作
        $(this).removeClass("hover");
    }
);
//在这个例子中，当鼠标移入 id 为 myElement 的元素时，会给它添加一个名为 hover 的类；当鼠标移出时，会移除这个类。

//注意事项
//hover() 方法是 mouseenter 和 mouseleave 事件的简写形式，它比直接使用这两个事件更简洁。
//如果只需要处理鼠标移入或移出中的一个事件，可以使用 mouseenter 或 mouseleave 事件。
//在使用 hover() 方法时，确保提供的两个函数参数顺序正确，第一个函数处理鼠标移入事件，第二个函数处理鼠标移出事件。
//如果只需要处理其中一个事件，可以将不需要的函数设置为 null 或省略

14.jQuery中的事件解绑

`.off()`方法

在jQuery中，如果你想要解绑之前绑定的事件，可以使用.off()方法。这个方法允许你移除之前通过jQuery绑定的事件处理函数。

// 假设之前我们这样绑定了一个点击事件
$("#myElement").on("click", function() {
    alert("元素被点击了！");
});

// 现在我们使用.off()方法来解绑这个点击事件
$("#myElement").off("click");

首先使用.on()方法给id为myElement的元素绑定了一个点击事件。然后，我们使用.off()方法移除了这个点击事件的处理函数，所以之后点击这个元素将不会触发任何操作。

注意事项

.off()方法可以接受事件类型和可选的选择器参数，以指定要移除的事件处理函数。
如果没有提供任何参数，.off()方法将移除元素上的所有事件处理函数。
.off()方法也可以用于移除通过.delegate()方法绑定的事件处理函数，此时需要提供选择器参数。
使用.off()方法时，请确保你清楚地知道要移除哪些事件处理函数，以避免意外地移除其他重要的事件处理逻辑。

`.unbind()` 方法

unbind() 方法用于移除之前通过 jQuery 绑定到元素上的事件处理函数。这个方法与 .off() 方法功能相似，但在 jQuery 3.0 之后，建议使用 .off() 方法来解绑事件，因为 .unbind() 方法已经被废弃。

// 假设之前我们这样绑定了一个点击事件
$("#myElement").bind("click", function() {
    alert("元素被点击了！");
});

// 现在我们使用.unbind()方法来解绑这个点击事件
$("#myElement").unbind("click");

在这个例子中，我们首先使用 .bind() 方法给 id 为 myElement 的元素绑定了一个点击事件。然后，我们使用 .unbind() 方法移除了这个点击事件的处理函数，所以之后点击这个元素将不会触发任何操作。

注意事项

.unbind() 方法可以接受事件类型和可选的选择器参数，以指定要移除的事件处理函数。
如果没有提供任何参数，.unbind() 方法将移除元素上的所有由 jQuery 绑定的事件处理函数。
在 jQuery 3.0 之后，应该使用 .off() 方法来解绑事件，因为 .unbind() 方法已经被废弃。
使用 .unbind() 方法时，请确保你清楚地知道要移除哪些事件处理函数，以避免意外地移除其他重要的事件处理逻辑。

15.jQuery中的事件委托

jQuery 的事件委托是一种非常实用的技术，它允许我们将事件监听器绑定到一个父元素上，而不是直接绑定到目标元素上。利用事件冒泡的原理，当子元素上发生事件时，事件会冒泡到父元素，从而触发绑定在父元素上的事件监听器。这种方法不仅可以减少事件监听器的数量，提高页面性能，还可以处理动态添加到页面中的元素的事件。

如何使用

在 jQuery 中，我们可以使用 .on() 方法来实现事件委托。这个方法可以接受三个参数：事件名称、选择器字符串和回调函数。

$(parentSelector).on(eventName, childSelector, function(event) {
    // 处理事件
});

parentSelector：父元素的选择器。
eventName：事件名称，如 'click'、'mouseover' 等。
childSelector：子元素的选择器，这是可选的。如果提供，事件处理函数只会在事件从匹配这个选择器的子元素冒泡上来时触发。
function(event)：当事件发生时，要执行的函数。

示例

假设我们有一个列表，我们想为列表中的每个项添加点击事件，包括未来可能动态添加到列表中的项。

html部分

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

JavaScript部分

$('#myList').on('click', 'li', function() {
    alert($(this).text());
});

这段代码将点击事件监听器绑定到了 id 为 myList 的 <ul> 元素上，但是只有当点击事件发生在 <li> 元素上时，才会触发回调函数。这意味着即使后来动态地向列表中添加更多的 <li> 元素，这些新元素也会有相同的点击行为，无需再次绑定事件。

16.jQuery提供的动画方法

jQuery 提供了多种内置方法来创建动画效果，使得网页元素的显示和隐藏、移动和改变样式等变得更加简单和直观。以下是一些常用的 jQuery 动画方法：

‌.show() 和 .hide()‌：

.show() 方法用于显示隐藏的元素。

.hide() 方法用于隐藏可见的元素。

‌.fadeIn() 和 .fadeOut()‌：

.fadeIn() 方法用于淡入隐藏的元素。

.fadeOut() 方法用于淡出可见的元素。

‌.fadeToggle()‌：

.fadeToggle() 方法可以在 .fadeIn() 和 .fadeOut() 方法之间切换。如果元素是淡入的，则会被淡出，如果元素是淡出的，则会被淡入。

‌.slideDown() 和 .slideUp()‌：

.slideDown() 方法用于通过高度变化来显示一个隐藏的元素，创建下滑的动画效果。

.slideUp() 方法用于通过高度变化来隐藏一个可见的元素，创建上滑的动画效果。

‌.slideToggle()‌：

.slideToggle() 方法可以在 .slideDown() 和 .slideUp() 方法之间切换。

‌.animate()‌：

.animate() 方法允许您创建自定义的动画效果。您可以指定一个或多个 CSS 属性来改变。

示例：

以下是一个使用 .animate() 方法的简单示例：

$("#myElement").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
}, 5000);

这段代码会使 id 为 myElement 的元素在 5000 毫秒（5 秒）内，左边距移动到 250 像素，透明度变为 0.5，高度和宽度都变为 150 像素。

17.jQuery中的ajax

在jQuery中，ajax方法是一种强大的功能，它允许你在不重新加载整个页面的情况下，与服务器进行数据交换和更新部分网页内容。ajax代表“异步JavaScript和XML”，尽管名称中包含XML，但实际上数据可以以JSON、HTML或纯文本格式进行交换。

jQuery的ajax方法提供了多种选项和回调函数，使得与服务器进行异步通信变得简单。以下是一个基本的ajax调用示例：

$.ajax({
    url: 'server.php', // 要请求的URL
    type: 'GET', // 请求类型，如GET、POST等
    dataType: 'json', // 预期服务器返回的数据类型
    data: { // 要发送到服务器的数据
        key1: 'value1',
        key2: 'value2'
    },
    success: function(response) {
        // 请求成功时的回调函数
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error(xhr, status, error);
    }
});

简化方法

除了完整的ajax方法外，jQuery还提供了一些简化的方法来处理常见的异步请求，如$.get、$.post和$.getJSON等。

// 使用$.get方法
$.get('server.php', { key1: 'value1', key2: 'value2' }, function(response) {
    console.log(response);
});

// 使用$.post方法
$.post('server.php', { key1: 'value1', key2: 'value2' }, function(response) {
    console.log(response);
});

// 使用$.getJSON方法
$.getJSON('server.php', { key1: 'value1', key2: 'value2' }, function(response) {
    console.log(response);
});

跨域请求

ajax还支持跨域请求（CORS），允许你从不同的源请求数据。这需要在服务器端进行配置，以允许跨域请求。

注意事项

在使用ajax时，需要确保请求的URL是可达的，并且服务器已经配置为接受和处理异步请求。
安全性是一个重要考虑因素。确保你的ajax请求不会暴露敏感信息，并且服务器已经实施了适当的安全措施。
ajax请求可能会受到同源策略的限制，除非服务器配置了CORS。
在处理ajax响应时，务必验证和清理数据，以防止XSS攻击或其他安全问题。

JQuery快速上手-从认识到使用

一、认识JQuery

什么是JQuery？

为什么要使用jQuery？

二、使用jQuery

引入jQuery

1.jQuery入口函数

2.jQuery选择器

3.jQuery常用选择器

4.jQuery中的css()方法

5.属性方法prop

获取属性值

设置属性值

6.获取设置内容

1‌.text()‌

2.html()‌

3.val()‌

设置内容

1.text(value)‌

2.html(value)‌

3.val(value)‌

7.jQuery对象

方法1：使用索引

方法2：使用.get()方法

8.jQuery的each()方法

9.jQuery链式调用

10.jQuery中的ready方法

使用方法

注意事项

11.jQuery查找方法

1‌.$(selector)‌：

2‌.find(selector)‌：

‌3.children([selector])‌：

‌4.parent([selector])‌：

5‌.parents([selector])‌：

6‌.closest(selector)‌：

‌7.siblings([selector])‌：

8‌.next([selector])‌：

9‌.prev([selector])‌：

1‌0.eq(index)‌：

‌11.filter(selector)‌：

1‌2.not(selector)‌：

12.jQuery类名操作

13.jQuery事件绑定

14.jQuery中的事件解绑

.off()方法

注意事项

.unbind() 方法

注意事项

15.jQuery中的事件委托

如何使用

示例

16.jQuery提供的动画方法

‌.show() 和 .hide()‌：

‌.fadeIn() 和 .fadeOut()‌：

‌.fadeToggle()‌：

‌.slideDown() 和 .slideUp()‌：

‌.slideToggle()‌：

‌.animate()‌：

示例：

17.jQuery中的ajax

方法2：使用`.get()`方法

8.jQuery的`each()方法`

`.off()`方法

`.unbind()` 方法

‌`.show()` 和 `.hide()`‌：

‌`.fadeIn()` 和 `.fadeOut()`‌：

‌`.fadeToggle()`‌：

‌`.slideDown()` 和 `.slideUp()`‌：

‌`.slideToggle()`‌：

‌`.animate()`‌：