是否有与 MooTools 的 Element() 构造函数等效的 jQuery？

Posted 2023-05-07

【中文标题】是否有与 MooTools 的 Element() 构造函数等效的 jQuery？

【英文标题】：Is there a jQuery equivalent of MooTools' Element() constructor?

【发布时间】：2010-09-15 15:33:07

【问题描述】：

我将为我的网站启动一个 javascript 报告引擎，并开始使用 MooTools 进行一些原型设计。我真的很喜欢能够做这样的事情：

function showLeagues(leagues) 
    var leagueList = $("leagues");
    leagueList.empty();
    for(var i = 0; i<leagues.length; ++i) 
        var listItem = getLeagueListElement(leagues[i]);
        leagueList.adopt(listItem);
    


function getLeagueListElement(league) 
    var listItem = new Element('li');
    var newElement = new Element('a', 
        'html': league.name,
        'href': '?league='+league.key,
        'events': 
                'click': function()  showLeague(league); return false; 
        
    );
    listItem.adopt(newElement);
    return listItem;

据我所知，jQuery 的“采用”类型方法只接受 html 字符串或 DOM 元素。有没有相当于 MooTools 的 Element 的 jQuery？

---

编辑：我在这里寻找的最重要的事情是我的点击事件到链接的程序化附件。

【参考方案1】：

在语法上，使用 jQuery 可能会更好，但使用起来可能更有效

  document.createElement('li')

并且至少消除了对字符串比较测试和次要标记解析的需要。

flydom 如果你坚持要生成大量的 dom 节点，也可能会引起你的兴趣。 （理论上应该更快，但没有测试过）

---

注意：在内部，jQuery("") 看起来可以有效地执行此操作（过于简化）：

jQuery(matcher) --> function(matcher)

   return jQuery.fn.init(matcher) --> function(matcher)
   
      return  this.setArray(
        jQuery.makeArray(
           jQuery.clean(matcher) --> function(matcher)
            
               div = document.createElement('div');
               div.innerHTML = matcher;
               return div.childNodes;
           
        )
      );
   

所以有人会假设“document.createElement”因此是一种“要求”，如果你知道你想要什么（即：不使用$( datahere ) 解析一些第3 方数据）然后@ 987654326@ 恕我直言，它同样合乎逻辑，并且可以提高速度，以避免大量的正则表达式和缓慢的字符串操作。

相比之下：jQuery(document.createElement('div')) 看起来它有效地做到了这一点（过于简单）：

jQuery(matcher) --> function(matcher)

   return jQuery.fn.init(matcher) --> function(matcher)
   
       this[0] = matcher; 
       this.length = 1; 
       return this; 
   

【讨论】：

是否有足够现代的浏览器被不包含这些 DOM 方法的主要 js 库支持？我对使用特定于框架的代码的愿望是双重的——第一，保持我的代码中的语法一致，第二，确保我不必关心浏览器的差异。

答案扩展。据我所知，如果浏览器不支持 document.createElement，那么即使 jQuery 也无法使用它。

为了确定您的意图，您说的是：$('').attr('href', '?league=' + League.key )...，您会推荐： $(document.createElement("a")).attr('href', '?league=' + League.key)... ?

我想补充一下——我已经看过几篇文章（我自己也做过一些测试），并且 $(document.createElement('a')) 总是更快地创建新的jQuery 的元素然后依靠 jQuery 为您执行此操作。普通的 JS 可能总是比依赖库为你做的更快（包括设置元素属性，但有时我们谈论的是毫秒差异，所以它几乎没有实际意义，除非你尽可能地挤压）。

@keif 是的，如果它在一个循环中，它更有可能是一个问题，而且它看起来有点像过早的优化。但是使用显式 JS 对我来说甚至似乎 less 容易出错。这是 Javascript，直到最近，默认情况下它还是很慢；）每个微优化都有帮助。

【参考方案2】：

在 jQuery 中也是如此。基本上要创建一个新元素，您只需输入您想要的 HTML。

function showLeagues(leagues) 
    var $leagueList = $("#leagues");
    $leagueList.empty();
    $.each(leagues, function (index, league) 
        $leagueList.append(getLeagueListElement(league));
    );


function getLeagueListElement(league) 
    return $('<li></li>')
        .append($('<a></a>')
            .html(league.name)
            .attr('href', '?league=' + league.key)
            .click(function() 
                showLeague(league);
                return false;
            )
        )
    ;

【讨论】：

你可以只使用 $('') 而不是 $('') btw

请注意，“”代码是次优的，查看代码显示 jquery 使用正则表达式将其扩展回“”；）