首页 前端知识 轻松掌握 jQuery 基础_jquery基础思维导图

轻松掌握 jQuery 基础_jquery基础思维导图

2024-05-09 10:05:56 前端知识 前端哥 190 931 我要收藏
  • 体积小,压缩后只有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面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7681.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!