小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
接前文继续来学习 JavaScript的必备小知识 jquery 学习小结
1、梳理知识点
选择器 :
基本 : $("#id") $(".class") html标签 *
层级 : 空格 > + ~
简单 : :odd :even :first :last :eq() $("li:eq(i)")
查找过滤 : eq() $("li").eq() find() children() filter(function(){ return true })
表单 : :button :text :radio :checkbox:checked
属性 : $("input[name=ck]")
jquery样式操作 :
css()
- addClass()
- removeClass()
jquery属性操作 :
attr() checked prop()
jquery 内容操作 :
html("") html() val()
jquery文档操作 :
- append/To
- prepend/To
- after
- insertAfter
- empty()
- remove()
- clone()
2、jquery 的动画
基本动画 :
show() 没有参数 等价 css:display:block
-
可以有三个参数
- 第一个参数 :动画执行的时间
- 第二个参数 : 动画执行方法
- 第三个参数 :动画完成后的回调函数
hide() 隐藏
toggle() 切换 显示 / 隐藏
上拉/下拉 :
slideDown() 通过高度的改变 显示 某个元素
slideUp() 通过高度的改变 隐藏 某个元素
slideToggle() 切换
透明度 :
-
fadeIn(1000,function() { }) 淡入 通过透明度的改变 显示 某个元素
-
fadeOut() 隐藏
-
fadeToggle() 切换
-
fadeTo() 调整某个元素的透明度
- 第一个参数 : 时间 (不能省略) 时间为 0 也要写出来
- 第二个参数 : 透明度值
自定义动画 :animate
animate() 方法允许我们创建自定义的动画。
语法如下:
对象.animate( { } , 时间 , 回调函数 )
$(selector).animate({params},speed,callback);
参数:
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
方法:
stop() 停止当前正在运行的动画 其余动画继续执行