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

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

news 2026/2/9 15:53:07

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2026/1/31 12:52:04

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2026/1/20 17:18:59

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/9/19 5:31:38

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究

摘要&#xff1a;在消费市场竞争日益激烈的当下&#xff0c;传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序&#xff0c;探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式&#xff0c;分析沉浸式体验的优势与价值…...

编程新知 2026/2/2 21:52:42

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

编程新知 2026/1/23 1:08:01