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

JQuery学习笔记，点击按钮加载更多的图片

news 来源：原创 2025/8/29 18:01:37

利用点击按钮模拟某京，某宝，滚动页面加载图片的效果，代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Ajax请求</title></head><body><button id="load">加载更多</button><div id="photos"></div><script>(()=>{const photos=document.querySelector("#photos")// const.photos=document.getElementById('photos')const loadBtn=document.getElementById('load')//URL 需要自己申请const url='https://apis.tianapi.com/esports/index?key=b28784d07b8a040597XXXX...5&page='var page=1loadBtn.addEventListener('click',()=>{page+=1//创建异步请求对象//https://www.tianapi.com/#meinvlet xhr=new XMLHttpRequest()//https://www.tianapi.com/gethttp/265//open方法的第一个参数是请求的类型，第二个是请求的URL，第三个参数必须设置为true，表示发出的异步请求//URl 的结尾加上&num=30表示一次拿30个数据xhr.open('get',url+page,true)//true表示发的是异步请求//绑定事件回调函数，在收到Server返回的数据后要对页面进行局部刷新//就绪状态改变的事件xhr.addEventListener('readystatechange',()=>{//判断请求是否成功//405访问方法错，403没有访问权限，401未授权；4--请求错//5--Server错了（一般看不到，一般是Server升级维护中）//3--重定向（曾经请求过，数据还是原来的数据）if(xhr.readyState ==4 &&xhr.status==200){alert(xhr.responseText)//alert(xhr.responseText)传出的是字符string//将返回的JSON字符串解析成Javascript对象let json=JSON.parse(xhr.responseText)json.result.newslist.forEach((mm)=>{//console.log(mm.picUrl)let img=document.createElement('img')img.src=mm.picUrlimg.width='300'console.log(img)photos.insertBefore(img, photos.firstElementChild)})}})//发出异步请求xhr.send()})})()</script></body>
</html>

运行完成可以点击每一次按钮加载不同的图片

使用JQuery方法改写后的代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Ajax请求</title></head><body><button id="load">加载更多</button><div id="photos"></div><script src='js/jquery-3.7.1.min.js'></script><script>$(()=>{const url='https://apis.tianapi.com/esports/index?key='var page=0$('#load').on('click',(evt)=>{page+=1let date={"key"="b28..........575","page":page}//$对象getJSON方法可以执行异步请求（get请求）获得服务器返回的JSON格式//第一个参数是请求的URL（统一资源定位符）//第二个参数是要发送给Server的数据（JSON格式），如果没有数据发送给服务器可以为空//第三个参数是请求成功服务器返回数据之后要执行的回调函数，其参数为服务器的JSON对象$.getJSON(url,data,(json)=>{json.result.newslist.forEach((mm)=>{console.log(mm.picUrl)$('#photos').prepend($('<img>').attr('src',mm.picUrl).attr('width','300'))})})})})</script></body>
</html>

Jquery 的$.ajax({})使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Ajax请求</title></head><body><button id="load">加载更多</button><div id="photos"></div><script src='js/jquery-3.7.1.min.js'></script><script>$(()=>{const url='https://apis.tianapi.com/esports/index'var page=0$("#load").on("click",(evt)=>{page += 1let data={"key":"b287.......75","page":page}$.ajax({"url":url,"type":"get",//请求方式：可以是post,get,delete,put,patch 默认是get请求，可以省略不写"data":data,"datatype":"json",//返回的数据类型，XML：XML类型；text:文本类型 默认是JSON格式，可以省略不写"headers":{},//请求头没有东西可以忽略不写"success":(json)=>{json.result.newslist.forEach((mm)=>{console.log(mm.picUrl)$('#photos').prepend($('<img>').attr('src',mm.picUrl).attr('width','300'))})},//请求成功了干什么"errors":(error)=>{},//请求失败了干什么 可以省略})})})</script></body>
</html>

JQuery学习笔记，点击按钮加载更多的图片

利用点击按钮模拟某京，某宝，滚动页面加载图片的效果，代码： <!DOCTYPE html> <html><head><meta charset"utf-8"><title>Ajax请求</title></head><body><button id…...

编程日记 2025/8/29 18:01:37

swift4-汇编分析枚举内存布局

一、枚举的内存原理 1.1 常规case enum TestEnum { case test1, test2, test3 } var t TestEnum.test1 t .test2 t .test3枚举是常规的case的情况-是采取一个字节来存枚举变量通过拿到枚举的内存地址，看地址里面存的枚举值情况窥探枚举内存存储情况 var t Te…...

编程日记 2025/8/29 10:28:14

Vue 3 整合 WangEditor 富文本编辑器：从基础到高级实践

本文将详细介绍如何在 Vue 3 项目中集成 WangEditor 富文本编辑器，实现图文混排、自定义扩展等高阶功能。一、为什么选择 WangEditor？ 作为国内流行的开源富文本编辑器，WangEditor 具有以下优势： 轻量高效：压缩后仅…...

编程日记 2025/8/24 4:17:05

Docker安装嵌入框架Text Embeddings Inference (TEI)

Docker安装Text Embeddings Inference (TEI) 1 简单介绍文本嵌入推理（TEI，Text Embeddings Inference ）是HuggingFace研发的一个用于部署和服务开源文本嵌入和序列分类模型的工具包。TEI兼容OpenAI的嵌入模型的规范。 # 官网地址 https:/…...

编程日记 2025/8/29 18:00:10

【HeadFirst系列之HeadFirst设计模式】第14天之与设计模式相处：真实世界中的设计模式

与设计模式相处：真实世界中的设计模式设计模式是软件开发中的经典解决方案，它们帮助我们解决常见的设计问题，并提高代码的可维护性和可扩展性。在《Head First设计模式》一书中，作者通过生动的案例和通俗的语言，深入…...

编程日记 2025/8/22 15:29:21

java后端开发day27--常用API（二）正则表达式爬虫

（以下内容全部来自上述课程） 1.正则表达式（regex） 可以校验字符串是否满足一定的规则，并用来校验数据格式的合法性。 1.作用校验字符串是否满足规则在一段文本中查找满足要求的内容 2.内容定义 ps：一…...

编程日记 2025/8/29 6:32:52

【UCB CS 61B SP24】Lecture 22 23: Tree and Graph Traversals, DFS, BFS 学习笔记

本文讲解了二叉树的四种遍历方式，以及如何通过前/后序遍历与中序遍历重建出二叉树，接着介绍了新的非线性数据结构：图，详细讲解了图的存储方式与遍历方式，最后使用 Java 基于邻接表的存储方式实现了图与 DFS、BFS 两种遍…...

编程日记 2025/8/24 20:58:21

Redis100道高频面试题

一、Redis基础 Redis是什么？主要应用场景有哪些？ Redis 是一个开源的、基于内存的数据结构存储系统，支持多种数据结构（如字符串、哈希、列表、集合等），可以用作数据库、缓存和消息中间件。主要应用场景&…...

编程日记 2025/8/23 23:40:39

Mac OS Homebrew更换国内镜像源（中科大；阿里；清华）

omebrew官方的源一般下载包之类的会很慢，所以通常我们都是用国内的镜像源来代替，这样会提高我们的效率。Homebrew主要有四个部分组成: brew、homebrew-core 、homebrew-bottles、homebrew-cask。代码语言：javascript 代码运行次数&#xf…...

编程日记 2025/8/23 15:21:54

excel vlookup的精确查询、模糊查询、反向查询、多列查询

目录入门精确查询模糊查询反向查询 (搭配 if 函数) 多列查询 (搭配 match 函数) 入门精确查询需求: 查找学生编号是008 所在的班级操作: 在I2单元格输入公式如下,VLOOKUP(H2,B1:E12,4,FALSE), 得出结果看一下vlookup 公式每一个参数应该怎么写? 语法: vlookup…...

编程日记 2025/8/27 7:39:36

linux的文件系统及文件类型

目录一、Linux支持的文件系统二、linux的文件类型 2.1、普通文件 2.2、目录文件 2.3、链接文件 2.4、字符设备文件: 2.5、块设备文件 2.6、套接字文件 2.7、管道文件三、linux的文件属性 3.1、关于权限部分四、Linux的文件结构五、用户主目录 5.1、工作目录…...

编程日记 2025/8/29 4:57:53

MySQL 安装配置（完整教程）

文章目录一、MySQL 简介二、下载 MySQL三、安装 MySQL四、配置环境变量五、配置 MySQL 5.1 初始化 MySQL5.2 启动 MySQL 服务六、修改 MySQL 密码七、卸载 MySQL八、结语一、MySQL 简介 MySQL 是一款广泛使用的开源关系型数据库管理系统（RDBMS）&am…...

编程日记 2025/8/21 5:44:36

C# Unity 唐老狮 No.4 模拟面试题

本文章不作任何商业用途仅作学习与交流安利唐老狮与其他老师合作的网站,内有大量免费资源和优质付费资源,我入门就是看唐老师的课程打好坚实的基础非常非常重要: 全部 - 游习堂 - 唐老狮创立的游戏开发在线学习平台 - Powered By EduSoho 如果你发现了文章内特殊的字体格式,…...

编程日记 2025/8/27 11:34:09

给没有登录认证的web应用添加登录认证(openresty lua实现)

这阵子不是deepseek火么？我也折腾了下本地部署，ollama、vllm、llama.cpp都弄了下，webui也用了几个，发现nextjs-ollama-llm-ui小巧方便，挺适合个人使用的。如果放在网上供多人使用的话，得接入登录认证才好&a…...

编程日记 2025/8/27 15:26:01

R语言绘图：韦恩图

韦恩分析韦恩分析（Venn Analysis）常用于可视化不同数据集之间的交集和并集。维恩图（Venn diagram），也叫文氏图、温氏图、韦恩图、范氏图，用于显示元素集合重叠区域的关系型图表，通过图形与图形…...

编程日记 2025/8/26 4:36:33

STM32——串口通信 UART

一、基础配置 Universal Asynchronous Receiver Transmitter 异步，串行，全双工 TTL电平 ：高电平1 低电平0 帧格式： 起始位1bit 数据位8bit 校验位1bit 终止位1bit NVIC Settings一栏使能接受中断。之前有设置LCD，…...

编程日记 2025/8/29 17:58:59

【大模型基础_毛玉仁】1.3 基于Transformer 的语言模型

【大模型基础_毛玉仁】1.3 基于Transformer 的语言模型 1.3 基于Transformer 的语言模型1.3.1 Transformer1）注意力层（AttentionLayer）2）全连接前馈层（Fully-connected Feedforwad Layer）3）层正…...

编程日记 2025/8/28 21:48:15

靶场（二）---靶场心得小白分享

开始： 看一下本地IP 21有未授权访问的话，就从21先看起 PORT STATE SERVICE VERSION 20/tcp closed ftp-data 21/tcp open ftp vsftpd 2.0.8 or later | ftp-anon: Anonymous FTP login allowed (FTP code 230) |_Cant get dire…...

编程日记 2025/8/28 0:08:38

大学至今的反思与总结

现在是2025年的3月5日，我大三下学期。自大学伊始，我便以考研作为自己的目标，有时还会做自己考研上岸头部985,211，offer如潮水般涌来的美梦。但是我却忽略了一点，即便我早早下定了决心去考研，但并没有早…...

编程日记 2025/8/29 17:58:03

【大模型】Llama 3.2 大语言模型初探：模型权重下载

文章目录一、简介二、权重下载2.1 方法一：Meta 官网申请下载2.2 方法二：使用 hugging face 下载一、简介 Llama（Large Language Model Meta AI）是 Meta（原 Facebook）开发的一系列开源大型语言模型。它的目…...

编程日记 2025/8/29 8:00:39

unity学习63，第2个小游戏：用fungus做一个简单对话游戏

目录 1 目标用fungus做一个简单的剧情对话游戏 1.1 先创建一个新的3D项目 1.2 fungus是什么 1.2.1 怎么获得 1.2 在AssetStore里搜索fungus (插件类)--千万别买收费的错的！ 1.3 fungus的官网 1.3.1 官网给的3个下载链接，unity的果然已经失效了 …...

编程日记 2025/8/26 21:29:22

笔记：代码随想录算法训练营day36:LeetCode1049. 最后一块石头的重量 II、494. 目标和、474.一和零

学习资料：代码随想录 1049.最后一块石头的重量II 力扣题目链接思路：如何讲该问题转化为背包问题：还是对半分去碰，对半分去碰碰剩下的就是最小的。然后背包容量就是一半儿，物品重量等于物品价值等于stones[i] 和上…...

编程日记 2025/8/21 19:32:08

Elasticsearch：解锁深度匹配，运用Elasticsearch DSL构建闪电般的高效模糊搜索体验

目录 Elasticsearch查询分类叶子查询全文检索查询 match查询 multi_match查询精确查询 term查询 range查询复杂查询 bool查询简单应用 bool查询实现排序和分页 bool查询实现高亮场景分析问题思考解决方案 search_after方案(推荐) point in time方案方案…...

编程日记 2025/8/26 1:38:10

Android实现漂亮的波纹动画

Android实现漂亮的波纹动画本文章讲述如何使用二维画布canvas和camera、矩阵实现二、三维波纹动画效果（波纹大小变化、画笔透明度变化、画笔粗细变化） 一、UI界面界面主要分为三部分第一部分：输入框，根据输入x轴、Y轴、Z轴倾…...

编程日记 2025/8/26 3:50:51

qt实践教学（编写一个代码生成工具）持续更新至完成———

前言： 我的想法是搭建一个和STM32cubemux类似的图形化代码生成工具，可以把我平时用到的代码整合一下全部放入这个软件中，做一个我自己专门的代码生成工具，我初步的想法是在下拉选框中拉取需要配置的功能，然后就弹出对…...

编程日记 2025/8/28 12:39:35

【数据结构】什么是栈||栈的经典应用||分治递归||斐波那契问题和归并算法||递归实现||顺序栈和链栈的区分

文章目录 🥧栈的初步理解：🥧易错：如何判断栈满🥧栈满理解🥧栈的基本运算📚栈操作的伪代码逻辑（顺序和链栈）📕顺序栈运算实现：顺序栈的表示&#x…...

编程日记 2025/8/29 0:26:48

vue3(笔记)4.0 vueRouter.导航守卫.ElementPuls知识点

---vueRouter 创建路由: 完整写法(懒加载): 默认写法与vue2一致: 导入然后写成component: LoginPage import { createRouter, createWebHistory } from vue-routerconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL), routes: [{path:/lo…...

编程日记 2025/8/23 18:09:35

[数字图像处理]实验三：直方图增强

目录一、实验目的二、实验原理三、实验内容（附代码） 四、实验结果及分析五、实验小结一、实验目的 1.了解图像增强的意义和目的 2.掌握各种图像增强的基本原理和方法 3.使用MATLAB实现图像增强二、实验原理图像增强方法从增强的作用域…...

编程日记 2025/8/28 5:47:29

图像分类项目1：基于卷积神经网络的动物图像分类

1、选题背景及动机在现代社会中，图像分类是计算机视觉领域的一个重要任务。动物图像分类具有广泛的应用，例如生态学研究、动物保护、农业监测等。通过对动物图像进行自动分类，可以帮助人们更好地了解动物种类、数量和分布情况，从…...

编程日记 2025/8/24 11:20:09

并发编程（线程池）面试题及原理

1. 执行原理/核心参数 1.1 核心参数核心参数 corePoolSize 核心线程数目maximumPooISize 最大线程数目 （核心线程＋救急线程的最大数目）keepAliveTime 生存时间- 救急线程的生存时间，生存时间内没有新任务，此线程资…...

编程日记 2025/8/24 19:07:09

初次使用 IDE 搭配 Lombok 注解的配置

前言在 Java 开发的漫漫征程中，我们总会遇到各种提升效率的工具。Lombok 便是其中一款能让代码编写变得更加简洁高效的神奇库。它通过注解的方式，巧妙地在编译阶段为我们生成那些繁琐的样板代码，比如 getter、setter、构造函数等。然而&…...

编程日记 2025/8/29 3:32:44

云原生时代的技术桥梁

在数字化转型的大潮中，企业面临着数据孤岛、应用间集成复杂、高成本与低效率等问题。这些问题不仅阻碍了企业内部信息的流通和资源的共享，也影响了企业对外部市场变化的响应速度。当前，这一转型过程从IT角度来看，已然迈入云原生时…...

编程日记 2025/8/27 14:21:54

2024四川大学计算机考研复试上机真题

2024四川大学计算机考研复试上机真题 2024四川大学计算机考研复试机试真题历年四川大学计算机考研复试机试真题在线评测：https://app2098.acapp.acwing.com.cn/ 分数求和题目描述有一分数序列： 2/1 3/2 5/3 8/5 13/8 21/13… 求出这个数列的前 …...

编程日记 2025/8/28 8:29:41

【GPU使用】如何在物理机和Docker中指定GPU进行推理和训练

我的机器上有4张H100卡，我现在只想用某一张卡跑程序，该如何设置。代码里面设置 import os # 记住要写在impot torch前 os.environ[CUDA_VISIBLE_DEVICES] "0, 1"命令行设置 export CUDA_VISIBLE_DEVICES0,2 # Linux 环境 python test.py …...

编程日记 2025/8/23 0:02:48

汽车免拆诊断案例 | 2023款丰田雷凌汽油版车行驶中偶尔出现通信故障

故障现象　一辆2023款丰田雷凌汽油版车，搭载1.5 L发动机，累计行驶里程约为4700 km。车主反映，行驶中偶尔组合仪表上的发动机转速信号丢失，转向变重，且有“闯车”感，同时车辆故障警报蜂鸣器鸣响。故障诊断…...

编程日记 2025/8/27 1:33:38

千里科技亮相吉利AI智能科技发布会，共启“AI+车”新纪元

今天，在三亚举行的吉利AI智能科技发布会上，千里科技董事长印奇发表了主题为《从“车AI”到“AI车”》的演讲。印奇重点分享了对于“AI车”未来趋势的判断，并重点介绍了在吉利AI科技生态体系下，围绕智驾、智舱等领域的创新合作。基…...

编程日记 2025/8/28 1:48:22

汽车零部件厂如何选择最适合的安灯系统解决方案

在现代制造业中，安灯系统作为一种重要的生产管理工具，能够有效提升生产线的异常处理效率，确保生产过程的顺畅进行。对于汽车零部件厂来说，选择一套适合自身生产需求的安灯系统解决方案尤为重要。一、安灯系统的核心功能安灯系统…...

编程日记 2025/8/26 20:50:57

spring boot + vue 搭建环境

参考文档：https://blog.csdn.net/weixin_44215249/article/details/117376417?fromshareblogdetail&sharetypeblogdetail&sharerId117376417&sharereferPC&sharesourceqxpapt&sharefromfrom_link. spring boot vue 搭建环境一、浏览器二、jd…...

编程日记 2025/8/24 16:22:13

spaCy 入门：自然语言处理的高效工具

spaCy 入门：自然语言处理的高效工具引言 spaCy 是一个功能强大的开源 Python 库，专注于工业级的自然语言处理（NLP）。它以其高效的性能、简洁的 API 和对多种语言的支持而闻名。无论是进行文本分析、信息提取还是构建智能聊天机…...

编程日记 2025/8/19 7:19:51

Stable Diffusion模型高清算法模型类详解

Stable Diffusion模型高清算法模型类详细对比表模型名称核心原理适用场景参数建议显存消耗细节增强度优缺点4x-UltraSharp残差密集块(RDB)结构优化纹理生成真实人像/建筑摄影重绘幅度0.3-0.4，分块尺寸768px★★★★★☆皮肤纹理细腻，但高对比场景易出现…...

编程日记 2025/8/28 15:21:51

数据结构：八大排序(冒泡，堆，插入，选择，希尔，快排，归并，计数)详解

目录一.冒泡排序二.堆排序三.插入排序四.选择排序五.希尔排序六.快速排序 1.Lomuto版本（前后指针法） 2.Lomuto版本的非递归算法 3.hoare版本（左右指针法） 4.挖坑法找分界值： 七.归并排序八.计数排序…...

编程日记 2025/8/16 12:34:44

QT-对象树

思维导图写1个Widget窗口，窗口里面放1个按钮，按钮随便叫什么创建2个Widget对象 Widget w1,w2 w1.show() w2不管要求：点击 w1.btn ,w1隐藏，w2显示点击 w2.btn ,w2隐藏，w1 显示 #include <QApplication> #inc…...

编程日记 2025/8/25 20:45:22

随机播放音乐伪随机

import java.util.*;/*** https://cloud.tencent.com.cn/developer/news/1045747* 伪随机播放音乐*/ public class MusicPlayer {private List<String> allSongs; // 所有歌曲列表private List<String> playedSongs; // 已经播放过的歌曲列表private Map<String…...

编程日记 2025/8/25 14:19:02

spring boot打包插件的问题

在spring boot项目中声明了 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build> 执行mvn clean package&…...

编程日记 2025/8/29 13:28:26

海康摄像头接入流媒体服务器实现https域名代理播放

环境操作系统：Ubuntu 22.04流媒体服务器：srs 官网安装教程srs开启GB28181协议官网开启教程进行海康摄像头的配置官网配置教程srs使用systemctl实现开机自启官网配置教程 nginx配置说明 server {listen 80;server_name a.com;return 301 https://$…...

编程日记 2025/8/24 2:11:25

Stable Diffusion模型Pony系列模型深度解析

Stable Diffusion模型Pony系列模型深度解析一、技术架构与核心特性基于SDXL的深度优化 Pony系列模型以SDXL为基础框架，通过针对二次元/动漫风格的微调，强化了在该领域的生成能力，同时保留了对写实场景的兼容性‌。其训练数据特别侧重于人…...

编程日记 2025/8/28 20:54:40

性能巅峰对决：Rust vs C++ —— 速度、安全与权衡的艺术

??关注，带你探索Java的奥秘！?? ??超萌技术攻略，轻松晋级编程高手！?? ??技术宝库已备好，就等你来挖掘！?? ??订阅，智趣学习不孤单！?? ??即刻启航，编…...

编程日记 2025/8/24 1:17:58

【Kubernets】K8S内部nginx访问Service资源原理说明

文章目录原理概述**一、核心概念****二、Nginx 访问 Service 的流程****1. Service 的作用****2. Endpoint 的作用****3. Nginx Pod 发起请求****(1) DNS 解析****(2) 流量到达 kube-proxy****(3) 后端 Pod 处理请求** **三、不同代理模式的工作原理****1. iptables 模式****2…...

编程日记 2025/8/29 3:18:03

Markdown HTML 图像语法

插入图片 Markdown ![图片描述](图片链接)一般来说，直接复制粘贴过来就行了，部分网页/应用可以拖拽，没人会真敲图片的链接吧…… 示例图片： ![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b8…...

编程日记 2025/8/27 17:23:28

2503,D比C更易重构

我发现C程序很少超越其初始设计.问题是,很难重构C程序.如 struct S { int a; }; struct S s; s.a 3; struct S *p; p->a 3;即.用来直接访问,->用来间接访问.假设想把按值传递S改为按指针传递S.现在你必须更新每个使用,而不仅是声明. 这是它在D中的工作方式: struct …...

编程日记 2025/8/28 1:19:03

相关文章：