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


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需要先引入对应的库; 在使用 JQuery CDN 时,只需要在 HTML 文档中加入如下代码 <script src"https://code.jquery.com/jquery-3.7.1.min.js"></s…...
Springboot整合WebSocket+Redis以及微信小程序如何调用
一、 Springboot整合WebSocket 1. 引入socket依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency>引入依赖后需要刷新maven,Websocket的版本默认跟随S…...
【前端基础】1、HTML概述(HTML基本结构)
一、网页组成 HTML:网页的内容CSS:网页的样式JavaScript:网页的功能 二、HTML概述 HTML:全称为超文本标记语言,是一种标记语言。 超文本:文本、声音、图片、视频、表格、链接标记:由许许多多…...
小程序性能优化-预加载
在微信小程序中,数据预加载是提升用户体验的重要优化手段。以下是处理数据预加载的完整方案: 一、预加载的适用场景 跳转页面前的数据准备 如从列表页进入详情页前,提前加载详情数据首屏加载后的空闲时间 在首页加载完成后,预加载…...
(1)udp双向通信(2)udp实现文件复制(3)udp实现聊天室
一.udp双向通信 1.fork进程实现双向通信 【1】head.h 【2】client客户端 (1)父进程从键盘获取字符串 (2)输入quit,发送结束子进程信号 (3)exit退出父进程 (1)子进程接受…...
el-table 手动选择展示列
需求: 由于表格的列过多,用滚动条进行滚动对比数据不方便,所以提出,手动选择展示列 实现思路: 表格默认展示所有字段,每个字段通过 v-if 属性来进行判断是否显示;点击设置按钮图标(表格右上角࿰…...
零基础学习之——深度学习算法介绍01
第一节.基础骨干网络 物体分类是计算机视觉(computer vision,CV)中最经典的、也是目前研究得最为透彻的一 个领域,该领域的开创者也是深度学习领域的“名人”级别的人物,例如 Geoffrey Hinton、Yoshua Bengio 等。物…...
【开源项目】好用的开源项目记录(持续更新)
注意:在使用开源软件的时候,一定要注意代码中是否含有可疑代码,黑客代码,后门漏洞 1、爬虫工具 https://gitee.com/ssssssss-team/spider-flow 参考使用方式:https://blog.csdn.net/qq_42640067/article/details/12059…...
Django:文件上传时报错in a frame because it set ‘X-Frame-Options‘ to ‘deny‘.
即:使用Content-Security-Policy 1.安装Django CSP中间件: pip install django-csp 2.更改项目配置: # settings.py MIDDLEWARE [...csp.middleware.CSPMiddleware,... ]CSP_DEFAULT_SRC ("self",) CSP_FRAME_ANCESTORS (&q…...
Linux常用指令学习笔记
文章目录 前言一、文件和目录操作指令1. 文件操作2. 目录操作 二、文件权限管理三、网络相关指令四、系统管理指令五、文本编辑器基本操作 六、压缩和解压指令七、总结 前言 在当今的IT领域,Linux系统因其开源、稳定、安全等特性,广泛应用于服务器、个人…...
FastGPT 引申:基于 Python 版本实现 Java 版本 RRF
文章目录 FastGPT 引申:基于 Python 版本实现 Java 版本 RRF函数定义使用示例 FastGPT 引申:基于 Python 版本实现 Java 版本 RRF 函数定义 使用 Java 实现 RRF 相关的两个函数:合并结果、过滤结果 import java.util.*;// 搜索结果类型定义…...
面试八股文--数据库基础知识总结(3)MySQL优化
目录 1、慢查询 Q1:在mysql中如何定位慢查询? Q2:SQL语句执行很慢,如何分析? 2、索引 Q3:什么是索引? Q4:什么是聚簇索引和非聚簇索引? Q5:什么是回表查…...
汇编前置知识学习 第11-13天
今天要做什么? 1:虚拟机准备环境 2:virtualBox 创建虚拟硬盘,配置bochs文件启动 一: VMDK(VMWare 虚拟机) VDI(VirtualBox虚拟机) VHD(virtual-PC/Hyper-V 虚拟机)…...
springboot在业务层校验对象/集合中字段是否符合要求
springboot在业务层校验对象参数是否必填 1.场景说明2.代码实现 1.场景说明 为什么不在控制层使用Validated或者Valid注解直接进行校验呢?例如通过excel导入数据,将excel数据转为实体类集合后,校验集合中属性是否符合要求。 2.代码实现 定义…...
python二级考试中会考到的第三方库
在 Python 二级考试中,可能会涉及一些常用的第三方库。这些库可以帮助考生更好地理解和应用 Python 编程。以下是一些在 Python 二级考试中可能会用到的第三方库及其简要介绍:1. requests 用途:用于发送 HTTP 请求。安装:pip install requests示例代码:import requestsres…...
Linux中死锁问题的探讨
在 Linux 中,死锁(Deadlock) 是指多个进程或线程因为竞争资源而相互等待,导致所有相关进程或线程都无法继续执行的状态。死锁是一种严重的系统问题,会导致系统资源浪费,甚至系统崩溃。 死锁的定义 死锁是指…...
【实战 ES】实战 Elasticsearch:快速上手与深度实践-2.3.1 避免频繁更新(Update by Query的代价)
👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 Elasticsearch数据更新与删除深度解析:2.3.1 避免频繁更新(Update by Query的代价)案例背景1. Update by Query的内部机制解析1.1 文档更…...
【Python项目】基于Python的书籍售卖系统
【Python项目】基于Python的书籍售卖系统 技术简介:采用Python技术、MYSQL数据库等实现。 系统简介:书籍售卖系统是一个基于B/S结构的在线图书销售平台,主要分为前台和后台两部分。前台系统功能模块分为(1)用户中心模…...
spring boot + vue 搭建环境
参考文档:https://blog.csdn.net/weixin_44215249/article/details/117376417?fromshareblogdetail&sharetypeblogdetail&sharerId117376417&sharereferPC&sharesourceqxpapt&sharefromfrom_link. spring boot vue 搭建环境 一、浏览器二、jd…...
Linux下的shell指令(一)
作业 1> 在终端提示输入一个成绩,通过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…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...







