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

JavaScript库：jQuery,简化编程

news 2026/5/11 11:48:50

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

告别虚拟机臃肿：用QEMU用户模式（qemu-user）快速运行跨架构程序的完整指南

告别虚拟机臃肿：用QEMU用户模式（qemu-user）快速运行跨架构程序的完整指南在开发跨平台应用或研究嵌入式系统时，开发者经常需要处理不同CPU架构的二进制文件。传统解决方案是启动完整的虚拟机，但这会消耗大量系统资源&…...

编程新知 2026/5/11 11:46:49

DDrawCompat完整教程：Windows 11上经典游戏DirectDraw兼容性修复终极指南

DDrawCompat完整教程：Windows 11上经典游戏DirectDraw兼容性修复终极指南【免费下载链接】DDrawCompat DirectDraw and Direct3D 1-7 compatibility, performance and visual enhancements for Windows Vista, 7, 8, 10 and 11 项目地址: https://gitcode.com/gh…...

编程新知 2026/5/11 11:25:36

别再到处找激活码了！手把手教你用vlmcsd在Windows Server上自建KMS服务器（附全版本密钥）

企业级Windows系统激活解决方案：私有化部署KMS服务实战指南在IT基础设施管理中，系统激活常常被忽视却至关重要。想象一下这样的场景：当50台办公电脑同时弹出激活警告，或新采购的服务器因未激活导致功能受限时，传统的人…...

编程新知 2026/5/11 11:03:59

设计专利实战指南：从概念到风险防控，硬件工程师必读

1. 从“喷气式冲浪板”看设计专利的迷思与实战那天在翻看一些老旧的行业资料时，我又看到了那篇经典的“What were they thinking: Jet powered surfboard”。每次看到这个标题和那张滑稽的专利图，都让我忍不住会心一笑。一张图纸，寥寥数语&am…...

编程新知 2026/5/11 10:54:24

重新定义下载体验：ctfileGet城通网盘高速下载完整指南

重新定义下载体验：ctfileGet城通网盘高速下载完整指南【免费下载链接】ctfileGet 获取城通网盘一次性直连地址项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 你是否曾经面对城通网盘几十KB/s的下载速度感到绝望？当急需一个大文件时&a…...

编程新知 2026/5/11 9:00:15

AI原生运维体系必须跨越的3道生死线：数据治理、模型可观测性、人机协同SLA（SITS 2026闭门研讨纪要）

更多请点击： https://intelliparadigm.com 第一章：AI原生运维体系构建：SITS 2026智能运维专场精华 AI原生运维（AIOps Native）已从概念验证迈入生产就绪阶段。SITS 2026智能运维专场首次提出“感知-推理-执行-进化”四…...

编程新知 2026/5/11 8:04:56

Kohya Trainer 图像生成实战：利用训练好的模型进行高质量创作

Kohya Trainer 图像生成实战：利用训练好的模型进行高质量创作【免费下载链接】kohya-trainer Adapted from https://note.com/kohya_ss/n/nbf7ce8d80f29 for easier cloning 项目地址: https://gitcode.com/gh_mirrors/ko/kohya-trainer Kohya Trainer 是一…...

编程新知 2026/5/11 8:00:27

基于PSCAD的光伏-火电打捆直流送出系统建模与扰动特性仿真研究

基于PSCAD的光伏-火电打捆直流送出系统建模与扰动特性仿真研究摘要随着我国“双碳”目标的深入推进，以光伏为代表的新能源发电装机规模持续快速增长。然而，光伏发电具有间歇性和波动性特征，大规模并网对电力系统的安全稳定运行提出了严峻挑战。将光伏与火电打捆经高压直…...

编程新知 2026/5/11 7:09:37

前端工程化：持续集成实战指南

前端工程化：持续集成实战指南前言持续集成（CI）是现代软件开发的核心实践之一。它能帮助团队快速发现问题、减少集成风险、提高开发效率。今天我就来给大家讲讲如何搭建一套完整的前端持续集成流程。什么是持续集成持续集成是一种软件开发…...

编程新知 2026/5/11 7:01:18

js脚本翻页自用

版本 1：按键停止（推荐）// 按 ESC 键随时停止let count 0;let running true;const stop () > {running false;console.log(⏹️ 已停止，共点击 count 次);};const interval setInterval(() > {if (!running) {clear…...

编程新知 2026/5/11 6:46:22

1. jQuery介绍

2. 基本使用

3. 选择器

4. 操作HTML

相关文章：