如何添加样式到表单？

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", {开始延长jQuery widget factory传递“ui.format”为“namespace.widgetname”，然后{启动对象通过

“什么是_init意味着”：_init: function() {是一个名为“_init”的函数正在传入widget工厂的对象中定义。

“我可以对”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” 2是一个javascript对象，其中_init被定义为的函数。

很可能，在插件代码的某处，_init将被称为_init（）。