jquery如何知道要运行哪个函数?

How does jquery know which function to run?

本文关键字：函数 运行 何知道 jquery      更新时间：2023-09-26

我有:

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>
<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div>

当我在日期选择框中单击时，日期选择器出现，如预期的那样。

问题:jquery如何知道运行该函数时，我点击框，而不是另一个函数?

如果我想为其他东西添加一个函数，jquery怎么知道要引用哪个?

我习惯使用php，所有函数都有一个名字，你用名字来引用它们。

$是函数名。

该函数在执行时返回一个对象。

该对象具有属性datepicker。

这样想:

var a = {
   datepicker: 'asdf'
};
function b() { return a; };
var c = b().datepicker;

$返回的对象是元素的"包装集"。这是datepicker插件的输入参数。

也就是说，它是这样的:

var a = 'asdf';
function b(val) {
   alert(val);
}
b(a);
// How does the alert box know how to say "asdf"?

.datepicker()是一个扩展，它可能有事件处理程序，它分配给该函数应用的元素。

$本身是一个函数

查看这里的源代码

我假设你指的是这段代码:

$(function(){});
jQuery是基于DOM元素的。$ (function () {});$(document).ready(function(){});

此事件附加到document元素，并在触发ready事件时运行。在这个例子中，ready是函数名，就像你在php中有一个叫做ready的方法一样。只是jQuery为您提供了一种调用它的快捷方式。

datepicker插件根据您通过的id绑定事件。

在jQuery中，你可以将任意数量的事件绑定到一个元素上，然后它将运行你分配给这些事件的函数。

。

$('#mybutton').click(function() { 
    // handle the click event 
});
$('#mytextbox').focus(function(){
    // handle the focus event
});

或

$('#mybutton').bind('click', function(){
   // handle the click event.
});

在datapicker插件中，点击事件被绑定到文本框，然后它调用插件中的一个函数，该函数随后生成日历弹出窗口的代码。

在javascript中，DOM中的对象(HTML元素)具有事件的概念，也就是说，它们可以具有绑定到元素可以响应的特定操作的函数。一个非常常见的事件是click事件，它可能被日期选择器使用。因此，当您调用$( "#datepicker" ).datepicker();时，在日期拾取器函数内部，另一个函数被绑定到id为datepicker的元素的click事件。您也可以将多个函数附加到单个事件中。

因此，实际上，datepicker函数更像是一个设置例程，当您实际单击元素时，将触发绑定到其中一个元素事件的另一个函数，而不是您调用的原始datepicker函数。

.datepicker()的一部分是click事件的附件。当你点击#datepicker时，javascript将运行与该事件相关的所有函数。所以如果你这样做:

$('#datepicker').datepicker();
$('#datepicker').click(function(){
    alert('clicked');
});

日期选择器和警报都将发生。除非您从附加到它的函数中取消bind #datepicker，否则这种情况将继续存在。

$("#datepicker")将选择ID为datepicker的元素，并在其上调用函数.datepicker()将设置必要的事件处理程序和逻辑。

Datepicker是jQuery UI的一部分，源代码在这里。

如果你想自己扩展jQuery，可以看看Plugins/Authoring。基本上，一个插件有这样的结构:

(function($) {
    $.fn.someFunction = function() {
        // `this` refers to the selected elements
        return this.on('click', function() {
            alert('42');
        });
    };
}(jQuery));

当你现在对选定的元素$('div').someFunction()调用这个函数时，它将绑定一个click事件处理程序。

.datepicker()在做同样的事情，尽管要复杂得多。

你的标记可能包括脚本引用jQuery库和jQueryUI库或"datepicker" jQuery插件。

我假设正在使用jQueryUI。jQueryUI包含一个日期拾取器小部件，该小部件是在将库包含在此引用中时注册的。这个小部件用jQuery注册自己，使它可以应用于DOM元素的集合。

$('#datepicker)本身创建了一个引用DOM元素的jQuery对象集合。将".datepicker()"添加或链接到这个集合，如$( "#datepicker" ).datepicker();所示，使用集合作为上下文调用datepicker小部件，并将其自己的事件和方法应用于集合中的每个DOM元素。这包括一个"click"事件，当您单击输入字段时触发该事件，显示日历和日期拾取器小部件提供所需功能所需的任何相关控件。

相关文章：