jquery类级别的插件开发-CFANZ编程社区

简介

jquery类级别的插件开发，我们可以自定义一些类级别的方法，开发时候使用

正文

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.6.3-min.js"></script>
    <script src="js/jquery-math.js"></script>
    <script src="js/index.js"></script>
    <script src="js/jquery-color.js"></script>
  </head>
  <body>
    jquery插件：<br />
    <input type="button" id="btn" value="对象级别的插件开发" />
    <input type="button" id="btn2" value="测试jquery类级别的插件开发"/>
    <div id="d1" style="color: red;">
      颜色改成红色
    </div>
  </body>
</html>

jquery-math.js

//针对类级别的插件开发
jQuery.extend({
  "max":function(a,b){
    return a>b?a:b;
  },
  "min":function(a,b){
    return a>b?b:a;
  }
})

index.js

$(function(){
  $("#btn").click(function(){
    alert($("#d1").color());
    //$("#d1").css("color","red");
    //document.getElementById("d1").style.color="red";
  })
  
  $("#btn2").click(function(){
    alert($.max(3,6));
    alert($.min(3,6));
  })
  
  })
  
  function test(){
    document.getElementById("d1").style.color="red";
  }

项目结构

jquery类级别的插件开发_插件开发

运行代码

jquery类级别的插件开发_jquery_02