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…...
ES6从入门到精通：前言
ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来
一、破局：PCB行业的时代之问 在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample（样本数） 表示测试中发送的请求数量，即测试执行了多少次请求。 单位，以个或者次数表示。 示例：…...
从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码"：Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力，从金融交易到交通管控，这些关乎国计民生的关键领域…...