jQuery补充

动画效果:

// 基本 ---》s 时间(毫秒)
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])

// 滑动--》展开
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])

// 淡入淡出--> 透明度
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])

// 自定义
animate(p,[s],[e],[fn])
#点赞特效制作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

each 循环:

jQuery.each(collection, callback(indexInArray, valueOfElement)):

描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代

eg:
    li =[10,20,30,40]
    $.each(li,function(i, v){
      console.log(i, v);//index是索引,ele是每次循环的具体元素。
    })

    
.each(function(index, Element)):

描述:遍历一个jQuery对象,为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的,所以关键字 this 总是指向这个元素。

$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象,遍历jQuery集合中的元素 - 被称为隐式迭代的过程
    
简写:
    $("li").addClass("c1");  // 对所有标签做统一操作
    
终止循环:  return false

data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):
    
描述:在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k,值为100

$("div").data("k");//返回第一个div标签中保存的"k"的值

描述:移除存放在元素上的数据,不加key参数表示移除所有保存的数据。
$("div").removeData("k");  //移除元素上存放k对应的数据

jQuery插件:

Query.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>
posted @ 2019-11-20 18:55  black__star  阅读(114)  评论(0编辑  收藏  举报