在jquery$(｛｝）中包装纯javascript对象

wrapping plain javascript object in jquery $({})

本文关键字：包装 javascript 对象 jquery      更新时间：2023-09-26

我在读一本书，其中有一段代码。并想了解$({})的确切含义和用途。

我试着在几个搜索引擎上搜索，甚至在SO上搜索。$({})不是一个搜索友好的术语。

    var Events = {
       bind: function(){
          if ( !this.o ) this.o = $({});
          this.o.bind.apply(this.o, arguments);
       },
       trigger: function(){
          if ( !this.o ) this.o = $({});
          this.o.trigger.apply(this.o, arguments);
       }
    };

我确实发现了一个关于$([])的类似问题，但我不认为这是完全相同的事情。

您只是将一个基本的javascript对象包装为jQuery对象。

来自jquery文档：

使用普通对象

目前，唯一支持的操作在jQuery中封装的纯JavaScript对象上有：.data（）、.prp（）、.bind（）、.ubind（），.triger（）和.trigerHandler（）。在普通对象上使用.data（）（或任何需要.data（（）的方法）将在名为jQuery｛randomNumber｝（例如jQuery123456789）。

// define a plain object
var foo = {foo:'bar', hello:'world'};
// wrap this with jQuery
var $foo = $(foo);
// test accessing property values
var test1 = $foo.prop('foo'); // bar
// test setting property values
$foo.prop('foo', 'foobar');
var test2 = $foo.prop('foo'); // foobar
// test using .data() as summarized above
$foo.data('keyName', 'someValue'); console.log($foo); // will now contain a
                                                      // jQuery{randomNumber}
                                                      // property
// test binding an event name and triggering
$foo.bind('eventName', function (){
    console.log('eventName was called');
});
$foo.trigger('eventName'); // logs 'eventName was called'

应该.t触发器（'eventName'），则它将搜索'eventName]属性，并尝试在附加任何执行jQuery处理程序。它不检查属性是否是否为函数。为了避免这种行为，应改用.trigerHandler（'eventName'）。

$foo.triggerHandler('eventName'); // also logs 'eventName was called'

这里有一个（不太有用）的例子：

​var a =$({});
a.data('b', 3);
console.log(a.data('b')); // this prints 3

如果您保持使用$({})创建的对象，则可以将其用作data、bind等的被调用者。这可能是您可以创建的最小的不可维护DOM的jquery对象。

这实际上更多地与javascript语法有关，而不是与jQuery有关。

{}适用于这样的对象：

 //makes an empty object
 var myObject = {}; 
 //makes an object containing 'foo' and 'bar' as 'firstItem' and 'secondItem'
 var myObject = { firstItem : foo, secondItem : bar };

[]适用于这样的阵列：

 //makes a blank array
 var myArray = [];
 //makes an array containing 'foo' and 'bar' at postions 0 and 1
 var myArray = [foo, bar];

()用于函数（jQuery通常是函数）。这有点复杂，因为它可以有多种含义。

 //running an existing function
 myFunction();
 //running an anonymous function
 (function(){  
    //doSomething }
 )();
 //running a function with an argument
 myFunction(arg);

jQuery通常只是一个名为$的函数，而不是myFunction，所以…

 //runs jQuery as a function on 'arg'
 $(arg);

您传递给jQuery的参数几乎可以是任何东西。如果您向它传递一个类似'#myDiv'jQuery的字符串，它将使用该参数作为选择器从html中获取元素。如果你给它传递其他东西，比如对象或数组，它仍然可以用它做一些事情，比如：http://api.jquery.com/jQuery/正如@dystroy所说。

因此$({})与$(myBlankObject)相同，例如：

var myBlankObject = {};
$(myBlankObject);
//is the same as
$({});

和

var myObjectWithStuff = { firstItem :  foo, secondItem : bar };
$(myObjectWithStuff);
//is the same as
$({ firstItem :  foo, secondItem : bar });

CCD_ 15起作用。$({'selector'})或$(['selector'])不会，因为您传递给jQuery的不是字符串，而是另一种数据类型。

相关文章：