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

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

1. 模拟用户分组


1.1 案例介绍


使用 jQuery 模拟用户分组,要求如下:

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

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

image.png

1.2 案例相关知识:


image.png

代码准备: 

image.png

image.png

2. 页面换肤


2.1 案例介绍


image.png

3. 扩展案例:图片放大


默认效果

image.png

效果图  

image.png

提示:

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

例如:

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

动画版:

JQ 元素 .animate({

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

属性名 :”-= 属性值 ”

},{

duration:”fast”

});

例如:

JQ 元素 .animate({

width:”+=150”

},{

duration:”fast”

});

相关文章
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
106 0
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
103 0
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
2月前
|
JavaScript 前端开发 API
【JQuery】基础从零入门操作,简单详细
jQuery下载,引入依赖,JQuery语法、选择器、时间、获取元素、返回CSS、修改属性、添加元素、删除元素、猜数字游戏、表白墙
|
3月前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
35 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
3月前
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
47 0
|
4月前
|
JavaScript
Jquery从入门到精通
Jquery从入门到精通
|
6月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
49 2
|
7月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
6月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
42 0