有人可以帮助解释这个jQuery代码吗?

时间:2011-08-30 05:52:47

标签: javascript jquery

$('#AddMoreErrors,#AddMoreMime,#AddMoreRemote').live('click',function(){
    var newRow = $(this).closest('tr');
    $(this).closest('tr').after('<tr class="'+newRow.attr('class')+'">'+newRow.html()+'</tr>').find('span').removeAttr('id').addClass('removetr').html('Del');                  
});

我编写了上面的jquery代码,这就是它的作用:当有人点击“添加更多”时,它会找到最近的tr,将其复制到另一个tr并将其附加到第一个span 。然后,它会找到所有id个,删除其class并添加新的find('span').removeAttr('id').addClass('removetr').html('Del');并更改文字。

现在让我感到惊讶的是removeAttr

我知道我可以span addClass htmlspan和{{1}}如何应用于{{1}}?

4 个答案:

答案 0 :(得分:1)

大多数jQuery方法返回this,所以:

find('span').removeAttr('id').addClass('removetr').html('Del');

表示与:

相同
var foo = find('span');
foo.removeAttr('id');
foo.addClass('removetr')
foo.html('Del');

答案 1 :(得分:1)

我不确定你在问什么,但如果你想知道为什么你可以一个接一个地链接jQuery命令,那是因为每个jQuery函数都返回“this”。使用IIFEs时,您可以轻松地执行相同操作:

function doSth() {
   // Some logic
   return this;
}

实际发生的是,在每次方法调用之后返回对象并继续处理之前调用该方法的同一对象。

这意味着

$("#sel").method().method2().method3();

与写作完全相同

var sel = $("sel");
sel.method();
sel.method2();
sel.method3();

只有它更短,看起来更好,你不需要保存变量,以防你之后不再需要它。

这样,你可以一个接一个地编写一个函数,并且在执行函数之后你总是会拥有完整的jQuery函数。

所以你也看到,为什么所有三种方法都在同一个对象上执行:这就是链接工作的方式。通过调用“$”,您可以创建一个新对象。然后在该对象上执行所有方法。

除非当然,该函数实际返回一个值。然后,这将无法正常工作。

function getSth() {
    return "value";
}

答案 2 :(得分:1)

jQuery在执行每个操作后返回元素的对象,执行顺序从左到右。所以它的.removeAttr('id')将在span上,并且将返回span对象。同样,.addClass('removetr').html('Del');也会执行。

答案 3 :(得分:0)

这称为方法链。每个jQuery方法(removeAttr()addClass()html(val))都返回它所属的jQuery对象。这意味着您可以使用点表示法调用其他方法。