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'
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/857663.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Mac】Pixelmator Pro for Mac（媲美PS的修图软件）软件介绍

【Mac】Pixelmator Pro for Mac（媲美PS的修图软件）软件介绍

软件介绍 Pixelmator Pro是一款功能强大的图像编辑软件&#xff0c;专为macOS平台设计。它结合了丰富的图像编辑功能和直观的用户界面&#xff0c;适合专业摄影师、设计师以及图像编辑爱好者。以下是Pixelmator Pro的一些主要特点和功能介绍&#xff1a; 功能特色 非破坏性编…
阅读更多...
MSPM0G3507——创建新的.c.h文件

MSPM0G3507——创建新的.c.h文件

在项目处点击右键&#xff0c;再点击New File 再命名.c.h即可
阅读更多...
JavaWeb——MySQL：DML对表数据的修改

JavaWeb——MySQL：DML对表数据的修改

2.DML对表数据的修改 2.1 修改表的数据 (1) 修改单行单列 SQL语句&#xff1a;update 表名 set 列名1数值1 where 列名2数值2&#xff1b; 将sql_student表姓名为吕小布的那行&#xff0c;性别设置为女&#xff1b; (2) 修改单行多列 SQL语句&#xff1a;update 表名 set 列…
阅读更多...
Elasticsearch如何聚合查询多个统计值，如何嵌套聚合？并相互引用，统计索引中某一个字段的空值率？语法是怎么样的

Elasticsearch如何聚合查询多个统计值，如何嵌套聚合？并相互引用，统计索引中某一个字段的空值率？语法是怎么样的

文章目录 Elasticsearch聚合查询说明空值率查询DSL Elasticsearch聚合基础知识扩展Elasticsearch聚合概念Script 用法Elasticsearch聚合查询语法指标聚合&#xff08;Metric Aggregations&#xff09;桶聚合&#xff08;Bucket Aggregations&#xff09;矩阵聚合&#xff08;Ma…
阅读更多...
IDEA插件开发，国际化处理

IDEA插件开发，国际化处理

1.resources目录新增国际化资源文件 我项目默认英文&#xff0c;增加了一个zh中文的,en-英语 cn-中文 2.参数定义&#xff0c;中文需转为Unicode编码&#xff0c;推荐Unicode编码转换 - 站长工具 (chinaz.com) 3.新增类CodeChronoBundle继承AbstractBundle package com.codech…
阅读更多...
牛顿迭代法（求解整数的近似平方根）

牛顿迭代法（求解整数的近似平方根）

情景再现 面试官&#xff1a;给你一个整数怎样最快求解他的近似平方根&#xff1f; 小白&#xff1a;可以用while循环呀&#xff01; 面试官&#xff1a;有没有更好的方法&#xff1f; 小白&#xff1a;可以从这个数的左右两边开始迭代。 面试官&#xff1a;除了这个呢&#xf…
阅读更多...
【从0实现React18】 (一) 项目初始化

【从0实现React18】 (一) 项目初始化

Multi-repo 和 Mono-repo 由于需要同时管理多个包&#xff0c;如React、React-dom等&#xff0c;所以选择**Mono-repo** 选择使用pnpm-workspace搭建Mono-repo环境的原因 依赖安装快更规范 Pnpm初始化 npm install -g pnpm pnpm init配置pnpm-workspace.yml文件 pnpm-work…
阅读更多...
ai assistant激活成功后,如何使用

ai assistant激活成功后,如何使用

ai assistant激活成功后&#xff0c;如图 ai assistant渠道&#xff1a;https://web.52shizhan.cn/activity/ai-assistant 在去年五月份的 Google I/O 2023 上&#xff0c;Google 为 Android Studio 推出了 Studio Bot 功能&#xff0c;使用了谷歌编码基础模型 Codey,Codey 是…
阅读更多...
内容安全复习 4 - 深度生成模型

内容安全复习 4 - 深度生成模型

文章目录 概述经典算法自回归模型&#xff08;Autoregressive model&#xff09;变分自编码器&#xff08;VAE&#xff09;生成对抗网络&#xff08;GAN&#xff09;扩散模型&#xff08;Diffusion model&#xff09;总结 应用 概述 深度生成模型是一类使用深度学习技术构建的…
阅读更多...
红队内网攻防渗透：内网渗透之内网对抗：横向移动篇入口差异切换上线IPC管道ATSC任务Impacket套件UI插件

红队内网攻防渗透：内网渗透之内网对抗：横向移动篇入口差异切换上线IPC管道ATSC任务Impacket套件UI插件

红队内网攻防渗透 1. 内网横向移动1.1 横向移动入口知识点1.1.1、当前被控机处于域内还是域外1.1.1.1 在域内1.1.1.2 不在域内1.1.1.2.1 第一种方法提权到system权限1.1.1.2.2 第二种方法切换用户上线1.1.1.2.3 kerbrute枚举用户1.1.2、当前凭据为明文密码还是HASH1.2 横向移动…
阅读更多...
跟TED演讲学英文：How language shapes the way we think by Lera Boroditsky

跟TED演讲学英文：How language shapes the way we think by Lera Boroditsky

How language shapes the way we think Link: https://www.ted.com/talks/lera_boroditsky_how_language_shapes_the_way_we_think? Speaker: Lera Boroditsky Date: November 2017 文章目录 How language shapes the way we thinkIntroductionVocabularySummaryTranscriptA…
阅读更多...
【单片机毕业设计选题24020】-全自动鱼缸的设计与应用

【单片机毕业设计选题24020】-全自动鱼缸的设计与应用

系统功能: &#xff08;1&#xff09;检测并控制鱼缸水温&#xff0c;水温低于22℃后开启加热&#xff0c;高于28℃后关闭加热。 &#xff08;2&#xff09;定时喂食&#xff0c;每天12点和0点喂食一次&#xff0c;步进电机开启后再关闭模拟喂食。 &#xff08;3&#xff09…
阅读更多...
qt 简单实验 一个可以向左侧拖拽缩放的矩形

qt 简单实验 一个可以向左侧拖拽缩放的矩形

1.概要 向左拖拽矩形&#xff0c;和向右拖拽不同&#xff0c;向右拖拽是增加宽度&#xff0c;向左拖拽是增加宽度的同时还要向左移动x的坐标。 2.代码 2.1 resizablerectangleleft.h #ifndef RESIZABLERECTANGLELEFT_H #define RESIZABLERECTANGLELEFT_H #include <QWid…
阅读更多...
【Matlab】-- BP反向传播算法

【Matlab】-- BP反向传播算法

文章目录 文章目录 00 写在前面01 BP算法介绍02 基于Matlab的BP算法03 代码解释 00 写在前面 BP算法可以结合鲸鱼算法、飞蛾扑火算法、粒子群算法、灰狼算法、蝙蝠算法等等各种优化算法一起&#xff0c;进行回归预测或者分类预测。 01 BP算法介绍 BP&#xff08;Backpropag…
阅读更多...
JMeter的基本使用与性能测试，完整入门篇保姆式教程

JMeter的基本使用与性能测试，完整入门篇保姆式教程

Jmeter 的简介 JMeter是一个纯Java编写的开源软件&#xff0c;主要用于进行性能测试和功能测试。它支持测试的应用/服务/协议包括Web (HTTP, HTTPS)、SOAP/REST Webservices、FTP、Database via JDBC等。我们最常使用的是HTTP和HTTPS协议。 Jmeter主要组件 线程组&#xff08…
阅读更多...
Flutter Android 调试桥 (adb)

Flutter Android 调试桥 (adb)

客户端&#xff1a;用于发送命令。客户端在开发计算机上运行。您可以通过发出 adb 命令从命令行终端调用客户端。 守护程序adbd&#xff1a;用于在设备上运行命令。守护程序在每个设备上作为后台进程运行。 服务器&#xff1a;用于管理客户端与守护程序之间的通信。服务器在开…
阅读更多...
移动端的HSR技术

移动端的HSR技术

overdraw问题&#xff1a; overdraw顾名思义就是过度绘制&#xff0c;就是在渲染过程中**绘制一帧FBO&#xff08;或者RenderTarget&#xff09;**超过一次相同像素的现象!这个是CG的问题&#xff01;特别在是用来大量的透明混合的情况下会产生的&#xff0c;当然客户端andrio…
阅读更多...
mysql分析常用锁、动态监控、及优化思考

mysql分析常用锁、动态监控、及优化思考

这里写自定义目录标题 1.未提交事物&#xff0c;阻塞DDL&#xff0c;继而阻塞所有同表的后续操作,查看未提交事务的进程2.存着正在进行的线程数据。3.根据processlist表中的id杀掉未释放的线程4.查看正在使用的表5.mysql为什么state会有waiting for handler commit6.什么情况导…
阅读更多...
intouch的报警怎么发到企业微信机器人

intouch的报警怎么发到企业微信机器人

厂务报警通知系列博客目录 intouch的报警怎么发到微信上 intouch的报警怎么发到邮件上 intouch的报警怎么发到短信上 intouch的报警怎么发到企业微信机器人 intouch的报警怎么发到飞书机器人 intouch的报警怎么用语音通知到手机用户 创建企业微信群机器人 打开企业微信客…
阅读更多...
【AI-6】算力和带宽

【AI-6】算力和带宽

上述为大模型训练的显卡选项 tensor fp16 算力是什么&#xff1f; Tensor FP16(Float16)算力是指GPU在执行深度学习的张量计算时,使用float16(半精度浮点)数据类型所能达到的性能指标。 为什么要使用Tensor FP16? 提升计算效率: float16数据类型的存储和计算开销比float32…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023