JavaScript必备小知识-jquery学习(三)

152 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

接前文继续来学习 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()   停止当前正在运行的动画   其余动画继续执行