jQuery补充

Posted shaozheng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于jQuery补充的主要内容，如果未能解决你的问题，请参考以下文章

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）