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

前端基础之jQuery

news 2026/3/28 3:35:11

一.什么是jQuery

  • jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  • jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery内部封装了原生的js代码

能够通过书写更少的代码，完成js操作，类似于Python中的模块

前端叫“类库”

兼容多个浏览器

二.导入模块

1.python当中导入模块发生了哪些事情？

导入模块其实需要消耗资源

在pyhon中，导入模块可以分为两个阶段：编译阶段和运行阶段

在编译阶段，Python解释器会扫描并分析源代码，将导入语句转换为相应的字节码指令。这些指令会被存储在编译后的.pyc文件中，以便在之后的运行阶段使用。

在运行阶段，当执行到导入模块的语句时，Python会按照以下步骤进行模块的导入：

  1. 搜索模块：解释器首先会搜索模块是否已经加载到内存中。如果是内置模块，则直接使用；如果是标准库或第三方库，会按照一定的搜索路径进行查找。

  2. 编译模块：如果模块没有被加载到内存中，则解释器会在硬盘上找到对应的.py文件，并将其编译成字节码文件（.pyc）。编译后的字节码文件包含了模块的定义、函数、类等信息。

  3. 创建模块命名空间：解释器创建一个新的命名空间来存放模块中的变量、函数和类等。模块中的全局变量会成为该命名空间的属性。

  4. 执行模块代码：解释器开始执行模块的字节码指令，逐行解释并执行模块中的代码。这会导入模块中定义的函数、类和全局变量等。

  5. 返回模块对象：当模块中的代码执行完毕后，解释器返回一个表示该模块的模块对象。可以通过该对象访问模块中定义的内容。

总结起来，导入模块时，Python解释器会搜索、编译、执行模块的代码，并创建一个命名空间来存放模块中的变量和函数。这样，我们就可以在当前代码中使用模块中定义的功能了。

2.jQuery中导入类库发生了哪些事？

它的文件非常小（几十kb），基本不影响网络速度

在jQuery中导入类库（也称为插件）可以通过以下步骤完成：

  1. 获取类库文件：首先需要获取所需的类库文件（通常是一个 JavaScript 文件），可以从官方网站或其他来源下载得到。

  2. 导入类库文件：将类库文件保存在项目目录中，并在 HTML 文件中使用<script>标签来导入类库文件。在<script>标签中，使用src属性指定类库文件的路径，让浏览器能够加载并执行该文件。

    <script src="path/to/jquery.js"></script>
<script src="path/to/plugin.js"></script>

    这样，当浏览器解析到这两个<script>标签时，就会下载并执行对应的类库文件。

  3. 使用类库功能：一旦类库文件被加载和执行，就可以使用其中提供的功能了。通常，类库会扩展或增强原生 JavaScript 的功能，通过在页面中引入类库文件，我们可以使用类库提供的函数、方法或特性。

    $(document).ready(function() {// 在文档加载完成后执行一些代码// 使用类库提供的函数或方法
});

    上述代码示例中，$符号是 jQuery 的别名，通过调用.ready()方法，我们可以确保在文档加载完成后执行传入的函数。

上述代码示例中，$符号是 jQuery 的别名，通过调用.ready()方法，我们可以确保在文档加载完成后执行传入的函数。

三.基本选择器

jQuery是一个流行的JavaScript库，它提供了便捷的方法来选择和操作HTML元素。以下是jQuery中的九个基本选择器：

1.元素选择器（Element Selector）：

  • 使用元素名称作为选择器，选取所有匹配该元素名称的元素。
  • 示例：选择所有段落元素
$('p');

2.ID选择器（ID Selector）：

  • 使用ID属性值作为选择器，选取具有相同ID的唯一元素。
  • 示例：选择具有 "myElement" ID的元素
$('#myElement');

3.类选择器（Class Selector）：

  • 使用类名作为选择器，选取具有相同类名的元素。
  • 示例：选择所有具有 "myClass" 类的元素
$('.myClass');

4.属性选择器（Attribute Selector）：

  • 使用元素的属性和属性值进行选择。
  • 示例：选择所有具有 "target" 属性的元素
$('[target]');
  • 示例：选择具有 "href" 属性值以 "https://" 开头的所有链接
$('a[href^="https://"]');

5.选择器组合（Multiple Selectors）：

  • 通过逗号分隔多个选择器，同时选择多个元素。
  • 示例：选择所有段落元素和具有 "myClass" 类的元素
$('p, .myClass');

6.后代选择器（Descendant Selector）：

  • 选择某个元素的后代元素。
  • 示例：选择所有 "myElement" 元素内的段落元素
$('#myElement p');

7.子元素选择器（Child Selector）：

  • 选择某个元素的直接子元素。
  • 示例：选择所有 "myElement" 元素的直接子元素中的段落元素
$('#myElement > p');

8.下一个兄弟元素选择器（Next Adjacent Selector）：

  • 选择紧接在指定元素后的下一个兄弟元素。
  • 示例：选择紧接在 "myElement" 元素后的下一个兄弟元素
$('#myElement + div');

9.后续所有兄弟元素选择器（Following Siblings Selector）：

  • 选择指定元素之后的所有兄弟元素。
  • 示例：选择紧接在 "myElement" 元素后的所有兄弟元素中具有 "myClass" 类的元素
$('#myElement ~ .myClass');

10.示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script></head>
<body>
<div id="d1">div<span>div>span</span><p>div>p<span>div>p>span</span></p>
</div>
<p class="p1">p</p>
<span>span</span>
</body>
</html>
  • id 选择器
$("#d1")
// S.fn.init [div#d1]

返回的是jQuery对象

  • class选择器
$('.p1')
// S.fn.init [p.p1, prevObject: S.fn.init(1)]
  • 标签选择器
$('span')
// S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]
  • jQuery对象转标签对象
$("#d1")[0]
// <div id=​"d1">​…​</div>​
  • 标签对象jQuery对象
$(document.getElementById("d1"))
// S.fn.init [div#d1]

相关文章：

前端基础之jQuery

一.什么是jQuery jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互&#xff0c;能够极大地简化JavaScript编程。它的宗旨就是&#xff1a;“Write less, do more.“ jQuery内部封装了…...

编程日记 2023/11/5 8:58:26

【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…...

编程日记 2023/11/5 8:57:24

思考（九十二）：DBProxy实现多级存储和事务处理

DBProxy 数据处理的主控室 后端开发一块重要的内容就是如何处理数据。比如： 问题说明统一的访问界面如游戏服只需要 Load、Save、Begin、Commit、Rollback 接口多级存储来降低成本如热数据在 Redis ；冷数据在 MySQL ；长时间非活跃，则归档 OSS同个逻辑涉及多个数据更新要么…...

编程日记 2023/11/5 8:56:22

新手入门Python一定要看的八个超实用建议！

文章目录 前言一、项目文件事先做好归档二、永远不要手动修改源数据并且做好备份三、做好路径的正确配置四、代码必要的地方做好备注与说明五、加速你的Python循环代码六、可视化你的循环代码进度七、使用高效的异常捕获工具八、要多考虑代码健壮性关于Python技术储备一、Pytho…...

编程日记 2023/11/5 8:55:21

Centos 7.x上利用certbot申请Let‘s Encrypt的SSH证书(HTTPS证书)

目录 01-安装Certbot02-在网站的根目录依次新建文件夹.well-known和acme-challenge03-申请证书 要在CentOS 7.x上为域名申请Let’s Encrypt证书&#xff0c;你可以使用Certbot工具&#xff0c;它是一个自动化证书颁发工具&#xff0c;用于管理Let’s Encrypt证书。以下是在Cent…...

编程日记 2023/11/5 8:54:20

采用springboot、avue框架开发的：大型医院绩效考核系统成品源码

医院绩效考核系统全套源码&#xff08;演示自主版权医院应用案例&#xff09; 医院绩效考核系统&#xff0c;建立以医院发展目标为导向&#xff0c;以医务人员劳动价值、工作量为评价基础&#xff0c;统筹效率、质量、成本的绩效管理和绩效工资分配体系。系统支持RBRVS&#xf…...

编程日记 2023/11/5 8:53:20

时序分解 | Matlab实现FEEMD快速集合经验模态分解时间序列信号分解

时序分解 | Matlab实现FEEMD快速集合经验模态分解时间序列信号分解 目录 时序分解 | Matlab实现FEEMD快速集合经验模态分解时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现FEEMD快速集合经验模态分解时间序列信号分解 算法新颖小众&#xff0c…...

编程日记 2023/11/5 8:51:16

自学SLAM（6）相机与图像实践：OpenCV处理图像与图像拼接(点云)

前言 如果写过SLAM14讲第一次的作业&#xff0c;或者看过我之前的运行ORB_SLAM2教程应该都安装过OpenCV了&#xff0c;如果没有安装&#xff0c;没关系&#xff0c;可以看我之前的博客&#xff0c;里面有如何安装OpenCV。 链接: 运行ORB-SLAM2&#xff08;含OpenCV的安装&…...

编程日记 2023/11/5 8:49:14

伊朗网络间谍组织针对中东金融和政府部门

导语 近日&#xff0c;以色列网络安全公司Check Point与Sygnia发现了一起针对中东金融、政府、军事和电信部门的网络间谍活动。这一活动由伊朗国家情报和安全部门&#xff08;MOIS&#xff09;支持的威胁行为者发起&#xff0c;被称为"Scarred Manticore"。该组织被认…...

编程日记 2023/11/5 8:48:13

基于51单片机土壤湿度检测及自动浇花系统仿真（带时间显示）

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;单片机浇花 获取完整源码源文件仿真源文件原理图源文件论文报告等 单片机土壤湿度检测及自动浇花系统仿真&#xff08;带时间显示&#xff09; 具体功能&#xff1a; &#xff08;1&#xff09;液晶第一行显示实际湿度&am…...

编程日记 2023/11/5 8:46:08

typeScript基础使用与进阶

typeScript基础使用与进阶 一、初始typeScript1.1 js的超集1.2 编译器编译为js代码1.3 完全兼容js1.4 静态类型检查器 二、ts的安装与编译2.1 ts的安装2.2 ts编译成js2.2.1 手动编译2.2.2 自动编译 三、ts基础使用3.1 类型声明3.1.1 基础类型3.1.2 数组3.1.3 对象3.1.4 any类型…...

编程日记 2023/11/5 8:45:07

云智慧联合北航提出智能运维（AIOps）大语言模型及评测基准

随着各行业数字化转型需求的不断提高&#xff0c;人工智能、云计算、大数据等新技术的应用已不仅仅是一个趋势。各行业企业和组织纷纷投入大量资源&#xff0c;以满足日益挑剔的市场需求&#xff0c;追求可持续性和竞争力&#xff0c;这也让运维行业迎来了前所未有的挑战和机遇…...

编程日记 2023/11/5 8:44:05

高效处理异常值的算法：One-class SVM模型的自动化方案

一、引言 数据清洗和异常值处理在数据分析和机器学习任务中扮演着关键的角色。清洗数据可以提高数据质量&#xff0c;消除噪声和错误&#xff0c;从而确保后续分析和建模的准确性和可靠性。而异常值则可能对数据分析结果产生严重影响&#xff0c;导致误导性的结论和决策。因此&…...

编程日记 2023/11/5 8:43:04

Docker DeskTop安装与启动（Windows版本）

一、官网下载Docker安装包 Docker官网如下&#xff1a; Docker官网不同操作系统下载页面https://docs.docker.com/desktop/install/windows-install/ 二、安装Docker DeskTop 2.1 双击 Docker Installer.exe 以运行安装程序 2.2 安装操作 默认勾选&#xff0c;具体操作如下…...

编程日记 2023/11/5 8:42:03

数据结构：邻接矩阵与邻接表

模型图 邻接矩阵 用于反应图中任意两点之间的关联&#xff0c;用二维数组表示比较方便 以行坐标为起点&#xff0c;列坐标为终点如果两个点之间有边&#xff0c;那么标记为绿色&#xff0c;如图&#xff1a; 适合表示稠密矩阵 邻接表 用一维数组 链表的形式表示&#xff…...

编程日记 2023/11/5 8:41:02

python PyQt5 MySQL GUI 学生信息管理系统

学生信息管理系统 本系统使用python&#xff0c;pyqt5&#xff0c;数据库使用MySQL&#xff0c;实现windowsGUI应用。 python使用pymysql模块操作数据库代码 import pymysqldef handle_db(cmd, sql):result None# print(f" sql {sql}")# 连接数据库conn pymysql…...

编程日记 2023/11/5 8:40:00

[SSD综述1.6] SSD固态硬盘参数图文解析_选购固态硬盘就像买衣服？

依公知及经验整理，原创保护，禁止转载。 专栏 《SSD入门到精通系列》 <<<< 返回总目录 <<<< ​ 传统的 HDD 是“马达+磁头+磁盘”的机械结构，而 SSD 则是“闪存介质+主控”的纯半导体芯片存储结构，两者在数据存储介质和读写方式上有着本质区别，这…...

编程日记 2023/11/5 8:38:59

【计算机网络 - 自顶向下方法】第一章习题答案

P2 Question&#xff1a;   式 (1-1) 给出了经传输速率为 R 的 N 段链路发送长度为 L 的一个分组的端到端时延。 对于经过 N 段链路一个接一个地发送 P 个这样的分组&#xff0c;一般化地表示出这个公式。 Answer&#xff1a;    N ∗ L R \frac{N*L}{R} RN∗L​时&#x…...

编程日记 2023/11/5 8:37:58

零基础搭建Nextcloud私有云盘并通过内网穿透实现远程访问

文章目录 摘要1. 环境搭建2. 测试局域网访问3. 内网穿透3.1 ubuntu本地安装cpolar3.2 创建隧道3.3 测试公网访问 4 配置固定http公网地址4.1 保留一个二级子域名4.1 配置固定二级子域名4.3 测试访问公网固定二级子域名 摘要 Nextcloud,它是ownCloud的一个分支,是一个文件共享服…...

编程日记 2023/11/5 8:36:56

element ui多选框编辑时无法选中的解决办法

<!--v-model绑定的值必须是[]&#xff0c;不能是字符串--><el-form-item label"配布对象" prop"reptGroupArray" > <!--多选--><el-checkbox-group v-model"form.reptGroupArray" size"small" change"check…...

编程日记 2023/11/5 8:35:55

1815《中国城市统计年鉴》面板数据（1985-2024）

1、搜说数据皮皮侠2、使用兑换码 516004233462b5Qy0SoHIf26 获取注意&#xff1a;兑换码2026.3.30&#xff08;不包括30号&#xff09;前有效&#xff01;数据简介《中国城市统计年鉴》是国家统计局城市社会经济调查司主办的、全面反映中国城市经济和社会发展情况的资料性年刊。…...

编程新知 2026/3/28 3:09:13

LangGraph实战：从零构建并部署一个多功能智能体

1. LangGraph框架概述&#xff1a;新一代智能体开发范式 在人工智能应用开发领域&#xff0c;智能体&#xff08;Agent&#xff09;技术正经历着从简单问答到复杂任务执行的进化。LangGraph作为LangChain生态中的新一代开发框架&#xff0c;彻底改变了传统链式结构的局限性。我…...

编程新知 2026/3/28 2:36:56

FPGA商用级ISP：动态坏点校正（DPCC）的滑窗架构与并行判决实现

【写在前面&#xff1a;为什么要写这个专栏&#xff1f;】在数字图像处理领域&#xff0c;ISP&#xff08;图像信号处理器&#xff09;的算法原理并不罕见&#xff0c;但真正能够支持 4K60fps 实时处理、并经过商用验证的 Verilog 硬核实现思路 却往往秘和封装在黑盒之中。我手…...

编程新知 2026/3/28 2:22:51

全向轮底盘运动控制：嵌入式PID与逆运动学实现

1. 全向轮底盘控制库&#xff08;omni_wheel&#xff09;技术解析与工程实践1.1 项目背景与工程定位omni_wheel是为B团队自主移动机器人开发的底层运动控制模块&#xff0c;最初版本发布于2018年7月10日。从其原始README描述“PIDかけて一方向に進むだけのプログラムでござんす…...

编程新知 2026/3/28 2:06:19

提升开发效率与编码体验：开源字体LxgwWenKai跨平台配置全指南

提升开发效率与编码体验&#xff1a;开源字体LxgwWenKai跨平台配置全指南 【免费下载链接】LxgwWenKai LxgwWenKai: 这是一个开源的中文字体项目&#xff0c;提供了多种版本的字体文件&#xff0c;适用于不同的使用场景&#xff0c;包括屏幕阅读、轻便版、GB规范字形和TC旧字形…...

编程新知 2026/3/28 1:37:47

MCP项目笔记六（PluginsLoader）

C 插件加载器&#xff1a;从目录扫描、动态库加载、实例创建&#xff0c;到安全卸载的设计思路与实现细节。一、整体架构概览 这段代码实现了一个完整的运行时插件系统&#xff08;Runtime Plugin System&#xff09;。所谓插件系统&#xff0c;就是让主程序在编译完成后&#…...

编程新知 2026/3/27 23:50:55

打破数据标注瓶颈：Label Studio如何让AI训练效率提升300%？

打破数据标注瓶颈&#xff1a;Label Studio如何让AI训练效率提升300%&#xff1f; 【免费下载链接】label-studio Label Studio is a multi-type data labeling and annotation tool with standardized output format 项目地址: https://gitcode.com/GitHub_Trending/la/labe…...

编程新知 2026/3/27 23:26:39

ConvNeXt 改进 ：ConvNeXt添加SAConv(可切换空洞卷积)，自适应融合多尺度特征，优化小目标与遮挡目标感知，二次创新CNBlock结构

本文教的是方法，也给出几种改进方法，二次创新结构，百变不离其宗，一文带你改进自己模型，科研路上少走弯路。 作者提出的技术结合了递归特征金字塔和可切换空洞卷积，通过强化多尺度特征学习和自适应的空洞卷积，显著提升了目标检测的效果。 理论介绍 空洞卷积（Atrous Co…...

编程新知 2026/3/27 22:54:25

ChineseChess-AlphaZero技术架构与实践指南：从环境搭建到模型训练

ChineseChess-AlphaZero技术架构与实践指南&#xff1a;从环境搭建到模型训练 【免费下载链接】ChineseChess-AlphaZero Implement AlphaZero/AlphaGo Zero methods on Chinese chess. 项目地址: https://gitcode.com/gh_mirrors/ch/ChineseChess-AlphaZero 副标题&…...

编程新知 2026/3/27 20:51:39

别再只开会了！解锁Jitsi隐藏玩法：用Freeswitch+Jigasi打造智能电话会议IVR

解锁Jitsi企业级应用&#xff1a;用FreeswitchJigasi构建智能会议IVR系统 当视频会议成为企业刚需&#xff0c;大多数团队仍停留在基础会议功能层面。开源工具Jitsi与电信级软交换平台Freeswitch的结合&#xff0c;能创造出远超常规会议体验的智能交互系统。想象一下这样的场景…...

编程新知 2026/3/27 20:37:37