jQuery - 使用要点 - 操纵元素

操纵元素

.html() - 取得和设置HTML内容
.text() - 取得和设置文字内容；HTML会被剥离
.attr() - 取得或设置提供的属性值
.width() - 取得或设置选区中第一个元素的宽度(以像素为单位，整数值)
.height() - 取得或设置选区中第一个元素的高度(以像素为单位，整数值)
.position() - 取得一个对象，其中包含选区中第一个元素相对于其第一个定位父元素的位置信息
.val() - 取得或设置表单元素的值

此种改变会影响选区中的所有元素，若要改变选区中某个特定元素，请特别指定。

// 假定 DIV 有多个 <p> 元素
// 现指定为 DIV 中的第一个 <p> 元素
$( "#myDiv p:first" ).html( "New <strong>first</strong> paragraph!" );

移动、复制、迁移元素

大体上有两种途径来移动DOM周围的元素：

将被选择元素相对于另一个元素放置
将另一个元素相对于被选择元素放置

例如：.insertAfter()方法，将被选择元素放置于作为参数传入方法的元素之后。.after()方法，将作为参数传入方法的元素放置于被选择元素之后。.insertBefore() & before() appendTo() & append() prependTo() & prepend() 也依照上述模式进行操作。.insertAfter() .insertBefore() appendTo() prependTo() 的操作会有对象返回。

// 通过不同的途径移动元素
 
// 降低一个列表元素变更为最后一个元素
var li = $( "#myList li:first" ).appendTo( "#myList" );
 
// 另一种方式
$( "#myList" ).append( $( "#myList li:first" ) );

克隆元素

// 复制元素
 
// 复制列表的第一个元素，然后添加到列表的最后一位
$( "#myList li:first" ).clone().appendTo( "#myList" );

如要同时复制元素相关的数据和事件，.clone()方法中要传入true参数。

移除元素

使用.remove()方法，永久地从页面移除被选择元素。当.remove()方法返回被移除的元素，但若将该被返回的元素返回到页面上，那么该元素中不会再含有原先相关联的数据和事件。

使用.detach()方法移除被选择的元素，该方法返回的元素会继续保持原先相关的数据和事件。

若是将元素保留在页面上，只是移除该元素的内容，可以使用.empty()方法来处理元素内部的HTML。

创建新元素

使用$()方法来创建新元素

// 通过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是保留关键字，所以需要使用双引号包起来

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

操纵属性

// 操纵单一的属性
$( "#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;
});