Explication détaillée des attributs et des opérations associées des éléments dans jQuery_jquery

Attributs des éléments

Les attributs de l'élément

peuvent contenir de nombreuses informations utiles, il est donc très important de savoir comment définir ou obtenir la valeur de l'attribut.

La méthode $.fn.attr de jQuery peut être utilisée comme setter et getter pour définir ou obtenir la valeur d'un attribut. Semblable à l'utilisation de $.fn.css, $.fn.attr peut accepter soit un seul attribut à la fois, soit plusieurs attributs (objets) :

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

Lors de l'écriture d'objets dans le code ci-dessus, il est écrit sur plusieurs lignes, ce qui est plus lisible.

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

Une fois qu'il y a des éléments dans le jeu de résultats du sélecteur, ces éléments peuvent être utilisés comme points de référence pour parcourir d'autres éléments. Pour plus de détails sur la façon dont jQuery traverse les éléments, voir http://api.jquery.com/category/traversing/, par exemple :

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

Vous pouvez également utiliser la méthode $.fn.each pour traiter les éléments du jeu de résultats un par un :

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

Déplacer, copier, supprimer des éléments

Si vous souhaitez déplacer la position d'un élément :

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

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

Copier un élément

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

Si vous souhaitez copier ensemble les attributs, événements et autres informations de l'élément lors de la copie d'un élément, donnez simplement le paramètre true lors de l'appel de $.fn.clone.

Parlons de la suppression d'éléments. Il existe deux méthodes dans jQuery pour supprimer des éléments : $.fn.remove et $.fn.detach Les deux méthodes peuvent supprimer des éléments de la page, ainsi que les valeurs de retour de ces deux méthodes. sont Ce sont tous des éléments supprimés. La différence est que l'élément renvoyé par $.fn.remove ne contient plus certaines informations auxiliaires de l'élément, telles que les informations d'identification et de classe, et n'inclut pas non plus les événements liés à l'élément. $.fn.detach est différent. Les informations auxiliaires et les événements de l'élément supprimé sont également enregistrés. Celui à utiliser dépend des besoins réels.
Créer un nouvel élément

jQuery peut remplacer rapidement de nouveaux éléments :

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

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

Notez que dans l'objet JavaScript passé ci-dessus, la deuxième classe d'attribut à l'intérieur est entre guillemets. Parce que class est un mot réservé de JavaScript, html et href ne le sont pas, il n'est donc pas nécessaire d'ajouter des guillemets.

Après avoir créé un nouvel élément, le nouvel élément ne sera pas automatiquement ajouté à la page. Pour l'ajouter à la page, vous pouvez utiliser la méthode suivante :

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

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

À proprement parler, il n'est pas nécessaire de sauvegarder l'élément nouvellement créé dans une variable. Il peut être ajouté directement à la page après sa création. Mais souvent, l'élément nouvellement créé est utilisé plusieurs fois, il doit donc être mis en cache dans une variable afin de ne pas avoir à être créé à plusieurs reprises.

Vous pouvez même le créer lors de l'ajout d'un élément à la page, mais il n'y a aucun moyen d'obtenir une référence à l'élément nouvellement créé dans ce cas :

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

Ajouter de nouveaux éléments à la page est très simple, mais si vous devez ajouter de très nombreux nouveaux éléments à la page, des problèmes de performances peuvent survenir. Car chaque fois qu'un élément est ajouté à la page, le HTML de la page entière doit être concaténé sous forme de chaîne, ce qui est très consommateur de performances. Dans ce cas, il existe généralement les solutions suivantes :

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

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

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