jQeury入门：操作元素 Manipulating Elements

更完整的jQuery操作方法，参见 Manipulation documentation on api.jquery.com。

获取和设置关于元素的信息

有很多方法可以改变当前的元素。在这些方法中最常用的任务是改变元素内部的HTML或者属性。jQuery为这些类型的操作提供了简单的，跨浏览器的方法。你也能够用很多同样的方法用它的获取函数化身来获取关于元素的信息。关于获取函数和设置函数的更多信息，参见 Working with Selections章节。这里有一些你可以用来设置和获取元素信息的方法：

• .html() – 获取或设置元素中的HTML内容。
• .text() – 获取或设置元素中的文本内容；HTML代码会被过滤。
• .attr() – 获取或设置元素提供的属性的值。
• .width() – 获取或设置包装集中的首个元素的宽度整数像素值。
• .height() – 获取或设置包装集中的首个元素的高度整数像素值。
• .position() – 获取包装集中第一个含有定位信息元素的对象，相对于它的第一个被定位的上代元素。这个方法只有获取函数。
• .val() – 获取或设置表单元素的值。

更改相关元素的一些东西不是很重要，但是记住，这个改变将影响包装集中的所有元素。如果你只想更改一个元素，那么在调用设置函数之前，一定要在包装集中指定它。

//更改元素的HTML
$( "#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() 就是被选择的操作。

//用不同的方式移动元素

//让第一条排列到的列表的最后一条
var li = $( "#myList li:first" ).appendTo( "#myList" );

//解决同一个问题的另外一种方法：
$( "#myList" ).append( $( "#myList li:first" ) );

//注意，没有办法访问添加的列表项，被移动后，返回的是列表本身。

克隆元素

象.appendTo()这样的方法移动元素，但是某些时候是需要元素的副本。如果这样，最好用.clone()：

// 生成一个元素的副本

//复制列表项的第一项到列表最后：
$( "#myList li:first" ).clone().appendTo( "#myList" );

如果你需要复制相关的数据和事件，确定传递参数true到.clone()。

删除元素

有两种方式将元素从页面中删除：.remove() 和 .detach()。当你想彻底在页面中删除包装集时，使用.remove()。虽然.remove()会返回删除的元素，如果它们再次在页面中出现，这些元素将不再有依附于他们的关联数据和事件。

如果你需要保留这些数据和事件，使用.detach()。和.remove()一样，它会返回包装集，但在包装集中，它也维持了数据和事件的关联，所以稍后你能够在页面中恢复这个包装集。

如果你对元素做了大量的操作，.detach()方法是非常有价值的。既然这样，从页面中.detach()元素是有益于继续在代码中操作它，然后需要的话就在页面中恢复它。这样限制了昂贵的”DOM touches”并且保留了元素的数据和事件。

如果在页面中你想保留元素但是删除它的内容，你能使用.empty()来处理元素的内部HTML。

创建新元素

jQuery提供了一个平凡且简洁的办法，用和创建包装集一样的$()方法来创建新元素：

// 用HTML字符串创建新的元素
$( "<p>This is a new paragraph</p>" );
$( "<li class=\"new\">new list item</li>" );

// 用属性对象创建一个新元素
$( "<a/>", {
    html: "This is a <strong>new</strong> link",
    "class": "new",
    href: "foo.html"
});

注意上面代码第二个参数中的属性对像，属性名称class在引号中，而属性名称 html 和 href并没有这样。属性名称通常只要不是保留字是不用引号的（而class在这些示例中）。

当你创建一个新的元素，它不会立即被添加到页面中。这里有一些一旦元素被创建就会添加到页面中办法。

//获取页面中一个新的元素

var myNewElement = $( "<p>New element</p>" );

myNewElement.appendTo( "#content" );

myNewElement.insertAfter( "ul:last" ); // 这将从#content移动p

$( "ul" ).last().after( myNewElement.clone() ); //克隆p所以现在有两个

新创建的元素没有必要存储到变量中——你可以直接在$()之后调用在页面中添加元素的方法。不管怎样，更多的时候你想引用添加的元素，因此不用晚些再去选择它。

你也可以创建一个元素然后把它添加到页面中（前面讲的第二种方式），但是注意这种方式你不能取到新创建元素的引用。

//同时在页面中创建并添加元素
$( "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()方法可以允许更复杂的操作。它既可以设置一个明确的值，也可以设置一个从函数返回的值。当这种函数语法被用到，这个函数接收两个参数：这个被改变属性的元素从0开始的索引值，和被改变属性的当前值。

//操作一个单独的属性
$( "#myDiv a:first" ).attr( "href", "newDestination.html" );

// 操作多种属性
$( "#myDiv a:first" ).attr({
    href: "newDestination.html",
    rel: "nofollow"
});

//使用一个函数定义一个属性的新值
$( "#myDiv a:first" ).attr({
    rel: "nofollow",
    href: function( idx, href ) {
        return "/new/" + href;
    }
});

$( "#myDiv a:first" ).attr( "href", function( idx, href ) {
    return "/new/" + href;
});

原文地址