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

ops/2025/3/5 14:14:29/

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

JQuery


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


1. 引入依赖


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

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

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

参考地址: https://releases.html" title=jquery>jquery.com/

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

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

在这里插入图片描述


在这里插入图片描述

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

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

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

下载方式:

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

在这里插入图片描述


  • 右键uncompressedminified 版本,在新的标签页中打开:

在这里插入图片描述


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

在这里插入图片描述


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

在这里插入图片描述


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

在这里插入图片描述


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

在这里插入图片描述


修改链接:

在这里插入图片描述


2. JQuery 语法


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

基础语法

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)


在这里插入图片描述

在这里插入图片描述


http://www.ppmy.cn/ops/163323.html

相关文章

0304作业

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

现今大语言模型性能(准确率)比较

现今大语言模型性能(准确率)比较 表头信息:表的标题为“大语言模型性能比较结果”(英文:Table 1: Large Language Model Performance Comparison Results),表明该表是用于对比不同大语言模型的性能。列信息: 模型:列出参与比较的不同大语言模型名称,包括LLAMA3(70B)…

网络安全有必要学编程吗?

当下编程已经成为一种必备技能&#xff0c;尤其是在数字化和科技快速发展的时代&#xff0c;掌握编程技能对我们的职业发展有着重要的作用&#xff0c;那么网络安全需要学编程吗?这也是很多小伙伴关心的问题&#xff0c;我们来看看吧。 需要&#xff0c;网络安全需要学习编程。…

Spring Boot 监听器(Listeners)详细教程

Spring Boot 监听器&#xff08;Listeners&#xff09;详细教程 目录 Spring Boot 监听器概述监听器核心概念最佳使用场景实现步骤高级配置详细使用场景总结 1. Spring Boot 监听器概述 Spring Boot 监听器&#xff08;Listeners&#xff09;基于 Spring Framework 的事件机制…

Mac远程桌面软件哪个好用?

远程桌面软件能帮助我们快速的远程控制另一台电脑&#xff0c;从而提供远程帮助&#xff0c;或者进行远程办公。那么&#xff0c;对macOS系统有什么好用的Mac远程桌面软件呢&#xff1f; 远程看看是一款操作简单、界面简洁的远程桌面软件&#xff0c;支持跨平台操作&#xff0…

2025年03月04日Github流行趋势

项目名称&#xff1a;ladybird 项目地址url&#xff1a;https://github.com/LadybirdBrowser/ladybird项目语言&#xff1a;C历史star数&#xff1a;33403今日star数&#xff1a;1726项目维护者&#xff1a;awesomekling, trflynn89, linusg, AtkinsSJ, alimpfard项目简介&…

P10904 [蓝桥杯 2024 省 C] 挖矿

P10904 [蓝桥杯 2024 省 C] 挖矿 题目描述 小蓝正在数轴上挖矿&#xff0c;数轴上一共有 n n n 个矿洞&#xff0c;第 i i i 个矿洞的坐标为 a i a_i ai​。小蓝从 0 0 0 出发&#xff0c;每次可以向左或向右移动 1 1 1 的距离&#xff0c;当路过一个矿洞时&#xff0c;…