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

JavaScript库：jQuery,简化编程

news 2026/2/7 15:01:34

1. jQuery介绍

官方网站 : https://jquery.com

jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程，例如 JS 原生代码几十行实现的功

能， jQuery 可能一两行就可以实现，因此得到前端程序猿广泛应用。

发展至今，主要有三个大版本 :

1.x:常用版本
2.x，3.x:除非特殊要求，一般用的少

现在都使用vue这些，这些框架其实就是帮你操作了dom元素，不需要你去关心对dom元素的操作了。

你只需要去关心这个页面长什么样，写一些，组件库也给你封装了。再发发请求获取数据，渲染到里面就行了。

2. 基本使用

cdn 导入方式

<head><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
</head><body><script type="text/javascript">// jquery代码</script>
</body>

基础语法是 :$(selector).action()

$: 代表 jQuery 本身

(selector): 选择器，查找 HTML 元素

action(): 对元素的操作

这边定义了两个button，第一个给js使用的，第二个个jQuery使用的。js使用还需要获取其dom元素然后再去.click，再给其匿名函数去实现。

jQuery就直接$符号，将其选择器添进来，直接再来.click完事，最后将方法传进去。这样看起来简便不少。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>文档的标题</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body><button type="button" id="btn1">点我1</button><button type="button" id="btn2">点我2</button><script type="text/javascript">// js实现var x = document.getElementById("btn1")x.onclick = function () {alert('亲，有什么可以帮助你的? js')}// jquery实现$("#btn2").click(function () {alert('亲，有什么可以帮助你的?jquery')})       </script>
</body>
</html>

3. 选择器

选择器介绍

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>文档的标题</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body><h2>在HTML中如何使用jQuery</h2><button class="btn">点击</button><button id="btn">点击</button><script type="text/javascript">// 标签选择器$("h2").click(function(){alert("你好标签")}) //类选择器$(".btn").click(function(){alert("你好，类")})//id选择器$("#btn").click(function() {alert("你好,id")})</script></body>
</html>

4. 操作HTML

隐藏和显示元素:

hide() :隐藏某个元素
show() :显示某个元素
toggle() :hide()和show()方法之间切换

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>文档的标题</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body><p id="demo">这是一个段落。</p><button id="hide" type="button">隐藏</button><button id="show" type="button">显示</button><button id="toggle" type="button">切换</button><script type="text/javascript">$("#hide").click(function () {$("p").hide();})$("#show").click(function () {$("p").show();})$("#toggle").click(function () {$("p").toggle();})</script></body>
</html>

获取与设置内容 :

text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的HTML内容
val() 设置或返回表单字段的值

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>文档的标题</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body><p id="txt">这是一个<b>段落</b>。</p><button type="button" id="btn1">显示文本</button><button type="button" id="btn2">显示HTML</button><p id="demo"></p><script type="text/javascript">$("#btn1").click(function () {x = $("#txt").text();console.log(x)$("#demo").text(x).css("color","red") //不会解析b标签，只会获取内容})$("#btn2").click(function () {x = $("#txt").html(); //获取console.log(x)$("#demo").html(x).css("color","red") //会解析b标签，.html()设置})</script></body>
</html>

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>文档的标题</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body><h1>欢迎访问运维管理系统</h1>用户名:<input type="text" id="uname" name="username"><br>密码:<input type="text" id="pwd" name="password"><br><button type="button" id="btn">显示输入内容</button><p id="demo"></p><script type="text/javascript">$("#btn").click(function () {x = $("#uname").val();y = $("#pwd").val();$("#demo").text(x + '，' + y).css("color","red")})</script></body>
</html>

设置 CSS 样式 :

css() 设置或返回样式属性 ( 键值 )

addClass() 向被选元素添加一个或多个类样式

removeClass() 从被选元素中删除一个或多个类样式

toggleClass() 对被选元素进行添加 / 删除类样式的切换操作

代码示例

后面学到组件库的时候，它其实是帮你封装好好的组件，比如form表单组件和table组件，它的样式其实也是通过底层的这种方式去实现的，它全部帮你封装好了。

JavaScript库：jQuery,简化编程

1. jQuery介绍官方网站 : https://jquery.com jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程，例如 JS 原生代码几十行实现的功能， jQuery 可能一两行就可以实现，因此得到前端程序猿广泛应用。发展至今&#xff0…...

编程日记 2023/6/10 14:24:46

[springboot]菜鸟学习- JdbcTemplate用法浅尝

JdbcTemplate 是 Spring Framework 提供的一个非常强大的 JDBC 工具类，它可以显著简化 JDBC 编程的代码量，并提供了许多便捷的方法来执行 SQL 查询、更新等操作。使用 JdbcTemplate 的步骤如下： 1. 创建 JdbcTemplate 对象：可以…...

编程日记 2023/6/10 14:19:46

11.无监督学习之主成分分析

11.1 降维降维的两种应用：一是数据压缩；二是可视化数据。 11.1.1 数据压缩将相关性强的两个特征导致冗余，可以直接去掉其中一个特征，或者将两个特征进行某种转换，得到一个特征。 11.1.2 可视化数据直接看数据可…...

编程日记 2023/6/10 14:14:44

「HTML和CSS入门指南」figcaption 标签详解

什么是 figcaption 标签？在 HTML 中，figcaption 标签用于为与 figure 元素相关的媒体内容提供说明性文本。通常用于包含图像、音频或视频等媒体元素的说明文本。 figcaption 标签的基本语法以下是 figcaption 标签的基本语法： <figure><!-- 在这里放置您的媒体…...

编程日记 2023/6/10 14:09:43

电子企业实施数字化工厂建设之前，需要注意哪些

随着工业4.0时代的到来，数字化工厂建设已成为越来越多电子企业的重要议题。数字化工厂管理系统能够提高生产效率、降低成本、提高产品质量等多个方面的优势，对于企业的可持续发展具有重要意义。然而，在实施电子企业数字化工厂建设之前&#x…...

编程日记 2023/6/10 14:04:42

迅捷pdf实现多页插入

之前我们使用福昕阅读器实现了在每一页插入logo 这里我们用迅捷pdf再来一次，别问，问就是公司买了会员首先声明，这里已经有会员了，所以不知道别人操作是不是需要会员，担心的话可以看看上一篇福昕阅读器版本打开编辑…...

编程日记 2023/6/10 13:59:41

调用阿里云API实现证件照生成

目录 1. 作者介绍2. 算法介绍2.1 阿里云介绍2.2 证件照生成背景2.3 图像分割算法 3.调用阿里云API进行证件照生成实例3.1 准备工作3.2 实验代码3.3 实验结果与分析参考（可供参考的链接和引用文献） 1. 作者介绍王逸腾，男，西安工…...

编程日记 2023/6/10 13:54:40

PHP 转换 excel中读取的时间

首先，我们需要知道PHPExcel的时间和日期格式是以Excel内部的“1900年1月1日”为基础，以天为单位来计算的。即Excel日期与PHP时间戳之间存在一个时间偏移量。通过查阅PHPExcel的官方文档，我们可以得到以下的计算公式： // 读取exce…...

编程日记 2023/6/10 13:49:39

Cmake工具的简单使用

引言本篇文章讲述如何简单的使用cmake工具构建一个项目，帮助入门的c新手学会如何使用cmake. 我们在Clion新创建一个项目时，会发现，除了main.cpp文件之外，还存在一个build-debug目录和一个CMakelists.txt文件，如图: …...

编程日记 2023/6/10 13:44:38

html选择器

基本选择器基本选择器 : 标签选择器 , 类选择器 , ID选择器标签选择器代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEed…...

编程日记 2023/6/10 13:39:37

Leetcode 剑指 Offer II 030. 插入、删除和随机访问都是 O(1) 的容器

题目难度: 中等原题链接今天继续更新 Leetcode 的剑指 Offer（专项突击版）系列, 大家在公众号算法精选里回复剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述设计一个支持在平均时间复杂度 O(1) 下，执行以下操作…...

编程日记 2023/6/10 13:34:35

django实现读取数据导出生成excel表格

目录一、简单示例： 1.创建文件对象： 2.添加工作表： 3.写入数据： 二、实践出真理需要先安装xlwt模块 pip install -i https://pypi.douban.com/simple xlwt一、简单示例： import xlwt# 创建一个Excel文件对象 …...

编程日记 2023/6/10 13:29:34

DevOps系列文章之 Docker-compose

一，Docker-compose全集 1，Docker-compose简介 Docker-Compose项目是Docker官方的开源项目，负责实现对Docker容器集群的快速编排。 Docker-Compose将所管理的容器分为三层，分别是工程（project）&#xff0c…...

编程日记 2023/6/10 13:24:34

Vue Router入门：轻松构建单页应用程序

Vue.js是一种流行的前端JavaScript框架，可以让开发人员轻松构建动态用户界面。Vue.js的一个关键特性是其路由系统，它使得开发人员可以轻松创建具有多个视图和页面的单页应用程序（SPA）。在本文中，我们将探讨如何使用Vue Router在Vue.js中构建SPA。我们将介绍如何安装和配置…...

编程日记 2023/6/10 13:19:32

ITSM 如何帮助制造业企业

ITSM在现代制造业中的作用在过去的几年中，制造业已经看到了快速的数字化，以智能制造技术改进生产技术。在工业4.0和工业5.0的推动下，制造商正在摆脱陈旧以及利用物联网、人工智能、机器学习和大数据等先进技术的互联智能制造系统&#xff…...

编程日记 2023/6/10 13:14:31

leecode20，有效的括号，栈 class Solution:def isValid(self, s: str) -> bool:def check(ch1,ch2):if ch1 [ and ch2 ]:return Trueelif ch1 ( and ch2 ):return Trueelif ch1 { and ch2 }:return Trueelse:return Falsestack []for i in ran…...

编程日记 2023/6/10 13:09:30

2023-06-09 LeetCode每日一题（修改图中的边权）＜未来补全＞

2023-06-09每日一题一、题目编号 2699. 修改图中的边权二、题目链接点击跳转到题目位置三、题目描述给你一个 n 个节点的无向带权连通图，节点编号为 0 到 n - 1 ，再给你一个整数数组 edges ，其中 edges[i] [ai, bi, wi] 表示节点…...

编程日记 2023/6/10 13:04:29

Linux 应用程序信号量使用实战

背景在项目实施过程中，有个机制需要做两个线程之间的同步。具体需求如下： 首先，线程1需要把资源读取到缓存其次，线程2才可以操作这块缓存上述两个动作顺序交替重复。思路使用信号量解决思路，申请两个信号…...

编程日记 2023/6/10 12:59:28

【Java多线程进阶】synchronized工作原理

前言本期讲解 synchronized 工作的原理以及常见的锁优化机制，相信大家在看完这篇博文后对 synchronized 工作流程有一定的理解。话不多说，让我们快速进入学习吧~ 目录 1. 锁的工作流程 2. 偏向锁 3. 轻量级锁和重量级锁 3.1 轻量级锁 3.2 重量级锁…...

编程日记 2023/6/10 12:54:27

C语言经典题目(三)

C站的小伙伴们，大家好呀！😊😊✨✨这一篇是C语言之经典题目篇，除程序设计，还有一些不错的程序分析，快来和我一起进入C语言的世界吧！✨✨✨ 💕C语言其他刷题篇在这里哦&…...

编程日记 2023/6/10 12:49:26

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目章节操作，重…...

编程新知 2026/2/5 3:29:08

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程新知 2026/2/3 7:43:45

PHP和Node.js哪个更爽?

先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...

编程新知 2025/9/14 7:59:52

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。二、服务端模块设计目标高内聚低耦合：各模块职责清晰，便于独立开发…...

编程新知 2025/10/13 4:15:41

稳定币的深度剖析与展望

一、引言在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...

编程新知 2025/10/24 12:31:26

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2026/1/28 1:40:03

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2026/1/31 4:37:53

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空但是，要注意以下几点： Django的表单验证与null无关：null参数控制的是数据库层面字段是否可以为NULL，而blank参数控制的是Django表单验证时字…...

编程新知 2025/7/7 3:34:13

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008：是version产品的大版本。 R006：是release产品特性版本。 C009：是通用版 B0014：是build开发过程中的构建版本2.硬件要求 #安全版和企业版内存：1GB 以上硬盘&#xf…...

编程新知 2026/1/1 12:32:33

篇章二论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

编程新知 2026/2/5 5:58:30

1. jQuery介绍

2. 基本使用

3. 选择器

4. 操作HTML

相关文章：