jquery comment créer un lien hypertexte

jQuery est une bibliothèque Javascript largement utilisée qui permet d'obtenir facilement des effets interactifs dynamiques. Parmi eux, les hyperliens constituent également un effet interactif courant. Cet article explique comment implémenter les hyperliens jQuery.

1. Liens hypertextes de base

L'hyperlien est l'un des éléments couramment utilisés en HTML, utilisé pour passer d'une page à l'autre. En HTML, le code de base d'un lien hypertexte est le suivant :

<a href="link地址">链接文本</a>

L'« adresse du lien » ici est la page du lien vers laquelle accéder, qui peut être d'autres pages Web, des images, des vidéos, etc. le « texte du lien » est le texte affiché du lien hypertexte. Ce lien hypertexte de base peut également être géré à l'aide de jQuery.

$(document).ready(function(){
  $("a").click(function(){
    alert("链接已被点击");
  });
});

Dans ce code, $(document).ready() est une syntaxe couramment utilisée dans le framework jQuery, indiquant qu'elle sera exécutée après le chargement du document. $("a") signifie sélectionner tous les hyperliens. .click() signifie exécuter le code correspondant lorsque vous cliquez sur le lien hypertexte. Le code ici fait simplement apparaître une boîte de dialogue.

2. Empêcher le saut par défaut

Dans les applications pratiques, il est parfois nécessaire de traiter les hyperliens avant de sauter. Cependant, si aucun traitement n'est effectué, une fois le lien hypertexte cliqué, la page passera directement à l'adresse du lien spécifiée. Pour éviter ce comportement de saut par défaut, vous pouvez utiliser le code suivant :

$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
    alert("链接已被点击");
  });
});

Dans ce code, un paramètre d'événement est ajouté pour recevoir l'objet événement. .preventDefault() empêche le comportement de saut par défaut. De cette façon, lorsque vous cliquez sur un lien hypertexte, il ne sautera pas directement, mais exécutera la fonction correspondante dans le code.

3. Implémenter le saut

Après avoir traité le lien hypertexte, la fonction de saut doit être implémentée. Il existe deux manières de mettre en œuvre le saut. La première consiste à utiliser la propriété .window.location pour rediriger l'URL de la page actuelle vers l'adresse du lien spécifiée.

$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
    var linkLocation = this.href;
    window.location = linkLocation;
  });
});

Dans ce code, l'attribut this.href est utilisé pour obtenir l'URL à rediriger, puis l'attribut window.location est utilisé pour rediriger vers l'URL.

L'autre consiste à utiliser l'attribut .location.href, qui est fondamentalement le même que .window.location.

$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
    var linkLocation = this.href;
    location.href = linkLocation;
  });
});

Utilisez ces deux méthodes pour réaliser la fonction de saut des hyperliens.

Summary

Lorsque vous utilisez jQuery pour traiter des hyperliens, vous devez faire attention à empêcher le comportement de saut par défaut et à implémenter la fonction de saut. Vous pouvez utiliser les propriétés window.location ou location.href pour implémenter le saut. Dans le même temps, pour un grand nombre d'opérations de liens hypertexte, il est recommandé d'utiliser un plug-in jQuery spécifique au framework, tel que le jQueryUI officiellement fourni ou le framework Bootstrap couramment utilisé.

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!