jQuery_jqueryの要素の属性と関連する操作の詳細な説明

要素の属性

要素の属性には多くの有用な情報が含まれる可能性があるため、属性の値を設定または取得する方法は非常に重要です。

jQuery の $.fn.attr メソッドは、属性の値を設定または取得するためのセッターおよびゲッターとして使用できます。 $.fn.css の使用法と同様に、$.fn.attr は一度に 1 つの属性または複数の属性 (オブジェクト) を受け入れることができます:

$('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 メソッドを使用して、結果セット内の要素を 1 つずつ処理することもできます。

$('#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 に指定するだけです。

要素の削除について話しましょう。jQuery には $.fn.remove と $.fn.detach という 2 つのメソッドがあり、どちらのメソッドもページから要素を削除できます。また、これら 2 つのメソッドの戻り値も同様です。これらはすべて削除された要素です。違いは、$.fn.remove によって返される要素には、ID やクラス情報などの要素の補助情報が含まれておらず、要素にバインドされているイベントも含まれていないことです。 $.fn.detach は異なります。削除された要素内の補助情報とイベントも保存されます。どちらを使用するかは、実際のニーズによって異なります。
新しい要素を作成します

jQuery は新しい要素をすぐに置き換えることができます:

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

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

上記で渡された JavaScript オブジェクトでは、内部の 2 番目の属性クラスが引用符で囲まれていることに注意してください。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(''));