一、认识 JQuery

什么是 JQuery？

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

https://jquery.com/ww​​​​​​​w

为什么要使用 jQuery？

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

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

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

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

二、使用 jQuery

引入 jQuery

// 网络引用

// 也可以使用本地下载好的 jQuery

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

”$” 就是 jQuery 的别名

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

1.jQuery 入口函数

2.jQuery 选择器

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

3.jQuery 常用选择器

    

        
1
        
2
        
3
        
hellow world
        span1
    
    span2

    
    
    
    

    
    

4.jQuery 中的 css()方法

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

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 元素。

Hello, World!

在这个示例中，我们首先获取了 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 元素的情况。如果直接在 标签中编写 JavaScript 代码，并且这些代码位于 HTML 文档的头部（标签内），那么当这些代码执行时，页面的 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 类名操作方法：

1. ‌.addClass(className)‌：给匹配的元素添加一个或多个类名。如果指定的类名已存在，则不会重复添加。

2. ‌.removeClass(className)‌：从匹配的元素中删除一个、多个或所有类名。如果指定的类名不存在，则不会执行任何操作。

3. ‌.toggleClass(className)‌：如果存在（不存在）就删除（添加）一个类名。这是切换类名状态的一种快捷方式。

4. ‌.hasClass(className)‌：检查当前的元素是否含有特定的类名，如果有则返回true。

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

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

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

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

13.jQuery 事件绑定

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

1. ‌.on(events, [selector], handler)‌：
   这是 jQuery 中最通用的事件绑定方法。events参数是一个或多个用空格分隔的事件类型和可选的命名空间，selector参数是一个选择器字符串，用于过滤出触发事件的目标元素的后代，handler参数是事件被触发时执行的函数。

2. ‌.click([handler])‌：
   这是一个快捷方式，用于绑定点击事件。如果提供了 handler 参数，则当元素被点击时执行该函数。

3. ‌.hover([handlerIn], handlerOut)‌：
   用于模拟光标悬停事件。handlerIn是当光标移入元素上方时触发的函数，handlerOut是当光标移出元素时触发的函数。

4. ‌.focus([handler])‌：
   当元素获得焦点时触发。如果提供了 handler 参数，则在元素获得焦点时执行该函数。

5. ‌.blur([handler])‌：
   当元素失去焦点时触发。如果提供了 handler 参数，则在元素失去焦点时执行该函数。

6. ‌.change([handler])‌：
   当元素的值发生变化时触发。这适用于 、 和元素。

7. ‌.keydown([handler])‌、.keypress([handler])、.keyup([handler])**：
   分别用于处理键盘按键按下、按键持续按下和按键释放的事件。

8. ‌.mousedown([handler])‌、.mousemove([handler])、.mouseup([handler])**：
   用于处理鼠标按下、鼠标移动和鼠标释放的事件。

9. .dblclick()方法来为元素添加双击事件的处理函数。

10. .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 部分

    
Item 1
    
Item 2
    
Item 3

JavaScript 部分

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

这段代码将点击事件监听器绑定到了 id 为 myList 的 

 元素上，但是只有当点击事件发生在 

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

$.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);
    }
});

// 使用 $.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);
});