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

JavaScript库：jQuery,简化编程

news 2025/9/10 3:02:05

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

React第五十七节 Router中RouterProvider使用详解及注意事项

前言在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...

编程新知 2025/9/9 10:11:43

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/9/9 14:49:22

GitHub 趋势日报 (2025年06月08日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/7/29 21:54:16

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...

编程新知 2025/7/31 23:29:01

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。效果对比默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...

编程新知 2025/6/20 15:09:15

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列文章目录前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量：setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/9/3 18:06:27

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇：Apollo Client 配置与缓存上一篇：GraphQL 入门篇：基础查询语法依旧和上一篇的笔记一样，主实操，没啥过多的细节讲解，代码具体在： https://github.com/GoldenaArcher/graphql…...

编程新知 2025/9/7 8:47:06

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、介绍使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下，音视频内容犹如璀璨繁星，点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频，到在线课堂中知识渊博的专家授课，再到影视平台上扣人心弦的高清大片，音…...

编程新知 2025/9/2 16:49:55

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景随着水产养殖行业的快速发展，养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下，而且难以实现精准监控和管理。为了提升尾水处理的效果和效率，同时降低人力成本，某大型水产养殖企业决定…...

编程新知 2025/9/4 16:30:43

动态规划-1035.不相交的线-力扣(LeetCode)

一、题目解析光看题目要求和例图，感觉这题好麻烦，直线不能相交啊，每个数字只属于一条连线啊等等，但我们结合题目所给的信息和例图的内容，这不就是最长公共子序列吗？，我们把最长公共子序列连线起…...

编程新知 2025/9/5 17:32:50

1. jQuery介绍

2. 基本使用

3. 选择器

4. 操作HTML

相关文章：