JQuery的基本使用

jQuery 是一个快速、小巧且功能强大的 JavaScript 库,它使得 HTML 文档的遍历和操作、事件处理、动画和 Ajax 交互变得简单。以下是 jQuery 的基本使用,包括常见的操作和示例。

1. 引入 jQuery

在使用 jQuery 之前,您需要将其引入到您的 HTML 文件中。可以通过 CDN 引入:

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

2. 基本语法

jQuery 的基本语法是使用 $() 函数。这个函数用于选择 HTML 元素,并且可以链式调用 jQuery 方法。

$(selector).action();

3. 常用操作示例

选择器

jQuery 提供了强大的选择器,可以选择单个或多个元素。

// 选择 ID 为 "myId" 的元素
$("#myId");// 选择类为 "myClass" 的所有元素
$(".myClass");// 选择所有的 <p> 元素
$("p");
修改内容

使用 .text().html() 方法修改元素的内容。

// 修改文本内容
$("#myId").text("新的文本");// 修改 HTML 内容
$(".myClass").html("<strong>新的HTML内容</strong>");
修改样式

使用 .css() 方法修改元素的 CSS 样式。

// 修改元素的颜色和字体大小
$("#myId").css({"color": "red","font-size": "20px"
});
添加和删除元素

使用 .append().prepend().remove() 等方法添加或删除元素。

// 在元素末尾添加内容
$("#myDiv").append("<p>新段落</p");// 在元素开头添加内容
$("#myDiv").prepend("<p>新段落</p");// 删除元素
$(".myClass").remove();
事件处理

使用 .on() 方法绑定事件。

// 点击事件
$("#myButton").on("click", function() {alert("按钮被点击了!");
});
Ajax 请求

使用 .ajax() 方法进行 Ajax 请求。

$.ajax({url: "https://api.example.com/data",type: "GET",success: function(data) {console.log(data);},error: function(xhr, status, error) {console.error("请求失败: " + error);}
});

4. 示例代码

以下是一个完整的 HTML 示例,展示了 jQuery 的基本使用:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery 基本使用</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#myDiv {border: 1px solid #ccc;padding: 20px;margin: 10px 0;}</style>
</head>
<body><h1>jQuery 示例</h1><div id="myDiv">这是一个 div 元素。</div><button id="myButton">点击我</button><script>$(document).ready(function() {// 修改 div 内容$("#myDiv").text("内容已被修改!");// 点击按钮$("#myButton").on("click", function() {alert("按钮被点击了!");// 修改样式$("#myDiv").css("background-color", "lightblue");});});</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/56279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux:Ubuntu系统开启SSH服务

在Ubuntu上开启SSH服务&#xff0c;可以按照以下步骤进行&#xff1a; 1.安装OpenSSH服务 如果你还没有安装OpenSSH服务&#xff0c;可以使用以下命令安装&#xff1a; sudo apt update sudo apt install openssh-server2. 启动SSH服务 安装完成后&#xff0c;启动SSH服务&a…

QT应用中的字符编码处理

文章目录 各种编码介绍获取编码列表通过特定编码解析内容特定编码保存文件编码转换设置默认编码在Qt中字符编码问题是一个重要的主题,因为Qt是一个跨平台的框架,涉及到不同操作系统和字符集的兼容性。Qt提供了多种方式来处理字符串和字符编码,确保应用程序能够正确处理和显示…

Docker在linux系统中的下载与使用

Docker在linux系统中的下载与使用 一、docker作用,下载及安装二、docker镜像三、创建容器四、容器数据卷 一、docker作用,下载及安装 ubuntu下载安装docker 命令&#xff1a;在ubuntu上面执行这个命令 Docker version:查看docker是否安装成功 配置阿里云镜像加速:进入阿里云网站…

【WEB应用安全测试指南–蓝队安全测试2】--超详细-可直接进行实战!!!亲测-可进行安全及渗透测试

安全基础理论入门知识参考上一篇《WEB应用安全测试指南蓝队安全测试1》 WEB应用安全测试指南2 一、文件 I/O 类1.1、任意文件上传1.2、任意文件下载1.3、文件包含 二、接口安全类2.1、短信炸弹2.2、邮件炸弹2.3、短信内容可控2.4、邮件内容可控 三、逻辑流程类3.1、越权3.2、未…

k8s部署jenkins集群,配置集群kubernetes plugin的pod模板

先安装jenkins插件&#xff0c;对应的源码地址是kubernetes-plugin&#xff0c;以供参考。 进入节点管理&#xff0c;开始配置。 点击 “ configure clouds” 一、配置集群 填写k8s地址&#xff1a;https://kubernetes.default.svc.cluster.local 命名空间&#xff1a;kuberne…

Redis高并发缓存设计问题与性能优化

1、缓存设计典型问题 1.1、缓存穿透 缓存穿透是指查询一个根本不存在的数据&#xff0c;缓存层和存储层都不会命中&#xff0c;通常出于容错的考虑&#xff0c;如果从存储层查不到数据则不写入缓存层。 缓存穿透将导致不存在的数据每次请求都要到存储层去查询&#xff0c;失…

【Python】从零到一,搭建高效Web服务器,轻松上手!Python开发者必备(文末附带源码分享)

CSDN Python源码分享&#xff1a;实现一个简单的Web服务器 在CSDN上&#xff0c;我们经常分享各种技术文章和源码&#xff0c;帮助开发者们不断提升自己的技能。今天&#xff0c;我将为大家分享一个使用Python实现的简单Web服务器源码。这个Web服务器能够处理基本的HTTP GET请…

打破常规,BD仓储物流的效能提升!

当前&#xff0c;随着国家战略的推进&#xff0c;JS与民用领域的融合不断加深&#xff0c;物流业也步入了军民融合的新时代。在智能仓储物流方面&#xff0c;JS物流的智能化进展受到了BD系统的高度关注和重视。 一、建设JS仓储物流RFID基础设施 JS物流领域引入RFID技术的基础工…

Jenkins 改成中文语言显示

Jenkins 改成中文语言显示 到系统管理 插件管理中下载如下插件接口 Localization: Chinese (Simplified) 搜索的时候用ctrlf 进行搜索&#xff0c;不要用Jenkins下面下的filter 只有&#xff0c;到系统管理Manage Jenkins下的Config System下&#xff0c;如下截图的位置去…

动态规划算法:14.简单多状态 dp 问题_粉刷房子_C++

题目链接&#xff1a;LCR 091. 粉刷房子 - 力扣&#xff08;LeetCode&#xff09; 一、题目解析 题目&#xff1a; 解析&#xff1a; 由题可知&#xff1a; 涂刷房子有三种颜色可以选&#xff0c;所给的二维数组中三列固定不变&#xff0c;分别是红、蓝、绿相邻两件房子不可…

C++基础面试题 | 什么是内存对齐?为什么需要内存对齐?

文章目录 回答重点扩展知识 回答重点 内存对齐是指计算机在访问内存时&#xff0c;会根据一定规则将数据存储在合适的起始地址上&#xff0c;通常是数据大小的整数倍。这样做可以提升CPU的访问效率&#xff0c;特别是在读取和写入数据时。 为什么要内存对齐&#xff1f;主要有…

无极低码课程【mysql windows下安装要点】

在Windows环境中安装MySQL 5.7教程 MySQL 是世界上最流行的开源关系型数据库管理系统之一。本教程将指导您在Windows操作系统上安装MySQL 5.7。 网上教程较多&#xff0c;这里不再详述&#xff0c;注意关键点即可 准备工作 下载MySQL 5.7安装包 访问 MySQL官方网站 下载MyS…

【Java面试——基础知识——Day2】

1.面向对象基础 1.1 面向对象和面向过程的区别 面向过程编程&#xff08;POP&#xff09;&#xff1a;面向过程把解决问题的过程拆成一个个方法&#xff0c;通过一个个方法的执行解决问题。面向对象编程&#xff08;OOP&#xff09;&#xff1a;面向对象会先抽象出对象&#…

并查集---We Are A Team

题目描述 总共有 n 个人在机房&#xff0c;每个人有一个标号&#xff08;1<标号<n&#xff09;&#xff0c;他们分成了多个团队&#xff0c;需要你根据收到的 m 条消息判定指定的两个人是否在一个团队中&#xff0c;具体的&#xff1a; 消息构成为 a b c&#xff0c;整数…

使用React Router实现前端的权限访问控制

前段时间学习了React Router&#xff0c;发现没有Vue里面的路由功能强大&#xff0c;没有直接提供路由中间件&#xff0c;不能像Vue里面一样在路由配置上设置任意的额外属性&#xff0c;但是可以通过一些技巧来实现这些功能。 1、配置菜单 后台管理系统一般都会在左侧显示菜单…

“链动2+1+消费增值:用户留存新策略“

大家好&#xff0c;我是吴军&#xff0c;目前在一家以创新为核心的软件开发公司担任产品经理。今天&#xff0c;我将深入探讨一个经受住了时间考验且依然充满活力的商业模式——“链动21”模式&#xff0c;并通过一个实例及相关数据展示它如何巧妙应对用户留存与复购的挑战。 首…

【JS】在 Node.js 和 Electron 中获取设备 UUID 的最佳实践

在现代应用开发中&#xff0c;识别设备的唯一性是一个常见需求。无论是为了授权、数据跟踪还是用户设备管理&#xff0c;获取设备 UUID 都是实现这些目标的关键。在这篇博客中&#xff0c;我们将探讨如何在 Node.js 和 Electron 中获取设备的 UUID&#xff0c;并比较两种主要方…

vllm 部署GLM4模型进行 Zero-Shot 文本分类实验,让大模型给出分类原因,准确率可提高6%

简介 本文记录了使用 vllm 部署 GLM4-9B-Chat 模型进行 Zero-Shot 文本分类的实验过程与结果。通过对 AG_News 数据集的测试&#xff0c;研究发现大模型在直接进行分类时的准确率为 77%。然而&#xff0c;让模型给出分类原因描述&#xff08;reason&#xff09;后&#xff0c;…

HarmonyOS应用六之应用程序进阶二

目录&#xff1a; 一、进度条通知二、闹钟提醒2.1、在module.json5配置文件中开启权限2.2、导入后台代理提醒reminderAgentManager模块&#xff0c;将此模块命名为reminderAgentManager2.3、如果是新增提醒&#xff0c;实现步骤如下&#xff1a; 3、Native C交互4、第三方库的基…

使用IDEA和vecode创建vue项目并启动

一、使用IDEA创建Vue项目 一、打开IDEA下载Vue插件 打开IDEA的设置找到插件并查找到下载Vue.js这个插件 二、用IDEA创建Vue项目 新建项目并选择到Vue生成器 我这是IDEA自带的 创建项目非常迅速 端口号&#xff08;默认&#xff09;&#xff1a;5173 版本是3.x 启动项目…