Question

我有一些表单，我想在元素中添加类。这是一个例子：

<form ... id="test1"> </form>
<form ... id="test2"> </form>

我发现了以下内容，但我不理解前几行的语法

(function ($) {

    $.widget("ui.format", {

        _init: function () {

            var self = this; //the plugin object
            var o = self.options; //user options

            //get all form elements
            var form = self.element; //the form that reformed was called on
            var fieldsets = form.find('fieldset');
            var legends = form.find('legend');
            var text_inputs = form.find('input[type="text"] , input[type="password"] , textarea');
            var checkboxes = form.find('input[type="checkbox"]');
            var radios = form.find('input[type="radio"]');
            var buttons = form.find('input[type="reset"] , input[type="submit"], button');

            //add appropraite styles to form elements
            form.addClass('ui-widget');
            fieldsets.addClass('ui-widget ui-widget-content ui-corner-all');
            legends.addClass('ui-widget ui-widget-header ui-corner-all');
            text_inputs.addClass('ui-widget ui-widget-content ui-corner-all');




 }); //end plugin

})(jQuery);

特别是我不明白这一点：

(function ($) {
    $.widget("ui.format", {
        _init: function () {

和最后一行：

})(jQuery);

有人可以向我解释这意味着什么，并指导我完成这三行。

例如：

_init是什么意思
我可以在“ui.format”中使用混合大小写，这是函数的名称吗？
.widget是什么意思，我怎么能将这个代码应用到我的表单中？我假设我需要从我的文档中以某种方式调用它，然后将其附加到特定的表单id。
如果我将此应用于我的表单然后再次应用它会发生什么。它会两次添加相同的类吗？

Answer 1

(function ($) {启动了一个常用于jQuery插件（以及许多其他JavaScript函数）的模式。整个模式是：

(function ($) { //declare an anonymous function that accepts a parameter called '$'
    //your code goes here
}(jQuery)); //Close the anonymous function and pass it the jQuery object

将整个事物包装在括号中使其在加载后立即执行（即在DOM准备好之前）。

$.widget("ui.format", {开始将传递'ui.format'的jQuery widget factory扩展为“namespace.widgetname”，然后{启动要传入的对象。

“_init意味着什么”：_init: function() {是一个名为“_init”的函数，它在传递给小部件工厂的对象中定义。

“我可以使用混合大小写”ui.format“”：不，因为它是被修改的命名空间小部件，而JavaScript是区分大小写的。

至于将此应用到您的代码中，我之前没有看过这个插件，因此我将不得不向您推荐您获得它的网站上的文档。

通常，您通过将选择器传递给jQuery对象并调用窗口小部件（即$('form#test1').ui.widget();）来应用jQuery窗口小部件。

您还可以使用.addClass()函数添加类。

$(document).ready(function () {
    $('form#test1').addClass('yourClassHere');
    $('form#test1').addClass('yourNextClassHere');
    //or just chain them together like so...
    $('form#test1').addClass('classOne').addClass('classTwo').addClass('classThree');
});

Answer 2

据推测，脚本看起来像：

(function($) {
  $.widget("ui.format", {
    _init: function() {
      ...
      ...
    });
})(jQuery);

第一行（与最后一行结合）只意味着在解析脚本时它会立即实际运行它。即：它会在装载后立即运行。

第二行只是调用jquery插件小部件并传入两个参数：

一个是字符串“ui.format” two是一个javascript对象，其中_init被定义为一个函数。

最有可能的是，在插件代码的某处，_init将被调用为_init（）。

如何向表单添加样式？

2 个答案: