使用JQuery创建链接的最佳方法?

2021/01/13 22:11 · jquery ·  · 0评论

我们使用jqGrid自定义格式器在JQuery网格中输出链接。我们只是使用String操作la构造链接:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId + "')\">This is blah<a>";

还有使用JQuery创建链接(和其他表单元素)的更“聪明”的方法吗?

正如Steven Xu正确提到的那样,插入HTML字符串比操作DOM更快,这就是为什么我建议使用字符串操作而不是jQuery创建元素的原因。

您只需要更改此:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah<a>";

对此:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah</a>";

以字符串末尾的结束<a>标记</a>)。

字符串操作比DOM操作要快得多(例如,请参阅示例)。此外,如果您尝试在大型HTML代码的中间插入DOM片段,则差异会更大。DOM DocumentFragments的使用可以稍微提高性能,但是字符串串联的使用是最快的方法。

所有其他答案在没有使用上下文(jqGrid自定义格式器)的知识的情况下写下了他的答案。我试图解释为什么它对您来说很重要。

由于性能方面的优势,jqGrid首先将网格作为字符串数组构建HTML代码片段,然后根据字符串数组从字符串数组构建一个字符串.join(''),并将结果仅插入到表主体的最后。(我想您几乎总是建议使用gridview:true jqGrid选项)。所述的jqGrid自定义格式是电网(表)主体的建筑过程中使用的jqGrid的回调函数。自定义格式程序必须返回HTML代码片段作为字符串作为结果。该字符串将与构成网格主体(表)的其他字符串连接在一起。

因此,如果您将当前代码从纯字符串操作更改为jQuery DOM操作并将结果转换为字符串(需要通过自定义格式返回),那么您的代码将运行缓慢,并且没有其他优点*。

使用字符串操作的唯一真正的缺点是验证您所构建的代码的问题。例如,不使用close标签的代码</a>使用可能是一个潜在的问题。在大多数情况下,将在插入DOM片段期间解决问题,但是有时您会收到真正的问题。因此,您应该非常仔细地测试插入的代码。

还有一点要注意:如果要遵循简洁的JavaScript样式,可以使用“#”作为href属性的值,clickgridCompleteloadComplete事件处理程序中绑定相应的事件如果您对此实施有疑问,可以打开一个新问题,我将尝试为您编写相应的代码示例。

注意:我认为最好的实现方法是将事件绑定列中的每个元素上onCellSelect将其beforeSelectRow绑定click<a>该元素上。我建议阅读以下答案以获取详细信息:这个答案另一个答案另一个旧答案

我找到最好的

$('<a>',{
    text: 'This is blah',
    title: 'Blah',
    href: '#',
    click: function(){ BlahFunc( options.rowId );return false;}
}).appendTo('body');

活生生的例子http://www.jsfiddle.net/gaby/RhWgf/

我已经用附加的处理程序替换了内联javascript

引用有关jQuery()的文档

jQueryhtml道具

html一个字符串,它定义一个独立的 HTML元素(例如<div/>
<div></div>)。
props用于调用新创建的元素的属性,事件和方法的映射。


更新资料

如果您想要链接的实际文本,则应将其包装在div中并返回该文本.html()

或者:您可以使用访问.outerHTMLraw元素属性

完整的例子http://www.jsfiddle.net/gaby/RhWgf/1/删除单击处理程序,因为它会迷失在一个字符串的版本,并用它代替live处理程序,目标特定种类的链接

jQuery('<a>').attr('href', 'url').text('blah')

将创建一个jquery对象,然后可以使用将其添加到dom中.append

我的首选方式是这样的:

$("<a>", {
  title: "Blah",
  href: "javascript:BlahFunc('" + options.rowId + "')"
  }).append( "This is blah" );

本文中有很多信息:http :
//marcgrabanski.com/articles/building-html-in-jquery-and-javascript

通常,插入HTML字符串的速度更快,并且需要进行多次DOM注入和DOM操作,这就是jQuery DOM操作的目的。如果要插入其中的500个,从性能角度来看,最好的选择是准备HTML字符串,然后附加HTML。

但是出于简单的目的,您当前的选择将非常适合您。为了更聪明,您可以在新元素上使用jQuery的DOM操作库。下面的示例应该是不言自明的,但是如果我不清楚某个特定区域,请发表评论,我会为您提供帮助。

var toBeAdded = [
  { title: "one", row: 1, content: "ONE" },
  { title: "two", row: 2, content: "TWO" },
  { title: "three", row: 3, content: "THREE" }
];

var s = toBeAdded.length;
for(i=0;i<s;i++) {
  var a = $('<a>');
  a.attr('title', toBeAdded[i].title);
  a.attr('rel', toBeAdded[i].row);
  a.text(toBeAdded[i].content);
  a.addClass('blah_class');
  a.appendTo($('body'));
}

然后在通用脚本中:

$('a.blah_class').live('click', function(){
  var rel = $(this).attr('rel');
  BlahFunc(rel);
});

这就是帮助我的原因,请从按钮获取链接以获取新链接

var $jsClonedButtonLinkContainer = $('.js-cloned-button-link-container');
$jsClonedButtonLinkContainer.each(function() {
    $('<a>', {
      href: $(this).find('a.nectar-button').attr('href'),
      'class': 'flip-box__cloned-button-link'
    }).prependTo($(this).find('.flip-box-back'));
  });
本文地址:http://jquery.askforanswer.com/shiyongjquerychuangjianlianjiedezuijiafangfa.html
文章标签: ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!