詳解jQuery中的元素的屬性和相關操作

更新時間：2015年08月14日 11:14:22 作者：libuchao

這篇文章主要介紹了詳解jQuery中的元素的屬性和相關操作,jQuery是最為流行的JavaScript庫,需要的朋友可以參考下

元素屬性

元素的屬性中可以包含很多有用的信息，所以如何設置或得到屬性中的值，就顯得非常重要。

jQuery 的 $.fn.attr 方法可以作為 setter 和 getter 使用，用來設置或獲取屬性的值。和 $.fn.css 用法類似，$.fn.attr 既可一次性接受單個屬性，也可以接受多個屬性（對象）：

$('a').attr('href', 'allMyHrefsAreTheSameNow.html');
$('a').attr({
  'title' : 'all titles are the same too!',
  'href' : 'somethingNew.html'
});

上面代碼中寫對象的時候寫成多行了，更具可讀性。

$('a').attr('href'); // 返回選擇其中第一個超鏈接的鏈接地址

一旦選擇器的結果集中有元素了，就可以這些元素為基準點遍歷其它元素了。關于 jQuery 遍歷元素的方法，詳見 http://api.jquery.com/category/traversing/，如：

$('h1').next('p');
$('div:visible').parent();
$('input[name=first_name]').closest('form');
$('#myList').children();
$('li.selected').siblings();

還可以用 $.fn.each 方法，對結果集中的元素一個一個處理：

$('#myList li').each(function(idx, el) {
  console.log(
    'Element ' + idx +
    'has the following html: ' +
    $(el).html()
  );
});

移動、復制、刪除元素

如果要移動一個元素的位置：

// 把第一個列表移至最后
var $li = $('#myList li:first').appendTo('#myList');

// 另外一種方法，也能達到同樣效果
$('#myList').append($('#myList li:first'));

復制一個元素

// 把第一個 li 做一份拷貝，然后放置列表的最后
$('#myList li:first').clone().appendTo('#myList');

如果復制元素的時候，想把元素的屬性和事件等信息也一起復制了的話，調用 $.fn.clone 的時候給個參數(shù) true 就 OK 了。

再說刪除元素，jQuery 中各有兩種方法可以刪除元素：$.fn.remove 和 $.fn.detach，這兩個方法都可以從頁面中刪除元素，并且這兩種方法的返回值都是被刪除的元素，區(qū)別是 $.fn.remove 的返回的元素中的不再包含元素的一些附屬信息，如 id 和 class 等信息，也不包括元素上綁定的事件。$.fn.detach 則不同，將被刪除元素中的附屬信息和事件也一并保存了下來，具體是用哪種，要看實際需求了。
創(chuàng)建新元素

jQuery 可以很快捷的換件新元素：

$('<p>這是一個新段落</p>');
$('<li class="new">新列表元素</li>');

$('<a/>', {
  html : '這是一個 <strong>新</strong> 超鏈接',
  'class' : 'new',
  href : 'foo.html'
});

注意上面?zhèn)魅氲?JavaScript 對象，里面的第二個屬性 class 被加了引號，因為 class 是 JavaScript 的保留字，html 和 href 不是，所以不需要加引號。

創(chuàng)建新元素后，新元素并不會自動加入到頁面中。加入頁面中的話，可以用下面的方法：

var $myNewElement = $('<p>New element</p>');
$myNewElement.appendTo('#content');

$myNewElement.insertAfter('ul:last'); // 此操作會把 p 元素從 #content 中移除
$('ul').last().after($myNewElement.clone()); // 當然也可以克隆一個出來，現(xiàn)在 #content 中有兩個 p 了哦

嚴格來說，不是一定要將新創(chuàng)建的元素保存在一個變量中，可以在創(chuàng)建后直接加入頁面內。但是很多時候新創(chuàng)建的元素都要被多次使用，所以要緩存在一個變量中，這樣不用重復去創(chuàng)建它了。

你甚至可以在向頁面添加元素時創(chuàng)建它，但是這種情況下無法獲得新創(chuàng)建元素的引用：

$('ul').append('<li>list item</li>');

往頁面中添加新元素非常簡單，但是如果需要向頁面新加很多很多個元素的話，可能會有性能問題。因為每次向頁面中添加元素，整個頁面的 HTML 都要作為字符串參與拼接，這是非常耗費性能的。這種情況下，通常有以下處理方法：

var myItems = [], $myList = $('#myList');

for (var i=0; i<100; i++) {
  myItems.push('<li>item ' + i + '</li>');
}

$myList.append(myItems.join(''));

您可能感興趣的文章: