- 体积小,压缩后只有100KB左右
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 使用隐式迭代简化编程
- 丰富的插件支持
💖 jQuery安装及使用
jQuery的官网会提供最新的jQuery框架,有两个版本的 jQuery 可供下载:
- Production version - 用于实际的网站中,已被精简和压缩。
- Development version - 用于测试和开发(未压缩,是可读的代码)
下载 jQuery 库: jQuery 下载
下载完成后不需要任何安装过程,直接将下载的.js文件用script标记导入用户自己的页面代码中即可,代码如下所示:
<script scr="jquery-3.6.1.min.js"></script>
导入jQuery框架后,便可以按照它的语法规则编程了。
💖 jQuery的$
在jQuery中,被频繁使用的莫过于符号$。它拥有各种各样的功能,包括选择页面中的一个或是一类元素、作为功能能函数的前缀、用于完善window.onload、创建页面的DOM节点等。
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。
基础语法: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
💞 选择器
在CSS中选择器的作用是选择页面中的某一类元素(类别选择器)或者某一个元素(id选择器)。而jQuery中的$作为选择器标识,同样可以选择某一类或者某一个元素,只不过jQuery提供了更多、更全面的选择方式,并且为用户处理了浏览器的兼容性问题。
【1】jQuery基本选择器:
标签选择器、类选择器、ID选择器、并集选择器和全局选择器。
名称 | 语法结构 | 描述 | 实例 |
---|---|---|---|
标签选择器 | element | 根据给定的标签名匹配元素 | $(“h2”)选取所有h2元素 |
类选择器 | .class | 根据给定的class匹配元素 | $(“.title”)选取所有class为title的元素 |
ID选择器 | #id | 根据给定的id匹配元素 | $(“#title”)选取id为title元素 |
并集选择器 | selector1,selector2,…,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $(“div,p,.title”)选取所有div、p和拥有class为title的元素 |
全局选择器 | * | 匹配所有元素 | $(“*”)选取所有元素 |
【2】jQuery层次选择器:
后代选择器、子选择器、相邻元素选择器和同辈元素选择器。
名称 | 语法结构 | 描述 | 实例 |
---|---|---|---|
后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant(后代)元素 | $(“#menu span”)选取#menu下的span元素 |
子选择器 | parent>child | 选取parent元素下的child(子)元素 | $(“#menu>span”)选取#menu下的子元素span |
相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(“h2+ dl”)选取紧邻h2元素之后的同辈元素dl |
同辈元素选择器 | prev~siblings | 选取prev元素之后的siblings元素 | $(“h2~ dl”)选取紧邻h2元素之后的同辈元素dl |
【3】属性选择器
属性选择器通过HTML元素的属性来选择元素。
- 属性选择器可以根据是否包含某属性来获取元素
如:a标签带有class属性
- 属性选择器可以根据属性值来获取元素
如:class属性值为hot的元素
- 属性选择器可以指定选取不等于属性是某个特定值的元素
如:class值不等于hot的元素
- 属性选择器可以指定属性值以指定值开头的元素
如:a标签href属性值以www开头的元素
- 属性选择器可以指定属性值以指定值结尾的元素
如:a标签href属性值以html结尾的元素
- 属性选择器可以指定属性值包含指定值的元素
如:a标签href属性值包含“k2”的元素
【4】过滤选择器
通过特定的过滤规则来筛选出所需的元素。
主要分类:
- 基本过滤选择器
- 可见性过滤选择器
- 表单对象过滤选择器
- 内容过滤选择器、子元素过滤选择器……
基本过滤选择器
案例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤选择器</title>
<script src="js/jQuery-3.6.1.js"></script>
</head>
<body>
<ul>
<li>列表项第1项</li>
<li>列表项第2项</li>
<li>列表项第3项</li>
<li>列表项第4项</li>
<li>列表项第5项</li>
<li>列表项第6项</li>
<li>列表项第7项</li>
<li>列表项第8项</li>
</ul>
</body>
<script>
$(function(){
//获取第一个li元素,并将文本颜色设置为#0f0;
$('li:first').css('color','#0f0');
//获取最后一个li元素,并将文本颜色设置为#00f;
$('li:last').css('color','#00f');
//获取索引为2的元素,并将文本颜色设置为#f00;
$('li:eq(2)').css('color','#f00');
// $('li:gt(4)').css('color','#f00');
// $('li:lt(4)').css('color','#f00');
});
</script>
</html>
运行效果:
可见性过滤选择器:通过元素显示状态来选取元素
案例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jQuery-3.6.1.js"></script>
<style>
h2{
display: none;
}
</style>
</head>
<body>
<p>段落标签</p>
<h2>标题标签</h2>
<button id="test">隐藏段落标签</button>
<button id="demo">显示标题标签</button>
</body>
<script>
$(function(){
//获取id为test的button按钮,添加点击事件
$('#test').click(function(){
//选取可见的p标签,并将其隐藏
$('p:visible').hide();
});
//获取id为demo的button,并添加点击事件
$('#demo').click(function(){
$('h2:hidden').show();
});
});
</script>
</html>
运行效果:
💞 功能函数前缀
在JavaScript中,开发者经常需要编写一些功能函数来处理各种操作细节。例如在用户提交表单时,需要将输入框中最前端和最末端的空格清楚。JavaScript直到ES6才提供类似trim()的功能,而引入jQuery后,便可以直接使用trim()函数,如下所示:
$.trim(sString);
以上代码相当于:
jQuery.trim(sString);
即trim()函数是jQuery对象的一个方法。
案例代码:
<!DOCTYPE html>
<html>
<head>
# **读者福利**
**由于篇幅过长,就不展示所有面试题了,感兴趣的小伙伴**
![35K成功入职:蚂蚁金服面试Java后端经历!「含面试题+答案」](https://img-blog.csdnimg.cn/img_convert/ca15bb4f6be41eab59647300f6c6f967.webp?x-oss-process=image/format,png)
![35K成功入职:蚂蚁金服面试Java后端经历!「含面试题+答案」](https://img-blog.csdnimg.cn/img_convert/d0d42d5bf0df0d5871702fdf5647eb67.webp?x-oss-process=image/format,png)
![35K成功入职:蚂蚁金服面试Java后端经历!「含面试题+答案」](https://img-blog.csdnimg.cn/img_convert/bb37b493ff7c58a15f6cb5d5d5b01cff.webp?x-oss-process=image/format,png)
**更多笔记分享**
![35K成功入职:蚂蚁金服面试Java后端经历!「含面试题+答案」](https://img-blog.csdnimg.cn/img_convert/b29b1d019a21a63283ef40311646f650.webp?x-oss-process=image/format,png)
读者福利
由于篇幅过长,就不展示所有面试题了,感兴趣的小伙伴
[外链图片转存中…(img-NAAalSFT-1714805732624)]
[外链图片转存中…(img-BmlymTCY-1714805732624)]
[外链图片转存中…(img-60N0ZdK9-1714805732624)]
更多笔记分享
[外链图片转存中…(img-apWAtsXw-1714805732625)]
本文已被CODING开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录