jQuery 基本操作

01-简介

jQuery 是一个功能丰富且广泛使用的 JavaScript 库，它简化了 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作。jQuery 通过其易用的 API，使复杂的 JavaScript 编程任务变得更加简单，并且兼容各种浏览器。

1、jQuery特点

• 简化 DOM 操作：jQuery 提供了简洁的选择器和方法，可以轻松地查找和操作 DOM 元素。
• 跨浏览器兼容性：jQuery 处理了许多不同浏览器之间的兼容性问题，使开发者可以编写一次代码，在多个浏览器中无缝运行。
• 事件处理：jQuery 提供了简单且强大的事件绑定和事件触发功能。
• 动画效果：jQuery 提供了多种内置动画效果，可以轻松实现复杂的动画。
• Ajax 支持：jQuery 使与服务器进行异步通信变得简单，方便实现无刷新页面更新。
• 插件系统：jQuery 拥有丰富的插件库，可以扩展其功能以满足各种需求。

2、为什么要选择用jQuery，而不用原生JavaScript开发

• 简化 DOM 操作：jQuery 提供了简洁、直观的选择器和方法，使 DOM 操作变得更加简单和直观。
• 跨浏览器兼容性：jQuery 处理了不同浏览器之间的兼容性问题，使得开发者可以编写一次代码，并在多个浏览器中无缝运行。
• 简化事件处理：jQuery 提供了简单且强大的事件绑定和事件委托方法，简化了事件处理的代码。
• 丰富的动画效果：jQuery 提供了多种内置动画效果，可以轻松实现复杂的动画。
• 强大的 Ajax 支持：jQuery 使与服务器进行异步通信变得简单，方便实现无刷新页面更新。
• 插件系统：jQuery 拥有丰富的插件库，可以扩展其功能以满足各种需求。
• 简洁的链式语法：jQuery 采用链式语法，可以在一次选择后连续调用多个方法，提高代码的可读性和简洁性。

总结：

尽管现代前端框架（如 React、Vue、Angular）的兴起，使得 jQuery 的使用有所减少，但在许多简单项目、快速开发、或需要跨浏览器兼容性的情况下，jQuery 仍然是一个非常有用的工具。它简化了许多常见的 JavaScript 任务，使得开发者可以更高效地编写功能强大且兼容性良好的 Web 应用程序。

02-jQuery基本使用

1、引入jQuery

可以通过 CDN 或下载本地文件来引入 jQuery。使用 CDN 是推荐的方式，因为它可以提高加载速度。

通过 CDN 引入 jQuery

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

2、基本用法

    2.1、 选择元素 

使用 ‘$’ 函数和选择器来选择元素。

$(document).ready(function() {

    $("p").css("color", "blue"); // 将所有段落的文字颜色改为蓝色

});

    2.2、 修改内容

$(document).ready(function() {

    $("#myParagraph").text("Hello, jQuery!"); // 修改 id 为 myParagraph 的段落的文本

});

    2.3、 添加和删除元素

$(document).ready(function() {

    $("ul").append("<li>New item</li>"); // 向所有 ul 元素添加一个新列表项

    $("li:first").remove(); // 删除第一个列表项

});

03-jQuery选择器

A. 基本选择器  

1、元素选择器： 选择所有指定元素。

$("p").css("color", "blue"); // 选择所有段落元素

2、ID选择器： 选择具有特定 ID 的元素。

$("#myId").text("Hello, World!"); // 选择 id 为 myId 的元素

3、类选择器： 选择具有特定类的元素。

$(".myClass").hide(); // 选择 class 为 myClass 的元素

4、全部选择器： 选择所有元素。

$("*").css("border", "1px solid red"); // 选择所有元素

B. 层级选择器

1、后代选择器： 选择所有符合条件的后代元素。

$("ul li").css("color", "green"); // 选择所有 ul 元素的 li 后代元素

2、子选择器： 选择所有符合条件的子元素。

$("ul > li").css("color", "blue"); // 选择所有 ul 元素的直接子元素 li

3、同级选择器： 选择所有符合条件的同级元素。

$("h2 + p").css("color", "purple"); // 选择紧接在 h2 元素后的第一个 p 元素

$("h2 ~ p").css("color", "orange"); // 选择 h2 元素之后的所有 p 元素

C. 属性选择器

1、具有指定属性的元素：

$("input[name]").css("border", "1px solid red"); // 选择所有具有 name 属性的 input 元素

2、具有指定属性值的元素：

$("input[name='username']").css("background-color", "yellow"); // 选择所有 name 属性值为 username 的 input 元素

3、属性值以特定值开头的元素：

$("input[name^='user']").css("background-color", "lightblue"); // 选择所有 name 属性值以 user 开头的 input 元素

4、属性值以特定值结尾的元素：

$("input[name$='name']").css("background-color", "lightgreen"); // 选择所有 name 属性值以 name 结尾的 input 元素

5、属性值包含特定值的元素：

$("input[name*='ser']").css("background-color", "lightcoral"); // 选择所有 name 属性值包含 ser 的 input 元素

D. 过滤选择器

1、：选择第一个元素。

$("p:first").css("color", "red"); // 选择第一个段落元素

2、：选择最后一个元素。

$("p:last").css("color", "blue"); // 选择最后一个段落元素

3、： 选择索引为偶数或奇数的元素（索引从 0 开始）。

$("tr:even").css("background-color", "lightgray"); // 选择索引为偶数的行

$("tr:odd").css("background-color", "lightblue"); // 选择索引为奇数的行

4、（index）： 选择具有指定索引的元素。

$("li:eq(2)").css("color", "purple"); // 选择索引为 2 的列表项

5、（index）： 选择索引大于或小于指定值的元素。

$("li:gt(2)").css("color", "green"); // 选择索引大于 2 的列表项

$("li:lt(2)").css("color", "red"); // 选择索引小于 2 的列表项

6、（selector）： 选择不匹配指定选择器的元素。

$("p:not(.intro)").css("color", "gray"); // 选择不具有 class 为 intro 的段落元素

7、（text）： 选择包含指定文本的元素。

$("p:contains('jQuery')").css("font-weight", "bold"); // 选择包含文本 "jQuery" 的段落元素

8、（selector）： 选择包含指定选择器的元素。

$("div:has(p)").css("border", "1px solid blue"); // 选择包含段落元素的所有 div 元素

9、 ：选择没有子元素的空元素。

$("p:empty").text("This was empty"); // 选择所有空的段落元素并添加文本

10、 ：选择至少包含一个子元素的元素。

$("p:parent").css("border", "1px solid green"); // 选择所有包含子元素的段落元素

11、 ：选择可见或隐藏的元素。

$("div:visible").css("border", "1px solid red"); // 选择所有可见的 div 元素

$("div:hidden").show(); // 显示所有隐藏的 div 元素

E. 子元素过滤器

1、 ：选择父元素的第一个或最后一个子元素。

$("p:first-child").css("color", "red"); // 选择每个父元素的第一个子元素

$("p:last-child").css("color", "blue"); // 选择每个父元素的最后一个子元素

2、（n） ：选择父元素的第 n 个子元素（从 1 开始）。

$("li:nth-child(2)").css("color", "green"); // 选择每个父元素的第二个子元素

3、 ：选择是唯一子元素的元素。

$("p:only-child").css("font-weight", "bold"); // 选择是唯一子元素的段落元素

F. 表单选择器

1、 ：选择所有表单元素。

$(":input").css("border", "1px solid blue"); // 选择所有表单元素

2、 ：选择特定类型的表单元素。

$(":text").val("New text value"); // 选择所有文本输入框并设置新值

3、 ：选择所有选中的复选框或单选按钮。

$(":checkbox:checked").css("border", "1px solid red"); // 选择所有选中的复选框

4、 ：选择所有选中的选项。

$("option:selected").css("background-color", "yellow"); // 选择所有选中的选项

5、 ：选择所有禁用或启用的表单元素。

$(":disabled").css("background-color", "lightgray"); // 选择所有禁用的表单元素

04-方法

jQuery 提供了大量的方法来简化 DOM 操作、事件处理、动画和 Ajax 操作。

A. DOM操作方法

1、‘text()’：获取或设置元素的文本内容。

$("#myElement").text("New text content");

2、‘html()’：获取或设置元素的 HTML 内容。

$("#myElement").html("<b>Bold text</b>");

3、‘val()’：获取或设置表单元素的值。

$("input[type='text']").val("New value");

4、‘attr()’：获取或设置属性值。

$("img").attr("src", "new-image.jpg");

5、‘css()’：获取或设置 CSS 样式。

$("#myElement").css("color", "red");

6、‘addClass()’：向元素添加一个或多个类。

$("#myElement").addClass("newClass");

7、‘ removeClass()’：从元素中删除一个或多个类。

$("#myElement").removeClass("oldClass");

8、‘ toggleClass()’：在元素中切换类。

$("#myElement").toggleClass("active");

9、‘ append() ’：在元素内部的末尾插入内容。

$("ul").append("<li>New item</li>");

10、‘ prepend() ’：在元素内部的开头插入内容。

$("ul").prepend("<li>First item</li>");

11、‘ after() ’：在元素之后插入内容。

$("#myElement").after("<p>New paragraph</p>");

12、‘ before() ’：在元素之前插入内容。

$("#myElement").before("<p>New paragraph</p>");

13、‘ remove() ’：移除元素。

$("#myElement").remove();

14、‘ empty() ’：清空元素的内容。

$("#myElement").empty();

B. 事件处理方法

1、‘ click() ’： 绑定点击事件处理程序。

$("#myButton").click(function() {

    alert("Button clicked!");

});

2、‘ dblclick() ’： 绑定双击事件处理程序。

$("#myButton").dblclick(function() {

    alert("Button double-clicked!");

});

3、‘ hover() ’： 绑定鼠标悬停和离开事件处理程序。

$("#myElement").hover(

    function() {

        $(this).css("background-color", "yellow");

    },

    function() {

        $(this).css("background-color", "white");

    }

);

4、‘ on() ’： 用于事件委托，绑定多个事件。

$("#parentElement").on("click", ".childElement", function() {

    $(this).css("color", "red");

});

5、‘ off() ’： 移除事件处理程序。

$("#myButton").off("click");

C. 动画效果

1、‘ show() ’： 显示元素。

$("#myElement").show();

2、‘ hide() ’： 隐藏元素。

$("#myElement").hide();

3、‘ toggle() ’： 切换元素的显示状态。

$("#myElement").toggle();

4、‘ fadeIn() ’： 淡入显示元素。

$("#myElement").fadeIn();

5、‘ fadeOut() ’： 淡出隐藏元素。

$("#myElement").fadeOut();

6、‘ slideUp() ’： 向上滑动隐藏元素。

$("#myElement").slideUp();

7、‘ slideDown() ’： 向下滑动显示元素。

$("#myElement").slideDown();

8、‘ animate() ’： 自定义动画。

$("#myElement").animate({

    left: '250px',

    opacity: '0.5',

    height: 'toggle'

});