Comment attribuer une valeur à src dans jquery

jquery est une bibliothèque JavaScript très puissante et pratique qui est largement utilisée dans le processus de développement Web. Dans le processus de développement Web, nous devons souvent manipuler des éléments du DOM, comme modifier son contenu, son style ou ses attributs. L'un des problèmes souvent rencontrés est de savoir comment attribuer une valeur à src via jquery. Cet article expliquera ce problème en détail.

1. qu'est-ce que jquery ?

jquery est une bibliothèque JavaScript qui simplifie l'interaction entre HTML et JavaScript, facilitant ainsi la manipulation des éléments et des styles en HTML. Il s'agit d'une bibliothèque JavaScript légère, rapide et concise qui peut simplifier le traitement des événements, le parcours de documents, l'animation et d'autres opérations, et qui est facile à utiliser et à étendre.

2. jquery attribue l'attribut src

jquery peut utiliser la méthode attr() pour attribuer une valeur à src. La méthode attr() est une méthode dans jQuery permettant de manipuler les attributs des éléments. Sa syntaxe est la suivante :

$(selector).attr(attribute,value)

où selector est le sélecteur jquery,attribut représente le nom de l'attribut à utiliser et value est la valeur de l'attribut à définir.

Donnons un exemple :

<!--html代码-->
<img id="img1" src=""/>
<button id="btn">改变图片</button>

<script>
  //jquery获得按钮元素
  $(document).ready(function(){
     $("#btn").click(function(){
        $("#img1").attr("src","图片地址");
     });
  });
</script>

Dans l'exemple ci-dessus, nous avons créé un élément image et un élément bouton. Grâce à la méthode attr() de jquery, lorsque nous cliquons sur le bouton, l'attribut src de l'élément image est remplacé par "adresse de l'image".

Il convient de noter que certains navigateurs ou versions ne prennent pas en charge la modification dynamique de l'adresse de l'image, ce qui peut entraîner l'échec du chargement de l'image. Par exemple, les navigateurs IE9 et versions antérieures ne prennent pas en charge la modification dynamique de l'adresse de l'image. Vous devez définir l'adresse initiale de l'image lorsque la page est chargée ou utiliser d'autres méthodes pour charger dynamiquement l'image.

3. Scénario d'application de modification d'attribut jquery

La méthode attr() de jquery peut non seulement être utilisée pour modifier l'attribut src de l'image, mais peut également être appliquée pour modifier les attributs d'autres éléments, tels que :

• modifier la valeur de la zone de texte

  <!--html代码-->
  <input type="text" id="input1" value=""/>
  <button id="btn">改变值</button>
  
  <script>
  //jquery获得按钮元素
  $(document).ready(function(){
     $("#btn").click(function(){
        $("#input1").attr("value","新的值");
     });
  });
  </script>

• Modifier l'attribut href de l'élément lien hypertexte

  <!--html代码-->
  <a id="link1" href="https://www.baidu.com">点击跳转</a>
  <button id="btn">改变链接地址</button>
  
  <script>
  //jquery获得按钮元素
  $(document).ready(function(){
     $("#btn").click(function(){
        $("#link1").attr("href","https://www.google.com");
     });
  });
  </script>

• Modifier l'attribut désactivé de l'élément bouton

  <!--html代码-->
  <button id="btn1" disabled="true">禁用按钮</button>
  <button id="btn2">启用按钮</button>
  
  <script>
  //jquery获得按钮元素
  $(document).ready(function(){
    $("#btn2").click(function(){
        $("#btn1").attr("disabled",false);
     });
  });
  </script>

  Comme le montre l'exemple ci-dessus, l'attr de jquery ( ) La méthode peut non seulement modifier l'attribut src de l'image, mais aussi La possibilité de modifier les propriétés d'autres éléments est l'une des raisons pour lesquelles elle est largement utilisée dans le processus de développement Web.

  4. Conclusion

  Grâce à l'explication de cet article, je pense que vous avez compris comment jquery attribue des valeurs à src et comment utiliser la méthode attr() pour attribuer des valeurs aux attributs d'autres éléments. jquery est facile à apprendre et flexible à utiliser, et il peut également jouer un rôle énorme dans le développement réel. Par conséquent, l’apprentissage de jquery est l’une des compétences de base que tout développeur front-end doit maîtriser.

  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!