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

JavaWeb学习------jQuery

news 2026/2/8 10:53:19

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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...

编程新知 2026/2/8 4:37:10

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/1/31 13:59:37

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统题目开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...

编程新知 2026/1/29 2:11:35

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用一、背景与挑战大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2026/1/23 11:58:06