简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Résumé de la syntaxe de base de jQuery

Résumé de la syntaxe de base de jQuery

怪我咯
怪我咯original
2017-06-27 11:13:361710parcourir

Syntaxe jQuery :

La syntaxe jQuery est compilée pour la sélection d'éléments HTML et peut effectuer certaines opérations sur les éléments. C'est le point clé. Les débutants doivent savoir à quoi servent les choses que vous apprenez.

La syntaxe de base est : $(selector).action(). Tout jQuery tourne autour de cela, en sélectionnant des éléments sur la page puis en effectuant certaines opérations sur les éléments.

Exemple

$(this).hide() - masquer l'élément actuel

Fonction Document prêt :

sert à empêcher l'exécution du code jQuery avant que le document ne soit complètement chargé (prêt). En raison de la convention de jQuery, tout le code JavaScript est mieux placé ici. 


$(document).ready(function(){
});




Sélecteurs d'éléments jQuery et sélecteurs d'attributs : Ils vous permettent de sélectionner des éléments HTML par nom de balise, nom d'attribut ou contenu. Correspond à la première moitié de $(selector).action().

sélecteur d'élément jQuery :

$("p") sélectionne l'élément e388a4556c0f65e1904146cc1a846bee

$("p.intro") sélectionne tous les éléments e388a4556c0f65e1904146cc1a846bee avec class="intro".

$("p#demo") sélectionne tous les éléments e388a4556c0f65e1904146cc1a846bee avec id="demo".

sélecteur d'attribut jQuery :


$("[href]") Sélectionnez tout avec l'attribut href de l'élément.

$("[href='#']") sélectionne tous les éléments avec une valeur href égale à "#".

$("[href!='#']") sélectionne tous les éléments dont la valeur href n'est pas égale à "#".


$("[href$='.jpg']") sélectionne tous les éléments dont la valeur href se termine par ".jpg".

sélecteur CSS jQuery :

$("p").css("background-color","red");

Pour le manuel de référence complet du sélecteur jquery : http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp




Fonction événementielle jQuery : correspond à la seconde moitié de $(selector).action().


Les gestionnaires d'événements font référence à des méthodes appelées lorsque certains événements se produisent en HTML. 



<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>


Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

完整的jQuery事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp



约定：


  • 把所有 jQuery 代码置于事件处理函数中

  • 把所有事件处理函数置于文档就绪事件处理器中

  • 把 jQuery 代码置于单独的 .js 文件中

  • 如果存在名称冲突，则重命名 jQuery 库




jQuery 效果：对应$(selector).action()的后半部分。

隐藏、显示、切换，滑动，淡入淡出，以及动画

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

$(selector).hide(speed,callback);

$(selector).show(speed,callback);


可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
5cd6e472395e766622bc5d31b556eb7a
$(document).ready(function(){
  $("button#yincang").click(function(){
  $("p#id").hide(1000,function(){alert('bye')});
  });
});
$(document).ready(function(){
  $("button#xian").click(function(){

  $("p#id").show(function(){1000,alert('hello')});

  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
d3259590dd7a1c44081cbc652a12289e显示65281c5ac262bf6d81768915a4a77ac0
c67eb663ef3bebc02acf98265a3b6c6c隐藏65281c5ac262bf6d81768915a4a77ac0
61fff9001bdd35ddad63ed11e0534569这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$(selector).toggle(speed,callback);


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
5cd6e472395e766622bc5d31b556eb7a
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
a73a95372d4794d0f15522f518a543e9切换65281c5ac262bf6d81768915a4a77ac0
e388a4556c0f65e1904146cc1a846bee这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e





jQuery 淡入淡出方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

  • fadeIn()

  • fadeOut()

  • fadeToggle()       jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

  • fadeTo()           fadeTo() 方法允许渐变的最终结果为给定的不透明度（值介于 0 与 1 之间，0为透明，1为不透明）。




jQuery 滑动方法


通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

  • slideDown()

  • slideUp()

  • slideToggle()




jQuery 动画 - animate() 方法


jQuery animate() 方法用于创建自定义动画。


$(selector).animate({params},speed,callback);


必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。


可选的 callback 参数是动画完成后所执行的函数名称。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

Vous pouvez utiliser la méthode animate() pour manipuler toutes les propriétés CSS. Une chose importante à retenir : lorsque vous utilisez animate(), vous devez utiliser la notation Camel pour écrire tous les noms de propriété, par exemple, You. doit utiliser paddingLeft au lieu de padding-left, marginRight au lieu de margin-right, et ainsi de suite.


Il déplace l'élément e388a4556c0f65e1904146cc1a846bee vers la gauche jusqu'à ce que l'attribut gauche soit égal à 250 pixels :

c6e9d9ae0408d6bf8142096449dae1e0

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e99
196e5b1bb8e1ab63d69872f6ce8c96c9
$(document).ready(function(){
$("bouton").click(function(){
$("p ") .animate({left:'250px'});
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
bb9345e55eb71822850ff156dfde57c8Démarrer l'animation65281c5ac262bf6d81768915a4a77ac0
2e00dd0040e8506703822d6805b3e1af
< ;/p>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

jQuery fournit une fonctionnalité de file d'attente pour les animations, ce qui signifie que si vous écrivez plusieurs animate() appels, jQuery crée une file d'attente "interne" contenant ces appels de méthode. Exécutez ensuite ces appels animés un par un.

$("button").click(function(){
var p=$("p");
p.animate({height:'300px',opacity:'0.4 '},"lent");
p.animate({width:'300px',opacity:'0.8'},"lent");
p.animate({height:'100px',opacity: '0.4'},"lent");
p.animate({width:'100px',opacity:'0.8'},"lent");

});

Vous pouvez utiliser le format suivant à la place

p.animate({height:'300px',opacity:'0.4'},"slow").animate({width:'300px',opacity:'0.8 '}, "slow");



La méthode jQuery stop() est utilisée pour arrêter des animations ou des effets avant qu'ils ne soient terminé Faites un arrêt.

$(selector).stop(stopAll,goToEnd);

Le paramètre facultatif stopAll spécifie si la file d'attente d'animation doit être effacée. La valeur par défaut est false, ce qui arrête uniquement les animations actives, permettant ainsi à toutes les animations en file d'attente de s'exécuter à l'envers.

Le paramètre facultatif goToEnd spécifie s'il faut terminer l'animation en cours immédiatement. La valeur par défaut est faux.


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
e77e3def01ecc49f4830089c2ebfde692cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("#flip").click(function( ){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$(" #panel").stop();
});
});
2cacc6d41bbb37262a98f745aa00fbf0

080b747a20f9163200dd0a7d304ba388
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
affichage:aucun;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

a7a60cea450f42b2b97b16a5d74b9609Arrêter le glissement65281c5ac262bf6d81768915a4a77ac0
f558f125c0943b004f5cbfcc7dd20fd7Cliquez ici pour faire glisser le panneau vers le bas6fb279ad3fd4344cbdd93aac6ad173ac ;
55a50214d3a0454ac595f64158e13d7eBonjour tout le monde !94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e



La fonction de rappel est exécutée une fois l'animation en cours terminée à 100 %.

$(selector).hide(speed,callback)

$("p").hide(1000,function(){
alert("Le paragraphe est maintenant masqué" );

});

Animation complète : http://www.w3school.com.cn/jquery/jquery_ref_effects.asp



jQuery dispose de méthodes puissantes pour manipuler les éléments et attributs HTML.

Opérations DOM jQuery :

DOM = Document Object Model, "Le modèle objet de document du W3C est une interface indépendante de la plate-forme et du langage qui permet aux programmes et aux scripts d'accéder et de mettre à jour dynamiquement les documents. Contenu , structure et style. "



Obtenez la valeur en dom :

Trois A. Méthode jQuery simple et pratique pour la manipulation du DOM :

  • text() - Définit ou renvoie le contenu texte de l'élément sélectionné

  • html () - Définit ou renvoie le contenu de l'élément sélectionné (y compris les balises HTML)

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

    $("# btn1 ").click(function(){
    alert("Texte : " + $("#test").text());
    });
    $("#btn2"). cliquez sur (function(){
    alert("HTML: " + $("#test").html());
    });

    $("#btn1").click(function(){
    alert("Valeur : " + $("#test").val());
    });

    $("button").click(function(){
    alert($("#w3s").attr("href"));
    });

Définir la valeur DOM :

$("#btn1").click(function(){
$("#test1") .text("Bonjour tout le monde!");
});
$("#btn2").click(function(){
$("#test2").html("d987a14c82bf927fc7ba0ea4935160cd");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");

});

La fonction de rappel de text(), html() et val(), la fonction de rappel a deux paramètres : l'élément sélectionné L'index de l'élément actuel dans la liste et la valeur d'origine (ancienne). Ensuite, le contenu de retour de la fonction return est utilisé comme nouvelle valeur.

$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Ancien texte : " + origText + " Nouveau texte : Bonjour tout le monde !
(index : " + i + ")";
});
});

$("#btn2").click (function(){
$("#test2").html(function(i,origText){
return "Ancien html : " + origText + " Nouveau html : Bonjour a4b561c25d9afb9ac8dc4d70affff419world!07aec8279184d16fedc0638ac18fa96e
(index : " + i + ")";
});

});

$("bouton").click(function() {
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});

}) ;



Ajouter une nouvelle valeur au DOM :


  • 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é element

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

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


$("p").append("Du texte ajouté.");

$("p").prepend("Certains texte ajouté.");

$("img").after("Un peu de texte après");

$("img").before(" Un peu de texte avant");



Supprimer des éléments dans le DOM :


Si vous devez supprimer des éléments et du contenu, vous pouvez généralement utiliser les deux méthodes jQuery suivantes :

  • remove() - supprime l'élément sélectionné ( et son élément enfants)

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

$("#p1").remove( );

$("#p1").empty();


La méthode jQuery remove() accepte également un paramètre, vous permettant de supprimer l’élément à filtrer.

Ce paramètre peut être n'importe quelle syntaxe de sélecteur jQuery.


100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e99 2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("bouton").click(function(){
$("p" ).remove(".italic");
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

e388a4556c0f65e1904146cc1a846beeCeci est un paragraphe dans le p.94b3e26ee717c64999d7867364b1b4a3
41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932Ceci est un autre paragraphe dans le p.41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932Ceci est un autre paragraphe de la classe p.72ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3
bb9345e55eb71822850ff156dfde57c8Delete Tous les éléments p de ="italic"65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e


jQuery dispose de plusieurs méthodes pour effectuer des opérations CSS. Nous apprendrons ce qui suit :


addClass() - Ajouter une ou plusieurs classes à l'élément sélectionné

removeClass() - Supprimer de l'élément sélectionné élément sélectionné Sélectionnez un élément pour supprimer une ou plusieurs classes


toggleClass() - effectue une opération de changement de classe d'ajout/suppression sur l'élément sélectionné

  • css( ) - Définir ou renvoyer les attributs de style

    • 8b05045a5be5764f313ed5b9168a17e6
    100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
    13f74617924f42bfb61a111e3dec0e993fa3f474cbb4b6d948eebecb1be5dde4
    3f1c4e4b6b16bbbd69b2ee476dc4f83a
    $(document).ready(function(){
    $("bouton").click(function(){
    $("h1,h2,p ").addClass("blue");
    $("p").addClass("important");
    });
    });
    2cacc6d41bbb37262a98f745aa00fbf0
    080b747a20f9163200dd0a7d304ba388
    .important
    {
    font-weight:bold;
    font-size:xx-large;
    }
    .blue
    {
    couleur:bleu;
    }
    531ac245ce3e4fe3d50054a55f265927
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d

    4a249f0d628e2318394fd9b75b4636b1Titre 1< ;/h1>
    c1a436a314ed609750bd7c7d319db4daTitre 22e9b454fa8428549ca2e64dfac4625cd
    e388a4556c0f65e1904146cc1a846beeCeci est un paragraphe. 94b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846bee Ceci est un autre paragraphe. 94b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846beeC'est un texte très important ! 94b3e26ee717c64999d7867364b1b4a3
    0c6dc11e160d3b678d68754cc175188a
    bb9345e55eb71822850ff156dfde57c8Ajouter une classe à l'élément65281c5ac262bf6d81768915a4a77ac0

    36cc49f0c466276486e50c850b7e4956

    73a6ac4ed44ffec12cee46588e518a5e 🎜>

    Vous pouvez également spécifier plusieurs classes dans la méthode addClass() :

    $("button").click(function(){

    $("#p1"). addClass( "bleu important");
    });


    Méthode jQuery css()


    css () La méthode définit ou renvoie une ou plusieurs propriétés de style de l’élément sélectionné.

    Pour renvoyer la valeur de la propriété CSS spécifiée, veuillez utiliser la syntaxe suivante

    $("p").css("background-color");

    If obligatoire Pour définir les propriétés CSS spécifiées, veuillez utiliser la syntaxe suivante :

    $("p").css("background-color","white");

    Si vous devez définissez plusieurs propriétés CSS, veuillez utiliser la syntaxe suivante :

    $("p").css({"background-color": "jaune", "font-size": "200%"});



    Gestion par jQuery des tailles d'éléments :

    Avec jQuery, c'est éléments faciles à gérer et taille des fenêtres du navigateur.


    • largeur()

    • hauteur()

    • innerWidth()

    • innerHeight()

    • outerWidth()

    • outerHeight()



    width() définit ou renvoie la largeur de l'élément (sans compter le remplissage, la bordure ou les marges). ). La méthode

    height() définit ou renvoie la hauteur d'un élément (sans compter le remplissage, les bordures ou les marges).

    $("bouton").click(function(){

    var txt="";

    txt+="Largeur : " + $("#p1").width() + "0b9f73f8e206867bd1f5dc5957dbcb38";
    txt+="Hauteur : " + $("#p1").height();
    $("#p1").html(txt);

    });


    La méthode innerWidth() renvoie la largeur de l'élément (y compris le remplissage).

    La méthode innerHeight() renvoie la hauteur de l'élément (y compris le remplissage). La méthode


    outerWidth() renvoie la largeur de l'élément (y compris le remplissage et les bordures). La méthode

    outerHeight() renvoie la hauteur de l'élément (y compris le remplissage et la bordure). La méthode


    outerWidth(true) renvoie la largeur de l'élément (y compris le remplissage, la bordure et la marge). La méthode

    outerHeight(true) renvoie la hauteur de l'élément (y compris le remplissage, la bordure et la marge).

    L'exemple suivant définit la largeur et la hauteur de l'élément e388a4556c0f65e1904146cc1a846bee spécifié : $("button").click( function (){ $("#p1").width(500).height(500 });




    Mouvement jQuery :

    Le parcours jQuery, signifiant « déplacer », est utilisé pour se déplacer en fonction de son rapport aux autres. elements Relations pour "trouver" (ou sélectionner) des éléments HTML. Commencez par une sélection et avancez dans cette sélection jusqu'à atteindre l'élément souhaité.

    Avec le parcours jQuery dans un arbre généalogique, vous pouvez partir de l'élément sélectionné (actuel) et vous déplacer facilement vers le haut (ancêtres), vers le bas (descendants) et horizontalement (frères et sœurs) dans l'arbre généalogique). Ce mouvement est appelé traversée du DOM.

    jQuery fournit une variété de méthodes pour parcourir le DOM. La plus grande catégorie de méthodes de traversée est la traversée d’arbres.


    Parcourir l'arborescence DOM


    Ces méthodes jQuery sont utiles pour parcourir l'arborescence DOM :

      parent()

      • parents()

      • parentsUntil()

    • La méthode parent() renvoie l'élément parent direct de l'élément sélectionné. Cette méthode ne parcourt l'arborescence DOM qu'un niveau plus haut.
    $(document).ready(function(){

    $("span").parent();

    });


    parents() renvoie la méthode sélectionnée Tous les ancêtres de l'élément, jusqu'à l'élément racine du document (100db36a723c770d327fc0aef2ce13b1).

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

    L'exemple suivant renvoie tous les ancêtres de tous les éléments 45a2772a6b6107b401db3c9b82c049c2 qui sont des éléments ff6d136ddc5fdfeffaf53ff6ee95f185 :

    $(document).ready(function(){
    $("span ") La méthode .parents("ul");
    });


    la méthode parentsUntil() renvoie tous les éléments ancêtres entre deux éléments donnés, Ni le début ni la fin ne sont inclus .

    L'exemple suivant renvoie tous les éléments ancêtres entre les éléments 45a2772a6b6107b401db3c9b82c049c2 et e388a4556c0f65e1904146cc1a846bee :

    $(document).ready(function(){
    $ ("span ").parentsUntil("p");
    });


    Parcourir l'arbre DOM vers le bas


    Voici deux méthodes jQuery pour parcourir l'arborescence DOM :

    • children()

    • find()


    Méthode jQuery children()


    La méthode children() renvoie tous les éléments sélectionnés, élément enfant direct. Cette méthode ne parcourt l'arborescence DOM qu'un niveau plus bas.

    Vous pouvez également utiliser des arguments facultatifs pour filtrer la recherche d'éléments enfants.


    $(document).ready(function(){

    $("p").children("p.1"); // L'élément p de classe 1

    });

    find() renvoie les éléments descendants de l'élément sélectionné, jusqu'au dernier descendant.

    L'exemple suivant renvoie tous les éléments 45a2772a6b6107b401db3c9b82c049c2 qui sont des descendants de e388a4556c0f65e1904146cc1a846bee :

    $(document).ready(function(){
    $("p" ) .find("span");
    });

    L'exemple suivant renvoie tous les descendants de e388a4556c0f65e1904146cc1a846bee :

    $(document).ready(function(){
    $("p").find("*");

    });


    Il existe de nombreuses méthodes utiles qui nous permettent de naviguer dans l'arborescence DOM Effectuer un parcours horizontal :

    • siblings()

    • next()

    • nextAll()

    • nextUntil()

    • prev()

    • prevAll()

    • prevUntil()

    la méthode siblings() renvoie tous les éléments frères de l'élément sélectionné. Ne s'inclut pas.

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

    $(document).ready(function(){
    $("h2").siblings("p");
    });

    méthode next() Renvoie l'élément frère suivant de l'élément sélectionné. Cette méthode ne renvoie qu'un seul élément.

    $(document).ready(function(){
    $("h2").next();
    });

    nextAll() renvoie la méthode sélectionnée Tous les éléments frères suivants de l’élément. Renvoie tous les éléments suivants.

    La méthode nextUntil() renvoie tous les éléments frères suivants entre les deux paramètres donnés. Exclut les éléments aux deux extrémités. Les méthodes

    prev(), prevAll() et prevUntil() fonctionnent de manière similaire aux méthodes ci-dessus, mais dans le sens opposé : elles renvoient l'élément frère précédent (le long des éléments frères dans l'arborescence DOM, parcourent vers l'arrière, pas en avant).



    Les trois méthodes de filtrage les plus élémentaires sont : first(), last() et eq(), qui vous permettent sélectionner un élément spécifique en fonction de sa position dans un ensemble d'éléments. D'autres méthodes de filtrage, telles que filter() et not(), vous permettent de sélectionner des éléments qui correspondent ou non à un critère spécifié. La méthode

    first() renvoie le premier élément de l'élément sélectionné.


    8b05045a5be5764f313ed5b9168a17e6
    100db36a723c770d327fc0aef2ce13b1
    93f0f5c25f18dab9d176bd4f6de5d30e
    e77e3def01ecc49f4830089c2ebfde69
    2cacc6d41bbb37262a98f745aa00fbf0
    3f1c4e4b6b16bbbd69b2ee476dc4f83a
    $(document).ready(function(){
    $("p p").first( ).css("background-color","jaune");
    });
    2cacc6d41bbb37262a98f745aa00fbf0
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d

    4a249f0d628e2318394fd9b75b4636b1Bienvenue sur ma page d'accueil473f0a7621bec819994bb5020d29372a

    e388a4556c0f65e1904146cc1a846bee

    e388a4556c0f65e1904146cc1a846beeCeci est un paragraphe de la p. 94b3e26ee717c64999d7867364b1b4a3 d'un autre paragraphe. 94b3e26ee717c64999d7867364b1b4a3

    94b3e26ee717c64999d7867364b1b4a3


    e388a4556c0f65e1904146cc1a846beeC'est aussi un paragraphe. 94b3e26ee717c64999d7867364b1b4a3

    36cc49f0c466276486e50c850b7e4956

    73a6ac4ed44ffec12cee46588e518a5e

    eq() renvoie l'élément avec le numéro d'index spécifié parmi les éléments sélectionnés. Les numéros d'index commencent à 0, donc le premier élément a le numéro d'index 0 au lieu de 1. L'exemple suivant sélectionne le deuxième élément e388a4556c0f65e1904146cc1a846bee (numéro d'index 1) :

    100db36a723c770d327fc0aef2ce13b1

    93f0f5c25f18dab9d176bd4f6de5d30e

    0eb03d9751814e8456ceb258138fad15
    2cacc6d41bbb37262a98f745aa00fbf0

    3f1c4e4b6b16bbbd69b2ee476dc4f83a

    $(document).ready(function(){
    $ ("p").eq(1).css("background-color","jaune");
    });
    2cacc6d41bbb37262a98f745aa00fbf0
    9c3bca370b5104690d9ef395f2c5f8d1
    < ;body>

    4a249f0d628e2318394fd9b75b4636b1Bienvenue sur ma page d'accueil473f0a7621bec819994bb5020d29372a

    e388a4556c0f65e1904146cc1a846beeJe suis Donald Duck (index 0). 94b3e26ee717c64999d7867364b1b4a3

    e388a4556c0f65e1904146cc1a846beeDonald Duck (index 1).

    94b3e26ee717c64999d7867364b1b4a3

    e388a4556c0f65e1904146cc1a846beeMon meilleur ami est Mickey Mouse (index 3). 94b3e26ee717c64999d7867364b1b4a3


    36cc49f0c466276486e50c850b7e4956

    73a6ac4ed44ffec12cee46588e518a5e

    La méthode filter() permet de préciser un critère. Les éléments qui ne correspondent pas à ce critère sont supprimés de la collection et les éléments correspondants sont renvoyés.


    100db36a723c770d327fc0aef2ce13b1

    93f0f5c25f18dab9d176bd4f6de5d30e

    13f74617924f42bfb61a111e3dec0e99
    2cacc6d41bbb37262a98f745aa00fbf0
    3f1c4e4b6b16bbbd69b2ee476dc4f83a
    $(document).ready(function(){
    $("p").filter(".intro").css(" background-color","jaune");
    });
    2cacc6d41bbb37262a98f745aa00fbf0
    9c3bca370b5104690d9ef395f2c5f8d1
    6c04bd5ca3fcae76e30b72ad730ca86d

    4a249f0d628e2318394fd9b75b4636b1Bienvenue Venez sur ma page d'accueil473f0a7621bec819994bb5020d29372a
    e388a4556c0f65e1904146cc1a846beeJe m'appelle Donald Duck. 94b3e26ee717c64999d7867364b1b4a3
    03c914392195facb4bb03ef129401e65J'habite à Duckburg. 94b3e26ee717c64999d7867364b1b4a3
    03c914392195facb4bb03ef129401e65J'adore Duckburg. 94b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846beeMon meilleur ami est Mickey. 94b3e26ee717c64999d7867364b1b4a3

    36cc49f0c466276486e50c850b7e4956

    73a6ac4ed44ffec12cee46588e518a5e

    not() renvoie tous les éléments qui ne correspondent pas aux critères. Astuce : La méthode not() est l’opposé de filter().

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Anatomie de l'objet différé JQueryArticle suivant：Anatomie de l'objet différé JQuery

Articles Liés

Voir plus