jqueryでsrcに値を代入する方法-フロントエンドQ&A-php.cn

jqueryでsrcに値を代入する方法

PHPz

リリース： 2023-05-25 09:05:06

オリジナル

1599 人が閲覧しました

jquery は、Web 開発プロセスで広く使用されている、非常に強力で実用的な JavaScript ライブラリです。 Web 開発のプロセスでは、コンテンツ、スタイル、属性の変更など、DOM 要素を操作する必要があることがよくあります。よく遭遇する問題の 1 つは、jquery を使用して src に値を割り当てる方法ですが、この記事ではこの問題について詳しく説明します。

1.jQueryとは何ですか?

jquery は、HTML と JavaScript 間の対話を簡素化し、HTML 内の要素とスタイルの操作を容易にする JavaScript ライブラリです。これは軽量、高速、簡潔な JavaScript ライブラリであり、イベント処理、ドキュメントの走査、アニメーション、その他の操作を簡素化し、使用と拡張が簡単です。

2. jquery は src 属性を割り当てます

jquery は attr() メソッドを使用して src に値を割り当てることができます。 attr() メソッドは、要素の属性を操作するための jQuery のメソッドです。構文は次のとおりです。

$(selector).attr(attribute,value)

ここで、selector は jquery セレクター、attribute は操作対象の属性名、value は属性を表します。設定する値。

例を挙げてみましょう:

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

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

ログイン後にコピー

上の例では、ピクチャ要素とボタン要素を作成しました。 jqueryのattr()メソッドにより、ボタンをクリックするとimage要素のsrc属性が「画像アドレス」に変更されます。

一部のブラウザまたはバージョンでは画像アドレスの動的変更がサポートされていないため、画像の読み込みに失敗する可能性があることに注意してください。たとえば、IE9 以下のブラウザでは画像アドレスの動的変更がサポートされていないため、ページ読み込み時に画像の初期アドレスを設定するか、他の方法で画像を動的に読み込む必要があります。

3. jquery 属性変更のアプリケーションシナリオ

jquery の attr() メソッドは、画像の src 属性を変更するために使用できるだけでなく、他の要素の属性を変更するためにも適用できます。例:

テキストボックスの値を変更します

<!--html代码-->
<input type="text" id="input1" value=""/>
<button id="btn">改变值</button>

<script>
//jquery获得按钮元素
$(document).ready(function(){
   $("#btn").click(function(){
      $("#input1").attr("value","新的值");
   });
});
</script>

ログイン後にコピー

ハイパーリンク要素の href 属性を変更します

<!--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>

ログイン後にコピー

ボタンを変更する要素の無効な属性
```

<button id="btn1" disabled="true">禁用按钮</button>
<button id="btn2">启用按钮</button>

<script>
//jquery获得按钮元素
$(document).ready(function(){
  $("#btn2").click(function(){
      $("#btn1").attr("disabled",false);
   });
});
</script>
```
ログイン後にコピー
上記の例からわかるように、jquery の attr() メソッドは src 属性を変更するだけではありません画像の属性を変更するだけでなく、他の要素の属性も変更することも、Web 開発プロセスで広く使用される理由の 1 つです。

4. まとめ

この記事の説明で、jqueryでsrcに値を代入する方法と、attr()メソッドを使って値を代入する方法は理解できたと思います。他の要素の属性に。 jquery は習得が容易で柔軟に操作できるため、実際の開発でも大きな役割を果たします。したがって、jquery の学習は、すべてのフロントエンド開発者が習得しなければならない基本的なスキルの 1 つです。
以上がjqueryでsrcに値を代入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。