Comment faire fonctionner les éléments JQuery

Cette fois, je vais vous montrer comment faire fonctionner les éléments JQuery et quelles sont les précautions à prendre pour faire fonctionner les éléments JQuery. Ce qui suit est un cas pratique, jetons un coup d'œil.

Tout d’abord, voyons comment trouver le nœud souhaité dans jquery.

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

"Rechercher" (ou sélectionner) des éléments HTML en fonction de l'identifiant, de la classe, du type, de l'attribut, de la valeur de l'attribut de l'élément, etc., simple On dit qu'il est basé sur des sélecteurs 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 une 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éfinit ou renvoie l'élément sélectionné Le contenu de l'élément (y compris les balises HTML)

3.val() - Définit ou renvoie la valeur du champ du formulaire

4.attr() - Définit ou renvoie 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 à l'intérieur de l'élément sélectionné Insérer du contenu au début

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 les éléments

remove() accepte un paramètre, vous permettant de filtrer les éléments supprimés, empty() ne peut pas

remove() - supprime les éléments sélectionnés element (et éléments enfants)

empty() - supprime les éléments enfants de l'élément sélectionné

//等同于$("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中文网其它相关文章！

推荐阅读：

怎样使用Angular打开Font-Awesome

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!