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

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

news 2026/5/20 1:34:15

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

别再只把JTAG当烧录器了！一文搞懂它的边界扫描（Boundary-Scan）到底怎么玩

解锁JTAG边界扫描的隐藏技能&#xff1a;从烧录到硬件诊断的全能玩法 在嵌入式开发领域&#xff0c;JTAG接口常被简化为"烧录工具"的代名词——这种认知偏差让我们错失了它最强大的能力。想象一下&#xff1a;当PCB上某个关键信号无法测量时&#xff0c;当BGA封装的芯…...

编程新知 2026/5/19 23:22:46

如何构建高效科研知识库：Obsidian文献管理系统的3种创新策略

如何构建高效科研知识库&#xff1a;Obsidian文献管理系统的3种创新策略 【免费下载链接】obsidian_vault_template_for_researcher This is an vault template for researchers using obsidian. 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian_vault_template_for_r…...

编程新知 2026/5/19 17:52:43

Windows安卓应用安装器：5步实现电脑直接运行APK应用

Windows安卓应用安装器&#xff1a;5步实现电脑直接运行APK应用 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾想过&#xff0c;如果能在Windows电脑上直接运…...

编程新知 2026/5/19 17:07:50

别再被Windows权限卡脖子！用`--user`参数搞定pip安装报错（附详细排查步骤）

彻底解决Windows下Python包安装权限问题&#xff1a;从--user参数到环境配置全攻略 在Windows系统上进行Python开发时&#xff0c;许多开发者都曾遭遇过这样的尴尬时刻&#xff1a;当你满怀期待地输入pip install package_name准备安装一个新工具时&#xff0c;屏幕上却突然跳出…...

编程新知 2026/5/19 16:30:45

在数字记忆成为个人财富的时代，如何让微信对话成为永恒珍藏？

在数字记忆成为个人财富的时代&#xff0c;如何让微信对话成为永恒珍藏&#xff1f; 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_…...

编程新知 2026/5/19 16:20:10

保姆级教程 | Gaussian优化后的能量值

背景Gaussian优化后会获得很多能量&#xff0c;应该如何区别这些能量的差异性步骤1. 电子能&#xff08;纯 SCF 能量&#xff0c;无热修正&#xff09;&#xff1a;单点能、对比电子结构、不加热效应grep Done 文件名.log这是纯电子能量&#xff0c;只包含电子结构&#xff0c;…...

编程新知 2026/5/19 15:47:01

为你的Hermes Agent项目配置Taotoken作为自定义模型提供商

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为你的Hermes Agent项目配置Taotoken作为自定义模型提供商 应用场景类&#xff0c;假设你正在使用Hermes Agent框架并希望接入更多…...

编程新知 2026/5/19 15:09:53

软件测试中的bug管理：高效定位、跟踪与修复全流程解析

在软件测试全生命周期中&#xff0c;bug管理是保障产品质量、提升开发效率的核心环节。从bug的精准定位到全流程跟踪&#xff0c;再到最终的有效修复&#xff0c;每一个步骤都需要专业的方法、工具与团队协作。对于软件测试从业者而言&#xff0c;掌握科学的bug管理体系&#x…...

编程新知 2026/5/19 14:56:56

Godot-MCP终极指南：如何用AI助手5倍提升Godot游戏开发效率

Godot-MCP终极指南&#xff1a;如何用AI助手5倍提升Godot游戏开发效率 【免费下载链接】Godot-MCP An MCP for Godot that lets you create and edit games in the Godot game engine with tools like Claude 项目地址: https://gitcode.com/gh_mirrors/god/Godot-MCP 在…...

编程新知 2026/5/19 14:38:11

ComfyUI Segment Anything：零门槛实现智能图像分割的完整指南

ComfyUI Segment Anything&#xff1a;零门槛实现智能图像分割的完整指南 【免费下载链接】comfyui_segment_anything Based on GroundingDino and SAM, use semantic strings to segment any element in an image. The comfyui version of sd-webui-segment-anything. 项目地…...

编程新知 2026/5/19 14:31:43