操作元素

有关 jQuery 操作方法的完整文档，请访问 api.jquery.com 上的操作文档。

link 获取和设置有关元素的信息

有许多方法可以更改现有元素。最常见的任务之一是更改元素的内部 HTML 或属性。jQuery 为这些类型的操作提供了简单、跨浏览器的办法。您还可以使用许多相同方法的 getter 形式获取有关元素的信息。有关 getter 和 setter 的更多信息，请参阅 使用选择 部分。以下是您可以用来获取和设置有关元素的信息的一些方法

• .html() – 获取或设置 HTML 内容。
• .text() – 获取或设置文本内容；HTML 将被剥离。
• .attr() – 获取或设置提供的属性的值。
• .width() – 获取或设置选择中第一个元素的宽度（以像素为单位），结果为整数。
• .height() – 获取或设置选择中第一个元素的高度（以像素为单位），结果为整数。
• .position() – 获取一个对象，其中包含选择中第一个元素的位置信息，相对于其第一个定位的祖先。这仅是一个 getter。
• .val() – 获取或设置表单元素的值。

更改元素很简单，但请记住，更改将影响选择中的所有元素。如果您只想更改一个元素，请务必在调用 setter 方法之前在选择中指定该元素。

// Changing the HTML of an element.
$( "#myDiv p:first" ).html( "New <strong>first</strong> paragraph!" );

链接 移动、复制和删除元素

虽然有多种方法可以在 DOM 中移动元素，但通常有两种方法

• 将所选元素相对于另一个元素放置。
• 将元素相对于所选元素放置。

例如，jQuery 提供了 .insertAfter() 和 .after()。.insertAfter() 方法将所选元素放置在作为参数提供的元素之后。.after() 方法将作为参数提供的元素放置在所选元素之后。其他几个方法遵循此模式：.insertBefore() 和 .before()、.appendTo() 和 .append() 以及 .prependTo() 和 .prepend()。

最有意义的方法取决于所选元素以及是否需要存储对添加到页面中的元素的引用。如果需要存储引用，则始终需要采用第一种方法 - 将所选元素相对于另一个元素放置 - 因为它会返回放置的元素。在这种情况下，.insertAfter()、.insertBefore()、.appendTo() 和 .prependTo() 应该是首选工具。

// Moving elements using different approaches.
 
// Make the first list item the last list item:
var li = $( "#myList li:first" ).appendTo( "#myList" );
 
// Another approach to the same problem:
$( "#myList" ).append( $( "#myList li:first" ) );
 
// Note that there's no way to access the list item
// that we moved, as this returns the list itself.

链接 克隆元素

诸如 .appendTo() 之类的函数会移动元素，但有时需要元素的副本。在这种情况下，首先使用 .clone()

// Making a copy of an element.
 
// Copy the first list item to the end of the list:
$( "#myList li:first" ).clone().appendTo( "#myList" );

如果需要复制相关数据和事件，请务必将 true 作为参数传递给 .clone()。

链接 删除元素

有两种方法可以从页面中删除元素：.remove() 和 .detach()。当您想要从页面中永久删除所选内容时，请使用 .remove()。虽然 .remove() 确实返回已删除的元素，但如果您将它们返回到页面，这些元素将不会附加其关联的数据和事件。

如果您需要数据和事件持续存在，请使用 .detach()。与 .remove() 一样，它返回所选内容，但它还维护与所选内容关联的数据和事件，因此您可以稍后将所选内容恢复到页面。

如果您对元素进行大量操作，则 .detach() 方法非常有价值。在这种情况下，最好从页面中 .detach() 元素，在代码中对其进行处理，然后在完成后将其恢复到页面。这限制了昂贵的“DOM 触摸”，同时维护元素的数据和事件。

如果您想将元素留在页面上但删除其内容，可以使用 .empty() 来处理元素的内部 HTML。

链接 创建新元素

jQuery 提供了一种简单而优雅的方式来创建新元素，使用与用于进行选择的相同 $() 方法

// Creating new elements from an HTML string.
$( "<p>This is a new paragraph</p>" );
$( "<li class=\"new\">new list item</li>" );

// Creating a new element with an attribute object.
$( "<a/>", {
    html: "This is a <strong>new</strong> link",
    "class": "new",
    href: "foo.html"
});

请注意，在上面第二个参数中的属性对象中，属性名称 class 带有引号，而属性名称 html 和 href 则没有。属性名称通常不需要带引号，除非它们是 保留字（如本例中的 class）。

创建新元素时，不会立即将其添加到页面中。创建元素后，有几种方法可以将其添加到页面中。

// Getting a new element on to the page.
 
var myNewElement = $( "<p>New element</p>" );
 
myNewElement.appendTo( "#content" );
 
myNewElement.insertAfter( "ul:last" ); // This will remove the p from #content!
 
$( "ul" ).last().after( myNewElement.clone() ); // Clone the p so now we have two.

创建的元素不需要存储在变量中——你可以在 $() 之后直接调用该方法将元素添加到页面中。但是，大多数情况下，你希望引用已添加的元素，这样就无需以后再选择它。

你也可以在将元素添加到页面时创建元素，但请注意，在这种情况下，你无法引用新创建的元素

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );

将新元素添加到页面的语法很简单，因此很容易忘记反复添加到 DOM 的巨大性能开销。如果你要向同一容器添加多个元素，则需要将所有 HTML 连接成一个字符串，然后将该字符串附加到容器中，而不是一次附加一个元素。使用数组收集所有部分，然后将它们连接成一个字符串进行附加

var myItems = [];
var myList = $( "#myList" );
 
for ( var i = 0; i < 100; i++ ) {
    myItems.push( "<li>item " + i + "</li>" );
}
 
myList.append( myItems.join( "" ) );

链接 操作属性

jQuery 的属性操作功能非常广泛。基本更改很简单，但 .attr() 方法还允许进行更复杂的更改。它可以设置显式值，或使用函数的返回值设置值。使用函数语法时，该函数接收两个参数：正在更改其属性的元素的从零开始的索引，以及正在更改的属性的当前值。

// Manipulating a single attribute.
$( "#myDiv a:first" ).attr( "href", "newDestination.html" );

// Manipulating multiple attributes.
$( "#myDiv a:first" ).attr({
    href: "newDestination.html",
    rel: "nofollow"
});

// Using a function to determine an attribute's new value.
$( "#myDiv a:first" ).attr({
    rel: "nofollow",
    href: function( idx, href ) {
        return "/new/" + href;
    }
});
 
$( "#myDiv a:first" ).attr( "href", function( idx, href ) {
    return "/new/" + href;
});