jQuery 基本操作

C吴新科

已于 2024-06-25 16:04:17 修改

阅读量674

点赞数 6

分类专栏：前端-HTML页面&脚本文章标签： jquery 前端 js

于 2024-06-21 15:50:36 首次发布

本文链接：https://blog.csdn.net/weixin_51689532/article/details/139862828

版权

前端-HTML页面&脚本专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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");

    }

);