Detaillierte Erläuterung der Attribute und zugehörigen Operationen von Elementen in jQuery_jquery

Elementattribute

Die Attribute des

-Elements können viele nützliche Informationen enthalten. Daher ist es sehr wichtig, wie der Wert im Attribut festgelegt oder abgerufen wird.

Die $.fn.attr-Methode von jQuery kann als Setter und Getter verwendet werden, um den Wert eines Attributs festzulegen oder abzurufen. Ähnlich wie bei der Verwendung von $.fn.css kann $.fn.attr entweder ein einzelnes Attribut gleichzeitig oder mehrere Attribute (Objekte) akzeptieren:

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

Wenn Sie Objekte im obigen Code schreiben, wird dieser in mehreren Zeilen geschrieben, was die Lesbarkeit verbessert.

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

Sobald Elemente in der Ergebnismenge des Selektors vorhanden sind, können diese Elemente als Referenzpunkte zum Durchqueren anderer Elemente verwendet werden. Einzelheiten dazu, wie jQuery Elemente durchläuft, finden Sie unter http://api.jquery.com/category/traversing/, z. B.:

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

Sie können auch die Methode $.fn.each verwenden, um die Elemente im Ergebnissatz einzeln zu verarbeiten:

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

Elemente verschieben, kopieren, löschen

Wenn Sie die Position eines Elements verschieben möchten:

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

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

Ein Element kopieren

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

Wenn Sie beim Kopieren eines Elements die Attribute, Ereignisse und andere Informationen des Elements zusammen kopieren möchten, geben Sie beim Aufruf von $.fn.clone einfach den Parameter true an.

Lassen Sie uns über das Löschen von Elementen sprechen. In jQuery gibt es zwei Methoden zum Löschen von Elementen: $.fn.remove und $.fn.detach. Beide Methoden können Elemente von der Seite löschen und die Rückgabewerte dieser beiden Methoden Es handelt sich bei allen um gelöschte Elemente. Der Unterschied besteht darin, dass das von $.fn.remove zurückgegebene Element keine Zusatzinformationen des Elements mehr enthält, z. B. ID- und Klasseninformationen, und auch keine an das Element gebundenen Ereignisse. $.fn.detach ist unterschiedlich. Die Zusatzinformationen und Ereignisse im gelöschten Element werden ebenfalls gespeichert. Welche verwendet werden sollen, hängt von den tatsächlichen Anforderungen ab.
Neues Element erstellen

jQuery kann neue Elemente schnell ersetzen:

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

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

Beachten Sie, dass im oben übergebenen JavaScript-Objekt das zweite Attribut class in Anführungszeichen steht, da es sich bei html und href um ein reserviertes Wort von JavaScript handelt, sodass keine Anführungszeichen erforderlich sind.

Nach dem Erstellen eines neuen Elements wird das neue Element nicht automatisch zur Seite hinzugefügt. Um es zur Seite hinzuzufügen, können Sie die folgende Methode verwenden:

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

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

Genau genommen ist es nicht notwendig, das neu erstellte Element in einer Variablen zu speichern. Es kann nach der Erstellung direkt zur Seite hinzugefügt werden. Da das neu erstellte Element jedoch häufig mehrfach verwendet wird, muss es in einer Variablen zwischengespeichert werden, damit es nicht wiederholt erstellt werden muss.

Sie können es sogar erstellen, wenn Sie der Seite ein Element hinzufügen, aber in diesem Fall gibt es keine Möglichkeit, einen Verweis auf das neu erstellte Element zu erhalten:

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

Das Hinzufügen neuer Elemente zur Seite ist sehr einfach. Wenn Sie jedoch viele, viele neue Elemente zur Seite hinzufügen müssen, kann es zu Leistungsproblemen kommen. Denn jedes Mal, wenn der Seite ein Element hinzugefügt wird, muss der HTML-Code der gesamten Seite als String verkettet werden, was sehr leistungsintensiv ist. In diesem Fall gibt es in der Regel folgende Lösungen:

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

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

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