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…...
别再只盯着MFCC了！用Librosa实战提取LFCC和CQCC，解锁音频特征新姿势
解锁音频特征新维度：LFCC与CQCC在Librosa中的实战指南 音频特征提取是语音识别、音乐信息检索等领域的核心技术。传统MFCC（梅尔频率倒谱系数）虽广泛应用，但在某些场景下表现有限。本文将深入探讨两种替代方案——LFCC（…...
Rust的async-.await内部机制：状态机与Future trait
Rust的async/.await内部机制：状态机与Future trait Rust的async/.await语法为异步编程提供了简洁高效的解决方案，但其底层实现却隐藏着精妙的设计。理解其内部机制——状态机与Future trait，不仅能帮助开发者写出更高效的异步代码࿰…...
Anthropic超级模型Mythos引发全球金融安全震荡
Mythos模型引发2万亿美元SaaS市场浩劫短短一年内，SaaS市场遭遇了一场前所未有的浩劫，近2万亿美元的财富凭空蒸发。这一切源于Anthropic发布的Claude Opus和一系列Agent工具，直接引发了企业软件股（SaaS）的暴跌。长期以来…...
季节主题作品展：LiuJuan20260223Zimage模型生成“春夏秋冬”四时美景
季节主题作品展：LiuJuan20260223Zimage模型生成“春夏秋冬”四时美景 最近在尝试用AI模型进行艺术创作，发现了一个挺有意思的模型——LiuJuan20260223Zimage。它特别擅长处理带有文化意境和自然主题的画面。为了测试它的能力，我决定让它挑战…...
GPUStack 在华为昇腾 I A 服务器上的保姆级部署指南参
开发个什么Skill呢？ 通过 Skill，我们可以将某些能力进行模块化封装，从而实现特定的工作流编排、专家领域知识沉淀以及各类工具的集成。 这里我打算来一次“套娃式”的实践：创建一个用于自动生成 Skill 的 Skill，一是用…...
ROS2新手必看：rqt图形化工具从安装到实战（附小乌龟控制技巧）
ROS2图形化利器：rqt工具从零精通到多海龟协同控制实战 第一次接触ROS2时，命令行操作总让人望而生畏。记得我刚开始调试机器人时，在终端里反复输入ros2 topic list和ros2 service call的场景至今难忘——直到发现了rqt这个可视化神器。作为ROS…...
3分钟掌握Markdown浏览器插件：让技术文档阅读变得简单高效
3分钟掌握Markdown浏览器插件：让技术文档阅读变得简单高效 【免费下载链接】markdown-viewer Markdown Viewer / Browser Extension 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer 还在为浏览器中打开Markdown文件显示原始代码而烦恼吗&…...
【轨迹预测】MTR：基于全局意图定位与局部运动精化的Transformer架构解析
1. MTR框架的核心设计思想 想象一下你正在开车，前方十字路口突然出现一辆犹豫不决的自行车。人类司机能瞬间判断出多种可能性：它可能直行、左转或突然刹车。这正是MTR（Motion Transformer）要解决的挑战——让AI像人类一样预测复杂…...
终极冒险岛游戏编辑器：Harepacker-resurrected全面使用指南
终极冒险岛游戏编辑器：Harepacker-resurrected全面使用指南 【免费下载链接】Harepacker-resurrected All in one .wz file/map editor for MapleStory game files 项目地址: https://gitcode.com/gh_mirrors/ha/Harepacker-resurrected Harepacker-resurrec…...
BilibiliDown：3步掌握B站视频下载的终极免费方案
BilibiliDown：3步掌握B站视频下载的终极免费方案 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors/bi/Bil…...