首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 15:44:57
原創
1243 人瀏覽過

元素屬性

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

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 的時候給個參數 true 就 OK 了。

再說刪除元素,jQuery 中各有兩種方法可以刪除元素:$.fn.remove 和$.fn.detach,這兩個方法都可以從頁面中刪除元素,而這兩種方法的回傳值都是被刪除的元素,區別是$.fn.remove 的返回的元素中的不再包含元素的一些附屬信息,如id 和class 等信息,也不包括元素上綁定的事件。 $.fn.detach 則不同,將被刪除元素中的附屬資訊和事件也一併保存了下來,具體是用哪種,要看實際需求了。
建立新元素

jQuery 可以很快速的換件新元素:

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

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

登入後複製

注意上面傳入的 JavaScript 對象,裡面的第二個屬性 class 被加了引號,因為 class 是 JavaScript 的保留字,html 和 href 不是,所以不需要加引號。

建立新元素後,新元素並不會自動加入頁面。加入頁面中的話,可以用下面的方法:

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

$myNewElement.insertAfter('ul:last'); // 此操作会把 p 元素从 #content 中移除
$('ul').last().after($myNewElement.clone()); // 当然也可以克隆一个出来,现在 #content 中有两个 p 了哦

登入後複製

嚴格來說,不是一定要將新建立的元素保存在一個變數中,可以在創建後直接加入頁面內。但是很多時候新創建的元素都要被多次使用,所以要緩存在一個變數中,這樣不用重複創建它了。

你甚至可以在向頁面添加元素時創建它,但是這種情況下無法獲得新創建元素的引用:

$('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(''));

登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板