首页 > 其他分享 >Jquery插件机制

Jquery插件机制

时间:2022-08-20 13:55:51浏览次数:79  
标签:Jquery function 插件 extend 对象 机制 JQuery check

插件:增强JQuery的功能

  • 实现方式:
    • $.fn.extend(object)
      • 增强通过JQuery获取的对象的功能 $("#id")
    • $.extend(object)
      • 增强JQuery对象自身的功能 $/JQuery
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script type="text/javascript" src="/js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //定义jquery的对象插件
        $.fn.extend({
            //定义了一个check()方法 所有的jq对象都可以使用该方法
            check:function () {
                //让复选框选中
                //this:调用该方法的jq对象
                this.prop("checked", true);
            },
            uncheck:function () {
                //让复选框补选中
                this.prop("checked",false)
            }
        });

        $(function () {
        //    获取按钮
        //    $("#ben-check").check();
        //    复选框对象.check();
            $("#btn-check").click(function () {
                $("input[type='checkbox']").check();
            });

            $("#btn-uncheck").click(function () {
                $("input[type='checkbox']").uncheck();
            });
        })
    </script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球

</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script type="text/javascript" src="/js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //对全局方法扩展2个方法,扩展min方法:求2个值的最小值;扩展max方法:求2个值最大值
        $.extend({
            max: function (a,b) {
                return a>=b ? a:b;
            },
            min:function (a,b) {
                return a<=b ? a:b;
            }
        });

        var max = $.max(3,4);
        alert(max);

        var min = $.min(4,8);
        alert(min);

    </script>
</head>
<body>
</body>
</html>


标签:Jquery,function,插件,extend,对象,机制,JQuery,check
From: https://www.cnblogs.com/ailhy/p/16607602.html

相关文章

  • JQuery案例_广告显示和隐藏&JQuery案例_抽奖
    JQuery案例_广告显示和隐藏需求:当页面加载完,3秒后自动显示广告广告显示5秒后,自动消失分析:使用定时器来完成。setTimeout(执行一次定时器)分析发现JQuery的显示......
  • Java SPI机制
    SPI全称ServiceProviderInterface,是java提供的一套服务发现机制,它可以用来启用框架扩展的替换组件。SPI作用:为这些被扩展的API寻找服务发现。SPI是调用方来制定接口规......
  • mybatis分页插件
    添加依赖<!--https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper--><dependency>  <groupId>com.github.pagehelper</groupId>  <artifa......
  • JQuery_案例
    JQuery_案例隔行换色HTML代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scriptsrc="../js/jquery-3.3.1......
  • JQuery插件机制
    JQuery插件机制插件:增强JQuery的功能 1.实现方式: 1.$.fn.extend(object)  (对象) 增强通过JQuery获取的对象的功能 $("#id") 2......
  • JQuery广告显示和隐藏案例和JQuery抽奖案例
    JQuery广告显示和隐藏案例需求:1.当页面加载完,3秒后。自动显示广告2.广告显示5秒后,自动消失。分析:1.使用定时器来完成。setTimeout(执行一次定时器)2.分析......
  • JQuery事件绑定
    事件绑定jquery标准的绑方式jq对象.事件方法(回调函数);<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scripttype="text/......
  • JQuery事件绑定
    事件绑定1.jquery标准的绑定方式jq对象.事件方法(回调函数);注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。表单对象.submit();//让表单提交<......
  • JQuery事件绑定
    JQuery事件绑定标准方式JQuery对象.事件方法(回调函数);注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。表单对象.submit();//让表单提交<!DOCTYPEht......
  • JQuery_遍历for循环&each方法$全局each&forof讲解
    遍历js的遍历方式for(初始化值;循环结束条件;步长)JQuery遍历方式JQuery对象.each(callback)$.each(object,[callback])for..of;<!DOCTYPEhtml><html><hea......