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

JavaScript库：jQuery,简化编程

news 2026/3/26 20:46:04

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

5大突破！漫画阅读工具Venera重构跨平台阅读体验

5大突破！漫画阅读工具Venera重构跨平台阅读体验【免费下载链接】venera A comic app 项目地址: https://gitcode.com/gh_mirrors/ve/venera 副标题：如何在Windows、macOS和移动设备间无缝切换你的漫画库？ 开篇痛点引入不同设备间漫…...

编程新知 2026/3/26 20:27:45

突破数字阅读壁垒：bypass-paywalls-chrome-clean工具深度实战指南

突破数字阅读壁垒：bypass-paywalls-chrome-clean工具深度实战指南【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息获取成本日益增高的今天，优质内容常常…...

编程新知 2026/3/26 20:23:44

Python开发环境搭建新选择：Miniconda-Python3.11镜像体验

Python开发环境搭建新选择：Miniconda-Python3.11镜像体验 1. 为什么选择Miniconda-Python3.11镜像 Python作为当今最流行的编程语言之一，其版本管理和环境隔离一直是开发者面临的挑战。传统的Python安装方式往往会导致： 系统Python版本与项…...

编程新知 2026/3/26 20:19:43

纯粹直播：革新直播观看体验的一站式跨平台解决方案

纯粹直播：革新直播观看体验的一站式跨平台解决方案【免费下载链接】pure_live 纯粹直播:哔哩哔哩/虎牙/斗鱼/快手/抖音/网易cc/M38自定义源应有尽有。项目地址: https://gitcode.com/gh_mirrors/pur/pure_live 您是否曾为在多个直播平台间频繁切换而感到困…...

编程新知 2026/3/26 20:01:35

ICRS-101机器人手动控制API协议设计与嵌入式实现

1. ICRS_101_API 项目概述ICRS_101_API 是一套面向教育与科研场景的机器人手动控制接口规范，专为 ICRS-101 型教学机器人平台设计。该 API 并非独立运行的固件或中间件，而是一组定义清晰、硬件无关的通信协议与软件抽象层，其核心目标是为上位…...

编程新知 2026/3/26 19:18:57

AI赋能安装流程：快马智能诊断工具，自动解决软件安装兼容性问题

在开发软件的过程中，安装环节往往是第一个拦路虎。特别是当遇到系统环境复杂、依赖库版本冲突、权限配置等问题时，传统的安装方式常常让人头疼不已。最近我在尝试开发一个智能安装问题诊断工具时，发现InsCode(快马)平台的AI辅助功能特别实用&…...

编程新知 2026/3/26 18:50:40

OZON跨境电商的供应链之痛：爆单AI选品后为什么你拿货比别人贵？

选品决定利润的上限，供应链决定利润的下限做跨境电商，有一个残酷的事实：同样的商品，你卖100块，利润20块。别人卖90块，利润还有25块。为什么？不是你卖得不好，不是你运营不行&#xff…...

编程新知 2026/3/26 18:18:10

基于深度学习YOLOv12的管道泄漏检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）

一、项目介绍管道泄漏检测是工业安全生产中的重要环节，传统的人工巡检方式存在效率低、实时性差、易漏检等问题。本项目基于最新的YOLOv12目标检测算法，开发了一套智能管道泄漏检测系统，实现对管道泄漏的实时、精准识别。系统采用先进的深…...

编程新知 2026/3/26 17:33:39

Java 17 新特性实战：现代 Java 开发的优雅实践

Java 17 新特性实战：现代 Java 开发的优雅实践前言大家好。最近很多读者朋友询问 Java 17 的新特性以及如何在项目中应用这些特性。作为一个长期使用 Java 的架构师，今天我想分享一下 Java 17 的新特性以及在实际项目中的应用经验。 Java 17 的核心新特…...

编程新知 2026/3/26 17:23:34

Matlab粒子动画：3D爱心生成与动态模拟

1. 从零开始理解Matlab粒子动画第一次看到3D爱心在屏幕上跳动时，那种震撼感至今难忘。作为理工科学生，我们常常用Matlab处理枯燥的数据，但很少有人知道它还能创作出如此浪漫的视觉效果。这就像用计算器弹钢琴——工具本身没有情感&#xff0…...

编程新知 2026/3/26 16:57:19

1. jQuery介绍

2. 基本使用

3. 选择器

4. 操作HTML

相关文章：