【JQuery】JQuery入门——模拟用户分组以及页面换肤

【JQuery】JQuery入门——模拟用户分组以及页面换肤

🔎这里是【JQuery】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️

👀专栏介绍

【JQuery】目前主要更新JQuery，一起学习一起进步。

👀本期介绍

本期主要介绍JQuery入门——模拟用户分组以及页面换肤

文章目录

1. 模拟用户分组

1.1 案例介绍

1.2 案例相关知识：

2. 页面换肤

2.1 案例介绍

3. 扩展案例：图片放大

1. 模拟用户分组

1.1 案例介绍

使用 jQuery 模拟用户分组，要求如下：

1. 页面加载时显示所有分组的列表项。

2. 点击某分组名称时，仅显示当前分组列表，并隐藏其他分组的列表项

1.2 案例相关知识：

代码准备：

2. 页面换肤

2.1 案例介绍

提示：使用 css()方法

3. 扩展案例：图片放大

默认效果

效果图

提示：

JQ 元素 .css(“ 属性名 ”,” 属性值 ”);

例如：

jq 元素 .css(“width”,”50px”);

动画版：

JQ 元素 .animate({

属性名 :”+= 属性值 ”,

属性名 :”-= 属性值 ”

},{

duration:”fast”

});

例如：

JQ 元素 .animate({

width:”+=150”

},{

duration:”fast”

});
相关阅读:
分布式ELK+KAFKA日志采集 docker-compose
Go 使用sync.Mutex或sync.RWMutex进行并发安全访问
 企业分账如何帮助用户解决成本优化和预算分配的问题
 HC32L110 系列 M0 MCU 介绍和Win10下DAP-Link, ST-Link, J-Link方式的烧录
 npm install:Could not resolve dependency：peer...
Vuex
HTML+CSS个人静态网页设计
 怎么去写网站的交互设计文档
 无风扇嵌入式车载电脑在矿山车辆行业应用
 Spring学习笔记3 Spring对IOC的实现
原文地址：https://blog.csdn.net/weixin_45481821/article/details/126009246

👀专栏介绍

👀本期介绍

文章目录

1. 模拟用户分组

1.1 案例介绍

1.2 案例相关知识：

2. 页面换肤

2.1 案例介绍

3. 扩展案例：图片放大