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

【JQuery—前端快速入门】JQuery 基础语法

news 2025/11/7 7:10:33

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

JQuery

JQuery是一个快速、简洁且功能丰富的JavaScript框架;

1. 引入依赖

使用JQuery需要先引入对应的库；

在使用 JQuery CDN 时，只需要在 HTML 文档中加入如下代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

参考地址: https://releases.jquery.com/

其中，src 属性指明了 JQuery 库所在的URL，这个 URL 是 CDN(内容分发网络) 服务提供商，为 jQuery 库提供的一个统一资源定位符；

如果需要使用其他版本的 JQuery，可以在官网进行下载：

在这里插入图片描述

在这里插入图片描述

Jquery 官方共提供了4种类型的 JQuery 库：

  • uncompressed：非压缩版本(易读，但是文件较大，传输速度慢)
  • minified：压缩版(不易读，文件小，性能高，开发中推荐)
  • slim：精简瘦身版，没有Ajax和一些特效
  • slim minified ：slim的压缩版

开发时，建议把 JQuery 库下载到本地,放在当前项目中，引入外部地址，会有外部地址不能访问的风险.

下载方式:

  • 先创建一个新的 HTML 文件，用于引入依赖：

在这里插入图片描述

  • 右键uncompressed 和 minified 版本，在新的标签页中打开：

在这里插入图片描述

  • 我们可以看到未压缩版本的方法很工整，而压缩版本的方法则不讲究格式：

在这里插入图片描述

我们可以根据实际需求，在未压缩版本/压缩版本的页面中按右键，通过另存的方式，存到对应的项目中，在项目中引入这个文件，才可以在项目中使用 JQuery 提供的框架，引入 JQuery 文件，需要利用网路来传输，推荐使用压缩版本，可以大大节约传输文件的时间开销；

在这里插入图片描述

这个方法是存在本机的，使用的是内部连接，放置网络连接失效导致异常：

在这里插入图片描述

为了让文件整洁一点，我们把 JS 文件和 HTML 文件区分开：

在这里插入图片描述

修改链接：

在这里插入图片描述

2. JQuery 语法

jQuery 语法是通过选取HTML元素，并对选取的元素执行某些操作

基础语法

 $(selector).action()
  • $() ：一个函数，它是jQuery提供的一个全局函数，用于选择和操作 HTML 元素.
  • Selector：选择器，用来"查询"和"查找" HTML 元素
  • action： 操作，执行对元素的操作

JQuery的代码通常都写在document ready 函数中；

document:整个文档对象,一个页面就是一个文档对象,使用document表示.

这是为了防止文档在完全加载(就绪)之前运行jQuery代码，即在文档加载完成后才可以对页面进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败

示例：

在这里插入图片描述

保存代码，打开页面：

在这里插入图片描述

给按钮添加了click事件，点击后出现弹窗：

在这里插入图片描述

保存代码，刷新页面：

在这里插入图片描述

3. JQuery 选择器

我们通过 JQuery 选择器来选择一些 HTML 元素，然后对元素进行操作.

JQuery选择器基于已经存在的CSS选择器，除此之外，还有一些自定义的选择器.

jQuery 中所有选择器都以 $ 开头: $().

在这里插入图片描述

$(“.intro .demo”)是一个复合标签，如果加了空格，表示 .demo 是 .intro 的子标签，加空格的描述就是，选中含有 .demo 标签的 .intro 标签；

4. JQuery 事件

jQuery 参考手册 - 事件 (w3school.com.cn)

在这里插入图片描述

在这里插入图片描述

相关文章：

【JQuery—前端快速入门】JQuery 基础语法

JQuery JQuery是一个快速、简洁且功能丰富的JavaScript框架; 1. 引入依赖 使用JQuery需要先引入对应的库&#xff1b; 在使用 JQuery CDN 时&#xff0c;只需要在 HTML 文档中加入如下代码 <script src"https://code.jquery.com/jquery-3.7.1.min.js"></s…...

编程日记 2025/3/6 1:42:31

Springboot整合WebSocket+Redis以及微信小程序如何调用

一、 Springboot整合WebSocket 1. 引入socket依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency>引入依赖后需要刷新maven,Websocket的版本默认跟随S…...

编程日记 2025/3/6 1:41:29

【前端基础】1、HTML概述（HTML基本结构）

一、网页组成 HTML&#xff1a;网页的内容CSS&#xff1a;网页的样式JavaScript&#xff1a;网页的功能 二、HTML概述 HTML&#xff1a;全称为超文本标记语言&#xff0c;是一种标记语言。 超文本&#xff1a;文本、声音、图片、视频、表格、链接标记&#xff1a;由许许多多…...

编程日记 2025/3/6 1:40:28

小程序性能优化-预加载

在微信小程序中&#xff0c;数据预加载是提升用户体验的重要优化手段。以下是处理数据预加载的完整方案&#xff1a; 一、预加载的适用场景 跳转页面前的数据准备 如从列表页进入详情页前&#xff0c;提前加载详情数据首屏加载后的空闲时间 在首页加载完成后&#xff0c;预加载…...

编程日记 2025/3/6 1:39:27

（1）udp双向通信（2）udp实现文件复制（3）udp实现聊天室

一.udp双向通信 1.fork进程实现双向通信 【1】head.h 【2】client客户端 &#xff08;1&#xff09;父进程从键盘获取字符串 &#xff08;2&#xff09;输入quit&#xff0c;发送结束子进程信号 &#xff08;3&#xff09;exit退出父进程 &#xff08;1&#xff09;子进程接受…...

编程日记 2025/3/6 1:35:21

el-table 手动选择展示列

需求&#xff1a; 由于表格的列过多,用滚动条进行滚动对比数据不方便&#xff0c;所以提出&#xff0c;手动选择展示列 实现思路&#xff1a; 表格默认展示所有字段&#xff0c;每个字段通过 v-if 属性来进行判断是否显示&#xff1b;点击设置按钮图标(表格右上角&#xff0…...

编程日记 2025/3/6 1:34:20

零基础学习之——深度学习算法介绍01

第一节.基础骨干网络 物体分类是计算机视觉&#xff08;computer vision&#xff0c;CV&#xff09;中最经典的、也是目前研究得最为透彻的一 个领域&#xff0c;该领域的开创者也是深度学习领域的“名人”级别的人物&#xff0c;例如 Geoffrey Hinton、Yoshua Bengio 等。物…...

编程日记 2025/3/6 1:31:16

【开源项目】好用的开源项目记录（持续更新）

注意&#xff1a;在使用开源软件的时候&#xff0c;一定要注意代码中是否含有可疑代码&#xff0c;黑客代码&#xff0c;后门漏洞 1、爬虫工具 https://gitee.com/ssssssss-team/spider-flow 参考使用方式&#xff1a;https://blog.csdn.net/qq_42640067/article/details/12059…...

编程日记 2025/3/6 1:29:13

Django：文件上传时报错in a frame because it set ‘X-Frame-Options‘ to ‘deny‘.

即&#xff1a;使用Content-Security-Policy 1.安装Django CSP中间件&#xff1a; pip install django-csp 2.更改项目配置&#xff1a; # settings.py MIDDLEWARE [...csp.middleware.CSPMiddleware,... ]CSP_DEFAULT_SRC ("self",) CSP_FRAME_ANCESTORS (&q…...

编程日记 2025/3/6 1:26:10

Linux常用指令学习笔记

文章目录 前言一、文件和目录操作指令1. 文件操作2. 目录操作 二、文件权限管理三、网络相关指令四、系统管理指令五、文本编辑器基本操作 六、压缩和解压指令七、总结 前言 在当今的IT领域&#xff0c;Linux系统因其开源、稳定、安全等特性&#xff0c;广泛应用于服务器、个人…...

编程日记 2025/3/6 1:25:09

FastGPT 引申：基于 Python 版本实现 Java 版本 RRF

文章目录 FastGPT 引申&#xff1a;基于 Python 版本实现 Java 版本 RRF函数定义使用示例 FastGPT 引申&#xff1a;基于 Python 版本实现 Java 版本 RRF 函数定义 使用 Java 实现 RRF 相关的两个函数&#xff1a;合并结果、过滤结果 import java.util.*;// 搜索结果类型定义…...

编程日记 2025/3/6 1:24:08

面试八股文--数据库基础知识总结(3)MySQL优化

目录 1、慢查询 Q1&#xff1a;在mysql中如何定位慢查询&#xff1f; Q2&#xff1a;SQL语句执行很慢&#xff0c;如何分析&#xff1f; 2、索引 Q3&#xff1a;什么是索引&#xff1f; Q4&#xff1a;什么是聚簇索引和非聚簇索引&#xff1f; Q5&#xff1a;什么是回表查…...

编程日记 2025/3/6 1:23:07

汇编前置知识学习 第11-13天

今天要做什么&#xff1f; 1:虚拟机准备环境 2:virtualBox 创建虚拟硬盘&#xff0c;配置bochs文件启动 一&#xff1a; VMDK&#xff08;VMWare 虚拟机&#xff09; VDI&#xff08;VirtualBox虚拟机&#xff09; VHD&#xff08;virtual-PC/Hyper-V 虚拟机&#xff09;…...

编程日记 2025/3/6 1:22:05

springboot在业务层校验对象/集合中字段是否符合要求

springboot在业务层校验对象参数是否必填 1.场景说明2.代码实现 1.场景说明 为什么不在控制层使用Validated或者Valid注解直接进行校验呢&#xff1f;例如通过excel导入数据&#xff0c;将excel数据转为实体类集合后&#xff0c;校验集合中属性是否符合要求。 2.代码实现 定义…...

编程日记 2025/3/6 1:18:01

python二级考试中会考到的第三方库

在 Python 二级考试中，可能会涉及一些常用的第三方库。这些库可以帮助考生更好地理解和应用 Python 编程。以下是一些在 Python 二级考试中可能会用到的第三方库及其简要介绍：1. requests 用途：用于发送 HTTP 请求。安装：pip install requests示例代码：import requestsres…...

编程日记 2025/3/6 1:09:52

Linux中死锁问题的探讨

在 Linux 中&#xff0c;死锁&#xff08;Deadlock&#xff09; 是指多个进程或线程因为竞争资源而相互等待&#xff0c;导致所有相关进程或线程都无法继续执行的状态。死锁是一种严重的系统问题&#xff0c;会导致系统资源浪费&#xff0c;甚至系统崩溃。 死锁的定义 死锁是指…...

编程日记 2025/3/6 1:08:51

【实战 ES】实战 Elasticsearch：快速上手与深度实践-2.3.1 避免频繁更新（Update by Query的代价）

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 Elasticsearch数据更新与删除深度解析&#xff1a;2.3.1 避免频繁更新&#xff08;Update by Query的代价&#xff09;案例背景1. Update by Query的内部机制解析1.1 文档更…...

编程日记 2025/3/6 0:57:40

【Python项目】基于Python的书籍售卖系统

【Python项目】基于Python的书籍售卖系统 技术简介&#xff1a;采用Python技术、MYSQL数据库等实现。 系统简介&#xff1a;书籍售卖系统是一个基于B/S结构的在线图书销售平台&#xff0c;主要分为前台和后台两部分。前台系统功能模块分为&#xff08;1&#xff09;用户中心模…...

编程日记 2025/3/6 0:55:38

spring boot + vue 搭建环境

参考文档&#xff1a;https://blog.csdn.net/weixin_44215249/article/details/117376417?fromshareblogdetail&sharetypeblogdetail&sharerId117376417&sharereferPC&sharesourceqxpapt&sharefromfrom_link. spring boot vue 搭建环境 一、浏览器二、jd…...

编程日记 2025/3/6 0:54:37

Linux下的shell指令（一）

作业 1> 在终端提示输入一个成绩&#xff0c;通过shell判断该成绩的等级 [90,100] : A [80, 90) : B [70, 80) : C [60, 70) : D [0, 60) : 不及格 #!/bin/bash read -p "请输入学生成绩:" score if [ "$score" -ge 90 ] && [ "$scor…...

编程日记 2025/3/6 0:50:32

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/11/5 20:37:35

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/11/2 9:57:20

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/10/20 5:24:23

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/9/22 20:53:03

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/10/31 17:33:24

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2025/10/30 5:56:22

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2025/10/25 13:34:22

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/10/5 5:38:24