- 1、动态添加和删除数据
- 2、微博发布
- 3、移动水果
- 4、上下拉切换
- 5、精品演示
- 6、tab标签切换
- 7、突出显示
- 8、下拉菜单
- 9、页面滚动
- 10、王者手风琴
- 总结
案例演示:
实现步骤:
val()获取值,tr添加设置内容,append内部添加,slideDown向下滑动,val()清空
jQuery动态添加和删除数据
课程名称:
所属学院:
| 课程名称 | 所属学院 | 已学会 |
|---|---|---|
| JavaScript | 信息工程系 | 删除 |
| css | 信息工程系 | 删除 |
| html | 信息工程系 | 删除 |
| jQuery | 信息工程系 | 删除 |
案例演示:
实现步骤:
微博发布
3、移动水果
案例演示:
实现步骤:
Document
4、上下拉切换
案例演示:
实现步骤:
5、精品演示
案例演示:
实现步骤:
获取下标,对应内容通过下标show,其他hide
6、tab标签切换
案例演示:
实现步骤:
Document
- 商品介绍
- 规格与包装
- 售后保障
- 商品评价(50000)
- 手机社区
商品介绍模块内容
规格与包装模块内容
售后保障模块内容
商品评价(50000)模块内容
手机社区模块内容
7、突出显示
案例演示:
实现步骤:
触碰透明度0.5 离开透明度 1 (opacity)
8、下拉菜单
案例演示:
实现步骤:
9、页面滚动
案例演示:
实现步骤:
Document
返回顶部
10、王者手风琴
案例演示:
实现步骤:
手风琴案例
总结
li:first li:last li:eq(2) li:odd --奇数 li:even --偶数
ul li --子代
ul
hide()
show()
siblings()
$(this).index()
.click
.mouseover
.mouseout
addClass()
removeClass()
css(“background”,“red”)
slideDown()
slideUp()
slideToggle()
hover()
animite()
fadeIn()
fadeOut()
fadeTo(“show”,0.5)
each(function(index,element))
$.extend(a,b)
$.extend(true,a,b)
on({click:function(){}})
on(“”,“”,function(){})
append() repend() before() after() remove() after()
val() text() html()
offset().top offset().left postion() postion().top
$(document).scrollTop()
$(window).scroll()
$(“body,html”).animate({})
prop()
prop(“”,“”) --固有属性
attr()
attr(“”,“”)–自定义属性
checked --固有属性
































