Bagaimana untuk memberikan nilai kepada src dalam jquery

jquery ialah perpustakaan JavaScript yang sangat berkuasa dan praktikal yang digunakan secara meluas dalam proses pembangunan web. Dalam proses pembangunan web, kita sering perlu memanipulasi elemen DOM, seperti menukar kandungan, gaya atau atributnya. Salah satu masalah yang sering dihadapi ialah bagaimana untuk menetapkan nilai kepada src melalui jquery Artikel ini akan menerangkan masalah ini secara terperinci.

1. Apakah itu jquery?

jquery ialah perpustakaan JavaScript yang memudahkan interaksi antara HTML dan JavaScript, menjadikannya lebih mudah untuk memanipulasi elemen dan gaya dalam HTML. Ia ialah perpustakaan JavaScript yang ringan, cepat dan ringkas yang boleh memudahkan pemprosesan acara, traversal dokumen, animasi dan operasi lain, serta mudah digunakan dan dilanjutkan.

2. jquery memberikan atribut src

jquery boleh menggunakan kaedah attr() untuk menetapkan nilai kepada src. Kaedah attr() ialah kaedah dalam jQuery untuk memanipulasi atribut elemen. Sintaksnya adalah seperti berikut:

$(selector).attr(attribute,value)

di mana pemilih ialah pemilih jquery, atribut mewakili nama atribut yang akan dikendalikan dan nilai ialah atribut untuk ditetapkan nilai.

Mari berikan contoh:

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

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

Dalam contoh di atas, kami mencipta elemen gambar dan elemen butang. Melalui kaedah attr() jquery, apabila kita mengklik butang, atribut src elemen imej ditukar kepada "alamat imej".

Perlu diambil perhatian bahawa sesetengah penyemak imbas atau versi tidak menyokong penukaran alamat imej secara dinamik, yang mungkin menyebabkan imej gagal dimuatkan. Contohnya, penyemak imbas IE9 dan ke bawah tidak menyokong menukar alamat imej secara dinamik Anda perlu menetapkan alamat awal imej apabila halaman dimuatkan atau menggunakan kaedah lain untuk memuatkan imej secara dinamik.

3. Senario aplikasi pengubahsuaian atribut jquery

kaedah attr() jquery bukan sahaja boleh digunakan untuk mengubah suai atribut src imej, tetapi juga boleh digunakan untuk mengubah suai atribut elemen lain , seperti:

• Ubah suai nilai kotak teks

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

• Ubah suai atribut href bagi elemen hiperpautan

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

• Ubah suai butang Atribut dilumpuhkan bagi elemen

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

Seperti yang dapat dilihat daripada contoh di atas, kaedah attr() jquery bukan sahaja boleh mengubah suai atribut src imej, tetapi juga mengubah suai atribut elemen lain Ini juga Salah satu sebab mengapa ia digunakan secara meluas dalam proses pembangunan web.

4. Kesimpulan

Melalui penjelasan artikel ini, saya percaya anda telah memahami cara jquery memberikan nilai kepada src dan cara menggunakan kaedah attr() untuk menetapkan nilai kepada sifat unsur lain. jquery mudah dipelajari dan fleksibel untuk dikendalikan, dan ia juga boleh memainkan peranan yang besar dalam pembangunan sebenar. Oleh itu, pembelajaran jquery adalah salah satu kemahiran asas yang mesti dikuasai oleh setiap pembangun front-end.

Atas ialah kandungan terperinci Bagaimana untuk memberikan nilai kepada src dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!