jQueryを使って画像アドレスを変更する方法-フロントエンドQ&A-php.cn

jQueryを使って画像アドレスを変更する方法

PHPz

リリース： 2023-04-05 13:55:24

オリジナル

1263 人が閲覧しました

インターネット技術の急速な発展に伴い、さまざまな Web サイトで JavaScript 関連技術を使用してさまざまな動的な効果を実現するケースが増えています。その中でも、jQuery は間違いなく最も人気のある JavaScript ライブラリです。実際のWebサイト開発では、画像アドレスを変更する機能など、jQueryのさまざまな機能を利用することが多いです。

それでは、jQuery を使用して画像アドレスを変更するにはどうすればよいでしょうか?以下で詳しく説明しましょう。

ステップ 1: jQuery ライブラリを導入する

jQuery を使用する前に、Web ページに jQuery ライブラリを導入する必要があります。具体的な方法については、次のコードを参照してください。

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

ログイン後にコピー

ここでは、CDN を使用して jQuery ライブラリを導入します。または、jQuery ライブラリファイルをダウンロードして、ローカルファイルを通じて導入することもできます。

ステップ 2: HTML コードを記述する

body タグに 2 つの画像を含む HTML コードを記述します。ここでは写真が 2 枚あり、そのアドレスが「image1.jpg」と「image2.jpg」であるとします。

<body>
  <img class="image1" src="image1.jpg">
  <img class="image2" src="image2.jpg">
</body>

ログイン後にコピー

ステップ 3: jQuery を使用して画像アドレスを変更する

次に、jQuery を使用して画像アドレスを変更します。

$(document).ready(function() {
  $('.image1').attr('src', 'new_image1.jpg');
  $('.image2').attr('src', 'new_image2.jpg');
});

ログイン後にコピー

このコードでは、jQuery の attr() メソッドを使用して、画像の src 属性値を変更します。なお、ここでの「new_image1.jpg」と「new_image2.jpg」は独自に定義した画像アドレスであり、変更する場合は実際の状況に応じて変更する必要があります。

ステップ 4: コードの効果をテストする

上記のコードを Web ページファイルのフッター部分に追加し、ファイルを保存してブラウザで Web ページを開きます。すべてがうまくいけば、Web ページ上の両方の画像のアドレスが変更され、新しい画像が表示されます。

概要

上記の手順により、jQuery を使用して画像アドレスを変更できます。もちろん、attr() メソッドの使用に加えて、jQuery には画像のプロパティを変更したり、より複雑な操作を実装したりするために使用できる他の多くのメソッドがあります。ここでは詳しく説明しませんが、興味のある読者はさらに詳しく学習してください。

つまり、jQuery は強力な JavaScript ライブラリとして幅広い用途があり、そのスキルを習得することはフロントエンド開発者にとって非常に重要です。この記事が初心者の方のお役に立てば幸いです。また、皆さんも学び続けて技術レベルを向上していただければ幸いです。

以上がjQueryを使って画像アドレスを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。