当前位置：首页 > news >正文

JavaWeb学习------jQuery

news 2025/12/16 21:39:22

JavaWeb学习------jQuery

jQuery函数库下载

jQuery函数库下载官网：Download jQuery | jQuery
配套资料，免费下载

链接：https://pan.baidu.com/s/1aXBfItEYG4uM53u6PUEMTg

提取码：6c9i

然后下载？

来到官网，有两种jQuery可以下载，一种是压缩版的，另一种是没有压缩的，建议两个都下载下来，没有压缩版本的可以看源码。

2.按照下图：

3.下载到对应的文件夹上即可

4.打开没有压缩版的：【可以看到源码：1万多行代码】

压缩版的：【2行代码】

第一章 jQuery简介

1.1、jQuery简介

jQuery 是一个开源框架，是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！

1.2、jQuery版本介绍

1.x
- 兼容老版本IE
- 文件较大，但兼容性最好
2.x
- 部分IE8及以下版本不支持
- 文件较小，执行效率更高
3.x
- 完全不再支持IE8及以下版本
- 提供了一些新的API
- 提供不包含AJAX/动画API的版本
- （本教程所采用）

1.3、jQuery引入方式

本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用

<head><script src="jquery-3.6.4.min.js"></script>
</head>

CDN引入：使用远程CDN资源库在线引入，避免了文件下载

<head><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>

1.4、jQuery快速使用

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>jQuery</title><script src="jquery-3.6.4.min.js"></script>
</head>
<body>    $(function () {// 请将jQuery代码书写在这里 ...alert('Hello,World!');});
</script>
</body>
</html>

1.5、jQuery两把利器

jQuery两把利器分别是：

jQuery核心函数：即： $() 或 jQuery()，jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。
jQuery核心对象：即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。

第二章 jQuery核心函数

2.1、选择器

2.1.1、基本选择器

2.1.1.1、标签选择器

需求描述：选择页面中所有的div标签，设置其背景为红色

<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>

$('div').css('background', 'red');

效果：

2.1.1.2、id选择器

需求描述：选择页面中所有id为btn的按钮，设置其背景为红色

<button>按钮1</button>
<button id="btn">按钮2</button>
<button>按钮3</button>

$('.red').css('background', 'red');

效果：

2.1.1.3、class选择器

需求描述：选择页面中所有class为red的段落，设置其背景为红色

<p class="red">我是段落1</p>
<p>我是段落2</p>
<p class="red">我是段落3</p>

$('.red').css('background', 'red');

效果：

2.1.1.4、通配符选择器

需求描述：选择页面中class为content的div下所有元素，设置其背景为红色

<div class="content"><p>我是段落1</p><p>我是段落2</p><p>我是段落3</p>
</div>

$('.content *').css('background', 'red');

效果：

2.1.1.5、并集选择器

需求描述：选择页面中所有的段落与按钮，设置其背景为红色

<p>我是段落</p>
<button>我是按钮</button>
<div>我是div</div>
<h1>我是大标题</h1>

$('p,button').css('background', 'red');

效果：

2.1.1.6、交集选择器

需求描述：选择页面中所有class为red的段落，设置其背景为红色

<p class="red">我是段落1</p>
<p class="red">我是段落2</p>
<p class="red">我是段落3</p>
<div class="red">我是div1</div>
<div class="red">我是div2</div>
<div class="red">我是div3</div>

$('p.red').css('background', 'red');

效果：

2.1.2、层级选择器

2.1.2.1、子代选择器

需求描述：选择ul下的所有span子元素，设置其背景为红色

<ul><span>我是ul的span1</span><li>我是li1 <span>我是li1的span1</span></li><li>我是li2 <span>我是li2的span2</span></li><li>我是li3 <span>我是li3的span3</span></li><span>我是ul的span2</span>
</ul>

$('ul>span').css('background', 'red');

效果：

2.1.2.2、后代选择器

需求描述：选择ul下的所有span元素，设置其背景为红色

<ul><span>我是ul的span1</span><li>我是li1 <span>我是li1的span1</span></li><li>我是li2 <span>我是li2的span2</span></li><li>我是li3 <span>我是li3的span3</span></li><span>我是ul的span2</span>
</ul>

$('ul span').css('background', 'red');

效果：

2.1.2.3、兄弟选择器

需求描述：选中id为box的下一个兄弟li，设置其背景为红色

<ul><span>我是ul的span1</span><li id="box">我是li1 <span>我是li1的span1</span></li><li>我是li2 <span>我是li2的span2</span></li><li>我是li3 <span>我是li3的span3</span></li><span>我是ul的span2</span>
</ul>

$('#box+li').css('background', 'red');

效果：

需求描述：选中id为box的后边的兄弟li，设置其背景为红色

<ul><span>我是ul的span1</span><li id="box">我是li1 <span>我是li1的span1</span></li><li>我是li2 <span>我是li2的span2</span></li><li>我是li3 <span>我是li3的span3</span></li><span>我是ul的span2</span>
</ul>

$('#box~li').css('background', 'red');

效果：

2.1.3、过滤选择器

2.1.3.1、基本筛选器

需求描述：实现隔行变色，让表格的奇数行的背景变为红色，:even代表选取下标为偶数的行

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:even').css('background', 'red');

效果：

需求描述：实现隔行变色，让表格的偶数行的背景变为红色，:odd代表选取下标为奇数的行

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:odd').css('background', 'red');

效果：

需求描述：实现让表格的第一行的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:first').css('background', 'red');

效果：

需求描述：实现让表格的最后一行的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:last').css('background', 'red');

效果：

需求描述：实现让下标（从0开始）小于2的行数的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:lt(2)').css('background', 'red');

效果：

需求描述：实现让下标（从0开始）大于2的行数的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:gt(2)').css('background', 'red');

效果：

需求描述：实现让下标（从0开始）等于2的行数的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:eq(2)').css('background', 'red');

效果：

需求描述：实现让下标（从0开始）不等于2的行数的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:not(tr:eq(2))').css('background', 'red');

效果：

2.1.3.2、内容筛选器

需求描述：实现让内容为“男”的单元格的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('td:contains("男")').css('background', 'red');

效果：

需求描述：实现让内容为span标签的单元格的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td><span>女</span></td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td><span>女</span></td><td>24</td></tr>
</table>

$('td:has(span)').css('background', 'red');

效果：

需求描述：实现让内容为空的单元格的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td></td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td></td><td>24</td></tr>
</table>

$('td:empty').css('background', 'red');

效果：

需求描述：实现让内容不为空的单元格的背景变为红色

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td></td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td></td><td>24</td></tr>
</table>

$('td:parent').css('background', 'red');

效果：

2.1.3.3、属性筛选器

需求描述：查找herflang属性的标签元素，设置其背景为红色

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>

$('[hreflang]').css('background', 'red');

效果：

JavaWeb学习------jQuery

JavaWeb学习------jQuery jQuery函数库下载 jQuery函数库下载官网：Download jQuery | jQuery配套资料，免费下载链接：https://pan.baidu.com/s/1aXBfItEYG4uM53u6PUEMTg 提取码：6c9i 然后下载？ 来到官网&#xf…...

编程日记 2023/5/5 21:13:11

米哈游测开岗【一面总结】

目录 1.黑盒测试与白盒测试的区别 2.测试一个下单功能 3.get与post的区别 4.一次get请求产生几个数据包 5.常用的linux命令 6.进程与线程的区别 7.数据库查询如何去重 8.MySql怎么连接两张表，有什么区别 9.说说索引 10.cookie 和 session 的区别 (会话管…...

编程日记 2023/5/5 21:08:10

微服务 Spring Boot 整合Redis 实现优惠卷秒杀一人一单

文章目录一、什么是全局唯一ID ⛅全局唯一ID ⚡Redis实现全局唯一ID 二、环境准备三、实现秒杀下单四、库存超卖问题 ⏳问题分析 ⌚ 乐观锁解决库存超卖 ✅Jmeter 测试五、优惠卷秒杀实现一人一单 ⛵小结一、什么是全局唯一ID ⛅全局唯一ID 在分布式系统中，经常需要使用…...

编程日记 2023/5/5 21:03:09

构建OVS网络

构建OVS网络 1. 配置虚拟机环境 （1）配置虚拟机交换机 1 创建一个名为br-xd的虚拟交换机。 # ovs-vsctl add-br br-xd 2 查询虚拟交换机。 # ovs-vsctl show 5a1cd870-fc31-4820-a7f4-b75c19450582 Bridge br-xd Port br-xd …...

编程日记 2023/5/5 20:58:08

【Python】万能之王 Lambda 函数详解

Python 提供了非常多的库和内置函数。有不同的方法可以执行相同的任务，而在 Python 中，有个万能之王函数：lambda 函数，它可以以不同的方式在任何地方使用。今天云朵君将和大家一起研究下这个万能之王！ Lambda 函数简介…...

编程日记 2023/5/5 20:53:07

手把手教你怎么搭建自己的AI数字人直播间？帮你24小时不间断直播卖货

在搭建AI数字人直播间之前，您需要了解数字人技术。一、什么是AI数字人、数字人直播间？ 数字人是一种由人工智能技术构建的虚拟人物，其外貌、行为、语言等特征与真实人物相似，可以与人进行互动。数字人可以通过语音合成、人脸识…...

编程日记 2023/5/5 20:48:06

MySQL性能监控全掌握，快来get关键指标及采集方法！

数据库中间件监控实战，MySQL中哪些指标比较关键以及如何采集这些指标了。帮助提早发现问题，提升数据库可用性。 1 整体思路监控哪类指标？ 如何采集数据？ 第10讲监控方法论如何落地？ 这些就可以在MySQL中应用起来。…...

编程日记 2023/5/5 20:43:05

sed进阶之保留空间和排除命令

shell脚本编程系列保留空间模式空间（pattern space）是一块活跃的缓冲区，在sed编辑器执行命令时保存着待检查的文本，但它并不是sed编辑器保存文本的唯一空间。sed编辑器还有另一块称作保留空间（hold space&#xff0…...

编程日记 2023/5/5 20:38:03

21安徽练习

题目分为4部分 APK 集群流量 exe 我尽量都做一下，逆向不是很会，就当提升自己。 [填空题]请获取app安装包的SHA256校验值（格式：不区分大小写）（10分） e15095d49efdccb0ca9b2ee125e4d8136cac5…...

编程日记 2023/5/5 20:33:02

【VAR | 时间序列】应用VAR模型时的15个注意点

一、前言向量自回归（VAR,Vector Auto regression）常用于预测相互联系的时间序列系统以及分析随机扰动对变量系统的动态影响。 VAR方法通过把系统中每一个内生变量,作为系统中所有内生变量的滞后值的函数来构造模型，从而回避了结构化模型的…...

编程日记 2023/5/5 20:28:02

图形找规律题 https://blog.csdn.net/mxj1428295019/article/details/129627461https://blog.csdn.net/Yujian2563/article/details/124266574?spm1001.2101.3001.6650.2&utm_mediumdistribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-124266574-blo…...

编程日记 2023/5/30 2:53:16

『python爬虫』05. requests模块入门（保姆级图文）

目录安装requests1. 抓取搜狗搜索内容 requests.get2. 抓取百度翻译数据 requests.post3. 豆瓣电影喜剧榜首爬取4. 关于请求头和关闭request连接总结欢迎关注『python爬虫』专栏，持续更新中欢迎关注『python爬虫』专栏，持续更新中安装requests …...

编程日记 2023/5/31 19:11:37

WPF超好用的框架Prism入门使用,上位机赶紧学起来!

Prism简介 WPF框架Prism是一种用于开发模块化、可重用和可测试的WPF应用程序的框架。它提供了一种简单而强大的方式来管理复杂应用程序的代码和构建高度可扩展的应用程序。如何学习Prism框架如果您想使用Prism框架来开发WPF应用程序，需要学习以下几个方面&…...

编程日记 2023/5/5 20:12:58

十个机器学习应用实例

一、在Kaggle上举办的一个竞赛，名为“Tabular Playground Series - Aug 2021”。该竞赛旨在预测房屋销售价格，数据集包含了79个特征和一个目标变量。参赛者需要训练一个模型，能够预测测试集中房屋的销售价格。该竞赛的获胜者使用了多个AI模型…...

编程日记 2023/5/5 20:07:57

【Redis17】Redis进阶：管道

Redis进阶：管道管道是啥？我们做开发的同学们经常会在 Linux 环境中用到管道命令，比如 ps -ef | grep php 。在之前学习 Laravel框架时的【Laravel6.4】管道过滤器https://mp.weixin.qq.com/s/CK-mcinYpWCIv9CsvUNR7w 这篇文章中&#xff0c…...

编程日记 2023/5/5 20:02:51

Django项目页面样式如何“传给”客户端浏览器

前言 django项目在视图函数中借助render函数可以返回HTML页面，但是HTML页面中如果引入了外部CSS文件或者JavaScript文件在浏览器页面无法加载，因此就必须有一种方式能够将HTML文档中引入的外部文件能够在客户端浏览器上加载，这种方式就是配置…...

编程日记 2023/5/5 19:57:50

python 进程间通信 Queue()、Pipe()、manager.list()、manager.dict()、manager.Queue()

👨‍💻个人简介： 深度学习图像领域工作者 🎉总结链接： 链接中主要是个人工作的总结，每个链接都是一些常用demo，代码直接复制运行即可。包括： &am…...

编程日记 2023/5/5 19:52:49

你想要的【微前端】都在这里了！ | 京东云技术团队

作者：京东零售郑炳懿开篇： 如果你不知道微前端是什么，或者不知道微前端能解决什么问题，那么你可能不需要微前端。在我看来，对于每一个没有使用过的新技术，都应该有以下几个过程： 1、调研…...

编程日记 2023/6/1 10:19:33

人生若只如初见，你不来看看Django吗

前言本文介绍python三大主流web框架之一的Django框架的基本使用，如何创建django项目，如何运行django项目以及django项目的目录结构，另外django又是如何返回不同的数据和页面？ python三大主流web框架 Python有三大主流的web框架…...

编程日记 2023/5/5 19:42:47

项目人力资源管理

项目人力资源管理的 4 个过程：规划人力资源管理、组建项目团队、建设项目团队、管理项目团队等内容单项选择题、案例分析题人力资源管理领域输入、输出、工具和技术表： 过程名输入工具和技术输出编写项目人力资源计划项目管理计划活动资源需求事业…...

编程日记 2023/5/5 19:37:46

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点轻量级&#xff…...

编程新知 2025/11/30 15:33:36

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我，后续持续新增专题博文，谢谢！！！】上一篇我们讲了： 这一篇我们开始讲： 目录一、场景操作步骤二、日志基础关键字分级如下三、场景日志如下： 一、场景操作步骤操作步…...

编程新知 2025/12/14 11:06:45

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。据「TMT星球」了解，“超级…...

编程新知 2025/12/16 14:36:58

【AI学习】三、AI算法中的向量

在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...

编程新知 2025/8/12 22:58:13

如何在网页里填写 PDF 表格？

有时候，你可能希望用户能在你的网站上填写 PDF 表单。然而，这件事并不简单，因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件，但原生并不支持编辑或填写它们。更糟的是，如果你想收集表单数据&#xff…...

编程新知 2025/12/9 12:17:40

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/12/9 1:10:01

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...

编程新知 2025/12/10 0:38:35

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论一、传统路径模型的根本缺陷在经典正方形路径问题中（图1）： mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

C# 表达式和运算符(求值顺序)

求值顺序表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生变化。例如，已知表达式3*52，依照子表达式的求值顺序，有两种可能的结果，如图9-3所示。如果乘法先执行，结果是17。如果5…...

编程新知 2025/12/13 23:39:33

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2025/12/9 4:55:04

JavaWeb学习------jQuery

jQuery函数库下载

第一章 jQuery简介

1.1、jQuery简介

1.2、jQuery版本介绍

1.3、jQuery引入方式

1.4、jQuery快速使用

1.5、jQuery两把利器

jQuery两把利器分别是：

第二章 jQuery核心函数

2.1、选择器

2.1.1、基本选择器

2.1.2、层级选择器

2.1.3、过滤选择器

相关文章：