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

JavaWeb学习------jQuery

news 2025/10/24 7:45:45

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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/10/17 16:01:19

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2025/10/23 7:44:17

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/10/24 2:18:04

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者：来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。想获得 Elastic 认证吗？了解下一期 Elasticsearch Engineer 培训的时间吧！ Elasticsearch 拥有众多新功能，助你为自己…...

编程新知 2025/10/23 20:49:54

【位运算】消失的两个数字（hard）

消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码题⽬链接：⾯试题 17.19. 消失的两个数字题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...

编程新知 2025/10/17 12:01:41

五年级数学知识边界总结思考-下册

目录一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...

编程新知 2025/10/7 4:57:55

Mac软件卸载指南，简单易懂！

刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/10/22 13:08:04

Python如何给视频添加音频和字幕

在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。环境准备在开始之前，需要安装以下Python库：…...

编程新知 2025/9/3 4:12:17

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/9/24 10:52:31

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/10/23 17:11:45

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、过滤选择器

相关文章：