如何定义 jQuery 函数？

雨点打透心脏的1/2处 2023-09-29 14:38 17阅读 0赞

在 jQuery 中定义函数与 JavaScript 不同，语法完全不同。函数是一组接受输入、进行特定计算并产生输出的语句。基本上，函数是一组执行某些特定任务或进行某些计算然后将结果返回给用户的语句。  
这个想法是将一些常见或重复完成的任务放在一起并创建一个函数，这样我们就可以调用该函数，而不是为不同的输入一次又一次地编写相同的代码。

**句法：**

$.fn.myFunction = function(){}

下面的例子说明了 jQuery 中的函数定义：

**示例 1：**

<!DOCTYPE html>
    <html>
    
        <head>
            <title>
                How to Define jQuery function ?
            </title>
    
            <script src=
                    "https://code.jquery.com/jquery-1.12.4.min.js">
            </script>
    
            <script>
                $(document).ready(function () {
                    $.fn.myFunction = function () {
                        document.getElementById("geeks").innerHTML
                                = "JQuery function is defined!";
                    }
    
                    $(".gfg").click(function () {
                        $.fn.myFunction();
                    });
                });
            </script>
        </head>
    
        <body style="text-align:center">
    
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
    
            <h3>
                Defining function in jQuery
            </h3>
    
            <p id="geeks"></p>
    
            <button type="button" class="gfg">
                Click
            </button>
        </body>
    
    </html>

**输出：**

![3a52fc21f5554e3c873458f5b08dd08b.gif][]

**示例 2：**

<!DOCTYPE html>
    <html>
    
        <head>
            <title>
                How to Define jQuery function ?
            </title>
    
            <script src=
                    "https://code.jquery.com/jquery-1.12.4.min.js">
            </script>
    
            <script>
                $(document).ready(function () {
                    $.fn.myFunction = function () {
                        alert('JQuery function is defined!');
                    }
                    $(".gfg").click(function () {
                        $.fn.myFunction();
                    });
                });
            </script>
        </head>
    
        <body style="text-align:center;">
    
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
    
            <h3>
                Defining function in jQuery
            </h3>
    
            <button type="button" class="gfg">
                Click
            </button>
        </body>
    
    </html>

**输出：**

![0d699a47bde34b46a4d05bc6ae7eca96.gif][]

[3a52fc21f5554e3c873458f5b08dd08b.gif]: https://img-blog.csdnimg.cn/3a52fc21f5554e3c873458f5b08dd08b.gif
[0d699a47bde34b46a4d05bc6ae7eca96.gif]: https://img-blog.csdnimg.cn/0d699a47bde34b46a4d05bc6ae7eca96.gif