L'exemple de cet article décrit comment jQuery utilise les nœuds de contrôle pour effectuer le transfert des paramètres uniquement au premier plan via la méthode get. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :
C'est également le contenu du DOM HTML. Le cœur des langages de script front-end tels que javascript et jquery est de contrôler chaque nœud et d'ajouter, supprimer, modifier et vérifier chaque nœud uniquement de cette manière. pouvons-nous vraiment utiliser pleinement les scripts front-end tels que javascript et jquery Proposer une chose magnifique après l'autre.
Nœuds de contrôle Javascript, l'auteur l'a introduit dans les [Exemples d'utilisation de JavaScript pour ajouter, supprimer, modifier et vérifier des nœuds de page Web], maintenant il est contrôlé via jquery, un langage de script javascript avancé .nœud, et sur cette base, jquery est utilisé pour transférer des paramètres entre différentes pages Web. Le transfert des paramètres n'est effectué que via la méthode get au premier plan, et il n'est pas nécessaire d'utiliser jsp et asp. Écrivez des requêtes et d'autres langages de serveur pour obtenir les paramètres.
1. Objectifs de base
Dans la page Web, il y a des nœuds span sous le p div noir-rouge div-bleu. Une fois cliqué, les identifiants des nœuds au-dessus d'eux sont obtenus respectivement
.
Cliquez sur le bouton Ajouter pour ajouter des nœuds d'hyperlien. Chaque lien hypertexte a des paramètres chinois Bonjour 1, Bonjour 2, Bonjour 3..., et la barre de défilement défile automatiquement avec l'augmentation des nœuds, vers la transmission html, ce bonjour x. paramètre, la page jqrec.html peut obtenir ce paramètre chinois
Cliquez sur le bouton Effacer pour effacer tous les nœuds sous ul
2. Processus de production
Le code complet de jqrec.html est le suivant. Les fonctions utilisées impliquent des expressions régulières pour analyser les adresses URL, il n'est donc pas nécessaire d'entrer dans les détails. Le seul code qui fonctionne vraiment est $("#rec").text(unescape(getUrlParam("text")));
jqrec
Le lien sur lequel vous avez cliqué est :, qui est transmis via la méthode get du navigateur. Les paramètres du texte sont exactement les mêmes ~
Les paramètres transmis dans le texte sont en chinois et les résultats doivent être décodés ~
Retournez à jqsend.html et réessayez~
<script>
/*Cette fonction, ainsi que la fonction unescape, peuvent décoder les éléments utf-8 passés par la méthode get sur l'url*/ <br>
fonction getUrlParam(nom) <br>
{ <br>
var reg = new RegExp("(^|&)" nom "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null <br>
} <br>
$(fonction() { <br>
$("#rec").text(unescape(getUrlParam("text"))); <br>
}); <br>
</script>
Le code complet de jqsend.html est le suivant Veuillez consulter les commentaires pour le code spécifique :
Copier le code
Le code est le suivant :
jqsend
Ajouter
Effacer
<script>
/*$(function(){}); Équivalent à $(document).ready(function (){}); la fonction principale qui est exécutée dès son chargement*/ <br>
$(fonction() { <br>
/*Comptage de l'identifiant*/ <br>
var identifiant=0; <br>
/*ajouter un événement de clic sur un bouton*/ <br>
$("#add").click(function (){ <br>
id=id 1 ;
var li="<li id="id" id.toString() ""<<a></a></li>" <br>
/*Dans la liste testul, ajoutez le nœud li comme mentionné ci-dessus*/ <br>
$("#testul").append(li);
/*Trouvez le nœud a sous le nœud li nouvellement ajouté avec l'ID idx (où x est la valeur du compteur var id) et modifiez les éléments qu'il contient en bonjour x .html en jquery est équivalent à innerHTML en javascript* / <.>
$("#id" id.toString()).find("a").html("Bonjour" id); <br>
/*Définissez l'attribut href de cet élément sur jqrec.html="Bonjour" id Étant donné que les caractères chinois ne peuvent pas être inclus dans le lien, utilisez escape deux fois pour l'encoder en utf-8. Si vous l'utilisez une fois, un bug. apparaîtra. Impossible d’obtenir une évasion, je ne sais pas pourquoi*/ <br>
$("#id" id.toString()).find("a").attr("href","./jqrec.html?text=" escape(escape("Bonjour" id))); >
/* Définissez la barre de défilement pour qu'elle défile avec la hauteur du testul. Ce code ne sera pas valide sous IE8*/ <br>.
$("body").scrollTop($("#testul").height());
});
/*effacer l'événement de clic sur le bouton*/ <br>
$("#clear").click(function (){ <br>
/* Effacer tous les éléments sous testul et remettre le compteur à zéro*/
$("#testul").empty(); <br>
id=0 ;
});
/*événement de clic de texte en ligne findmyfather*/ <br>
$("#trouvermonpère").click(function(){ <br>
/*Ceci représente l'icône findmyfather enfoncée, prenez l'identifiant du nœud parent de niveau supérieur*/ <br>
Thisid=$(this).parents().attr("id"); <br>
alert("Mon nœud parent est : " thisid); <br>
/*De cette façon, vous pouvez espérer trouver l'identifiant du premier élément div*/ <br>
Thisid=$(this).parents("div").attr("id"); <br>
alert("Mon premier nœud parent div est : " thisid <br>);
/*De cette façon, vous pouvez espérer trouver l'identifiant du deuxième élément div*/ <br>
Thisid=$(this).parents("div").parents("div").attr("id");
alert("Mon deuxième nœud parent div est : " thisid <br>);
});
}); <br>
</script>
J'espère que cet article sera utile à la programmation jQuery de chacun.