【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”

});
相关阅读:
MySQL-Q&A-异常问题及解决方案(持续更新)
mysql 查询优化、索引失效
 更改Windows上的远程桌面的侦听端口
 方案设计｜汽车轮胎数显胎压计方案
 pytest合集（10）— 兼容unittest框架
 C# datagridView 控件使用心得
 Oracle和达梦：连接多行查询结果
 Unity中Shader矩阵的转置矩阵
 解决Windows出现找不到mfcm90u.dll无法打开软件程序的方法
 linux文件打开数
原文地址：https://blog.csdn.net/weixin_45481821/article/details/126009246

👀专栏介绍

👀本期介绍

文章目录

1. 模拟用户分组

1.1 案例介绍

1.2 案例相关知识：

2. 页面换肤

2.1 案例介绍

3. 扩展案例：图片放大