滑动效果
语法:
下拉: slideDown([speed,[easing],[fn]])
上拉: slideUp([speed,[easing],[fn]])
切换上拉下拉: slideToggle([speed,[easing],[fn]])
里面的参数用法和隐藏显示都是一样的,不再重复写
真的很方便啊...
顺便把之前的微博的案例修改了一下:
本文由“壹伴编辑器”提供技术支持
但是jQuery还是想要把代码极简,所以还封装了事件切换方法
hover([over],out)
- over: 鼠标移到元素上就要触发的函数(相当于mouseenter)
- out: 鼠标移出元素要触发的函数(相当于mouseleave)
微博下拉菜单示范:
完整的写法:
比之前的还要方便!
但是jQuery还能更加简便!假如里面只有一个函数,意思就是不管鼠标移入还是移出都会触发这个事件,此时就有个更简单的方法了:
懒就是人类进步的动力...
本文由“壹伴编辑器”提供技术支持
动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行
就比如刚刚微博的案例:
停止排队
stop()
- stop()排队方法用于停止动画或效果
- 注意: stop()写到动画或者效果的前面,相当于停止结束上一次的动画
搞定!
本文由“壹伴编辑器”提供技术支持
淡入淡出效果
语法
淡入: fadeIn([speed,[easing],[fn]])
淡出: fadeOut([speed,[easing],[fn]])
调整透明度: fadeTo([[speed],opacity,[easing],[fn]])
切换淡入淡出: fadeToggle([speed,[easing],[fn]])
fadeTo
- opacity透明度必须写,取值0~1之间
- speed: 必须写
做一个突出高亮的案例,当鼠标移到这个li时,其他的li都变暗,突出显示当前的li
注意要加上stop()停止排队
本文由“壹伴编辑器”提供技术支持
自定义动画animate
语法
animate(params, [speed], [easing], [fn])
这里只解释第一个参数
params: 想要更改的样式属性,以对象形式传递,必须写.属性名可以不用带引号,如果是符合属性则需要采取驼峰命名法如:borderLeft.其余参数都可以省略
多加几个属性
王者荣耀手风琴特效案例:
手风琴特效指的是当鼠标移动到元素上时,它的宽度会变大,当鼠标移开时又变回原来的宽度
现在我们来试着做一下吧
现在做好了布局
jQuery做法:
自己做的时候好笨,不知道display:none用了fadeIn()以后就会变成display: block
看看效果吧:
即使鼠标乱划也不会出现排队现象
本文由“壹伴编辑器”提供技术支持
设置或获取元素固有属性值 prop( )
所谓元素固有属性就是元素自身自带的属性,比如<a>元素里面的href,<input>元素里的type.
获取属性语法:
prop("属性")
可以用来检查复选框的勾选状况
设置属性语法:
prop("属性", "属性值")
但是对于我们的自定义属性,是不能通过prop( )来获取的,需要用到attr( )
本文由“壹伴编辑器”提供技术支持
数据缓存 data( )
data( )方法可以在指定的元素上存取数据,并不会修改DOM元素结构.一旦页面刷新,之前存放的数据都将被移除
这个方法获取data-index,H5自定义属性,不用写data,且返回的是数字型
本文由“壹伴编辑器”提供技术支持
现在做一个购物车全选案例: 其实之前也做过的.
全选部分
这个地方真的很妙
现在做下一部分:
这个地方自己没想到,因为用了新的方法
这样就只要十几行就能搞定了
本文由“壹伴编辑器”提供技术支持
针对元素的内容和表单的值的操作
普通元素内容html()(相当于原生innerHTML)
html() // 获取元素的内容
html("内容") // 获取元素的内容
获取内容:
修改内容:
获取设置表单值val()
本文由“壹伴编辑器”提供技术支持
返回指定祖先元素
有时候我们结构有太多层,找一个元素就会非常麻烦,需要一层一层的parent().parent().parent(),所以我们学习返回指定祖先元素的方法
这时我们就能使parents("选择器")可以返回指定祖先元素
做案例时的收获:
保留小数的方法: toFixed( )
