Explication détaillée des opérations des éléments JQuery

Cette fois, je vais vous apporter une explication détaillée du fonctionnement des éléments JQuery. Quelles sont les précautions pour le fonctionnement des éléments JQuery. Voici un cas pratique, jetons un coup d'œil.

Première étape : sélecteur de grésillement

"Rechercher" (ou sélectionner) en fonction de l'identifiant de l'élément, de la classe, du type, de l'attribut, de la valeur de l'attribut, etc. HTML L'élément est simplement basé sur le sélecteur css , en plus de quelques sélecteurs spécifiques.

Étape 2 : Rechercher les ancêtres

parent()

Renvoie l'élément parent direct de l'élément sélectionné. Cette méthode ne montera que d'un niveau. . Traversée de l'arbre DOM

parents()

Des paramètres facultatifs peuvent être utilisés pour filtrer la recherche des éléments parents
Renvoie tous les éléments ancêtres de l'élément sélectionné, jusqu'à la racine. du document Element

parentsUntil()

renvoie tous les éléments ancêtres entre deux éléments donnés. Voici un exemple :

$(document).ready(function(){
  //会返回span开始到p为止的祖先元素
  $("span").parentsUntil("p");
});

Étape 3 : Requête. descendants

children()

Vous pouvez utiliser des paramètres facultatifs pour filtrer la recherche des éléments enfants

Renvoie tous les éléments enfants directs de l'élément sélectionné, qui La méthode ne parcourra l'arborescence DOM qu'un niveau plus bas

find()

Vous pouvez utiliser des paramètres facultatifs pour filtrer la recherche d'éléments

Renvoyer les descendants de l'élément sélectionné, jusqu'au dernier descendant

Étape 4 : interroger les frères et sœurs

siblings()

Renvoyer tous les éléments frères et sœurs de l'élément sélectionné

next()

Renvoie l'élément frère suivant de l'élément sélectionné

nextAll()

Renvoie tous les éléments frères après l'élément sélectionné

nextUntil()

Renvoie tous les éléments frères suivants entre les deux arguments donnés

$(document).ready(function(){
  //返回介于 <h2>与<h6>元素之间的所有同胞元素
  $("h2").nextUntil("h6");
});

prev(), prevAll() et prevUntil() Le

prev() , les méthodes prevAll() et prevUntil() fonctionnent de la même manière que les méthodes ci-dessus, mais dans le sens opposé : elles renvoient l'élément frère précédent (avant l'élément frère le long du parcours d'élément de l'arborescence DOM, et non élément après parcours d'élément).

Étape 5 : Ajouter un filtrage lors de l'interrogation

first()

Renvoyer le premier élément parmi les éléments sélectionnés

last( )

Renvoie le dernier élément parmi les éléments sélectionnés

eq()

Renvoie l'élément avec le numéro d'index spécifié parmi les éléments sélectionnés. par exemple : $(element[flag]) a le même résultat que element.eq(flag)

filter()

filtre les résultats de la requête, similaire à not() ci-dessous, mais a l'effet inverse

not()

Renvoie tous les éléments qui ne correspondent pas au standard

$(document).ready(function(){
  //返回不带有类名"target"的所有p元素
  $("p").not(".target");
});

Une fois les éléments trouvés, il faut ensuite opérer sur le trouvé nœuds selon les besoins.

Étape 6 : text(), html(), val() et attr()

text(), html(), val() et attr ( ), a fonction de rappel . La fonction de rappel prend deux paramètres : l'index de l'élément actuel dans la liste des éléments sélectionnés et la valeur d'origine (ancienne). Renvoyez ensuite la chaîne que vous souhaitez utiliser comme nouvelle valeur de la fonction

1.text() - Définit ou renvoie le contenu textuel de l'élément sélectionné

2.html () - Définir ou renvoyer le contenu de l'élément sélectionné (y compris les balises HTML)

3.val() - Définir ou renvoyer la valeur du champ du formulaire

4.attr() - Définir ou renvoyer la valeur de l'attribut

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "旧文本: " + origText + " 新文本: index: " + i;
  });
});

Étape 7 : Ajouter des éléments

append() - Insérer du contenu à la fin de l'élément sélectionné

prepend() - Insérer du contenu au début de l'élément sélectionné

after() - Insérer du contenu après l'élément sélectionné

before() - Insérer du contenu avant l'élément sélectionné

Étape 8 : Supprimer l'élément

remove()可接受一个参数，允许你对被删元素进行过滤，empty()不可以

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

//等同于$("p.target").remove();
$("p").remove(".target");

第九步：替换元素

replaceAll()和replaceWith()功能类似，但是目标和源相反

replaceWith() - 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

replaceAll() - 用集合的匹配元素替换每个目标元素

第十步：class操作

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

hasClass() - 判断一个元素是否存在该class

第十一步：css()方法

设置或返回被选元素的一个或多个样式属性

css("propertyname"); - 返回propertyname属性的值

css("propertyname","value"); - 设置propertyname属性的值

css({"propertyname":"value","propertyname":"value",...}); - 设置多个值

第十二步：元素尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）

innerWidth() 方法返回元素的宽度（包括内边距）

innerHeight() 方法返回元素的高度（包括内边距）

outerWidth() 方法返回元素的宽度（包括内边距和边框）

outerHeight() 方法返回元素的高度（包括内边距和边框）

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

源生js实现哈夫曼编码步骤详解

Vue实现不刷新分页

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!