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

前端基础之jQuery

news 2025/7/7 7:21:12

一.什么是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

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/6/17 9:20:49

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/7/4 8:55:29

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/7/6 4:52:27

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/7/5 3:22:34

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2025/7/6 23:59:47

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/6/21 7:57:44

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/7/4 14:45:19

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2025/7/5 23:34:09

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2025/7/6 21:02:05

用 Rust 重写 Linux 内核模块实战：迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

编程新知 2025/7/5 16:38:59