Penjelasan terperinci tentang atribut dan operasi berkaitan elemen dalam jQuery_jquery

Atribut elemen

Atribut elemen

boleh mengandungi banyak maklumat berguna, jadi cara untuk menetapkan atau mendapatkan nilai dalam atribut adalah sangat penting.

Kaedah $.fn.attr jQuery boleh digunakan sebagai setter dan getter untuk menetapkan atau mendapatkan nilai atribut. Sama seperti penggunaan $.fn.css, $.fn.attr boleh menerima sama ada satu atribut sekaligus atau berbilang atribut (objek):

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

Apabila menulis objek dalam kod di atas, ia ditulis dalam berbilang baris, yang lebih mudah dibaca.

$('a').attr('href'); // 返回选择其中第一个超链接的链接地址

Setelah terdapat elemen dalam set hasil pemilih, elemen ini boleh digunakan sebagai titik rujukan untuk melintasi elemen lain. Untuk butiran tentang cara jQuery merentasi elemen, lihat http://api.jquery.com/category/traversing/, seperti:

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

Anda juga boleh menggunakan kaedah $.fn.each untuk memproses elemen dalam set hasil satu demi satu:

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

Alih, salin, padam elemen

Jika anda ingin mengalihkan kedudukan elemen:

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

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

Salin elemen

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

Jika anda ingin menyalin atribut elemen, peristiwa dan maklumat lain bersama-sama semasa menyalin elemen, hanya berikan parameter benar apabila memanggil $.fn.clone.

Mari kita bincangkan tentang memadam elemen Terdapat dua kaedah dalam jQuery untuk memadamkan elemen: $.fn.remove dan $.fn.detach Kedua-dua kaedah boleh memadamkan elemen dari halaman, dan nilai pulangan kedua-dua kaedah ini adalah Semuanya adalah elemen yang dipadamkan Perbezaannya ialah elemen yang dikembalikan oleh $.fn.remove tidak lagi mengandungi beberapa maklumat sampingan elemen, seperti maklumat id dan kelas, dan ia juga tidak termasuk peristiwa yang terikat pada elemen. $.fn.detach adalah berbeza Maklumat dan peristiwa tambahan dalam elemen yang dipadam juga disimpan yang mana satu untuk digunakan bergantung pada keperluan sebenar.
Buat elemen baharu

jQuery boleh menggantikan elemen baharu dengan pantas:

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

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

Perhatikan bahawa dalam objek JavaScript yang diluluskan di atas, kelas atribut kedua di dalamnya dipetik Kerana kelas adalah perkataan simpanan JavaScript, html dan href tidak, jadi tidak perlu menambah petikan.

Selepas mencipta elemen baharu, elemen baharu tidak akan ditambahkan pada halaman secara automatik. Untuk menambahkannya pada halaman, anda boleh menggunakan kaedah berikut:

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

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

Tegasnya, tidak perlu menyimpan elemen yang baru dibuat dalam pembolehubah Ia boleh ditambah terus ke halaman selepas penciptaan. Tetapi banyak kali elemen yang baru dicipta digunakan berbilang kali, jadi ia perlu dicache dalam pembolehubah supaya ia tidak perlu dibuat berulang kali.

Anda juga boleh menciptanya apabila menambahkan elemen pada halaman, tetapi tiada cara untuk mendapatkan rujukan kepada elemen yang baru dibuat dalam kes ini:

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

Menambah elemen baharu pada halaman adalah sangat mudah, tetapi jika anda perlu menambah banyak, banyak elemen baharu pada halaman, mungkin terdapat masalah prestasi. Kerana setiap kali elemen ditambahkan pada halaman, HTML keseluruhan halaman mesti digabungkan sebagai rentetan, yang sangat memakan prestasi. Dalam kes ini, biasanya terdapat penyelesaian berikut:

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

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

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