JavaWeb学习------jQuery

已于 2023-05-01 21:38:55 修改
阅读量839 收藏 1
点赞数
分类专栏： Javaweb网站练习 笔记 课外新知识 文章标签： jquery 学习 前端
于 2023-05-01 16:09:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63064861/article/details/130456135
版权

JavaWeb学习------jQuery

jQuery函数库下载

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

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

提取码：6c9i

  • 然后下载？
  1. 来到官网，有两种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');

效果： 

 

captain_dong
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JQuery框架类库基础部分学习 -JavaWeb
01-08
jQuery 核心思想:jQuery 流行程度:jQuery 好处:常见问题JQuery核心函数jQuery 对象和 dom 对象区分jQuery 选择器基本选择器层级选择器过滤选择器基本过滤器：内容过滤器：属性过滤器：表单过滤器:表单对象属性过滤器...
JavaWeb---JQuery
weixin_65440201的博客
08-15 569
1.JQuery 基础 1.1概念 1.2快速入门 1.2.1步骤 1.3JQuery对象和JS对象区别与转换 1.4选择器：筛选具有相似特征的元素(标签) 1.4.1基本操作学习 1.4.2分类 1.5DOM操作 1.5.1内容操作 1.5.2属性操作 1.5.3CRUD操作 1.6案例 1.6.1隔行换色 1.6.2全选和全不选 1.6.3QQ表情选择 1.6.4多选下拉列表左右移动 2.JQuery 高级 2.1动画 2.1.1三种方式显示和隐藏元素 2.2
JavaWeb开发-jQuery技术
刘树之的博客
08-16 470
1.开始jQuery的学习之旅 1.1.jQuery简介 JQuery是继Prototype之后又一款非常优秀的JavaScript框架，由John Resig创建于2006年1月。jQuery体积小，运行速度快，它独有的极为强大的选择器，使得页面元素的查找变得非常简单，其出色的DOM操作、可靠的事件处理、完善的浏览器兼容性和链式操作等优点。 Jquery本身也是JS，只不过是对原生的JS进行封装，形成了一个JS的开发库! JQuery官方介绍： 1.2.jQuery简介 JQuery的核心理念是：“
JavaWeb学习--复习
wowo
11-04 431
JavaWeb学习 JavaWeb--Html 1、提交按钮 <button onclick="alert('你好')">提交</button>，onclick属性后面加的是点击按钮后的响应事件，使用alert属性后点击按钮就会出现一个提示框，弹出“你好”。 2、页面中显示 和 " (空格)"方法 <!-- 根据需要查看显示字符实体的标签符号-->这是&ltbr&gt标签 <br/>　　--> 使用&lt和.
jQuery学习--javaweb
m0_58642116的博客
07-21 122
jQueryjquery介绍$--jQuery核心函数jQuery对象和DOM对象jQuery对象本质
JAVAWeb项目-拼小多商城.zip
11-06
JAVAWeb项目-拼小多商城.zip包含了一个完整的Java Web应用程序，用于实现拼小多商城的各项功能。该项目的源代码和相关文件都被压缩成一个zip文件，方便下载和使用。 该项目包括以下几个主要模块： 用户模块：实现...
javaweb课程设计----审计系统
07-14
采用ssm+mysql。前端使用html5+css3+jquery.系统功能完整，下载运行即可。代码注释多，技术比较基础。适合学习模仿
当当网javaweb-SSM框架项目
01-17
当当网web项目，包含技术及相应框架：html、css、jsp、bootstrap、javaScript、JQuery、maven、tomcat、JDK1.8、SpringMVC、Spring、mybatis、Mysql等...(解压出来sql文件在主目录下)
IDEA版JavaWeb从入门到精通之jQuery第3-4天
06-19
课程涵盖：Servlet程序、Filter过滤器、Listener监听器、JSP页面、EL表达式、JSTL标签库、jQuery框架...课程目标：为Web开发奠定扎实基础，并为后续框架学习做好技术储备。 本系列教程共计16天，本章为第3-4天jQuery。
FME学习之旅---day27
summer_corner的博客
05-17 212
我们付出一些成本，时间的或者其他，最终总能收获一些什么。
使用多实例学习进行乳腺癌组织病理学图像分类和定位
qq_47896523的博客
05-16 1119
乳腺癌是女性最主要的死亡原因，病理学家根据病理切片中观察到的各种视觉特征（例如细胞核的形态特征、细胞核的微观和宏观结构等）做出决定。计算机辅助诊断（CAD）系统可以帮助病理学家自动做出决策。卷积神经网络是最广泛使用的深度学习框架，用于学习图像类别之间的复杂判别特征。多年来，VGG16 [3] 和 ResNet18 [4] 等各种 CNN 架构在海量 ImageNet 数据集上产生了出色的结果。CNN 被用于医学图像以产生最先进的结果。为图像中存在的所有类别提供了定位信息。
学习kong官方文档
好好学习日记
05-17 282
当然，我会用更简洁的方式重新解释这两个概念：Helm和Kubectl是Kubernetes生态系统中常用的两个工具，它们各自有不同的用途：
C语言查漏补缺学习【精简版】
qq_49288362的博客
05-18 628
逗号的组合关系是自左向右，所以左边的表达式会先计算，而右边的表达式的值就留下来作为逗号运算的结果。枚举类型名字通常并不真的使用，要用的是在大括号里的名字，因为它们就是常量符合，它们的类型是int,值则一次从0到n。当要传递的参数的类型比地址大的时候，这是常用的手段：既能用比较少的字节数传递值给参数，又能避免函数对外面的变量的修改。当需要一些可以排列起来的常量值时，定义枚举的意义就是给了这些常量的值的名字。16.*：是一个单目运算符，用来访问指针的值所表示的地址上的变量。
DB类的学习
2301_77523055的博客
05-15 369
"不返回结果集" 意味着执行 SQL 语句后，你不会得到一个可以逐行读取的数据集。相反，你可能会得到一个表示受影响的行数的整数，或者只是一个表示命令是否成功执行的确认。
llama-factory学习个人记录
最新发布
qq_55736201的博客
05-22 614
1.llama-factory部署在LLaMA-Factory项目中，单显卡可以用命令或训练，多显卡只能用用命令的方式。
【学习笔记】后端（Ⅰ）—— NodeJS（Ⅱ）
Eddie_hyh的博客
05-21 278
NodeJS（Ⅱ）
【AI学习】简单聊聊后训练（Post-Training）的重要性
bylander的博客
05-17 641
模型生成的输出质量比网上的大多数内容都要高。因此，让模型自己思考似乎更有道理，而不仅仅是训练来模仿网络上的内容。所以，我认为从第一性原理上来说，这是有说服力的。我会说，我们通过后训练取得了很多进步。
Android OpenMAX（八）如何学习OMXNodeInstance
青山渺渺
05-15 238
OMXNodeInstance学习技巧
JavaScript、jQery、javaweb学习顺序
07-25
这将为你后续学习jQuery和JavaWeb提供必要的基础。 2. 进阶JavaScript：一旦你掌握了JavaScript的基础知识，可以学习更高级的概念，如对象、数组、闭包、原型链、异步编程等。这些概念将使你在编写复杂的JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

captain_dong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值