操作元素

有关 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!" );

link 移动、复制和移除元素

虽然有多种方法可以在 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.

link 克隆元素

诸如 .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()。

link 移除元素

有两种方法可以从页面中移除元素：.remove() 和 .detach()。当您想永久从页面中移除选择器时，使用 .remove()。虽然 .remove() 确实返回被移除的元素，但如果您将这些元素返回到页面，它们将没有与之关联的数据和事件。

如果您需要数据和事件持久存在，请使用 .detach()。与 .remove() 一样，它返回选择器，但它也保留与选择器关联的数据和事件，因此您可以在稍后将选择器恢复到页面。

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

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

link 创建新元素

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( "" ) );

link 操作属性

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;
});