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…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
Map相关知识
数据结构 二叉树 二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子 节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只 有左子节点，有的节点只有…...
让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...
视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）
前言： 最近在做行为检测相关的模型，用的是时空图卷积网络（STGCN），但原有kinetic-400数据集数据质量较低，需要进行细粒度的标注，同时粗略搜了下已有开源工具基本都集中于图像分割这块，…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
Ubuntu系统复制（U盘-电脑硬盘）
所需环境 电脑自带硬盘：1块 (1T) U盘1：Ubuntu系统引导盘（用于“U盘2”复制到“电脑自带硬盘”） U盘2：Ubuntu系统盘（1T，用于被复制） ！！！建议“电脑…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能
指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...
DAY 26 函数专题1
函数定义与参数知识点回顾：1. 函数的定义2. 变量作用域：局部变量和全局变量3. 函数的参数类型：位置参数、默认参数、不定参数4. 传递参数的手段：关键词参数5 题目1：计算圆的面积 任务： 编写一…...
热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁
赛门铁克威胁猎手团队最新报告披露，数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据，严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能，但SEMR…...