第三章 jquery的属性操作和动画

一,jquery操作属性

1.attr(属性) 查询属性

  <input type="text">
  console.log($("input").attr("type"));

attr()

2.修改属性

    $("div").attr("style","background:green ")

修改属性

3.删除属性removeAttr()

删除上面的绿色背景属性

          $("div").removeAttr("style")

删除属性

prop 也是操作属性的 会完整输出路径
// 对于html本身固有属性,在处理的时候使用prop
// 操作自定义的dom属性,在处理的时候,使用attr

---

添加类名

1.通过attr()添加类名

       $("div").attr("class","box cls") 

attr()添加类名

2.通过addClass()追加类名

如,在上面的box cls类名中在追加一个类名为aaa

     $("div").addClass("aaa")

addClass()

hasClass()判断元素是否有这个类名

如我们检查一下上面的div元素中是否含有aaa的这个类名 并控制台输出出来

         console.log($("div").hasClass("aaa"));

hasClass()

---

二,jquery动画

1.hide(时间)隐藏

()里面的时间是完成动画所需要的时间

<button>隐藏</button>
    <button>显示</button>
    <button>显示/隐藏</button>
    <div style="width: 100px ;height: 100px; background: red;">

    </div>
<script src="../jQuery1/jquery-3.1.1.min.js"></script>
<script>
  $("button").eq(0).click(function(){
        $("div").hide(1000)
    })
</script>

hide.gif

这个jquery的动画方法是非常简便的 那么有隐藏肯定会有显示

2.show()显示

根据上面的代码给第二个按钮绑定一个点击事件

   $("button").eq(1).click(function(){
    $("div").show(1000);
    })

show.gif

toggle(1000)用一个按钮去控制显示隐藏

toggle这个方法会自动判断当前盒模型状态 显示就隐藏 隐藏就显示

       $("button").eq(2).click(function(){
            1$("div").toggle(1000);
        })

toggle.gif

一行代码就控制了 特别简单
当我们快速点击显示 隐藏的按钮时,会发现出一个小bug,当我们鼠标拿走的时候他还会继续根据你的点击次数去执行这个动画

bug.gif

• 解决bug
  stop(true,true) 第一个参数 可以立即结束动画
  第二个参数 让当前正在执行的动画立即完成

一般来说,我们在使用动画的时候都会加上这两个参数为true。

2.delay()延时动画

()里面写毫秒值,是过多长时间,然后开始执行动画
("div").delay(500).hide(1000)//过0.5s隐藏
})

3.下拉slideDown() 上拉slideUp() 自动识别slideToggle(500)

    $("button").eq(0).click(function(){
        $("div").stop(true,true).slideUp()
    })

    $("button").eq(1).click(function(){
        $("div").stop(true,true).slideDown()
    })

    $("button").eq(2).click(function(){
        $("div").stop(true,true).slideToggle(500)
    })

slide.gif

4.淡入隐藏fadeIn 淡入显示fadeOut 淡入显示隐藏fadeToggle

$("button").eq(0).click(function(){
        $("div").stop(true,true).fadeOut(500)
    })

    $("button").eq(1).click(function(){
        $("div").stop(true,true).fadeIn(500)
    })

    $("button").eq(2).click(function(){
        $("div").stop(true,true).fadeToggle(500)
    })

淡入淡出.gif

---

5. animate() 自定义动画

()里面有两个参数
第1个参数是运动过程(left top .....)
第2个参数是完成时间(毫秒值)

里面有很多写法:

backgroundPosition 背景图画位置
borderWidth 边框宽度
margnTop/Left/bottom/Rirht 边距
Left/Top/Bottom/Right 位置
fontSize字体大小

举一个例子:点击按钮让盒子先向右移动200px,并让它的宽度为200px

<button>按钮</button>
    <div></div>
<scritp>
  $("button").click(function(){
           $("div").animate({"left":"+=200px","width":"200px"},2000)
       })
</scritp>

动画.gif

• 也可以设置多重动画

 $("button").click(function(){
        $("div").css("opacity","0.5").animate({"left":"+=200px","opacity":"1"},1000).animate({"left":"-=200px","top":"+=200px"},1500).fadeOut(200)
    })

多重动画.gif