【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…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发,旨在打造一个互动性强的购物平台,让用户在购物的同时,能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机,实现旋转、抽拉等动作,增…...