JavaScript之JQuery
JQuery
W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: jQuery是⼀个快速、简洁且功能丰富的JavaScript框架，原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们学习使⽤JQuery来操作⻚⾯对象，如
• ⽹⻚内容
• ⽹⻚结构
• ⽹⻚样式
1 引⼊依赖
使⽤JQuery需要先引⼊对应的库
在使⽤jQuery CDN时，只需要在HTML⽂档中加⼊如下代码
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
参考地址: https://releases.jquery.com/
其中， src 属性指明了JQuery库所在的URL. 这个URL是CDN(内容分发⽹络)服务提供商为jQuery库
提供的⼀个统⼀资源定位符.
如果需要使⽤其他版本的JQuery, 可以在官⽹进⾏下载
1
我们一般使用minified
uncompressed : ⾮压缩版本(易读, 但是⽂件较⼤, 传输速度慢)
minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐)
slim: 精简瘦⾝版, 没有Ajax和⼀些特效
slim minified : slim 的压缩版
.2 JQuery 语法
jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作
基础语法
1 $(selector).action()
事件源.事件（操作对象）
$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.
• Selector 选择器, ⽤来"查询"和"查找" HTML 元素
• action 操作, 执⾏对元素的操作
<button type="button">点我消失</button><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script>$(document).ready(function(){$('button').click(function(){$(this).hide();});});</script>3 JQuery 选择器
我们通过JQuery选择器来选择⼀些HTML元素. 然后对元素进⾏操作.
JQuery选择器 基于已经存在的CSS选择器, 除此之外, 还有⼀些⾃定义的选择器. jQuery 中所有选择器都以 $ 开头：$().
4 JQuery事件
JS 要构建动态⻚⾯, 就需要感知到⽤⼾的⾏为.
⽤⼾对于⻚⾯的⼀些操作(点击, 选择, 修改等) 都会在浏览器中产⽣⼀个个事件, 被 JS 获取到, 从⽽进⾏
更复杂的交互操作.
浏览器就是⼀个哨兵, 在侦查敌情(⽤⼾⾏为). ⼀旦⽤⼾有反应(触发具体动作), 哨兵就会点燃烽⽕台的
狼烟(事件), 后⽅就可以根据狼烟来决定下⼀步的对敌策略.
事件由三部分组成:
1. 事件源: 哪个元素触发的
2. 事件类型: 是点击, 选中, 还是修改?
3. 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数
例如: 某个元素的点击事件:
$("p").click(function(){
//动作发⽣后执⾏的代码
});
5 操作元素
5.1 获取/设置元素内容
三个简单的获取元素内容的JQuery⽅法
这三个⽅法即可以获取元素的内容, ⼜可以设置元素的内容.
有参数时, 就进⾏元素的值设置, 没有参数时, 就进⾏元素内容的获取.
代码⽰例:
获取元素内容:
<div id="test"><span>你好</span></div><input type="text" value="hello"><script>$(document).ready(function () {var html = $("#test").html();console.log("html内容为:"+html);var text = $("#test").text();console.log("⽂本内容为:"+text);var inputVal = $("input").val();console.log(inputVal);});</script>
设置元素内容
<div id="test"></div><div id="test2"></div><input type="text" value=""><script>$(document).ready(function () {$("#test").html('<h1>设置html</h1>');$("#test2").text('<h1>设置text</h1>');$("input").val("设置内容");});</script>
3.4.5.2 获取/设置元素属性
JQuery attr() ⽅法⽤于获取属性值.
代码⽰例
获取元素属性
<p><a href="https://www.bitejiuyeke.com/index" id="bite">zhuzhu</a></p><script>$(function(){var href = $("p a").attr("href")console.log(href);});</script>设置元素属性
<p><a href="https://www.bitejiuyeke.com/index" id="bite">zhuzhu</a></p><script>$(function(){$("p a").attr("href","baidu.com")console.log($("p a").attr("href"));});</script>
3.4.5.3 获取/返回css属性
css() ⽅法设置或返回被选元素的⼀个或多个样式属性
代码⽰例
获取元素属性
<div style="font-size: 36px;">我是⼀个⽂本</div><script>$(function(){var fontSize = $("div").css("font-size");console.log(fontSize);});</script>设置元素属性
<div style="font-size: 36px;">我是⼀个⽂本</div><script>$(function(){$("div").css("font-size","24px");});</script>
5.4 添加元素
添加 HTML 内容
1. append() : 在被选元素的结尾插⼊内容
2. prepend() : 在被选元素的开头插⼊内容
3. after() : 在被选元素之后插⼊内容
4. before() : 在被选元素之前插⼊内容
代码⽰例:
<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><img src="pic/rose.jpg"><script>$(function () {$("ol").append("<li>append</li>");$("ol").prepend("<li>prepend</li>");$("img").before("图⽚前插⼊");$("img").after("图⽚后插⼊");});</script>
5.5 删除元素
删除元素和内容，⼀般使⽤以下两个 jQuery ⽅法：
1. remove() : 删除被选元素（及其⼦元素）
2. empty() : 删除被选元素的⼦元素。
代码⽰例:
<div id="div1">我是⼀个div</div><button>删除 div 元素</button><script>$(function () {$('button').click(function(){$('#div1').remove();});});</script>删除被选元素的⼦元素<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><button>删除列表元素</button><script>$(function () {$('button').click(function(){$('ol').empty();});});</script>
表白墙
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}</style></head><body><div class="container"><h1>表⽩墙</h1><p>输⼊后点击提交, 会将信息显⽰在表格中</p><div class="row"><span>谁: </span><input class="edit" type="text"></div><div class="row"><span>对谁: </span><input class="edit" type="text"></div><div class="row"><span>说什么: </span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div></div></body></html>$(function () {// 给点击按钮注册点击事件$(".submit").click(function () {// 1. 获取到编辑框内容var from = $('.edit:eq(0)').val();var to = $('.edit:eq(1)').val();var message = $('.edit:eq(2)').val(); });});相关文章：
JavaScript之JQuery
JQuery W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: jQuery是⼀个快速、简洁且功能丰富的JavaScript框架，原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们学习使⽤JQuery来操作⻚⾯对象，如 • ⽹⻚内容 • ⽹⻚结构 …...
JAVA学习记录2
文章为个人学习记录，仅供参考，如有错误请指出。 如何开发第一个JAVA程序？ 开发java程序主要分为三个步骤： 1.编写代码 2.编译代码 3.运行代码 1.编写代码 编写java的工具有很多，文本编辑器、Notepad、Visual Stu…...
计算机网络、嵌入式等常见问题简答
1.嵌入式系统中经常要用到无限循环，如何用C编写死循环 答：while(1){}或者for(;;) 2.程序的局部变量存在于哪里，全局变量存在于哪里，动态申请数据存在于哪里。 答：程序的局部变量存在于栈区；全局变量存在…...
中华人民共和国预算法实施条例
(1995年11月2日国务院第37次常务会议通过 1995年11月22日中华人民共和国国务院令第186号发布 自发布之日起施行) 第一章 总则 第一条 根据《中华人民共和国预算法》(以下简称预算法)，制定本条例。 第二条 县级以上地方政府的派出机关，根据本级政…...
【养生--果蔬汁】
果蔬汁： 1、甜菜根苹果柠檬菠萝 2、羽衣甘蓝苹果菠萝番石榴 3、番茄蓝莓苹果 4、胡萝卜、番茄、菠菜、西芹、西蓝花、甘蓝、花菜、南瓜、甜椒 5、火龙果香蕉 6、黄瓜香蕉 7、黄瓜雪梨 8、番茄苹果 9、黄瓜生菜 10、柚子雪梨 11、胡萝卜苹果黄瓜 12、黄瓜…...
LLM架构从基础到精通之词向量1
自然语言处理中的词嵌入：从基础到应用 在自然语言处理（NLP）领域，词嵌入是一个极为关键的概念。它本质上是一种将单词转换为连续向量空间中的数值表示（即向量）的方法，旨在捕捉单词的语义信息&am…...
【SQL】Delete使用
目录 语法 需求 示例 分析 代码 语法 DELETE删除表中所需内容 删除表中满足特点条件的行：DELETE FROM 表名 WHERE 条件; 删除表中所有行：DELETE FROM 表名; WHERE子句 WHERE子句用于指定从表中选取记录的条件。允许筛选数据，只返回满足…...
KBQA前沿技术
文章目录 KBQA面临的挑战基于模板的方法基于语义解析的方法基于深度学习的传统问答基于深度学习的端到端问答模型KBQA面临的挑战 目前还存在两个很大的困难阻碍着KBQA系统被广泛应用。一个困难是现有的自然语言理解技术在处理自然语言的歧义性和复杂性方面还显得比较薄弱。例如…...
跨年烟花C++代码
嘿，朋友们！今天来给大家讲讲一段挺有意思的C代码呀，这段代码主要是用来实现一个烟花效果展示的程序哦，下面咱们一点点来看哈。 效果 1. 开头包含的那些头文件 #include <graphics.h> #include <conio.h> #include &…...
centos服务器 /1ib64/libm.so.6: version “GLIBc 2.27’ not found 异常
centos服务器 /1ib64/libm.so.6: version “GLIBc 2.27’ not found 异常 问题 在服务器使用open3d时，报错缺失GLIBC_2.27，因为后续操作出问题会导致服务器挂，所以最好先备份一下。 解决 查询glibc版本 输入指令查询系统glibc版本&#x…...
职场：如何快速适应职场新环境？
快速适应职场新环境是每个新员工都需要面对的重要挑战。为了能够顺利过渡并尽快融入新团队，以下是一些实用的策略： 1. 保持积极心态 开放心态：进入新环境时，保持开放的心态对于适应变化至关重要。要愿意接受新的挑战，…...
axios的替代方案onion-middleware
onion-middleware的由来 嗯。。。闲来无事瞎搞的！！！！主要用来实现请求/相应拦截，当然队列性的数据操作都是可以的 直接上使用教程 安装 npm install onion-middleware使用 import { OnionMiddleware } from onion…...
设计模式——泛型单例类
游戏中很多管理类都需要写成单例类，每次重复把管理类设置为单例类很繁琐， 这里直接写一个泛型单例类作为模板父类，方便其他需要写成单例类的类直接继承设置为单例类； using UnityEngine;public class Singleton<T> : Mono…...
三维卷积（ 3D CNN）
三维卷积（ 3D CNN） 1.什么是三维卷积 1.1 三维卷积简介 二维卷积是在单通道的一帧图像上进行滑窗操作，输入是高度H宽度W的二维矩阵。 三维卷积输入多了深度C这个维度，输入是高度H宽度W深度C的三维矩阵。在卷积神经网络中&…...
【JAVA】Java开发小游戏 - 简单的2D平台跳跃游戏 基本的2D平台跳跃游戏框架，适合初学者学习和理解Java游戏开发的基础概念
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默， 忍不住分享一下给大家。点击跳转到网站 学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……） 2、学会Oracle数据库入门到入土用法(创作中……） 3、手把…...
分享3个国内使用正版GPT的网站【亲测有效！2025最新】
1. molica 传送入口：https://ai-to.cn/url/?umolica 2. 多帮AI 传送入口：https://aigc.openaicloud.cn?inVitecodeMYAAGGKXVK 3. 厉害猫 传送入口：https://ai-to.cn/url/?ulihaimao...
CSDN Markdown编辑器设置视频居中完美解决方案
表格做中间容器，把视频放在表格里面，利用表格居中语法实现表格内元素居中对齐，从而完美实现视频居中。 【三角符文】jevil战无伤通关 这玩意整了我两个星期，焦头烂额都找不到解决方案。今天偶然想到可以用表格试试，没想…...
Java到底是值传递还是引用传递????
在搞懂这个问题之前, 我们要首先了解什么是值传递, 什么是引用传递? 值传递: 传递的是数据的副本，修改副本不会影响原始数据。引用传递: 传递的是数据的引用（地址），修改引用会直接影响原始数据. 也就是说，值传递和引…...
初学stm32 --- 电源监控
目录 STM32 电源监控介绍 上电/掉电复位POR/PDR（F1） 可编程电压检测器(PVD)（F1） PVD相关寄存器介绍（F1） 电源控制寄存器 PWR_CR 电源控制/状态寄存器 PWR_CSR PVD相关HAL库驱动介绍 PVD的使用步骤 …...
Win10本地部署大语言模型ChatGLM2-6B
鸣谢《ChatGLM2-6B｜开源本地化语言模型》作者PhiltreX 作者显卡为英伟达4060 安装程序 打开CMD命令行，在D盘新建目录openai.wiki if not exist D:\openai.wiki mkdir D:\openai.wiki 强制切换工作路径为D盘的openai.wiki文件夹。 cd /d D:\openai.wik…...
工业安全零事故的智能守护者：一体化AI智能安防平台
前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
SpringTask-03.入门案例
一.入门案例 启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...