首页 > 其他分享 >jQuery-插件机制

jQuery-插件机制

时间:2023-02-08 15:25:09浏览次数:32  
标签:jQuery function 插件 对象 复选框 机制 check

jQuery-插件机制

增强JQuery的功能

  1. 实现方式:

    1. $.fn.extend(object)

      增强通过Jquery获取的对象的功能 $("#id")

    2. $.extend(object)

      增强JQeury对象自身的功能 $/jQuery

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
       //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框,uncheck()取消选中所有复选框
        
        
        //1.定义jqeury的对象插件
        $.fn.extend({
            //定义了一个check()方法。所有的jq对象都可以调用该方法
            check:function () {
               //让复选框选中

                //this:调用该方法的jq对象
                this.prop("checked",true);
            },
            uncheck:function () {
                //让复选框不选中

                this.prop("checked",false);
            }
            
        });

        $(function () {
           // 获取按钮
            //$("#btn-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 src="../js/jquery-3.3.1.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(4,3);
        //alert(max);

        var min = $.min(1,2);
        alert(min);
    </script>
</head>
<body>
</body>
</html>

 

标签:jQuery,function,插件,对象,复选框,机制,check
From: https://www.cnblogs.com/yuzong/p/17101872.html

相关文章

  • Idea 下载插件网址
    https://plugins.jetbrains.com/plugin/20549-apifox-helper IDEA插件安装「ApifoxHelper」https://www.apifox.cn/help/ide-plugin/idea-plugin/quickstart/install......
  • [jQuery]判断页面是否滚动到底部
     $(this).scroll(function(){varviewHeight=document.body.clientHeight;//可见高度varcontentHeight=$(".container").get(0).scrollH......
  • javaScript 高级语法 - 构造函数创建对象,原型对象 prototype,对象原型 _proto_,原型对象
    1.构造函数创建对象functionHuman(id,name){this.id=id;//属性this.name=name;this.info=function(){//方法console.log("info:"+this.id+this.name)......
  • React:消息订阅(subscribe)-发布(publish)机制
    发布类似触发事件, 订阅类似监听事件使用这种方式的好处是,兄弟组件间通信不必再像使用props那种通过父组件来通信,多层组件之间通信也不必在一层一层的传递,直接在触发事件......
  • JQuery实现ajax()三种方式
    JQuery实现方式1.$.ajax()语法:$.ajax({键值对})<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><script......
  • 10.7函数调用机制
     上面这个图是函数调用的汇编语言代码:  (1)、(2)、(7)、(8)的处理适用于C语言中所有的函数,我们会在后面展示AddNum函数处理内容时进行说明。这里希望大家先关注一下......
  • 11.7文字及图片的显示机制
    在本章的最后,让我们一起来看一下显示器显示文字及图形的机制。如果用一句话来简单地概括该机制,那就是显示器中显示的信息一直存储在某内存中。该内存称为VRAM(VideoRAM)......
  • 第8课、元素定位-css语和jquery
                fromseleniumimportwebdriverimporttimefromselenium.webdriver.common.action_chainsimportActionChainsfromselenium......
  • Vim中的“有用”的插件介绍
    1.Syntastic和ALESyntastic。这是一个老牌的代码检查插件,其1.0版本发布在2009年。这些年下来,这个插件里积累了好几十种语言的代码检查支持,既有常见的C、C++、Python......
  • 在vue项目中使用nprogess插件
    nprogress插件是在页面刷新和跳转时出现在浏览器顶部的进度条,它会随着页面的加载而显示进度状态。可在官网查看相关效果。在vue项目中使用nprogress插件1.安装:npmin......